{ "assets": { "version": "13.2.0", "baseUrl": "https://chromadesignsystem.com/13.2.0/assets/" }, "color": { "background": { "white": "#ffffff", "black": "#222222", "primary": "#010c66", "primaryLight": "#f2f3f9", "secondary": "#d7d667", "secondaryLight": "#fafaea", "accent": "#91bf9e", "accentLight": "#edf4f0", "supplementary-1": "#f9ae97", "supplementary-1Light": "#fff8f7", "supplementary-2": "#cccee0", "supplementary-2Light": "#e6e7f0", "supplementary-3": "#e0e0e0", "supplementary-3Light": "#fdfdfd", "error": "#a93532", "errorLight": "#ffebeb", "warning": "#c54b14", "warningLight": "#dd9676", "success": "#186336", "successLight": "#dff8e6", "information": "#257688", "informationLight": "#82becb" }, "border": { "default": "#8f8a8a", "light": "#f7f1ea", "focus": "#010c66", "primary": "#010c66", "primaryLight": "#d9dbe9", "secondary": "#d7d667", "secondaryLight": "#f0f0c4", "accent": "#91bf9e", "accentLight": "#cee1d6", "supplementary-1": "#f9ae97", "supplementary-1Light": "#fbcec1", "supplementary-2": "#cccee0", "supplementary-2Light": "#cccee0", "supplementary-3": "#e0e0e0", "supplementary-3Light": "#ebebeb", "error": "#a93532", "errorLight": "#e36d6b", "warning": "#c54b14", "warningLight": "#dd9676", "success": "#186336", "successLight": "#57c187", "information": "#257688", "informationLight": "#82becb" }, "foundation": { "primary": { "lighter": "#f2f3f9", "light": "#d9dbe9", "default": "#010c66", "dark": "#00084e", "darker": "#00092e", "contrast": "#f7f1ea", "beside": "#010c66", "neutral": "rgba(3,57,139, 0.10)", "block": "#00084e", "neutralSolid": "#eaedf3" }, "secondary": { "lighter": "#fafaea", "light": "#f0f0c4", "default": "#d7d667", "dark": "#757511", "darker": "#56560d", "contrast": "#010c66", "beside": "#f7f1ea", "neutral": "rgba(238, 236, 186, 0.20)", "block": "#b7b658", "neutralSolid": "#434305" }, "accent": { "lighter": "#edf4f0", "light": "#cee1d6", "default": "#91bf9e", "dark": "#5a7a68", "darker": "#405549", "contrast": "#010c66", "beside": "#f7f1ea", "neutral": "rgba(237,244,240, 0.20)", "block": "#7ba286", "neutralSolid": "#405549" }, "supplementary-1": { "lighter": "#fff8f7", "light": "#fbcec1", "default": "#f9ae97", "dark": "#ca7d66", "darker": "#733320", "contrast": "#010c66", "beside": "#f7f1ea", "neutral": "rgba(255,236,230, 0.20)", "block": "#dd9782", "neutralSolid": "#360e03" }, "supplementary-2": { "lighter": "#e6e7f0", "light": "#cccee0", "default": "#cccee0", "dark": "#999ec2", "darker": "#62689b", "contrast": "#010c66", "beside": "#f7f1ea", "neutral": "rgba(230,231,240, 0.20)", "block": "#b3b7da", "neutralSolid": "#40467a" }, "supplementary-3": { "lighter": "#fdfdfd", "light": "#ebebeb", "default": "#e0e0e0", "dark": "#898989", "darker": "#2d2d2d", "contrast": "#222222", "beside": "#ffffff", "neutral": "rgba(255, 255, 255, 0.20)", "block": "#ebebeb", "neutralSolid": "#3e3e3e" }, "link": { "lighter": "#f2f3f9", "light": "#d9dbe9", "default": "#010c66", "dark": "#00084e", "darker": "#00092e" }, "neutral": { "white": "#ffffff", "grey": "#f7f1ea", "black": "#222222", "lighter": "#fdfcfb", "light": "#fdfaf9", "default": "#f7f1ea", "dark": "#8f8a8a", "darker": "#3b3939", "transparent": "#ffffff" }, "error": { "lighter": "#ffebeb", "light": "#e36d6b", "default": "#a93532", "dark": "#852220", "darker": "#410003", "contrast": "#f7f1ea", "beside": "#010c66", "neutral": "rgba(0,0,0, 0.075)", "block": "#860000", "neutralSolid": "#efefef" }, "success": { "lighter": "#dff8e6", "light": "#57c187", "default": "#186336", "dark": "#00391a", "darker": "#032111", "contrast": "#f7f1ea", "beside": "#010c66", "neutral": "rgba(0,0,0, 0.075)", "block": "#005228", "neutralSolid": "#efefef" }, "warning": { "lighter": "#fff6d5", "light": "#dd9676", "default": "#c54b14", "dark": "#773010", "darker": "#281005", "contrast": "#f7f1ea", "beside": "#010c66", "neutral": "rgba(0,0,0, 0.075)", "block": "#9e4016", "neutralSolid": "#efefef" }, "information": { "lighter": "#e3f4f8", "light": "#82becb", "default": "#257688", "dark": "#1c5865", "darker": "#051013", "contrast": "#f7f1ea", "beside": "#010c66", "neutral": "rgba(0,0,0, 0.075)", "block": "#216776", "neutralSolid": "#efefef" }, "greyscale": { "default": "#3b3939", "contrast": "#f7f1ea", "beside": "#010c66", "neutral": "rgba(0,0,0, 0.075)", "block": "#737171", "neutralSolid": "#efefef" }, "interactive": { "lighter": "#f2f3f9", "light": "#d9dbe9", "default": "#010c66", "dark": "#00084e", "darker": "#00092e", "contrast": "#f7f1ea", "beside": "#010c66", "neutral": "rgba(3,57,139, 0.10)", "block": "#00084e", "neutralSolid": "#eaedf3" }, "button": { "default": { "lighter": "#f5f5f6", "light": "#888b8f", "default": "#383e44", "dark": "#222529", "darker": "#000000" }, "primary": { "lighter": "#f2f3f9", "light": "#d9dbe9", "default": "#010c66", "dark": "#00084e", "darker": "#00092e", "contrast": "#f7f1ea", "beside": "#010c66", "neutral": "rgba(3,57,139, 0.10)", "block": "#00084e" }, "secondary": { "lighter": "#fafaea", "light": "#f0f0c4", "default": "#d7d667", "dark": "#757511", "darker": "#56560d", "contrast": "#010c66", "beside": "#f7f1ea", "neutral": "rgba(238, 236, 186, 0.20)", "block": "#b7b658" }, "accent": { "lighter": "#edf4f0", "light": "#cee1d6", "default": "#91bf9e", "dark": "#5a7a68", "darker": "#405549", "contrast": "#010c66", "beside": "#f7f1ea", "neutral": "rgba(237,244,240, 0.20)", "block": "#7ba286" }, "supplementary-1": { "lighter": "#fff8f7", "light": "#fbcec1", "default": "#f9ae97", "dark": "#ca7d66", "darker": "#733320", "contrast": "#010c66", "beside": "#f7f1ea", "neutral": "rgba(255,236,230, 0.20)", "block": "#dd9782" }, "supplementary-2": { "lighter": "#e6e7f0", "light": "#cccee0", "default": "#cccee0", "dark": "#999ec2", "darker": "#62689b", "contrast": "#010c66", "beside": "#f7f1ea", "neutral": "rgba(230,231,240, 0.20)", "block": "#b3b7da" }, "supplementary-3": { "lighter": "#fdfdfd", "light": "#ebebeb", "default": "#e0e0e0", "dark": "#898989", "darker": "#2d2d2d", "contrast": "#222222", "beside": "#ffffff", "neutral": "rgba(255, 255, 255, 0.20)", "block": "#ebebeb" }, "cta-1": { "lighter": "#f2f3f9", "light": "#d9dbe9", "default": "#010c66", "dark": "#00084e", "darker": "#00092e", "contrast": "#f7f1ea", "beside": "#010c66", "neutral": "rgba(3,57,139, 0.10)", "block": "#00084e" }, "cta-2": { "lighter": "#f2f3f9", "light": "#d9dbe9", "default": "#010c66", "dark": "#00084e", "darker": "#00092e", "contrast": "#f7f1ea", "beside": "#010c66", "neutral": "rgba(3,57,139, 0.10)", "block": "#00084e" }, "cta-3": { "lighter": "#edf4f0", "light": "#cee1d6", "default": "#91bf9e", "dark": "#5a7a68", "darker": "#405549", "contrast": "#010c66", "beside": "#f7f1ea", "neutral": "rgba(237,244,240, 0.20)", "block": "#7ba286" }, "interactive": { "lighter": "#f2f3f9", "light": "#d9dbe9", "default": "#010c66", "dark": "#00084e", "darker": "#00092e", "contrast": "#f7f1ea", "beside": "#010c66", "neutral": "rgba(3,57,139, 0.10)", "block": "#00084e", "neutralSolid": "#eaedf3" } }, "icon": { "light": "#f7f1ea", "default": "#010c66" }, "placeholder": "#6b6b6b" }, "global": { "brand": { "primary": { "50": "#f2f3f9", "100": "#ebeef3", "200": "#e4eaf0", "300": "#d9dbe9", "400": "#999ec2", "500": "#010c66", "600": "#000a63", "700": "#00084e", "800": "#000746", "900": "#00092e", "950": "#000105" }, "secondary": { "50": "#fafaea", "100": "#f9f8e3", "200": "#f3f1c8", "300": "#f0f0c4", "400": "#e5e389", "500": "#d7d667", "600": "#b7b658", "700": "#757511", "800": "#625e0f", "900": "#56560d", "950": "#0b0b06" }, "accent": { "50": "#edf4f0", "100": "#e9f2ec", "200": "#dceae0", "300": "#cee1d6", "400": "#bdd9c5", "500": "#91bf9e", "600": "#7ba286", "700": "#5a7a68", "800": "#4f6154", "900": "#405549", "950": "#070a08" }, "supplementary-1": { "50": "#fff8f7", "100": "#feefea", "200": "#fddfd5", "300": "#fbcec1", "400": "#fabeac", "500": "#f9ae97", "600": "#dd9782", "700": "#ca7d66", "800": "#9a5540", "900": "#733320", "950": "#3c1e15" }, "supplementary-2": { "50": "#f5f5f9", "100": "#eeeef5", "200": "#e6e7f0", "300": "#dedfeb", "400": "#d4d5e5", "500": "#cccee0", "600": "#b3b7da", "700": "#999ec2", "800": "#858ab5", "900": "#62689b", "950": "#40467a" }, "supplementary-3": { "50": "#fdfdfd", "100": "#f9f9f9", "200": "#f3f3f3", "300": "#ebebeb", "400": "#e5e5e5", "500": "#e0e0e0", "600": "#bebebe", "700": "#898989", "800": "#5a5a5a", "900": "#2d2d2d", "950": "#0b0b0b" }, "link": { "50": "#f2f3f9", "100": "#ebeef3", "200": "#e4eaf0", "300": "#d9dbe9", "400": "#999ec2", "500": "#010c66", "600": "#000a63", "700": "#00084e", "800": "#000746", "900": "#00092e", "950": "#000105" } }, "system": { "black": "#222222", "white": "#ffffff", "transparent": "#ffffff", "neutral": { "light": "rgba(255, 255, 255, 0.20)", "dark": "rgba(0,0,0, 0.075)", "solid": { "light": "#efefef", "dark": "#3e3e3e" } }, "backdrop": { "dark": "rgba(43,46,56, 0.9)", "light": "rgba(255,255,255, 0.9)" }, "grey": { "50": "#fefeff", "100": "#fdfcfb", "200": "#fdfbfa", "300": "#fdfaf9", "400": "#f8f3ef", "500": "#f7f1ea", "525": "#eae4df", "550": "#ddd8d4", "575": "#d1ccc8", "600": "#c5c0bc", "700": "#8f8a8a", "800": "#737171", "900": "#3b3939", "950": "#2b2b2b" }, "red": { "50": "#ffebeb", "100": "#f2cccc", "200": "#e59999", "300": "#e36d6b", "400": "#b44442", "500": "#a93532", "600": "#860000", "700": "#852220", "800": "#65201e", "900": "#410003", "950": "#090303" }, "green": { "50": "#dff8e6", "100": "#cdecdb", "200": "#9adab7", "300": "#57c187", "400": "#3d9d69", "500": "#186336", "600": "#005228", "700": "#00391a", "800": "#003317", "900": "#032111", "950": "#010703" }, "orange": { "50": "#fff6d5", "100": "#f3e5d0", "200": "#e8bfa1", "300": "#dd9676", "400": "#d16f43", "500": "#c54b14", "600": "#9e4016", "700": "#773010", "800": "#4f1e08", "900": "#281005", "950": "#0a0401" }, "blue": { "50": "#e3f4f8", "100": "#cbe7ef", "200": "#a9cdd4", "300": "#82becb", "400": "#549aa9", "500": "#257688", "600": "#216776", "700": "#1c5865", "800": "#10343b", "900": "#051013", "950": "#020607" } } }, "interactive": { "default": { "backgroundColor": "#fdfaf9", "borderColor": "#8f8a8a", "color": "#010c66", "icon": "#010c66" }, "hover": { "backgroundColor": "#eaedf3", "borderColor": "#010c66", "color": "#010c66", "icon": "#010c66" }, "checked": { "backgroundColor": "#010c66", "borderColor": "#010c66", "color": "#f7f1ea", "icon": "#f7f1ea" }, "checkedFocus": { "backgroundColor": "#010c66", "borderColor": "#010c66", "color": "#f7f1ea", "icon": "#f7f1ea" }, "focus": { "backgroundColor": "#fdfaf9", "borderColor": "#0133ad", "color": "#010c66", "icon": "#010c66" }, "disabled": { "backgroundColor": "#f2efef", "borderColor": "#8f8a8a", "color": "#8f8a8a", "icon": "#8f8a8a" }, "error": { "backgroundColor": "#fdfaf9", "borderColor": "#a93532", "color": "#010c66", "icon": "#010c66" }, "success": { "backgroundColor": "#fdfaf9", "borderColor": "#186336", "color": "#010c66", "icon": "#010c66" } }, "text": { "heading": "#010c66", "headline": "#010c66", "body": "#010c66", "subheading": "#010c66", "default": "#222222", "white": "#f7f1ea", "black": "#010c66", "light": "#343d85", "disabled": "#8f8a8a", "primary": "#010c66", "primaryLight": "#d9dbe9", "secondary": "#d7d667", "secondaryLight": "#f0f0c4", "accent": "#91bf9e", "accentLight": "#cee1d6", "supplementary-1": "#f9ae97", "supplementary-1Light": "#fbcec1", "supplementary-2": "#cccee0", "supplementary-2Light": "#cccee0", "supplementary-3": "#e0e0e0", "supplementary-3Light": "#ebebeb", "error": "#a93532", "warning": "#c54b14", "success": "#186336", "information": "#257688", "placeholder": "#6b6b6b" } }, "borderRadius": { "0": "0", "100": "2px", "200": "4px", "300": "8px", "400": "12px", "500": "16px", "550": "24px", "600": "32px", "650": "40px", "700": "48px", "750": "56px", "800": "64px", "850": "72px", "900": "80px", "950": "88px", "1000": "96px" }, "borderWidth": { "0": "0", "100": "1px", "200": "2px", "400": "4px", "800": "8px" }, "boxShadow": { "100": "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(72, 70, 69, 0.05) 0px 0px 5px 0px", "200": "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(72, 70, 69, 0.1) 0px 1px 6px 0px, rgba(72, 70, 69, 0.06) 0px 1px 2px 0px", "300": "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(72, 70, 69, 0.1) 0px 2px 10px 0px, rgba(72, 70, 69, 0.06) 0px 2px 4px -1px", "400": "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(72, 70, 69, 0.1) 0px 2px 21px -1px, rgba(72, 70, 69, 0.06) 0px 2px 4px -1px" }, "fontSize": { "100": "0.75rem", "200": "0.875rem", "300": "1rem", "400": "1.125rem", "500": "1.25rem", "600": "1.5rem", "700": "1.75rem", "800": "2.375rem", "900": "3.25rem", "1000": "4rem" }, "fontWeight": { "100": "100", "200": "200", "300": "300", "400": "400", "500": "500", "600": "600", "700": "700", "800": "800", "900": "900" }, "lineHeight": { "100": "1.25", "200": "1.5", "300": "1.65", "auto": "auto", "none": "1" }, "spacing": { "0": "0", "100": "4px", "200": "8px", "300": "12px", "400": "16px", "500": "20px", "600": "24px", "700": "32px", "800": "40px", "900": "48px", "1000": "56px", "1100": "64px", "1200": "80px", "1300": "96px", "1400": "112px", "1500": "128px" }, "asset": { "logo": { "path": "https://chromadesignsystem.com/13.2.0/assets/brands/nrma/logos", "dark": { "src": "https://chromadesignsystem.com/13.2.0/assets/brands/nrma/logos/dark/logo.svg", "xs": { "src": "https://chromadesignsystem.com/13.2.0/assets/brands/nrma/logos/mobile/dark/logo.svg" } }, "light": { "src": "https://chromadesignsystem.com/13.2.0/assets/brands/nrma/logos/light/logo.svg", "xs": { "src": "https://chromadesignsystem.com/13.2.0/assets/brands/nrma/logos/mobile/light/logo.svg" } } }, "font": { "path": "https://chromadesignsystem.com/13.2.0/assets/fonts" }, "favicon": { "path": "https://chromadesignsystem.com/13.2.0/assets/brands/nrma/favicon", "16x16": "https://chromadesignsystem.com/13.2.0/assets/brands/nrma/favicon/favicon-16x16.png", "32x32": "https://chromadesignsystem.com/13.2.0/assets/brands/nrma/favicon/favicon-32x32.png", "android": { "chrome": { "192x192": "https://chromadesignsystem.com/13.2.0/assets/brands/nrma/favicon/android-chrome-192x192.png", "512x512": "https://chromadesignsystem.com/13.2.0/assets/brands/nrma/favicon/android-chrome-512x512.png" } }, "appleTouch": "https://chromadesignsystem.com/13.2.0/assets/brands/nrma/favicon/apple-touch-icon.png", "ico": "https://chromadesignsystem.com/13.2.0/assets/brands/nrma/favicon/favicon.ico", "manifest": "https://chromadesignsystem.com/13.2.0/assets/brands/nrma/favicon/site.webmanifest" }, "icon": { "core": { "regular": { "url": "https://chromadesignsystem.com/13.2.0/assets/icons/core/regular/icons.css" }, "light": { "url": "https://chromadesignsystem.com/13.2.0/assets/icons/core/light/icons.css" }, "solid": { "url": "https://chromadesignsystem.com/13.2.0/assets/icons/core/solid/icons.css" } }, "platform": { "url": "https://chromadesignsystem.com/13.2.0/assets/icons/product/icons.css" }, "brand": { "core": { "url": "" }, "platform": { "url": "" }, "url": "https://chromadesignsystem.com/13.2.0/assets/brands/nrma/icons/icons.css" } } }, "brand": { "name": "nrma" }, "grid": { "breakpoint": { "sm": "576px", "md": "768px", "lg": "992px", "xl": "1200px" }, "maxWidth": { "xs": "100%", "sm": "960px", "md": "960px", "lg": "960px", "xl": "1140px" } }, "typography": { "primary": { "url": "'https://chromadesignsystem.com/13.2.0/assets/fonts/help-type-web/font.css'", "fontFamily": "Help Type Display Web, Helvetica, Arial" }, "secondary": { "url": "'https://chromadesignsystem.com/13.2.0/assets/fonts/help-type-web/font.css'", "fontFamily": "Help Type Text Web, Helvetica, Arial" }, "tertiary": { "url": "'https://chromadesignsystem.com/13.2.0/assets/fonts/help-type-web/font.css'", "fontFamily": "Help Type Display Web, Helvetica, Arial" }, "heading": { "fontFamily": "Help Type Display Web, Helvetica, Arial", "fontWeight": "500", "color": "#010c66", "lineHeight": "1.25", "url": "'https://chromadesignsystem.com/13.2.0/assets/fonts/help-type-web/font.css'", "h1": { "color": "#010c66", "fontSize": { "xs": "1.625rem", "sm": "1.75rem", "md": "1.875rem", "lg": "2rem" }, "lineHeight": { "xs": "1.3", "sm": "1.3", "md": "1.3", "lg": "1.3" } }, "h2": { "color": "#010c66", "fontSize": { "xs": "1.25rem", "sm": "1.375rem", "md": "1.5rem", "lg": "1.5rem" }, "lineHeight": { "xs": "1.35", "sm": "1.27", "md": "1.25", "lg": "1.3" } }, "h3": { "color": "#010c66", "fontSize": { "xs": "1.125rem", "sm": "1.125rem", "md": "1.25rem", "lg": "1.25rem" }, "lineHeight": { "xs": "1.33", "sm": "1.33", "md": "1.23", "lg": "1.35" } }, "h4": { "color": "#010c66", "fontSize": { "xs": "1rem", "sm": "1rem", "md": "1.125rem", "lg": "1.125rem" }, "lineHeight": { "xs": "1.45", "sm": "1.45", "md": "1.23", "lg": "1.4" } }, "h5": { "color": "#010c66", "fontSize": { "xs": "1rem", "sm": "1rem", "md": "1rem", "lg": "1rem" }, "lineHeight": { "xs": "1.23", "sm": "1.23", "md": "1.25", "lg": "1.5" } }, "h6": { "color": "#010c66", "fontSize": { "xs": ".875rem", "sm": ".875rem", "md": ".875rem", "lg": ".875rem" }, "lineHeight": { "xs": "1.23", "sm": "1.23", "md": "1.23", "lg": "1.5" } } }, "headline": { "fontFamily": "Help Type Display Web, Helvetica, Arial", "fontWeight": "500", "url": "'https://chromadesignsystem.com/13.2.0/assets/fonts/help-type-web/font.css'", "color": "#010c66", "fontSize": { "xs": "1.875rem", "sm": "2rem", "md": "2.25rem", "lg": "2.25rem" }, "lineHeight": { "xs": "1.3", "sm": "1.3", "md": "1.3", "lg": "1.3" }, "compact": { "fontSize": { "xs": "1.75rem", "sm": "1.75rem", "md": "2rem", "lg": "2rem" }, "lineHeight": { "xs": "1.3", "sm": "1.3", "md": "1.3", "lg": "1.3" } } }, "body": { "fontFamily": "Help Type Text Web, Helvetica, Arial", "fontSize": "1rem", "fontWeight": "400", "color": "#010c66", "url": "'https://chromadesignsystem.com/13.2.0/assets/fonts/help-type-web/font.css'", "lineHeight": "1.5" }, "subheading": { "fontFamily": "Help Type Text Web, Helvetica, Arial", "fontWeight": "400", "url": "'https://chromadesignsystem.com/13.2.0/assets/fonts/help-type-web/font.css'", "color": "#010c66", "fontSize": { "xs": "1.125rem", "sm": "1.125rem", "md": "1.25rem", "lg": "1.25rem" }, "lineHeight": { "xs": "1.45", "sm": "1.45", "md": "1.4", "lg": "1.4" } } }, "accordion": { "fontFamily": "Help Type Text Web, Helvetica, Arial", "border": "1px solid #8f8a8a", "borderRadius": "0", "padding": "0.75rem 0 0.75rem 0.75rem", "spacing": "0", "button": { "fontFamily": "Help Type Display Web, Helvetica, Arial", "fontSize": "1rem", "fontWeight": "500", "color": "#010c66", "backgroundColor": "transparent", "icon": { "color": "#010c66", "fontSize": "1.25rem", "marginRight": "12px" }, "hover": { "color": "#010c66", "backgroundColor": "rgba(3,57,139, 0.10)", "icon": { "color": "#010c66" } }, "focus": { "color": "#010c66", "backgroundColor": "transparent", "icon": { "color": "#010c66" }, "boxShadow": "inset 0 0 0 2px #fff,inset 0 0 0 4px #010c66,inset 0 0 #010c66" } }, "selected": { "color": "#010c66" }, "content": { "backgroundColor": "transparent", "color": "#010c66", "marginbottom": "0", "padding": "0.75rem" }, "inverse": { "border": "1px solid #f2f3f9", "button": { "backgroundColor": "transparent", "color": "#f7f1ea", "icon": { "color": "#f7f1ea" }, "hover": { "backgroundColor": "rgba(255, 255, 255, 0.20)", "color": "#f7f1ea", "icon": { "color": "#f7f1ea" } }, "focus": { "backgroundColor": "transparent", "color": "#f7f1ea", "icon": { "color": "#f7f1ea" } }, "selected": { "color": "#f7f1ea" } }, "content": { "backgroundColor": "transparent", "color": "#f7f1ea" } } }, "alert": { "fontSize": "1rem", "lineheight": "1.5", "borderWidth": "1px", "borderRadius": "0", "color": "#010c66", "padding": "16px", "heading": { "fontFamily": "Help Type Text Web, Helvetica, Arial", "fontWeight": "600", "fontSize": "1rem", "color": "#010c66" }, "icon": { "color": "#010c66" }, "information": { "backgroundColor": "#e3f4f8", "borderColor": "#e3f4f8", "icon": { "color": "#257688" } }, "success": { "backgroundColor": "#dff8e6", "borderColor": "#dff8e6", "icon": { "color": "#186336" } }, "warning": { "backgroundColor": "#fff6d5", "borderColor": "#fff6d5", "icon": { "color": "#c54b14" } }, "error": { "backgroundColor": "#ffebeb", "borderColor": "#ffebeb", "icon": { "color": "#a93532" } }, "focus": { "outline": "2px solid #010c66" } }, "autocomplete": { "color": "#010c66", "border": "1px solid #8f8a8a", "backgroundColor": "#fdfaf9", "fontSize": "1rem", "fontFamily": "Help Type Text Web, Helvetica, Arial", "icon": { "color": "#010c66" }, "button": { "color": "#010c66", "clear": { "backgroundColor": "#fdfaf9" }, "hover": { "backgroundColor": "#eaedf3", "color": "#010c66" }, "focus": { "backgroundColor": "#eaedf3", "color": "#010c66" }, "error": { "borderColor": "#a93532", "outline": "#a93532" } }, "success": { "borderColor": "#186336", "outline": "#186336" } }, "badge": { "backgroundColor": "#3b3939", "borderColor": "#3b3939", "borderRadius": "0.25rem", "borderWidth": "1px", "color": "#ffffff", "fontFamily": "Help Type Text Web, Helvetica, Arial", "fontSize": "0.875rem", "fontWeight": "400", "padding": "0.15rem 0.5rem", "light": { "color": "#222222", "backgroundColor": "#f7f1ea", "borderColor": "#f7f1ea" }, "lighter": { "color": "#010c66", "backgroundColor": "#fdfaf9", "borderColor": "#fdfaf9" }, "outline": { "color": "#3b3939", "backgroundColor": "transparent", "borderColor": "#3b3939" }, "text": { "color": "#3b3939", "backgroundColor": "transparent", "borderColor": "transparent" }, "inverse": { "color": "#010c66", "backgroundColor": "#fdfaf9", "borderColor": "#f7f1ea" }, "outlineInverse": { "color": "#ffffff", "backgroundColor": "transparent", "borderColor": "#ffffff" }, "textInverse": { "color": "#ffffff", "backgroundColor": "transparent", "borderColor": "transparent" }, "primary": { "color": "#f7f1ea", "backgroundColor": "#010c66", "borderColor": "#010c66" }, "primaryLight": { "color": "#010c66", "backgroundColor": "#d9dbe9", "borderColor": "#d9dbe9" }, "primaryLighter": { "color": "#010c66", "backgroundColor": "#f2f3f9", "borderColor": "#f2f3f9" }, "primaryOutline": { "color": "#010c66", "backgroundColor": "transparent", "borderColor": "#010c66" }, "primaryText": { "color": "#010c66", "backgroundColor": "transparent", "borderColor": "transparent" }, "primaryInverse": { "color": "#010c66", "backgroundColor": "#f7f1ea", "borderColor": "#f7f1ea" }, "primaryOutlineInverse": { "color": "#f7f1ea", "backgroundColor": "transparent", "borderColor": "#f7f1ea" }, "primaryTextInverse": { "color": "#f7f1ea", "backgroundColor": "transparent", "borderColor": "transparent" }, "secondary": { "color": "#010c66", "backgroundColor": "#d7d667", "borderColor": "#d7d667" }, "secondaryLight": { "color": "#010c66", "backgroundColor": "#f0f0c4", "borderColor": "#f0f0c4" }, "secondaryLighter": { "color": "#010c66", "backgroundColor": "#fafaea", "borderColor": "#fafaea" }, "secondaryOutline": { "color": "#d7d667", "backgroundColor": "transparent", "borderColor": "#d7d667" }, "secondaryText": { "color": "#d7d667", "backgroundColor": "transparent", "borderColor": "transparent" }, "secondaryInverse": { "color": "#d7d667", "backgroundColor": "#010c66", "borderColor": "#010c66" }, "secondaryOutlineInverse": { "color": "#010c66", "backgroundColor": "transparent", "borderColor": "#010c66" }, "secondaryTextInverse": { "color": "#010c66", "backgroundColor": "transparent", "borderColor": "transparent" }, "accent": { "color": "#010c66", "backgroundColor": "#91bf9e", "borderColor": "#91bf9e" }, "accentLight": { "color": "#010c66", "backgroundColor": "#cee1d6", "borderColor": "#cee1d6" }, "accentLighter": { "color": "#010c66", "backgroundColor": "#edf4f0", "borderColor": "#edf4f0" }, "accentOutline": { "color": "#91bf9e", "backgroundColor": "transparent", "borderColor": "#91bf9e" }, "accentText": { "color": "#91bf9e", "backgroundColor": "transparent", "borderColor": "transparent" }, "accentInverse": { "color": "#91bf9e", "backgroundColor": "#010c66", "borderColor": "#010c66" }, "accentOutlineInverse": { "color": "#010c66", "backgroundColor": "transparent", "borderColor": "#010c66" }, "accentTextInverse": { "color": "#010c66", "backgroundColor": "transparent", "borderColor": "transparent" }, "information": { "color": "#f7f1ea", "backgroundColor": "#257688", "borderColor": "#257688" }, "informationLight": { "color": "#010c66", "backgroundColor": "#82becb", "borderColor": "#82becb" }, "informationLighter": { "color": "#010c66", "backgroundColor": "#e3f4f8", "borderColor": "#e3f4f8" }, "informationOutline": { "color": "#257688", "backgroundColor": "transparent", "borderColor": "#257688" }, "informationText": { "color": "#257688", "backgroundColor": "transparent", "borderColor": "transparent" }, "informationInverse": { "color": "#257688", "backgroundColor": "#f7f1ea", "borderColor": "#f7f1ea" }, "informationOutlineInverse": { "color": "#f7f1ea", "backgroundColor": "transparent", "borderColor": "#f7f1ea" }, "informationTextInverse": { "color": "#f7f1ea", "backgroundColor": "transparent", "borderColor": "transparent" }, "success": { "color": "#f7f1ea", "backgroundColor": "#186336", "borderColor": "#186336" }, "successLight": { "color": "#010c66", "backgroundColor": "#57c187", "borderColor": "#57c187" }, "successLighter": { "color": "#010c66", "backgroundColor": "#dff8e6", "borderColor": "#dff8e6" }, "successOutline": { "color": "#186336", "backgroundColor": "transparent", "borderColor": "#186336" }, "successText": { "color": "#186336", "backgroundColor": "transparent", "borderColor": "transparent" }, "successInverse": { "color": "#186336", "backgroundColor": "#f7f1ea", "borderColor": "#f7f1ea" }, "successOutlineInverse": { "color": "#f7f1ea", "backgroundColor": "transparent", "borderColor": "#f7f1ea" }, "successTextInverse": { "color": "#f7f1ea", "backgroundColor": "transparent", "borderColor": "transparent" }, "warning": { "color": "#f7f1ea", "backgroundColor": "#c54b14", "borderColor": "#c54b14" }, "warningLight": { "color": "#010c66", "backgroundColor": "#dd9676", "borderColor": "#dd9676" }, "warningLighter": { "color": "#010c66", "backgroundColor": "#fff6d5", "borderColor": "#fff6d5" }, "warningOutline": { "color": "#c54b14", "backgroundColor": "transparent", "borderColor": "#c54b14" }, "warningText": { "color": "#c54b14", "backgroundColor": "transparent", "borderColor": "transparent" }, "warningInverse": { "color": "#c54b14", "backgroundColor": "#f7f1ea", "borderColor": "#f7f1ea" }, "warningOutlineInverse": { "color": "#f7f1ea", "backgroundColor": "transparent", "borderColor": "#f7f1ea" }, "warningTextInverse": { "color": "#f7f1ea", "backgroundColor": "transparent", "borderColor": "transparent" }, "error": { "color": "#f7f1ea", "backgroundColor": "#a93532", "borderColor": "#a93532" }, "errorLight": { "color": "#010c66", "backgroundColor": "#e36d6b", "borderColor": "#e36d6b" }, "errorLighter": { "color": "#010c66", "backgroundColor": "#ffebeb", "borderColor": "#ffebeb" }, "errorOutline": { "color": "#a93532", "backgroundColor": "transparent", "borderColor": "#a93532" }, "errorText": { "color": "#a93532", "backgroundColor": "transparent", "borderColor": "transparent" }, "errorInverse": { "color": "#a93532", "backgroundColor": "#f7f1ea", "borderColor": "#f7f1ea" }, "errorOutlineInverse": { "color": "#f7f1ea", "backgroundColor": "transparent", "borderColor": "#f7f1ea" }, "errorTextInverse": { "color": "#f7f1ea", "backgroundColor": "transparent", "borderColor": "transparent" }, "supplementary-1": { "color": "#010c66", "backgroundColor": "#f9ae97", "borderColor": "#f9ae97" }, "supplementary-1Light": { "color": "#010c66", "backgroundColor": "#fbcec1", "borderColor": "#fbcec1" }, "supplementary-1Lighter": { "color": "#010c66", "backgroundColor": "#fff8f7", "borderColor": "#fff8f7" }, "supplementary-1Outline": { "color": "#f9ae97", "backgroundColor": "transparent", "borderColor": "#f9ae97" }, "supplementary-1Text": { "color": "#f9ae97", "backgroundColor": "transparent", "borderColor": "transparent" }, "supplementary-1Inverse": { "color": "#f9ae97", "backgroundColor": "#010c66", "borderColor": "#010c66" }, "supplementary-1OutlineInverse": { "color": "#010c66", "backgroundColor": "transparent", "borderColor": "#010c66" }, "supplementary-1TextInverse": { "color": "#010c66", "backgroundColor": "transparent", "borderColor": "transparent" }, "supplementary-2": { "color": "#010c66", "backgroundColor": "#cccee0", "borderColor": "#cccee0" }, "supplementary-2Light": { "color": "#010c66", "backgroundColor": "#cccee0", "borderColor": "#cccee0" }, "supplementary-2Lighter": { "color": "#010c66", "backgroundColor": "#e6e7f0", "borderColor": "#e6e7f0" }, "supplementary-2Outline": { "color": "#cccee0", "backgroundColor": "transparent", "borderColor": "#cccee0" }, "supplementary-2Text": { "color": "#cccee0", "backgroundColor": "transparent", "borderColor": "transparent" }, "supplementary-2Inverse": { "color": "#cccee0", "backgroundColor": "#010c66", "borderColor": "#010c66" }, "supplementary-2OutlineInverse": { "color": "#010c66", "backgroundColor": "transparent", "borderColor": "#010c66" }, "supplementary-2TextInverse": { "color": "#010c66", "backgroundColor": "transparent", "borderColor": "transparent" }, "supplementary-3": { "color": "#222222", "backgroundColor": "#e0e0e0", "borderColor": "#e0e0e0" }, "supplementary-3Light": { "color": "#222222", "backgroundColor": "#ebebeb", "borderColor": "#ebebeb" }, "supplementary-3Lighter": { "color": "#222222", "backgroundColor": "#fdfdfd", "borderColor": "#fdfdfd" }, "supplementary-3Outline": { "color": "#e0e0e0", "backgroundColor": "transparent", "borderColor": "#e0e0e0" }, "supplementary-3Text": { "color": "#e0e0e0", "backgroundColor": "transparent", "borderColor": "transparent" }, "supplementary-3Inverse": { "color": "#e0e0e0", "backgroundColor": "#222222", "borderColor": "#222222" }, "supplementary-3OutlineInverse": { "color": "#222222", "backgroundColor": "transparent", "borderColor": "#222222" }, "supplementary-3TextInverse": { "color": "#222222", "backgroundColor": "transparent", "borderColor": "transparent" }, "default": { "color": "#f7f1ea" }, "Light": { "color": "#010c66" } }, "banner": { "backgroundColor": "#010c66", "color": "#f7f1ea", "primary": { "backgroundColor": "#010c66", "color": "#f7f1ea" }, "secondary": { "backgroundColor": "#d7d667", "color": "#010c66" }, "accent": { "backgroundColor": "#91bf9e", "color": "#010c66" } }, "button": { "accent": { "backgroundColor": "#91bf9e", "borderColor": "#91bf9e", "color": "#010c66", "hover": { "backgroundColor": "#7ba286", "borderColor": "#7ba286", "color": "#010c66" }, "active": { "backgroundColor": "#7ba286", "borderColor": "#7ba286", "color": "#010c66" }, "disabled": { "backgroundColor": "#EBE5E5", "borderColor": "#EBE5E5", "color": "#8f8a8a" }, "focus": { "outline": "2px solid #91bf9e" } }, "accentOutline": { "backgroundColor": "transparent", "borderColor": "#91bf9e", "color": "#91bf9e", "hover": { "backgroundColor": "rgba(237,244,240, 0.20)", "borderColor": "#91bf9e", "color": "#91bf9e" }, "active": { "backgroundColor": "rgba(237,244,240, 0.20)", "borderColor": "#91bf9e", "color": "#91bf9e" } }, "accentText": { "backgroundColor": "transparent", "borderColor": "transparent", "color": "#91bf9e", "hover": { "backgroundColor": "rgba(237,244,240, 0.20)", "borderColor": "rgba(237,244,240, 0.20)", "color": "#91bf9e" }, "active": { "backgroundColor": "rgba(237,244,240, 0.20)", "borderColor": "rgba(237,244,240, 0.20)", "color": "#91bf9e" } }, "accentInverse": { "backgroundColor": "#010c66", "borderColor": "#010c66", "color": "#91bf9e", "hover": { "backgroundColor": "transparent", "borderColor": "#010c66", "color": "#010c66" }, "active": { "backgroundColor": "transparent", "borderColor": "#010c66", "color": "#010c66" }, "focus": { "outline": "2px solid #010c66" } }, "accentOutlineInverse": { "backgroundColor": "transparent", "borderColor": "#010c66", "color": "#010c66", "hover": { "backgroundColor": "#010c66", "borderColor": "#010c66", "color": "#91bf9e" }, "active": { "backgroundColor": "#010c66", "borderColor": "#010c66", "color": "#91bf9e" } }, "accentTextInverse": { "backgroundColor": "transparent", "borderColor": "transparent", "color": "#010c66", "hover": { "backgroundColor": "#010c66", "borderColor": "#010c66", "color": "#91bf9e" }, "active": { "backgroundColor": "#010c66", "borderColor": "#010c66", "color": "#91bf9e" } }, "cta-1": { "backgroundColor": "#010c66", "borderColor": "#010c66", "color": "#f7f1ea", "hover": { "backgroundColor": "#00084e", "borderColor": "#00084e", "color": "#f7f1ea" }, "active": { "backgroundColor": "#00084e", "borderColor": "#00084e", "color": "#f7f1ea" }, "disabled": { "backgroundColor": "#EBE5E5", "borderColor": "#EBE5E5", "color": "#8f8a8a" }, "focus": { "outline": "2px solid #010c66" } }, "cta-2": { "backgroundColor": "transparent", "borderColor": "#010c66", "color": "#010c66", "hover": { "backgroundColor": "rgba(3,57,139, 0.10)", "borderColor": "#010c66", "color": "#010c66" }, "active": { "backgroundColor": "rgba(3,57,139, 0.10)", "borderColor": "#010c66", "color": "#010c66" }, "disabled": { "backgroundColor": "#EBE5E5", "borderColor": "#EBE5E5", "color": "#8f8a8a" }, "focus": { "outline": "2px solid #010c66" } }, "cta-3": { "backgroundColor": "#91bf9e", "borderColor": "#91bf9e", "color": "#010c66", "hover": { "backgroundColor": "#7ba286", "borderColor": "#7ba286", "color": "#010c66" }, "active": { "backgroundColor": "#7ba286", "borderColor": "#7ba286", "color": "#010c66" }, "disabled": { "backgroundColor": "#EBE5E5", "borderColor": "#EBE5E5", "color": "#8f8a8a" }, "focus": { "outline": "2px solid #91bf9e" } }, "default": { "backgroundColor": "#383e44", "borderColor": "#383e44", "color": "#f5f5f6", "hover": { "backgroundColor": "#222529", "borderColor": "#222529", "color": "#f5f5f6" }, "active": { "backgroundColor": "#f5f5f6", "borderColor": "#383e44", "color": "#383e44" }, "disabled": { "backgroundColor": "#EBE5E5", "borderColor": "#EBE5E5", "color": "#888b8f" }, "focus": { "outline": "2px solid #383e44" } }, "defaultOutline": { "backgroundColor": "transparent", "borderColor": "#383e44", "color": "#383e44", "hover": { "backgroundColor": "#f5f5f6", "borderColor": "#383e44", "color": "#383e44" }, "active": { "backgroundColor": "#383e44", "borderColor": "#383e44", "color": "#f5f5f6" } }, "defaultText": { "backgroundColor": "transparent", "borderColor": "transparent", "color": "#383e44", "hover": { "backgroundColor": "#f5f5f6", "borderColor": "#f5f5f6", "color": "#383e44" }, "active": { "backgroundColor": "#383e44", "borderColor": "#383e44", "color": "#f5f5f6" } }, "defaultInverse": { "backgroundColor": "#f5f5f6", "borderColor": "#f5f5f6", "color": "#383e44", "hover": { "backgroundColor": "#383e44", "borderColor": "#383e44", "color": "#f5f5f6" }, "active": { "backgroundColor": "#f5f5f6", "borderColor": "#f5f5f6", "color": "#383e44" }, "focus": { "outline": "2px solid #f5f5f6" } }, "defaultOutlineInverse": { "backgroundColor": "transparent", "borderColor": "#f5f5f6", "color": "#f5f5f6", "hover": { "backgroundColor": "#f5f5f6", "borderColor": "#f5f5f6", "color": "#383e44" }, "active": { "backgroundColor": "#888b8f", "borderColor": "#888b8f", "color": "#f5f5f6" } }, "defaultTextInverse": { "backgroundColor": "transparent", "borderColor": "transparent", "color": "#f5f5f6", "hover": { "backgroundColor": "#f5f5f6", "borderColor": "#f5f5f6", "color": "#383e44" }, "active": { "backgroundColor": "#888b8f", "borderColor": "#888b8f", "color": "#f5f5f6" } }, "destructive": { "backgroundColor": "#a93532", "borderColor": "#a93532", "color": "#f7f1ea", "hover": { "backgroundColor": "#860000", "borderColor": "#860000", "color": "#f7f1ea" }, "active": { "backgroundColor": "#860000", "borderColor": "#860000", "color": "#f7f1ea" }, "disabled": { "backgroundColor": "#EBE5E5", "borderColor": "#EBE5E5", "color": "#8f8a8a" }, "focus": { "outline": "2px solid #a93532" } }, "destructiveOutline": { "backgroundColor": "transparent", "borderColor": "#a93532", "color": "#a93532", "hover": { "backgroundColor": "rgba(0,0,0, 0.075)", "borderColor": "#a93532", "color": "#a93532" }, "active": { "backgroundColor": "rgba(0,0,0, 0.075)", "borderColor": "#a93532", "color": "#a93532" } }, "destructiveText": { "backgroundColor": "transparent", "borderColor": "transparent", "color": "#a93532", "hover": { "backgroundColor": "rgba(0,0,0, 0.075)", "borderColor": "rgba(0,0,0, 0.075)", "color": "#a93532" }, "active": { "backgroundColor": "rgba(0,0,0, 0.075)", "borderColor": "rgba(0,0,0, 0.075)", "color": "#a93532" } }, "destructiveInverse": { "backgroundColor": "#f7f1ea", "borderColor": "#f7f1ea", "color": "#a93532", "hover": { "backgroundColor": "transparent", "borderColor": "#f7f1ea", "color": "#f7f1ea" }, "active": { "backgroundColor": "transparent", "borderColor": "#f7f1ea", "color": "#f7f1ea" }, "focus": { "outline": "2px solid #f7f1ea" } }, "destructiveOutlineInverse": { "backgroundColor": "transparent", "borderColor": "#f7f1ea", "color": "#f7f1ea", "hover": { "backgroundColor": "#f7f1ea", "borderColor": "#f7f1ea", "color": "#a93532" }, "active": { "backgroundColor": "#f7f1ea", "borderColor": "#f7f1ea", "color": "#a93532" } }, "destructiveTextInverse": { "backgroundColor": "transparent", "borderColor": "transparent", "color": "#f7f1ea", "hover": { "backgroundColor": "#f7f1ea", "borderColor": "#f7f1ea", "color": "#a93532" }, "active": { "backgroundColor": "#f7f1ea", "borderColor": "#f7f1ea", "color": "#a93532" } }, "height": "48px", "fontFamily": "Help Type Display Web, Helvetica, Arial", "borderRadius": "64px", "borderWidth": "2px", "fontWeight": "500", "fontSize": "1rem", "textTransform": "none", "paddingRight": "1.5rem", "paddingLeft": "1.5rem", "transition": "background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease", "interactive": { "backgroundColor": "#010c66", "borderColor": "#010c66", "color": "#f7f1ea", "hover": { "backgroundColor": "#00084e", "borderColor": "#00084e", "color": "#f7f1ea" }, "active": { "backgroundColor": "#00084e", "borderColor": "#00084e", "color": "#f7f1ea" }, "disabled": { "backgroundColor": "#EBE5E5", "borderColor": "#EBE5E5", "color": "#8f8a8a" }, "focus": { "outline": "2px solid #010c66" } }, "interactiveOutline": { "backgroundColor": "transparent", "borderColor": "#010c66", "color": "#010c66", "hover": { "backgroundColor": "rgba(3,57,139, 0.10)", "borderColor": "#010c66", "color": "#010c66" }, "active": { "backgroundColor": "rgba(3,57,139, 0.10)", "borderColor": "#010c66", "color": "#010c66" } }, "interactiveText": { "backgroundColor": "transparent", "borderColor": "transparent", "color": "#010c66", "hover": { "backgroundColor": "rgba(3,57,139, 0.10)", "borderColor": "rgba(3,57,139, 0.10)", "color": "#010c66" }, "active": { "backgroundColor": "rgba(3,57,139, 0.10)", "borderColor": "rgba(3,57,139, 0.10)", "color": "#010c66" } }, "interactiveInverse": { "backgroundColor": "#f7f1ea", "borderColor": "#f7f1ea", "color": "#010c66", "hover": { "backgroundColor": "transparent", "borderColor": "#f7f1ea", "color": "#f7f1ea" }, "active": { "backgroundColor": "transparent", "borderColor": "#f7f1ea", "color": "#f7f1ea" }, "focus": { "outline": "2px solid #f7f1ea" } }, "interactiveOutlineInverse": { "backgroundColor": "transparent", "borderColor": "#f7f1ea", "color": "#f7f1ea", "hover": { "backgroundColor": "#f7f1ea", "borderColor": "#f7f1ea", "color": "#010c66" }, "active": { "backgroundColor": "#f7f1ea", "borderColor": "#f7f1ea", "color": "#010c66" } }, "interactiveTextInverse": { "backgroundColor": "transparent", "borderColor": "transparent", "color": "#f7f1ea", "hover": { "backgroundColor": "#f7f1ea", "borderColor": "#f7f1ea", "color": "#010c66" }, "active": { "backgroundColor": "#f7f1ea", "borderColor": "#f7f1ea", "color": "#010c66" } }, "link": { "color": "#010c66", "backgroundColor": "transparent", "borderRadius": "2px", "hover": { "backgroundColor": "rgba(3,57,139, 0.10)", "color": "#010c66" }, "focus": { "backgroundColor": "transparent", "color": "#010c66" }, "active": { "backgroundColor": "rgba(3,57,139, 0.10)", "color": "#010c66" }, "disabled": { "backgroundColor": "#f2f3f9", "color": "#999ec2" } }, "linkInverse": { "backgroundColor": "transparent", "color": "#f7f1ea", "hover": { "backgroundColor": "rgba(255, 255, 255, 0.20)", "color": "#f7f1ea" }, "focus": { "backgroundColor": "transparent", "color": "#f7f1ea" }, "active": { "backgroundColor": "rgba(255, 255, 255, 0.20)", "color": "#f7f1ea" }, "disabled": { "backgroundColor": "#f2f3f9", "color": "#999ec2" } }, "primary": { "backgroundColor": "#010c66", "borderColor": "#010c66", "color": "#f7f1ea", "hover": { "backgroundColor": "#00084e", "borderColor": "#00084e", "color": "#f7f1ea" }, "active": { "backgroundColor": "#00084e", "borderColor": "#00084e", "color": "#f7f1ea" }, "disabled": { "backgroundColor": "#EBE5E5", "borderColor": "#EBE5E5", "color": "#8f8a8a" }, "focus": { "outline": "2px solid #010c66" } }, "primaryOutline": { "backgroundColor": "transparent", "borderColor": "#010c66", "color": "#010c66", "hover": { "backgroundColor": "rgba(3,57,139, 0.10)", "borderColor": "#010c66", "color": "#010c66" }, "active": { "backgroundColor": "rgba(3,57,139, 0.10)", "borderColor": "#010c66", "color": "#010c66" } }, "primaryText": { "backgroundColor": "transparent", "borderColor": "transparent", "color": "#010c66", "hover": { "backgroundColor": "rgba(3,57,139, 0.10)", "borderColor": "rgba(3,57,139, 0.10)", "color": "#010c66" }, "active": { "backgroundColor": "rgba(3,57,139, 0.10)", "borderColor": "rgba(3,57,139, 0.10)", "color": "#010c66" } }, "primaryInverse": { "backgroundColor": "#f7f1ea", "borderColor": "#f7f1ea", "color": "#010c66", "hover": { "backgroundColor": "transparent", "borderColor": "#f7f1ea", "color": "#f7f1ea" }, "active": { "backgroundColor": "transparent", "borderColor": "#f7f1ea", "color": "#f7f1ea" }, "focus": { "outline": "2px solid #f7f1ea" } }, "primaryOutlineInverse": { "backgroundColor": "transparent", "borderColor": "#f7f1ea", "color": "#f7f1ea", "hover": { "backgroundColor": "#f7f1ea", "borderColor": "#f7f1ea", "color": "#010c66" }, "active": { "backgroundColor": "#f7f1ea", "borderColor": "#f7f1ea", "color": "#010c66" } }, "primaryTextInverse": { "backgroundColor": "transparent", "borderColor": "transparent", "color": "#f7f1ea", "hover": { "backgroundColor": "#f7f1ea", "borderColor": "#f7f1ea", "color": "#010c66" }, "active": { "backgroundColor": "#f7f1ea", "borderColor": "#f7f1ea", "color": "#010c66" } }, "secondary": { "backgroundColor": "#d7d667", "borderColor": "#d7d667", "color": "#010c66", "hover": { "backgroundColor": "#b7b658", "borderColor": "#b7b658", "color": "#010c66" }, "active": { "backgroundColor": "#b7b658", "borderColor": "#b7b658", "color": "#010c66" }, "disabled": { "backgroundColor": "#EBE5E5", "borderColor": "#EBE5E5", "color": "#8f8a8a" }, "focus": { "outline": "2px solid #d7d667" } }, "secondaryOutline": { "backgroundColor": "transparent", "borderColor": "#d7d667", "color": "#d7d667", "hover": { "backgroundColor": "rgba(238, 236, 186, 0.20)", "borderColor": "#d7d667", "color": "#d7d667" }, "active": { "backgroundColor": "rgba(238, 236, 186, 0.20)", "borderColor": "#d7d667", "color": "#d7d667" } }, "secondaryText": { "backgroundColor": "transparent", "borderColor": "transparent", "color": "#d7d667", "hover": { "backgroundColor": "rgba(238, 236, 186, 0.20)", "borderColor": "rgba(238, 236, 186, 0.20)", "color": "#d7d667" }, "active": { "backgroundColor": "rgba(238, 236, 186, 0.20)", "borderColor": "rgba(238, 236, 186, 0.20)", "color": "#d7d667" } }, "secondaryInverse": { "backgroundColor": "#010c66", "borderColor": "#010c66", "color": "#d7d667", "hover": { "backgroundColor": "transparent", "borderColor": "#010c66", "color": "#010c66" }, "active": { "backgroundColor": "transparent", "borderColor": "#010c66", "color": "#010c66" }, "focus": { "outline": "2px solid #010c66" } }, "secondaryOutlineInverse": { "backgroundColor": "transparent", "borderColor": "#010c66", "color": "#010c66", "hover": { "backgroundColor": "#010c66", "borderColor": "#010c66", "color": "#d7d667" }, "active": { "backgroundColor": "#010c66", "borderColor": "#010c66", "color": "#d7d667" } }, "secondaryTextInverse": { "backgroundColor": "transparent", "borderColor": "transparent", "color": "#010c66", "hover": { "backgroundColor": "#010c66", "borderColor": "#010c66", "color": "#d7d667" }, "active": { "backgroundColor": "#010c66", "borderColor": "#010c66", "color": "#d7d667" } }, "size": { "xs": { "fontSize": "1rem", "padding": "0 0.5rem", "height": "2rem" }, "sm": { "fontSize": "1rem", "padding": "0 0.75rem", "height": "2.25rem" }, "md": { "fontSize": "1rem", "padding": "0 1rem", "height": "2.5rem" }, "lg": { "fontSize": "1rem", "padding": "0 1.25rem", "height": "2.75rem" } }, "supplementary-1": { "backgroundColor": "#f9ae97", "borderColor": "#f9ae97", "color": "#010c66", "hover": { "backgroundColor": "#dd9782", "borderColor": "#dd9782", "color": "#010c66" }, "active": { "backgroundColor": "#dd9782", "borderColor": "#dd9782", "color": "#010c66" }, "disabled": { "backgroundColor": "#f7f1ea", "borderColor": "#f7f1ea", "color": "#8f8a8a" }, "focus": { "outline": "2px solid #f9ae97" }, "outline": { "backgroundColor": "transparent", "borderColor": "#f9ae97", "color": "#f9ae97", "hover": { "backgroundColor": "rgba(255,236,230, 0.20)", "borderColor": "#f9ae97", "color": "#f9ae97" }, "active": { "backgroundColor": "rgba(255,236,230, 0.20)", "borderColor": "#f9ae97", "color": "#f9ae97" } }, "text": { "backgroundColor": "transparent", "borderColor": "transparent", "color": "#f9ae97", "hover": { "backgroundColor": "rgba(255,236,230, 0.20)", "borderColor": "rgba(255,236,230, 0.20)", "color": "#f9ae97" }, "active": { "backgroundColor": "rgba(255,236,230, 0.20)", "borderColor": "rgba(255,236,230, 0.20)", "color": "#f9ae97" } }, "inverse": { "backgroundColor": "#010c66", "borderColor": "#010c66", "color": "#f9ae97", "hover": { "backgroundColor": "transparent", "borderColor": "#010c66", "color": "#010c66" }, "active": { "backgroundColor": "transparent", "borderColor": "#010c66", "color": "#010c66" }, "focus": { "outline": "2px solid #f9ae97" } }, "outlineInverse": { "backgroundColor": "transparent", "borderColor": "#010c66", "color": "#010c66", "hover": { "backgroundColor": "#010c66", "borderColor": "#010c66", "color": "#f9ae97" }, "active": { "backgroundColor": "#010c66", "borderColor": "#010c66", "color": "#f9ae97" } }, "textInverse": { "backgroundColor": "transparent", "borderColor": "transparent", "color": "#010c66", "hover": { "backgroundColor": "#010c66", "borderColor": "#010c66", "color": "#f9ae97" }, "active": { "backgroundColor": "#010c66", "borderColor": "#010c66", "color": "#f9ae97" } } }, "supplementary-2": { "backgroundColor": "#cccee0", "borderColor": "#cccee0", "color": "#010c66", "hover": { "backgroundColor": "#b3b7da", "borderColor": "#b3b7da", "color": "#010c66" }, "active": { "backgroundColor": "#b3b7da", "borderColor": "#b3b7da", "color": "#010c66" }, "disabled": { "backgroundColor": "#f7f1ea", "borderColor": "#f7f1ea", "color": "#8f8a8a" }, "focus": { "outline": "2px solid #cccee0" }, "outline": { "backgroundColor": "transparent", "borderColor": "#cccee0", "color": "#cccee0", "hover": { "backgroundColor": "rgba(230,231,240, 0.20)", "borderColor": "#cccee0", "color": "#cccee0" }, "active": { "backgroundColor": "rgba(230,231,240, 0.20)", "borderColor": "#cccee0", "color": "#cccee0" } }, "text": { "backgroundColor": "transparent", "borderColor": "transparent", "color": "#cccee0", "hover": { "backgroundColor": "rgba(230,231,240, 0.20)", "borderColor": "rgba(230,231,240, 0.20)", "color": "#cccee0" }, "active": { "backgroundColor": "rgba(230,231,240, 0.20)", "borderColor": "rgba(230,231,240, 0.20)", "color": "#cccee0" } }, "inverse": { "backgroundColor": "#010c66", "borderColor": "#010c66", "color": "#cccee0", "hover": { "backgroundColor": "transparent", "borderColor": "#010c66", "color": "#010c66" }, "active": { "backgroundColor": "transparent", "borderColor": "#010c66", "color": "#010c66" }, "focus": { "outline": "2px solid #cccee0" } }, "outlineInverse": { "backgroundColor": "transparent", "borderColor": "#010c66", "color": "#010c66", "hover": { "backgroundColor": "#010c66", "borderColor": "#010c66", "color": "#cccee0" }, "active": { "backgroundColor": "#010c66", "borderColor": "#010c66", "color": "#cccee0" } }, "textInverse": { "backgroundColor": "transparent", "borderColor": "transparent", "color": "#010c66", "hover": { "backgroundColor": "#010c66", "borderColor": "#010c66", "color": "#cccee0" }, "active": { "backgroundColor": "#010c66", "borderColor": "#010c66", "color": "#cccee0" } } }, "supplementary-3": { "backgroundColor": "#e0e0e0", "borderColor": "#e0e0e0", "color": "#222222", "hover": { "backgroundColor": "#ebebeb", "borderColor": "#ebebeb", "color": "#222222" }, "active": { "backgroundColor": "#ebebeb", "borderColor": "#ebebeb", "color": "#222222" }, "disabled": { "backgroundColor": "#f7f1ea", "borderColor": "#f7f1ea", "color": "#8f8a8a" }, "focus": { "outline": "2px solid #e0e0e0" }, "outline": { "backgroundColor": "transparent", "borderColor": "#e0e0e0", "color": "#e0e0e0", "hover": { "backgroundColor": "rgba(255, 255, 255, 0.20)", "borderColor": "#e0e0e0", "color": "#e0e0e0" }, "active": { "backgroundColor": "rgba(255, 255, 255, 0.20)", "borderColor": "#e0e0e0", "color": "#e0e0e0" } }, "text": { "backgroundColor": "transparent", "borderColor": "transparent", "color": "#e0e0e0", "hover": { "backgroundColor": "rgba(255, 255, 255, 0.20)", "borderColor": "rgba(255, 255, 255, 0.20)", "color": "#e0e0e0" }, "active": { "backgroundColor": "rgba(255, 255, 255, 0.20)", "borderColor": "rgba(255, 255, 255, 0.20)", "color": "#e0e0e0" } }, "inverse": { "backgroundColor": "#222222", "borderColor": "#222222", "color": "#e0e0e0", "hover": { "backgroundColor": "transparent", "borderColor": "#222222", "color": "#222222" }, "active": { "backgroundColor": "transparent", "borderColor": "#222222", "color": "#222222" }, "focus": { "outline": "2px solid #e0e0e0" } }, "outlineInverse": { "backgroundColor": "transparent", "borderColor": "#222222", "color": "#222222", "hover": { "backgroundColor": "#222222", "borderColor": "#222222", "color": "#e0e0e0" }, "active": { "backgroundColor": "#222222", "borderColor": "#222222", "color": "#e0e0e0" } }, "textInverse": { "backgroundColor": "transparent", "borderColor": "transparent", "color": "#222222", "hover": { "backgroundColor": "#222222", "borderColor": "#222222", "color": "#e0e0e0" }, "active": { "backgroundColor": "#222222", "borderColor": "#222222", "color": "#e0e0e0" } } } }, "buttonGroup": { "marginRight": "1rem", "marginBottom": "1rem" }, "checkbox": { "input": { "size": "24px", "borderWidth": "2px", "borderRadius": "2px", "outer": { "backgroundColor": "#fdfaf9", "borderColor": "#010c66" }, "inner": { "borderColor": "#010c66" } }, "label": { "color": "#010c66", "padding": "0.625rem 0.5rem 0.625rem 2.25rem", "backgroundColor": "transparent", "fontFamily": "Help Type Text Web, Helvetica, Arial", "fontSize": "1rem", "fontWeight": "400" }, "hover": { "input": { "outer": { "backgroundColor": "#fdfaf9", "borderColor": "#010c66" }, "inner": { "borderColor": "#fdfaf9" } }, "label": { "color": "#010c66", "backgroundColor": "rgba(3,57,139, 0.10)" } }, "focus": { "input": { "outline": "2px solid #010c66" } }, "error": { "input": { "outer": { "backgroundColor": "#fdfaf9", "borderColor": "#a93532" }, "inner": { "borderColor": "#fdfaf9" } } }, "disabled": { "input": { "outer": { "backgroundColor": "#f2efef", "borderColor": "#8f8a8a" }, "inner": { "borderColor": "#8f8a8a" } }, "label": { "color": "#8f8a8a" } }, "checked": { "input": { "outer": { "backgroundColor": "#010c66", "borderColor": "#010c66" }, "inner": { "borderColor": "#f7f1ea" } }, "label": { "color": "#010c66", "fontWeight": "500" } }, "outline": { "input": { "size": "24px", "borderWidth": "2px", "outer": { "backgroundColor": "#fdfaf9", "borderColor": "#010c66" }, "inner": { "borderColor": "#fdfaf9" } }, "label": { "borderWidth": "1px", "borderColor": "#8f8a8a", "padding": "1rem 1rem 1rem 3.2rem", "backgroundColor": "#fdfaf9", "color": "#010c66", "borderRadius": "2px" }, "hover": { "input": { "outer": { "backgroundColor": "#fdfaf9", "borderColor": "#010c66" }, "inner": { "borderColor": "#fdfaf9" } }, "label": { "color": "#010c66", "borderColor": "#010c66", "backgroundColor": "#eaedf3" } }, "focus": { "label": { "outline": "2px solid #010c66" } }, "error": { "input": { "outer": { "backgroundColor": "#fdfaf9", "borderColor": "#a93532" }, "inner": { "borderColor": "#fdfaf9" } }, "label": { "borderColor": "#a93532" } }, "disabled": { "input": { "outer": { "backgroundColor": "#f2efef", "borderColor": "#8f8a8a" }, "inner": { "borderColor": "#8f8a8a" } }, "label": { "color": "#8f8a8a", "borderColor": "#8f8a8a", "backgroundColor": "#f2efef" } }, "checked": { "input": { "outer": { "backgroundColor": "#f7f1ea", "borderColor": "#f7f1ea" }, "inner": { "borderColor": "#010c66" } }, "label": { "color": "#f7f1ea", "backgroundColor": "#010c66", "borderColor": "#010c66" } } } }, "container": { "maxWidth": { "xs": "100%", "sm": "960px", "md": "960px", "lg": "960px", "xl": "1140px" }, "padding": { "xs": "0 1rem", "sm": "0 1rem", "md": "0 1rem", "lg": "0 1rem", "xl": "0 1rem" } }, "datepicker": { "height": "48px", "color": "#010c66", "border": "1px solid #8f8a8a", "borderRadius": "2px", "backgroundColor": "#fdfaf9", "fontFamily": "Help Type Text Web, Helvetica, Arial", "fontSize": "1rem", "fontWeight": "400", "padding": "11px 11px 9px", "hover": { "backgroundColor": "#eaedf3", "borderColor": "#010c66", "color": "#010c66" }, "disabled": { "backgroundColor": "#f2efef", "borderColor": "#8f8a8a", "color": "#8f8a8a" }, "error": { "borderColor": "#a93532" }, "success": { "borderColor": "#186336" }, "calendar": { "icon": { "color": "#010c66" }, "month": { "color": "#010c66" }, "week": { "color": "#010c66" }, "day": { "color": "#010c66", "hover": { "backgroundColor": "#eaedf3" }, "selected": { "backgroundColor": "#010c66", "borderColor": "#010c66", "color": "#f7f1ea" } }, "navButton": { "color": "#010c66" } }, "placeholder": { "color": "#6b6b6b" } }, "divider": { "borderColor": "#8f8a8a", "borderWidth": "1px", "color": "#010c66", "inverse": { "borderColor": "#ffffff", "color": "#f7f1ea" } }, "drawer": { "backdrop": { "backgroundColor": "rgba(43,46,56, 0.9)" }, "backgroundColor": "#ffffff", "borderRadius": "0", "padding": { "xs": "40px 40px 16px 16px", "sm": "40px 40px 24px 24px", "md": "40px 40px 32px 32px", "lg": "40px 40px 32px 32px" }, "leftMargin": "16px", "closeButton": { "icon": { "color": "#010c66" }, "hover": { "backgroundColor": "rgba(0,0,0, 0.075)", "icon": { "color": "#010c66" } } }, "header": { "paddingBottom": "12px" }, "content": { "paddingBottom": "12px" } }, "footer": { "backgroundColor": "#00084e", "color": "#fdfcfb", "fontFamily": "Help Type Text Web, Helvetica, Arial", "fontSize": "0.875rem", "padding": { "xs": "1.5rem 0", "sm": "1.5rem 0", "md": "1.5rem 0", "lg": "1.5rem 0" }, "link": { "color": "#fdfcfb", "fontWeight": "400", "hover": { "color": "#fdfcfb" } } }, "header": { "backgroundColor": "#ffffff", "boxShadow": "0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24)", "height": { "xs": "70px", "sm": "80px", "md": "80px", "lg": "112px" }, "padding": { "xs": "0 0", "sm": "0 0", "md": "0 0", "lg": "0 0" }, "heading": { "color": "#010c66", "fontSize": { "xs": "1.25rem", "sm": "1.5rem", "md": "1.75rem", "lg": "1.75rem" }, "padding": { "xs": "0 0", "sm": "0 2rem", "md": "0 2rem", "lg": "0 2rem" } }, "dark": { "backgroundColor": "#010c66", "heading": { "color": "#f7f1ea" } }, "light": { "backgroundColor": "#fdfaf9", "heading": { "color": "#010c66" } } }, "icon": { "color": "#010c66", "fontWeight": "900", "fontFamily": "solid", "light": { "color": "#f7f1ea" } }, "input": { "height": "48px", "color": "#010c66", "padding": "0 12px", "borderColor": "#8f8a8a", "border": "1px solid #8f8a8a", "borderRadius": "2px", "backgroundColor": "#fdfaf9", "fontFamily": "Help Type Text Web, Helvetica, Arial", "fontSize": "1rem", "fontWeight": "400", "transition": "background-color 0.3s ease, border-color 0.3s ease", "placeholder": { "color": "#6b6b6b" }, "hover": { "backgroundColor": "#eaedf3", "borderColor": "#010c66", "color": "#010c66" }, "disabled": { "borderColor": "#8f8a8a", "backgroundColor": "#f2efef", "color": "#8f8a8a" }, "focus": { "borderColor": "#0133ad", "backgroundColor": "#fdfaf9", "color": "#010c66", "outline": "2px solid #0133ad" }, "error": { "borderColor": "#a93532", "outline": "#a93532", "backgroundColor": "#fdfaf9", "color": "#010c66" }, "success": { "borderColor": "#186336", "outline": "#186336", "backgroundColor": "#fdfaf9", "color": "#010c66" } }, "inputGroup": { "backgroundColor": "#f7f1ea" }, "label": { "color": "#010c66", "fontSize": "1rem", "fontWeight": "500", "fontFamily": "Help Type Text Web, Helvetica, Arial", "lineHeight": "1.5" }, "legend": { "color": "#010c66", "fontSize": "1rem", "fontWeight": "500", "fontFamily": "Help Type Text Web, Helvetica, Arial", "lineHeight": "1.5" }, "link": { "color": "#010c66", "backgroundColor": "transparent", "borderRadius": "2px", "hover": { "backgroundColor": "rgba(3,57,139, 0.10)", "color": "#010c66" }, "focus": { "backgroundColor": "transparent", "color": "#010c66", "outline": "2px solid #00092e" }, "active": { "backgroundColor": "rgba(3,57,139, 0.10)", "color": "#010c66" }, "disabled": { "backgroundColor": "#f2f3f9", "color": "#999ec2" }, "inverse": { "color": "#f7f1ea", "backgroundColor": "transparent", "hover": { "backgroundColor": "rgba(255, 255, 255, 0.20)", "color": "#f7f1ea" }, "focus": { "backgroundColor": "transparent", "color": "#f7f1ea", "outline": "2px solid #f2f3f9" }, "active": { "backgroundColor": "rgba(255, 255, 255, 0.20)", "color": "#f7f1ea" }, "disabled": { "backgroundColor": "#f2f3f9", "color": "#999ec2" } } }, "loader": { "color": "#010c66" }, "logo": { "background": "url(https://chromadesignsystem.com/13.2.0/assets/brands/nrma/logos/dark/logo.svg)", "width": "217px", "height": "72px", "xs": { "background": "url(https://chromadesignsystem.com/13.2.0/assets/brands/nrma/logos/mobile/dark/logo.svg)", "width": "126px", "height": "40px" }, "light": { "background": "url(https://chromadesignsystem.com/13.2.0/assets/brands/nrma/logos/light/logo.svg)", "xs": { "background": "url(https://chromadesignsystem.com/13.2.0/assets/brands/nrma/logos/mobile/light/logo.svg)" } }, "dark": { "background": "url(https://chromadesignsystem.com/13.2.0/assets/brands/nrma/logos/dark/logo.svg)", "xs": { "background": "url(https://chromadesignsystem.com/13.2.0/assets/brands/nrma/logos/mobile/dark/logo.svg)" } } }, "main": { "backgroundColor": "#fdfaf9" }, "message": { "fontFamily": "Help Type Text Web, Helvetica, Arial", "fontSize": "0.875rem", "information": { "color": "#257688" }, "success": { "color": "#186336" }, "warning": { "color": "#c54b14" }, "error": { "color": "#a93532" } }, "modal": { "backdrop": { "backgroundColor": "rgba(43,46,56, 0.9)" }, "backgroundColor": "#ffffff", "padding": "32px", "borderRadius": "0", "button": { "icon": { "color": "#010c66" }, "hover": { "icon": { "color": "#010c66" }, "backgroundColor": "rgba(0,0,0, 0.075)" } } }, "notificationCounter": { "backgroundColor": "#a93532", "borderColor": "#a93532", "borderWidth": "1px", "borderRadius": "18px", "color": "#f7f1ea", "font": { "url": "'https://chromadesignsystem.com/13.2.0/assets/fonts/help-type-web/font.css'", "fontFamily": "Help Type Text Web, Helvetica, Arial", "comment": "font override if needed for step numbers" }, "fontSize": "0.75rem", "fontWeight": "400", "lineHeight": "1", "min-width": "18px", "padding": "2px" }, "password": { "button": { "color": "#010c66", "hover": { "backgroundColor": "#eaedf3", "color": "#010c66" }, "focus": { "backgroundColor": "#fdfaf9", "color": "#010c66" } } }, "price": { "default": { "fontWeight": "400", "fontSize": { "xs": "44px", "sm": "44px", "md": "64px", "lg": "64px" }, "cents": { "fontWeight": "400", "fontSize": { "xs": "65%", "sm": "65%", "md": "65%", "lg": "65%" } }, "currency": { "fontSize": "65%", "fontWeight": "400", "top": { "xs": "-0.5rem", "sm": "-0.5rem", "md": "-0.7rem", "lg": "-0.7rem" } } }, "small": { "fontWeight": "400", "fontSize": { "xs": "30px", "sm": "30px", "md": "44px", "lg": "44px" }, "cents": { "fontSize": { "xs": "65%", "sm": "65%", "md": "65%", "lg": "65%" } }, "currency": { "fontWeight": "400", "fontSize": "65%", "top": { "xs": "-0.3rem", "sm": "-0.3rem", "md": "-0.5rem", "lg": "-0.5rem" } } } }, "progressIndicator": { "borderWidth": "2px", "fontFamily": "Help Type Text Web, Helvetica, Arial", "fontWeight": "400", "boxShadow": "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(72, 70, 69, 0.1) 0px 1px 6px 0px, rgba(72, 70, 69, 0.06) 0px 1px 2px 0px", "complete": { "backgroundColor": "#186336", "borderColor": "#186336", "color": "#f7f1ea" }, "active": { "backgroundColor": "#f7f1ea", "borderColor": "#186336", "color": "#010c66", "fontWeight": "600" }, "incomplete": { "backgroundColor": "#ffffff", "borderColor": "#8f8a8a", "color": "#010c66" }, "mobileLabel": { "margin": "0 0 8px 8px" }, "progressLine": { "borderRadius": "0", "dashed": "2px", "gap": "2px", "height": "1px", "left": "24px", "solid": "4px", "style": "2px", "width": "100%", "complete": { "backgroundColor": "#186336" }, "incomplete": { "backgroundColor": "#c5c0bc" } }, "stepIndicator": { "font": { "url": "'https://chromadesignsystem.com/13.2.0/assets/fonts/help-type-web/font.css'", "fontFamily": "Help Type Text Web, Helvetica, Arial", "comment": "font override if needed for step numbers" }, "fontSize": "1rem", "height": "48px", "size": "1.9rem", "textIndent": "0" }, "button": { "color": "#010c66", "backgroundColor": "transparent", "borderRadius": "4px", "padding": "0px 6px", "hover": { "backgroundColor": "rgba(3,57,139, 0.10)", "color": "#010c66" }, "focus": { "color": "#010c66", "outline": "2px solid #383e44" } } }, "progressLoader": { "backdrop": { "backgroundColor": "rgba(255,255,255, 0.9)" }, "color": "#010c66", "label": { "order": "1", "fontFamily": "Help Type Text Web, Helvetica, Arial", "fontSize": { "xs": "1rem", "sm": "1rem", "md": "1rem", "lg": "1rem" }, "fontWeight": "600", "margin": "0 0 0.25rem 0" }, "progressBar": { "borderColor": "#8f8a8a", "borderRadius": "4px", "backgroundColor": "#ffffff", "order": "2" }, "progressValue": { "borderRadius": "4px", "backgroundColor": "#010c66" }, "inline": { "label": { "margin": "0 0 0.5rem 0" }, "progressBar": { "borderColor": "#8f8a8a" }, "progressValue": { "backgroundColor": "#186336" } } }, "radioBlock": { "backgroundColor": "#fdfaf9", "border": "1px solid #8f8a8a", "borderRadius": "2px", "color": "#010c66", "fontFamily": "Help Type Text Web, Helvetica, Arial", "fontSize": "1rem", "fontWeight": "400", "height": "48px", "hover": { "color": "#010c66", "borderColor": "#010c66", "backgroundColor": "#eaedf3" }, "focus": { "outline": "2px solid #010c66" }, "error": { "borderColor": "#a93532" }, "disabled": { "backgroundColor": "#f2efef", "color": "#8f8a8a", "borderColor": "#8f8a8a" }, "checked": { "color": "#f7f1ea", "backgroundColor": "#010c66", "fontWeight": "500", "borderColor": "#010c66" } }, "radio": { "input": { "size": "24px", "borderWidth": "2px", "outer": { "backgroundColor": "#fdfaf9", "borderColor": "#010c66" }, "inner": { "backgroundColor": "#fdfaf9", "borderColor": "#010c66" } }, "label": { "color": "#010c66", "padding": "0.625rem 0.5rem 0.625rem 2.25rem", "backgroundColor": "transparent", "fontFamily": "Help Type Text Web, Helvetica, Arial", "fontSize": "1rem", "fontWeight": "400" }, "hover": { "input": { "outer": { "backgroundColor": "#fdfaf9", "borderColor": "#010c66" }, "inner": { "backgroundColor": "#fdfaf9" } }, "label": { "color": "#010c66", "backgroundColor": "rgba(3,57,139, 0.10)" } }, "focus": { "input": { "outline": "2px solid #010c66" } }, "error": { "input": { "outer": { "backgroundColor": "#fdfaf9", "borderColor": "#a93532" }, "inner": { "backgroundColor": "#fdfaf9" } } }, "disabled": { "input": { "outer": { "backgroundColor": "#f2efef", "borderColor": "#8f8a8a" }, "inner": { "backgroundColor": "#8f8a8a" } }, "label": { "color": "#8f8a8a" } }, "checked": { "input": { "outer": { "backgroundColor": "#010c66", "borderColor": "#010c66" }, "inner": { "backgroundColor": "#f7f1ea" } }, "label": { "color": "#010c66", "fontWeight": "500" } }, "outline": { "input": { "size": "24px", "borderWidth": "2px", "outer": { "backgroundColor": "#fdfaf9", "borderColor": "#010c66" }, "inner": { "backgroundColor": "#fdfaf9" } }, "label": { "borderWidth": "1px", "borderColor": "#8f8a8a", "padding": "1rem 1rem 1rem 3.2rem", "backgroundColor": "#fdfaf9", "color": "#010c66", "borderRadius": "2px" }, "hover": { "input": { "outer": { "backgroundColor": "#fdfaf9", "borderColor": "#010c66" }, "inner": { "backgroundColor": "#fdfaf9" } }, "label": { "color": "#010c66", "backgroundColor": "#eaedf3", "borderColor": "#010c66" } }, "focus": { "label": { "outline": "2px solid #010c66" } }, "error": { "input": { "outer": { "backgroundColor": "#fdfaf9", "borderColor": "#a93532" }, "inner": { "backgroundColor": "#fdfaf9" } }, "label": { "borderColor": "#a93532" } }, "disabled": { "input": { "outer": { "backgroundColor": "#f2efef", "borderColor": "#8f8a8a" }, "inner": { "backgroundColor": "#8f8a8a" } }, "label": { "backgroundColor": "#f2efef", "color": "#8f8a8a", "borderColor": "#8f8a8a" } }, "checked": { "input": { "outer": { "backgroundColor": "#f7f1ea", "borderColor": "#f7f1ea" }, "inner": { "backgroundColor": "#010c66" } }, "label": { "color": "#f7f1ea", "backgroundColor": "#010c66", "borderColor": "#010c66" } } } }, "segmentedControl": { "backgroundColor": "#fdfaf9", "minHeight": "48px", "minWidth": "7.5rem", "padding": "0 .75rem", "border": "1px solid #8f8a8a", "borderColor": "#8f8a8a", "borderRadius": "2px", "borderWidth": "1px solid", "color": "#010c66", "fontFamily": "Help Type Text Web, Helvetica, Arial", "fontSize": "1rem", "fontWeight": "400", "block": { "borderRadius": "2px" }, "hover": { "color": "#010c66", "borderColor": "#010c66", "backgroundColor": "#eaedf3" }, "focus": { "border": "2px solid #0133ad" }, "error": { "borderColor": "#a93532" }, "disabled": { "backgroundColor": "#f2efef", "color": "#8f8a8a", "borderColor": "#8f8a8a", "checked": { "color": "#f7f1ea" } }, "checked": { "color": "#f7f1ea", "backgroundColor": "#010c66", "fontWeight": "500", "borderColor": "#010c66" }, "radio": { "backgroundColor": "#fdfaf9", "border": "1px solid #8f8a8a", "borderColor": "#8f8a8a", "borderWidth": "1px solid", "color": "#010c66", "padding": "0.75rem", "input": { "size": "24px", "borderWidth": "2px", "outer": { "backgroundColor": "#fdfaf9", "borderColor": "#010c66" }, "inner": { "backgroundColor": "#fdfaf9" } }, "hover": { "color": "#010c66", "borderColor": "#010c66", "backgroundColor": "#eaedf3", "input": { "outer": { "backgroundColor": "#fdfaf9", "borderColor": "#010c66" } } }, "disabled": { "backgroundColor": "#f2efef", "borderColor": "#8f8a8a", "color": "#8f8a8a", "input": { "outer": { "backgroundColor": "#f2efef", "borderColor": "#8f8a8a" }, "inner": { "backgroundColor": "#8f8a8a" } }, "checked": { "color": "#f7f1ea", "input": { "outer": { "borderColor": "#f2efef" } } } }, "checked": { "color": "#f7f1ea", "backgroundColor": "#010c66", "borderColor": "#010c66", "input": { "outer": { "backgroundColor": "#f7f1ea", "borderColor": "#f7f1ea" }, "inner": { "backgroundColor": "#010c66", "borderColor": "#8f8a8a" } } }, "error": { "checked": { "input": { "inner": { "backgroundColor": "#010c66", "borderColor": "#010c66" }, "outer": { "backgroundColor": "#a93532" } } }, "input": { "outer": { "backgroundColor": "#fdfaf9", "borderColor": "#a93532" } } }, "block": { "label": { "padding": "0.75rem 3rem 0.75rem" } } } }, "select": { "height": "48px", "color": "#010c66", "padding": "0 12px", "border": "1px solid #8f8a8a", "icon": { "color": "#010c66" }, "borderRadius": "2px", "backgroundColor": "#fdfaf9", "fontFamily": "Help Type Text Web, Helvetica, Arial", "fontSize": "1rem", "fontWeight": "400", "transition": "background-color 0.3s ease, border-color 0.3s ease", "hover": { "backgroundColor": "#eaedf3", "borderColor": "#010c66", "color": "#010c66" }, "disabled": { "borderColor": "#8f8a8a", "backgroundColor": "#f2efef", "color": "#8f8a8a" }, "focus": { "borderColor": "#0133ad", "backgroundColor": "#fdfaf9", "color": "#010c66", "outline": "2px solid #0133ad" }, "error": { "borderColor": "#a93532", "backgroundColor": "#fdfaf9", "color": "#010c66" }, "success": { "borderColor": "#186336", "backgroundColor": "#fdfaf9", "color": "#010c66" } }, "spinner": { "stroke": "#010c66", "inverse": { "stroke": "#f7f1ea" }, "fixed": { "background": "transparent" } }, "tab": { "borderColor": "#8f8a8a", "borderRadius": "0 0 0 0", "borderWidth": "1px", "button": { "fontFamily": "Help Type Text Web, Helvetica, Arial", "fontSize": "1rem", "fontWeight": "400", "color": "#010c66", "textAlign": "left" }, "content": { "fontFamily": "Help Type Text Web, Helvetica, Arial", "fontSize": "1rem", "backgroundColor": "#fdfaf9", "padding": "16px", "borderStyle": "none", "xs": { "borderWidth": "1px", "padding": "0 1rem 1rem" } }, "inactive": { "backgroundColor": "#d9dbe9", "borderWidth": "0 0 1px", "color": "#010c66", "icon": { "color": "#010c66" } }, "selected": { "backgroundColor": "#fdfaf9", "borderWidth": "1px 1px 0", "boxShadow": "none", "color": "#010c66", "fontWeight": "500", "icon": { "color": "#010c66" } }, "hover": { "color": "#010c66", "backgroundColor": "rgba(3,57,139, 0.10)", "icon": { "color": "#010c66" } }, "focus": { "color": "#010c66", "backgroundColor": "#ffffff", "boxShadow": "inset 0 0 0 2px #fff,inset 0 0 0 4px #010c66,inset 0 0 #010c66", "icon": { "color": "#010c66" } }, "icon": { "color": "#010c66" }, "inverse": { "borderColor": "#f2f3f9", "button": { "color": "#f7f1ea" }, "color": "#f7f1ea", "content": { "backgroundColor": "transparent", "color": "#f7f1ea" }, "inactive": { "backgroundColor": "transparent", "color": "#f7f1ea", "icon": { "color": "#f7f1ea" } }, "selected": { "backgroundColor": "transparent", "color": "#f7f1ea", "boxShadow": "none", "icon": { "color": "#f7f1ea" } }, "hover": { "backgroundColor": "rgba(255, 255, 255, 0.20)", "color": "#f7f1ea", "icon": { "color": "#f7f1ea" } }, "icon": { "color": "#f7f1ea" }, "focus": { "icon": { "color": "#f7f1ea" } }, "scroll": { "button": { "backgroundColor": "transparent", "color": "#f7f1ea", "hover": { "backgroundColor": "rgba(255, 255, 255, 0.20)", "color": "#f7f1ea" }, "active": { "backgroundColor": "rgba(255, 255, 255, 0.20)", "color": "#f7f1ea" } } } }, "scroll": { "button": { "backgroundColor": "#d9dbe9", "borderWidth": "1px", "borderRadius": "0 0 0 0", "color": "#010c66", "hover": { "backgroundColor": "rgba(3,57,139, 0.10)", "color": "#010c66" }, "active": { "backgroundColor": "rgba(3,57,139, 0.10)", "color": "#010c66" } } } }, "textarea": { "color": "#010c66", "padding": "12px 16px", "border": "1px solid #8f8a8a", "borderRadius": "2px", "backgroundColor": "#fdfaf9", "fontFamily": "Help Type Text Web, Helvetica, Arial", "fontSize": "1rem", "fontWeight": "400", "transition": "background-color 0.3s ease, border-color 0.3s ease", "placeholder": { "color": "#6b6b6b" }, "hover": { "backgroundColor": "#eaedf3", "borderColor": "#010c66", "color": "#010c66" }, "disabled": { "borderColor": "#8f8a8a", "backgroundColor": "#f2efef", "color": "#8f8a8a" }, "focus": { "borderColor": "#0133ad", "backgroundColor": "#fdfaf9", "color": "#010c66", "outline": "2px solid #0133ad" }, "error": { "borderColor": "#a93532", "outline": "#a93532", "backgroundColor": "#fdfaf9", "color": "#010c66" }, "success": { "borderColor": "#186336", "outline": "#186336", "backgroundColor": "#fdfaf9", "color": "#010c66" } }, "toggle": { "label": { "color": "#010c66", "fontFamily": "Help Type Text Web, Helvetica, Arial", "fontSize": "1rem", "fontWeight": "500", "marginLeft": "1.5rem", "marginRight": ".5rem", "hover": { "color": "#010c66" }, "checked": { "color": "#010c66" }, "error": { "color": "#010c66" }, "disabled": { "color": "#8f8a8a", "checked": { "color": "#8f8a8a" } } }, "thumb": { "backgroundColor": "#010c66", "size": "24px", "hover": { "backgroundColor": "#010c66" }, "checked": { "backgroundColor": "#f7f1ea", "boxShadow": "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(72, 70, 69, 0.1) 0px 1px 6px 0px, rgba(72, 70, 69, 0.06) 0px 1px 2px 0px", "transform": "translateX(22px)" }, "error": { "backgroundColor": "#010c66" }, "disabled": { "backgroundColor": "#8f8a8a", "checked": { "backgroundColor": "#f2efef" } } }, "track": { "width": "56px", "backgroundColor": "#fdfaf9", "border": "1px solid #8f8a8a", "borderRadius": "64px", "hover": { "backgroundColor": "#eaedf3", "border": "1px solid #010c66" }, "focus": { "outline": "2px solid #010c66" }, "checked": { "backgroundColor": "#010c66", "border": "1px solid #010c66" }, "error": { "backgroundColor": "#fdfaf9", "border": "1px solid #a93532" }, "disabled": { "backgroundColor": "#f2efef", "border": "1px solid #8f8a8a", "checked": { "backgroundColor": "#8f8a8a", "border": "1px solid #8f8a8a" } } } }, "tooltip": { "arrow": { "color": "#3b3939" }, "backgroundColor": "#3b3939", "borderColor": "#3b3939", "borderWidth": "1px", "borderRadius": "4px", "boxShadow": "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(72, 70, 69, 0.1) 0px 2px 10px 0px, rgba(72, 70, 69, 0.06) 0px 2px 4px -1px", "color": "#f7f1ea", "fontFamily": "Help Type Text Web, Helvetica, Arial", "fontSize": "1rem", "fontWeight": "400", "lineHeight": "1.5", "padding": "16px 16px" } }