/** * * * * * * * * * * * * * * * * * * * * * * * * * * GroupUi CSS Framework * by GroupUi Team - VW SDC * * * * * * * * * * * * * * * * * * * * * * * * * */ /** * Autogenerated file (2026-01-20T13:49:25.041Z). Do not edit directly */ :root { --groupui-vwgroup-ref-color-black: #000000; --groupui-vwgroup-ref-color-grey-100: #f0f1f2; --groupui-vwgroup-ref-color-grey-200: #dfe2e6; --groupui-vwgroup-ref-color-grey-300: #cacdd2; --groupui-vwgroup-ref-color-grey-400: #a8adb3; --groupui-vwgroup-ref-color-grey-500: #91979c; --groupui-vwgroup-ref-color-grey-600: #7a8084; --groupui-vwgroup-ref-color-grey-700: #636a6d; --groupui-vwgroup-ref-color-grey-800: #4c5356; --groupui-vwgroup-ref-color-grey-900: #34393b; --groupui-vwgroup-ref-color-grey-950: #282c2d; --groupui-vwgroup-ref-color-grey-1000: #1b1e1f; --groupui-vwgroup-ref-color-grey-1100: #131414; --groupui-vwgroup-ref-color-grey-1000-60: #1b1e1f99; --groupui-vwgroup-ref-color-grey-1000-80: #1b1e1fcc; --groupui-vwgroup-ref-color-grey-300-10: #cacdd21a; --groupui-vwgroup-ref-color-grey-300-20: #cacdd233; --groupui-vwgroup-ref-color-grey-600-20: #7a808433; --groupui-vwgroup-ref-color-grey-600-10: #7a80841a; --groupui-vwgroup-ref-color-grey-100-50: #f0f1f280; --groupui-vwgroup-ref-color-grey-700-10: #636a6d1a; --groupui-vwgroup-ref-color-grey-700-20: #636a6d33; --groupui-vwgroup-ref-color-grey-900-50: #34393b80; --groupui-vwgroup-ref-color-grey-500-20: #91979c33; --groupui-vwgroup-ref-color-grey-1000-05: #1b1e1f0d; --groupui-vwgroup-ref-color-grey-1000-10: #1b1e1f1a; --groupui-vwgroup-ref-color-deep-space-blue-50: #e5e9eb; --groupui-vwgroup-ref-color-deep-space-blue-100: #ccd4d6; --groupui-vwgroup-ref-color-deep-space-blue-200: #b2bec2; --groupui-vwgroup-ref-color-deep-space-blue-300: #99a9ad; --groupui-vwgroup-ref-color-deep-space-blue-400: #809399; --groupui-vwgroup-ref-color-deep-space-blue-500: #667d85; --groupui-vwgroup-ref-color-deep-space-blue-600: #4d6870; --groupui-vwgroup-ref-color-deep-space-blue-700: #33525c; --groupui-vwgroup-ref-color-deep-space-blue-800: #1b3e4a; --groupui-vwgroup-ref-color-deep-space-blue-900: #002733; --groupui-vwgroup-ref-color-deep-space-blue-1000: #00141f; --groupui-vwgroup-ref-color-deep-space-blue-800-20: #1b3e4a33; --groupui-vwgroup-ref-color-deep-space-blue-800-10: #1b3e4a1a; --groupui-vwgroup-ref-color-deep-space-blue-900-80: #002733cc; --groupui-vwgroup-ref-color-vivid-green-100: #e3f2f1; --groupui-vwgroup-ref-color-vivid-green-200: #abdbd6; --groupui-vwgroup-ref-color-vivid-green-300: #77c4bd; --groupui-vwgroup-ref-color-vivid-green-400: #37a99e; --groupui-vwgroup-ref-color-vivid-green-450: #099c91; --groupui-vwgroup-ref-color-vivid-green-480: #0f9489; --groupui-vwgroup-ref-color-vivid-green-500: #008c82; --groupui-vwgroup-ref-color-vivid-green-600: #008075; --groupui-vwgroup-ref-color-vivid-green-700: #006058; --groupui-vwgroup-ref-color-vivid-green-800: #004942; --groupui-vwgroup-ref-color-vivid-green-900: #00332d; --groupui-vwgroup-ref-color-vivid-green-1000: #001f16; --groupui-vwgroup-ref-color-vivid-green-400-10: #37a99e1a; --groupui-vwgroup-ref-color-vivid-green-400-20: #37a99e33; --groupui-vwgroup-ref-color-vivid-green-600-10: #0080751a; --groupui-vwgroup-ref-color-vivid-green-600-20: #00807533; --groupui-vwgroup-ref-color-vivid-green-300-10: #77c4bd1a; --groupui-vwgroup-ref-color-vivid-green-300-20: #77c4bd33; --groupui-vwgroup-ref-color-vivid-green-400-15: #37a99e26; --groupui-vwgroup-ref-color-vivid-green-600-03: #00807508; --groupui-vwgroup-ref-color-vivid-green-600-05: #0080750d; --groupui-vwgroup-ref-color-transparent: transparent; --groupui-vwgroup-ref-color-pure-white: #ffffff; --groupui-vwgroup-ref-color-pure-white-10: #ffffff1a; --groupui-vwgroup-ref-color-pure-white-20: #ffffff33; --groupui-vwgroup-ref-color-pure-white-80: #ffffffcc; --groupui-vwgroup-ref-color-pure-white-90: #ffffffe6; --groupui-vwgroup-ref-color-system-red-100: #ffdbdb; --groupui-vwgroup-ref-color-system-red-200: #ffbdbd; --groupui-vwgroup-ref-color-system-red-300: #ff9e9e; --groupui-vwgroup-ref-color-system-red-400: #ff7a7a; --groupui-vwgroup-ref-color-system-red-500: #f2595a; --groupui-vwgroup-ref-color-system-red-600: #f03d3e; --groupui-vwgroup-ref-color-system-red-700: #e51f26; --groupui-vwgroup-ref-color-system-red-800: #d01628; --groupui-vwgroup-ref-color-system-red-900: #b50116; --groupui-vwgroup-ref-color-system-red-1000: #970001; --groupui-vwgroup-ref-color-system-red-500-10: #f2595a1a; --groupui-vwgroup-ref-color-system-red-500-20: #f2595a33; --groupui-vwgroup-ref-color-system-red-700-10: #e51f261a; --groupui-vwgroup-ref-color-system-red-700-20: #e51f2633; --groupui-vwgroup-ref-color-system-red-700-05: #e51f260d; --groupui-vwgroup-ref-color-system-red-500-05: #f2595a0d; --groupui-vwgroup-ref-color-system-orange-100: #f9e6cb; --groupui-vwgroup-ref-color-system-orange-200: #fadaa9; --groupui-vwgroup-ref-color-system-orange-300: #fbcd87; --groupui-vwgroup-ref-color-system-orange-400: #fcc167; --groupui-vwgroup-ref-color-system-orange-500: #fdb453; --groupui-vwgroup-ref-color-system-orange-600: #ffa538; --groupui-vwgroup-ref-color-system-orange-700: #ff9a24; --groupui-vwgroup-ref-color-system-orange-800: #ff8c05; --groupui-vwgroup-ref-color-system-orange-900: #e57700; --groupui-vwgroup-ref-color-system-orange-1000: #cc6900; --groupui-vwgroup-ref-color-system-orange-1100: #b75e00; --groupui-vwgroup-ref-color-system-orange-1200: #ab5800; --groupui-vwgroup-ref-color-system-orange-1300: #994f00; --groupui-vwgroup-ref-color-system-orange-700-10: #ff9a241a; --groupui-vwgroup-ref-color-system-orange-700-20: #ff9a2433; --groupui-vwgroup-ref-color-system-orange-800-10: #ff8c051a; --groupui-vwgroup-ref-color-system-orange-800-20: #ff8c0533; --groupui-vwgroup-ref-color-system-orange-500-10: #fdb4531a; --groupui-vwgroup-ref-color-system-orange-500-20: #fdb45333; --groupui-vwgroup-ref-color-system-orange-100-03: #f9e6cb08; --groupui-vwgroup-ref-color-system-orange-100-06: #f9e6cb0f; --groupui-vwgroup-ref-color-system-green-100: #dbf0de; --groupui-vwgroup-ref-color-system-green-200: #b4e4ba; --groupui-vwgroup-ref-color-system-green-300: #83d88e; --groupui-vwgroup-ref-color-system-green-400: #6ac87a; --groupui-vwgroup-ref-color-system-green-500: #42b85a; --groupui-vwgroup-ref-color-system-green-600: #08a334; --groupui-vwgroup-ref-color-system-green-700: #008724; --groupui-vwgroup-ref-color-system-green-800: #0a7a2d; --groupui-vwgroup-ref-color-system-green-900: #005820; --groupui-vwgroup-ref-color-system-green-1000: #004219; --groupui-vwgroup-ref-color-system-green-500-10: #42b85a1a; --groupui-vwgroup-ref-color-system-green-500-20: #42b85a33; --groupui-vwgroup-ref-color-system-green-700-10: #0087241a; --groupui-vwgroup-ref-color-system-green-700-20: #00872433; --groupui-vwgroup-ref-color-electric-neon-100: #c2fe06; --groupui-vwgroup-ref-color-electric-neon-200: #a6e400; --groupui-vwgroup-ref-color-electric-neon-300: #8bca00; --groupui-vwgroup-ref-color-electric-neon-400: #70b100; --groupui-vwgroup-ref-color-electric-neon-500: #559800; --groupui-vwgroup-ref-color-electric-neon-600: #3a8000; --groupui-vwgroup-ref-color-electric-neon-700: #216800; --groupui-vwgroup-ref-color-electric-neon-800: #105100; --groupui-vwgroup-ref-color-electric-neon-900: #143900; --groupui-vwgroup-ref-color-electric-neon-1000: #0c2300; --groupui-vwgroup-ref-color-electric-neon-100-10: #c2fe061a; --groupui-vwgroup-ref-color-electric-neon-100-20: #c2fe0633; --groupui-vwgroup-ref-color-coral-100: #ffc0ad; --groupui-vwgroup-ref-color-coral-200: #ffa08e; --groupui-vwgroup-ref-color-coral-300: #f58272; --groupui-vwgroup-ref-color-coral-400: #e67364; --groupui-vwgroup-ref-color-coral-500: #d66151; --groupui-vwgroup-ref-color-coral-600: #c45246; --groupui-vwgroup-ref-color-coral-700: #ad4238; --groupui-vwgroup-ref-color-coral-800: #952d26; --groupui-vwgroup-ref-color-coral-900: #680d0f; --groupui-vwgroup-ref-color-coral-1000: #450203; --groupui-vwgroup-ref-color-coral-400-20: #e6736433; --groupui-vwgroup-ref-color-orange-100: #ffde6f; --groupui-vwgroup-ref-color-orange-200: #febd4f; --groupui-vwgroup-ref-color-orange-300: #faaa3c; --groupui-vwgroup-ref-color-orange-400: #f29b21; --groupui-vwgroup-ref-color-orange-500: #cd7f0a; --groupui-vwgroup-ref-color-orange-600: #aa6703; --groupui-vwgroup-ref-color-orange-700: #864900; --groupui-vwgroup-ref-color-orange-800: #6d3400; --groupui-vwgroup-ref-color-orange-900: #572000; --groupui-vwgroup-ref-color-orange-1000: #430700; --groupui-vwgroup-ref-color-orange-300-20: #faaa3c33; --groupui-vwgroup-ref-color-beige-100: #ffedc4; --groupui-vwgroup-ref-color-beige-200: #fad2aa; --groupui-vwgroup-ref-color-beige-300: #dab48d; --groupui-vwgroup-ref-color-beige-400: #c09b75; --groupui-vwgroup-ref-color-beige-500: #a6835e; --groupui-vwgroup-ref-color-beige-600: #8d6c48; --groupui-vwgroup-ref-color-beige-700: #755633; --groupui-vwgroup-ref-color-beige-800: #5d411f; --groupui-vwgroup-ref-color-beige-900: #462c0b; --groupui-vwgroup-ref-color-beige-1000: #311800; --groupui-vwgroup-ref-color-beige-200-20: #fad2aa33; --groupui-vwgroup-ref-color-blue-100: #c1f3ff; --groupui-vwgroup-ref-color-blue-200: #a5d7fe; --groupui-vwgroup-ref-color-blue-300: #8cbee6; --groupui-vwgroup-ref-color-blue-400: #72a5cb; --groupui-vwgroup-ref-color-blue-500: #598cb2; --groupui-vwgroup-ref-color-blue-600: #40759a; --groupui-vwgroup-ref-color-blue-700: #255f82; --groupui-vwgroup-ref-color-blue-800: #04496a; --groupui-vwgroup-ref-color-blue-900: #003352; --groupui-vwgroup-ref-color-blue-1000: #001e3b; --groupui-vwgroup-ref-color-blue-300-20: #8cbee633; --groupui-vwgroup-ref-color-violet-100: #ffcfff; --groupui-vwgroup-ref-color-violet-200: #f7aeec; --groupui-vwgroup-ref-color-violet-300: #dd96d3; --groupui-vwgroup-ref-color-violet-400: #c882be; --groupui-vwgroup-ref-color-violet-500: #ab67a2; --groupui-vwgroup-ref-color-violet-600: #93518a; --groupui-vwgroup-ref-color-violet-700: #7b3b73; --groupui-vwgroup-ref-color-violet-800: #64255d; --groupui-vwgroup-ref-color-violet-900: #4d0d48; --groupui-vwgroup-ref-color-violet-1000: #330030; --groupui-vwgroup-ref-color-violet-400-20: #c882be33; --groupui-vwgroup-ref-color-lavender-100: #f7e8ff; --groupui-vwgroup-ref-color-lavender-200: #dccdf0; --groupui-vwgroup-ref-color-lavender-300: #c1b2d4; --groupui-vwgroup-ref-color-lavender-400: #a799ba; --groupui-vwgroup-ref-color-lavender-500: #8e81a1; --groupui-vwgroup-ref-color-lavender-600: #766988; --groupui-vwgroup-ref-color-lavender-700: #5f5270; --groupui-vwgroup-ref-color-lavender-800: #483d59; --groupui-vwgroup-ref-color-lavender-900: #332843; --groupui-vwgroup-ref-color-lavender-1000: #1e152e; --groupui-vwgroup-ref-color-lavender-200-20: #dccdf033; --groupui-vwgroup-ref-color-pure-white-30: #ffffff4d; --groupui-vwgroup-ref-color-black-20: #00000033; --groupui-vwgroup-ref-color-pure-white-60: #ffffff99; --groupui-vwgroup-ref-color-pure-white-40: #ffffff66; --groupui-vwgroup-ref-color-black-60: #00000099; --groupui-vwgroup-ref-color-system-blue-100: #cce6f9; --groupui-vwgroup-ref-color-system-blue-200: #a9d8fa; --groupui-vwgroup-ref-color-system-blue-300: #8bc8f4; --groupui-vwgroup-ref-color-system-blue-400: #68b3e8; --groupui-vwgroup-ref-color-system-blue-500: #489edb; --groupui-vwgroup-ref-color-system-blue-600: #278cd3; --groupui-vwgroup-ref-color-system-blue-700: #1477bd; --groupui-vwgroup-ref-color-system-blue-800: #196195; --groupui-vwgroup-ref-color-system-blue-900: #104870; --groupui-vwgroup-ref-color-system-blue-1000: #0e394e; --groupui-vwgroup-ref-color-system-blue-700-10: #1477bd1a; --groupui-vwgroup-ref-color-system-blue-700-20: #1477bd33; --groupui-vwgroup-ref-color-system-blue-500-10: #489edb1a; --groupui-vwgroup-ref-color-system-blue-500-20: #489edb33; --groupui-vwgroup-ref-color-pure-white-70: #ffffffb3; --groupui-vwgroup-ref-color-black-80: #000000cc; --groupui-vwgroup-ref-letter-spacing-0: 0px; --groupui-vwgroup-ref-letter-spacing-18: 1.8px; --groupui-vwgroup-ref-border-width-0: 0px; --groupui-vwgroup-ref-border-width-1: 1px; --groupui-vwgroup-ref-border-width-2: 2px; --groupui-vwgroup-ref-border-width-3: 3px; --groupui-vwgroup-ref-border-width-4: 4px; --groupui-vwgroup-ref-border-width-5: 5px; --groupui-vwgroup-ref-border-width-6: 6px; --groupui-vwgroup-ref-spacing-0: 0px; --groupui-vwgroup-ref-spacing-1: 1px; --groupui-vwgroup-ref-spacing-2: 2px; --groupui-vwgroup-ref-spacing-4: 4px; --groupui-vwgroup-ref-spacing-6: 6px; --groupui-vwgroup-ref-spacing-8: 8px; --groupui-vwgroup-ref-spacing-12: 12px; --groupui-vwgroup-ref-spacing-16: 16px; --groupui-vwgroup-ref-spacing-20: 20px; --groupui-vwgroup-ref-spacing-24: 24px; --groupui-vwgroup-ref-spacing-28: 28px; --groupui-vwgroup-ref-spacing-32: 32px; --groupui-vwgroup-ref-spacing-36: 36px; --groupui-vwgroup-ref-spacing-40: 40px; --groupui-vwgroup-ref-spacing-48: 48px; --groupui-vwgroup-ref-spacing-56: 56px; --groupui-vwgroup-ref-spacing-64: 64px; --groupui-vwgroup-ref-spacing-72: 72px; --groupui-vwgroup-ref-spacing-96: 96px; --groupui-vwgroup-ref-spacing-112: 112px; --groupui-vwgroup-ref-spacing-136: 136px; --groupui-vwgroup-ref-spacing-320: 320px; --groupui-vwgroup-ref-spacing-640: 640px; --groupui-vwgroup-ref-media-query-320: 320px; --groupui-vwgroup-ref-media-query-560: 560px; --groupui-vwgroup-ref-media-query-960: 960px; --groupui-vwgroup-ref-media-query-1280: 1280px; --groupui-vwgroup-ref-media-query-1620: 1620px; --groupui-vwgroup-ref-border-radius-0: 0px; --groupui-vwgroup-ref-border-radius-4: 4px; --groupui-vwgroup-ref-border-radius-8: 8px; --groupui-vwgroup-ref-border-radius-9999: 9999px; --groupui-vwgroup-ref-font-size-8: 8px; --groupui-vwgroup-ref-font-size-10: 10px; --groupui-vwgroup-ref-font-size-12: 12px; --groupui-vwgroup-ref-font-size-14: 14px; --groupui-vwgroup-ref-font-size-15: 15px; --groupui-vwgroup-ref-font-size-16: 16px; --groupui-vwgroup-ref-font-size-17: 17px; --groupui-vwgroup-ref-font-size-18: 18px; --groupui-vwgroup-ref-font-size-20: 20px; --groupui-vwgroup-ref-font-size-22: 22px; --groupui-vwgroup-ref-font-size-24: 24px; --groupui-vwgroup-ref-font-size-26: 26px; --groupui-vwgroup-ref-font-size-28: 28px; --groupui-vwgroup-ref-font-size-30: 30px; --groupui-vwgroup-ref-font-size-32: 32px; --groupui-vwgroup-ref-font-size-34: 34px; --groupui-vwgroup-ref-font-size-36: 36px; --groupui-vwgroup-ref-font-size-40: 40px; --groupui-vwgroup-ref-font-size-48: 48px; --groupui-vwgroup-ref-font-size-50: 50px; --groupui-vwgroup-ref-font-size-60: 60px; --groupui-vwgroup-ref-font-size-72: 72px; --groupui-vwgroup-ref-icon-size-16: 16px; --groupui-vwgroup-ref-icon-size-24: 24px; --groupui-vwgroup-ref-icon-size-32: 32px; --groupui-vwgroup-ref-icon-size-48: 48px; --groupui-vwgroup-ref-z-index-100: 100; --groupui-vwgroup-ref-z-index-200: 200; --groupui-vwgroup-ref-z-index-300: 300; --groupui-vwgroup-ref-z-index-350: 350; --groupui-vwgroup-ref-z-index-400: 400; --groupui-vwgroup-ref-z-index-500: 500; --groupui-vwgroup-ref-z-index-600: 600; --groupui-vwgroup-ref-z-index-700: 700; --groupui-vwgroup-ref-z-index-800: 800; --groupui-vwgroup-ref-z-index-900: 900; --groupui-vwgroup-ref-opacity-0: 0; --groupui-vwgroup-ref-opacity-10: 0.1; --groupui-vwgroup-ref-opacity-20: 0.2; --groupui-vwgroup-ref-opacity-30: 0.3; --groupui-vwgroup-ref-opacity-40: 0.4; --groupui-vwgroup-ref-opacity-50: 0.5; --groupui-vwgroup-ref-opacity-60: 0.6; --groupui-vwgroup-ref-opacity-70: 0.7; --groupui-vwgroup-ref-opacity-80: 0.8; --groupui-vwgroup-ref-opacity-90: 0.9; --groupui-vwgroup-ref-opacity-100: 1; --groupui-vwgroup-ref-line-height-100: 1; --groupui-vwgroup-ref-line-height-110: 1.1; --groupui-vwgroup-ref-line-height-114: 1.14; --groupui-vwgroup-ref-line-height-120: 1.2; --groupui-vwgroup-ref-line-height-130: 1.3; --groupui-vwgroup-ref-line-height-140: 1.4; --groupui-vwgroup-ref-line-height-150: 1.5; --groupui-vwgroup-ref-line-height-178: 1.78; --groupui-vwgroup-ref-stroke-style-solid: solid; --groupui-vwgroup-ref-stroke-style-dashed: dashed; --groupui-vwgroup-ref-font-family-the-group-text: TheGroupTEXT; --groupui-vwgroup-ref-font-family-the-group-head: TheGroupHEAD; --groupui-vwgroup-ref-font-weight-300: 300; --groupui-vwgroup-ref-font-weight-400: 400; --groupui-vwgroup-ref-font-weight-500: 500; --groupui-vwgroup-ref-font-weight-700: 700; --groupui-vwgroup-ref-duration-0: 0s; --groupui-vwgroup-ref-duration-120: 0.12s; --groupui-vwgroup-ref-duration-160: 0.16s; --groupui-vwgroup-ref-duration-240: 0.24s; --groupui-vwgroup-ref-duration-320: 0.32s; --groupui-vwgroup-ref-duration-480: 0.48s; --groupui-vwgroup-ref-duration-640: 0.64s; --groupui-vwgroup-ref-duration-2000: 2s; --groupui-vwgroup-ref-cubic-bezier-ease: cubic-bezier(0.25, 0.1, 0.25, 1); --groupui-vwgroup-ref-cubic-bezier-ease-in: cubic-bezier(0.42, 0, 1, 1); --groupui-vwgroup-ref-cubic-bezier-ease-out: cubic-bezier(0, 0, 0.58, 1); --groupui-vwgroup-ref-cubic-bezier-ease-in-out: cubic-bezier( 0.42, 0, 0.58, 1 ); --groupui-vwgroup-ref-cubic-bezier-linear: cubic-bezier(0, 0, 1, 1); --groupui-vwgroup-ref-shadow-0: 0px 0px 0px 0px #00000000; --groupui-vwgroup-ref-shadow-8: 0px 4px 8px 1px #00000033; } :root { --groupui-sys-border-radius-xl: var( --groupui-vwgroup-ref-border-radius-9999 ); --groupui-sys-border-radius-none: var( --groupui-vwgroup-ref-border-radius-0 ); --groupui-sys-border-radius-s: var(--groupui-vwgroup-ref-border-radius-4); --groupui-sys-border-radius-m: var(--groupui-vwgroup-ref-border-radius-8); --groupui-sys-border-radius-full: var( --groupui-vwgroup-ref-border-radius-9999 ); --groupui-sys-icon-size-l: var(--groupui-vwgroup-ref-icon-size-32); --groupui-sys-icon-size-m: var(--groupui-vwgroup-ref-icon-size-24); --groupui-sys-icon-size-s: var(--groupui-vwgroup-ref-icon-size-16); --groupui-sys-icon-size-xl: var(--groupui-vwgroup-ref-icon-size-48); --groupui-sys-media-query-s: var(--groupui-vwgroup-ref-media-query-320); --groupui-sys-media-query-m: var(--groupui-vwgroup-ref-media-query-560); --groupui-sys-media-query-l: var(--groupui-vwgroup-ref-media-query-960); --groupui-sys-media-query-xl: var(--groupui-vwgroup-ref-media-query-1280); --groupui-sys-media-query-xxl: var(--groupui-vwgroup-ref-media-query-1620); --groupui-sys-border-width-none: var(--groupui-vwgroup-ref-border-width-0); --groupui-sys-border-width-s: var(--groupui-vwgroup-ref-border-width-1); --groupui-sys-border-width-m: var(--groupui-vwgroup-ref-border-width-2); --groupui-sys-border-width-card-level-2: var( --groupui-vwgroup-ref-border-width-1 ); --groupui-sys-border-width-navigation: var( --groupui-vwgroup-ref-border-width-1 ); --groupui-sys-border-width-l: var(--groupui-vwgroup-ref-border-width-3); --groupui-sys-border-width-xl: var(--groupui-vwgroup-ref-border-width-4); --groupui-sys-border-width-xxl: var(--groupui-vwgroup-ref-border-width-5); --groupui-sys-border-width-xxxl: var(--groupui-vwgroup-ref-border-width-6); --groupui-sys-spacing-0: var(--groupui-vwgroup-ref-spacing-0); --groupui-sys-spacing-25: var(--groupui-vwgroup-ref-spacing-1); --groupui-sys-spacing-50: var(--groupui-vwgroup-ref-spacing-2); --groupui-sys-spacing-100: var(--groupui-vwgroup-ref-spacing-4); --groupui-sys-spacing-150: var(--groupui-vwgroup-ref-spacing-6); --groupui-sys-spacing-200: var(--groupui-vwgroup-ref-spacing-8); --groupui-sys-spacing-300: var(--groupui-vwgroup-ref-spacing-12); --groupui-sys-spacing-400: var(--groupui-vwgroup-ref-spacing-16); --groupui-sys-spacing-500: var(--groupui-vwgroup-ref-spacing-20); --groupui-sys-spacing-600: var(--groupui-vwgroup-ref-spacing-24); --groupui-sys-spacing-700: var(--groupui-vwgroup-ref-spacing-28); --groupui-sys-spacing-800: var(--groupui-vwgroup-ref-spacing-32); --groupui-sys-spacing-900: var(--groupui-vwgroup-ref-spacing-36); --groupui-sys-spacing-1000: var(--groupui-vwgroup-ref-spacing-40); --groupui-sys-spacing-1200: var(--groupui-vwgroup-ref-spacing-48); --groupui-sys-spacing-1400: var(--groupui-vwgroup-ref-spacing-56); --groupui-sys-spacing-1600: var(--groupui-vwgroup-ref-spacing-64); --groupui-sys-spacing-1800: var(--groupui-vwgroup-ref-spacing-72); --groupui-sys-spacing-2400: var(--groupui-vwgroup-ref-spacing-96); --groupui-sys-spacing-2800: var(--groupui-vwgroup-ref-spacing-112); --groupui-sys-spacing-3400: var(--groupui-vwgroup-ref-spacing-136); --groupui-sys-spacing-8000: var(--groupui-vwgroup-ref-spacing-320); --groupui-sys-spacing-16000: var(--groupui-vwgroup-ref-spacing-640); --groupui-sys-z-index-content-layer: var(--groupui-vwgroup-ref-z-index-100); --groupui-sys-z-index-navigation: var(--groupui-vwgroup-ref-z-index-300); --groupui-sys-z-index-popover: var(--groupui-vwgroup-ref-z-index-400); --groupui-sys-z-index-toast: var(--groupui-vwgroup-ref-z-index-600); --groupui-sys-z-index-backdrop: var(--groupui-vwgroup-ref-z-index-700); --groupui-sys-z-index-modal: var(--groupui-vwgroup-ref-z-index-800); --groupui-sys-z-index-process-indicator: var( --groupui-vwgroup-ref-z-index-900 ); --groupui-sys-z-index-tooltip: var(--groupui-vwgroup-ref-z-index-500); --groupui-sys-z-index-fab: var(--groupui-vwgroup-ref-z-index-350); --groupui-sys-line-height-s: var(--groupui-vwgroup-ref-line-height-110); --groupui-sys-line-height-m: var(--groupui-vwgroup-ref-line-height-120); --groupui-sys-line-height-l: var(--groupui-vwgroup-ref-line-height-130); --groupui-sys-line-height-xl: var(--groupui-vwgroup-ref-line-height-140); --groupui-sys-line-height-xxl: var(--groupui-vwgroup-ref-line-height-150); --groupui-sys-line-height-xs: var(--groupui-vwgroup-ref-line-height-100); --groupui-sys-opacity-0: var(--groupui-vwgroup-ref-opacity-0); --groupui-sys-opacity-10: var(--groupui-vwgroup-ref-opacity-10); --groupui-sys-opacity-20: var(--groupui-vwgroup-ref-opacity-20); --groupui-sys-opacity-30: var(--groupui-vwgroup-ref-opacity-30); --groupui-sys-opacity-40: var(--groupui-vwgroup-ref-opacity-40); --groupui-sys-opacity-50: var(--groupui-vwgroup-ref-opacity-50); --groupui-sys-opacity-60: var(--groupui-vwgroup-ref-opacity-60); --groupui-sys-opacity-70: var(--groupui-vwgroup-ref-opacity-70); --groupui-sys-opacity-80: var(--groupui-vwgroup-ref-opacity-80); --groupui-sys-opacity-90: var(--groupui-vwgroup-ref-opacity-90); --groupui-sys-opacity-100: var(--groupui-vwgroup-ref-opacity-100); --groupui-sys-duration-none: var(--groupui-vwgroup-ref-duration-0); --groupui-sys-duration-slow-1: var(--groupui-vwgroup-ref-duration-640); --groupui-sys-duration-slow-2: var(--groupui-vwgroup-ref-duration-480); --groupui-sys-duration-medium-1: var(--groupui-vwgroup-ref-duration-320); --groupui-sys-duration-medium-2: var(--groupui-vwgroup-ref-duration-240); --groupui-sys-duration-fast-1: var(--groupui-vwgroup-ref-duration-160); --groupui-sys-duration-fast-2: var(--groupui-vwgroup-ref-duration-120); --groupui-sys-duration-spinner: var(--groupui-vwgroup-ref-duration-2000); --groupui-sys-font-family-secondary: var( --groupui-vwgroup-ref-font-family-the-group-head ); --groupui-sys-font-family-primary: var( --groupui-vwgroup-ref-font-family-the-group-text ); --groupui-sys-stroke-style-primary: var( --groupui-vwgroup-ref-stroke-style-solid ); --groupui-sys-stroke-style-secondary: var( --groupui-vwgroup-ref-stroke-style-dashed ); --groupui-sys-cubic-bezier-linear: var( --groupui-vwgroup-ref-cubic-bezier-linear ); --groupui-sys-cubic-bezier-ease-in-out: var( --groupui-vwgroup-ref-cubic-bezier-ease-in-out ); --groupui-sys-cubic-bezier-ease-out: var( --groupui-vwgroup-ref-cubic-bezier-ease-out ); --groupui-sys-cubic-bezier-ease-in: var( --groupui-vwgroup-ref-cubic-bezier-ease-in ); --groupui-sys-cubic-bezier-ease: var( --groupui-vwgroup-ref-cubic-bezier-ease ); --groupui-sys-shadow-none: var(--groupui-vwgroup-ref-shadow-0); --groupui-sys-shadow-m: var(--groupui-vwgroup-ref-shadow-8); --groupui-sys-shadow-navigation: var(--groupui-vwgroup-ref-shadow-0); --groupui-sys-shadow-tooltip: var(--groupui-vwgroup-ref-shadow-8); --groupui-sys-shadow-modal: var(--groupui-vwgroup-ref-shadow-8); --groupui-sys-shadow-card-level-1-hover: var( --groupui-vwgroup-ref-shadow-8 ); --groupui-sys-shadow-card-level-1-default: var( --groupui-vwgroup-ref-shadow-0 ); --groupui-sys-shadow-card-level-2-default: var( --groupui-vwgroup-ref-shadow-0 ); --groupui-sys-shadow-card-level-2-hover: var( --groupui-vwgroup-ref-shadow-8 ); --groupui-sys-shadow-card-level-3-default: var( --groupui-vwgroup-ref-shadow-0 ); --groupui-sys-shadow-card-level-3-hover: var( --groupui-vwgroup-ref-shadow-8 ); --groupui-sys-shadow-toast: var(--groupui-vwgroup-ref-shadow-8); --groupui-sys-shadow-popover: var(--groupui-vwgroup-ref-shadow-8); --groupui-sys-color-shadow-0: var(--groupui-vwgroup-ref-color-transparent); --groupui-sys-color-shadow-8: var(--groupui-vwgroup-ref-color-black-20); --groupui-sys-color-brand-core-inverse: var( --groupui-vwgroup-ref-color-pure-white ); --groupui-sys-color-brand-core: var( --groupui-vwgroup-ref-color-deep-space-blue-900 ); --groupui-sys-color-link-secondary-visited-pressed-inverse: var( --groupui-vwgroup-ref-color-violet-400 ); --groupui-sys-color-link-secondary-visited-hover-inverse: var( --groupui-vwgroup-ref-color-violet-300 ); --groupui-sys-color-link-secondary-visited-default-inverse: var( --groupui-vwgroup-ref-color-violet-200 ); --groupui-sys-color-link-secondary-visited-pressed: var( --groupui-vwgroup-ref-color-violet-1000 ); --groupui-sys-color-link-secondary-visited-hover: var( --groupui-vwgroup-ref-color-violet-900 ); --groupui-sys-color-link-secondary-visited-default: var( --groupui-vwgroup-ref-color-violet-800 ); --groupui-sys-color-link-secondary-unvisited-pressed-inverse: var( --groupui-vwgroup-ref-color-pure-white-60 ); --groupui-sys-color-link-secondary-unvisited-hover-inverse: var( --groupui-vwgroup-ref-color-pure-white-80 ); --groupui-sys-color-link-secondary-unvisited-default-inverse: var( --groupui-vwgroup-ref-color-pure-white ); --groupui-sys-color-link-secondary-unvisited-pressed: var( --groupui-vwgroup-ref-color-grey-1000-60 ); --groupui-sys-color-link-secondary-unvisited-hover: var( --groupui-vwgroup-ref-color-grey-1000-80 ); --groupui-sys-color-link-secondary-unvisited-default: var( --groupui-vwgroup-ref-color-grey-1000 ); --groupui-sys-color-link-primary-visited-pressed-inverse: var( --groupui-vwgroup-ref-color-violet-400 ); --groupui-sys-color-link-primary-visited-hover-inverse: var( --groupui-vwgroup-ref-color-violet-300 ); --groupui-sys-color-link-primary-visited-default-inverse: var( --groupui-vwgroup-ref-color-violet-200 ); --groupui-sys-color-link-primary-visited-pressed: var( --groupui-vwgroup-ref-color-violet-1000 ); --groupui-sys-color-link-primary-visited-hover: var( --groupui-vwgroup-ref-color-violet-900 ); --groupui-sys-color-link-primary-visited-default: var( --groupui-vwgroup-ref-color-violet-800 ); --groupui-sys-color-link-primary-unvisited-pressed-inverse: var( --groupui-vwgroup-ref-color-pure-white-80 ); --groupui-sys-color-link-primary-unvisited-hover-inverse: var( --groupui-vwgroup-ref-color-pure-white-90 ); --groupui-sys-color-link-primary-unvisited-default-inverse: var( --groupui-vwgroup-ref-color-pure-white ); --groupui-sys-color-link-primary-unvisited-pressed: var( --groupui-vwgroup-ref-color-vivid-green-800 ); --groupui-sys-color-link-primary-unvisited-hover: var( --groupui-vwgroup-ref-color-vivid-green-700 ); --groupui-sys-color-link-primary-unvisited-default: var( --groupui-vwgroup-ref-color-vivid-green-600 ); --groupui-sys-color-text-weakest-inverse: var( --groupui-vwgroup-ref-color-pure-white-40 ); --groupui-sys-color-text-weaker-inverse: var( --groupui-vwgroup-ref-color-pure-white-60 ); --groupui-sys-color-text-weak-inverse: var( --groupui-vwgroup-ref-color-pure-white-80 ); --groupui-sys-color-text-normal-inverse: var( --groupui-vwgroup-ref-color-pure-white ); --groupui-sys-color-text-weakest: var(--groupui-vwgroup-ref-color-grey-400); --groupui-sys-color-text-weaker: var(--groupui-vwgroup-ref-color-grey-700); --groupui-sys-color-text-weak: var(--groupui-vwgroup-ref-color-grey-800); --groupui-sys-color-text-normal: var(--groupui-vwgroup-ref-color-grey-1000); --groupui-sys-color-line-ghost: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-line-silent-inverse: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-line-silent: var( --groupui-vwgroup-ref-color-pure-white ); --groupui-sys-color-line-weak-inverse: var( --groupui-vwgroup-ref-color-pure-white-20 ); --groupui-sys-color-line-weak: var(--groupui-vwgroup-ref-color-grey-200); --groupui-sys-color-line-ghost-inverse: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-on-light-subtle-default: var( --groupui-vwgroup-ref-color-grey-1000 ); --groupui-sys-color-on-light-subtle-default-inverse: var( --groupui-vwgroup-ref-color-pure-white ); --groupui-sys-color-on-light-basic-default: var( --groupui-vwgroup-ref-color-grey-1000 ); --groupui-sys-color-on-light-basic-default-inverse: var( --groupui-vwgroup-ref-color-grey-1000 ); --groupui-sys-color-light-subtle-pressed: var( --groupui-vwgroup-ref-color-grey-300-20 ); --groupui-sys-color-light-subtle-hover: var( --groupui-vwgroup-ref-color-grey-300-10 ); --groupui-sys-color-light-subtle-default: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-light-subtle-default-inverse: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-light-subtle-hover-inverse: var( --groupui-vwgroup-ref-color-pure-white-10 ); --groupui-sys-color-light-subtle-pressed-inverse: var( --groupui-vwgroup-ref-color-pure-white-20 ); --groupui-sys-color-light-basic-pressed: var( --groupui-vwgroup-ref-color-grey-400 ); --groupui-sys-color-light-basic-hover: var( --groupui-vwgroup-ref-color-grey-300 ); --groupui-sys-color-light-basic-default: var( --groupui-vwgroup-ref-color-grey-200 ); --groupui-sys-color-light-basic-default-inverse: var( --groupui-vwgroup-ref-color-grey-200 ); --groupui-sys-color-light-basic-hover-inverse: var( --groupui-vwgroup-ref-color-grey-300 ); --groupui-sys-color-light-basic-pressed-inverse: var( --groupui-vwgroup-ref-color-grey-400 ); --groupui-sys-color-on-neutral-basic-default: var( --groupui-vwgroup-ref-color-pure-white ); --groupui-sys-color-neutral-subtle-pressed: var( --groupui-vwgroup-ref-color-grey-600-20 ); --groupui-sys-color-neutral-subtle-hover: var( --groupui-vwgroup-ref-color-grey-600-10 ); --groupui-sys-color-neutral-subtle-default: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-neutral-basic-pressed: var( --groupui-vwgroup-ref-color-grey-900 ); --groupui-sys-color-neutral-basic-hover: var( --groupui-vwgroup-ref-color-grey-800 ); --groupui-sys-color-neutral-basic-default: var( --groupui-vwgroup-ref-color-grey-700 ); --groupui-sys-color-neutral-basic-default-inverse: var( --groupui-vwgroup-ref-color-grey-300 ); --groupui-sys-color-neutral-weak-default: var( --groupui-vwgroup-ref-color-grey-200 ); --groupui-sys-color-on-information-basic-default: var( --groupui-vwgroup-ref-color-pure-white ); --groupui-sys-color-information-weak-default: var( --groupui-vwgroup-ref-color-system-blue-100 ); --groupui-sys-color-information-subtle-pressed: var( --groupui-vwgroup-ref-color-system-blue-700-20 ); --groupui-sys-color-information-subtle-hover: var( --groupui-vwgroup-ref-color-system-blue-700-10 ); --groupui-sys-color-information-subtle-default: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-information-basic-default: var( --groupui-vwgroup-ref-color-system-blue-700 ); --groupui-sys-color-information-basic-hover: var( --groupui-vwgroup-ref-color-system-blue-800 ); --groupui-sys-color-information-basic-pressed: var( --groupui-vwgroup-ref-color-system-blue-900 ); --groupui-sys-color-information-basic-default-inverse: var( --groupui-vwgroup-ref-color-system-blue-500 ); --groupui-sys-color-on-success-basic-default: var( --groupui-vwgroup-ref-color-pure-white ); --groupui-sys-color-success-weak-default: var( --groupui-vwgroup-ref-color-system-green-100 ); --groupui-sys-color-success-subtle-pressed: var( --groupui-vwgroup-ref-color-system-green-700-20 ); --groupui-sys-color-success-subtle-hover: var( --groupui-vwgroup-ref-color-system-green-700-10 ); --groupui-sys-color-success-subtle-default: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-success-basic-pressed: var( --groupui-vwgroup-ref-color-system-green-1000 ); --groupui-sys-color-success-basic-hover: var( --groupui-vwgroup-ref-color-system-green-900 ); --groupui-sys-color-success-basic-default: var( --groupui-vwgroup-ref-color-system-green-800 ); --groupui-sys-color-success-basic-default-inverse: var( --groupui-vwgroup-ref-color-system-green-500 ); --groupui-sys-color-on-warning-basic-default: var( --groupui-vwgroup-ref-color-pure-white ); --groupui-sys-color-warning-weak-default: var( --groupui-vwgroup-ref-color-system-orange-100 ); --groupui-sys-color-warning-subtle-pressed: var( --groupui-vwgroup-ref-color-system-orange-100-06 ); --groupui-sys-color-warning-subtle-hover: var( --groupui-vwgroup-ref-color-system-orange-100-03 ); --groupui-sys-color-warning-subtle-default: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-warning-basic-pressed: var( --groupui-vwgroup-ref-color-system-orange-1300 ); --groupui-sys-color-warning-basic-hover: var( --groupui-vwgroup-ref-color-system-orange-1200 ); --groupui-sys-color-warning-basic-default: var( --groupui-vwgroup-ref-color-system-orange-1100 ); --groupui-sys-color-warning-basic-default-inverse: var( --groupui-vwgroup-ref-color-system-orange-500 ); --groupui-sys-color-on-danger-basic-default: var( --groupui-vwgroup-ref-color-pure-white ); --groupui-sys-color-danger-weak-default: var( --groupui-vwgroup-ref-color-system-red-100 ); --groupui-sys-color-danger-subtle-pressed: var( --groupui-vwgroup-ref-color-system-red-700-10 ); --groupui-sys-color-danger-subtle-hover: var( --groupui-vwgroup-ref-color-system-red-700-05 ); --groupui-sys-color-danger-subtle-default: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-danger-basic-pressed: var( --groupui-vwgroup-ref-color-system-red-1000 ); --groupui-sys-color-danger-basic-hover: var( --groupui-vwgroup-ref-color-system-red-900 ); --groupui-sys-color-danger-basic-default: var( --groupui-vwgroup-ref-color-system-red-800 ); --groupui-sys-color-danger-basic-default-inverse: var( --groupui-vwgroup-ref-color-system-red-500 ); --groupui-sys-color-on-hero-basic-disabled: var( --groupui-vwgroup-ref-color-deep-space-blue-900 ); --groupui-sys-color-on-hero-basic-default: var( --groupui-vwgroup-ref-color-deep-space-blue-900 ); --groupui-sys-color-hero-subtle-pressed: var( --groupui-vwgroup-ref-color-electric-neon-100-20 ); --groupui-sys-color-hero-subtle-hover: var( --groupui-vwgroup-ref-color-electric-neon-100-10 ); --groupui-sys-color-hero-subtle-default: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-hero-basic-disabled: var( --groupui-vwgroup-ref-color-pure-white-40 ); --groupui-sys-color-hero-basic-pressed: var( --groupui-vwgroup-ref-color-electric-neon-300 ); --groupui-sys-color-hero-basic-hover: var( --groupui-vwgroup-ref-color-electric-neon-200 ); --groupui-sys-color-hero-basic-default: var( --groupui-vwgroup-ref-color-electric-neon-100 ); --groupui-sys-color-on-action-basic-disabled-inverse: var( --groupui-vwgroup-ref-color-deep-space-blue-900 ); --groupui-sys-color-on-action-basic-default-inverse: var( --groupui-vwgroup-ref-color-deep-space-blue-900 ); --groupui-sys-color-on-action-basic-disabled: var( --groupui-vwgroup-ref-color-grey-100 ); --groupui-sys-color-on-action-basic-default: var( --groupui-vwgroup-ref-color-pure-white ); --groupui-sys-color-on-action-muted-default: var( --groupui-vwgroup-ref-color-pure-white ); --groupui-sys-color-on-action-muted-disabled: var( --groupui-vwgroup-ref-color-grey-100 ); --groupui-sys-color-on-action-quiet-default: var( --groupui-vwgroup-ref-color-pure-white ); --groupui-sys-color-action-muted-disabled: var( --groupui-vwgroup-ref-color-grey-400 ); --groupui-sys-color-action-muted-pressed: var( --groupui-vwgroup-ref-color-grey-900 ); --groupui-sys-color-action-muted-hover: var( --groupui-vwgroup-ref-color-grey-800 ); --groupui-sys-color-action-muted-default: var( --groupui-vwgroup-ref-color-grey-700 ); --groupui-sys-color-action-quiet-disabled: var( --groupui-vwgroup-ref-color-grey-200 ); --groupui-sys-color-action-quiet-pressed: var( --groupui-vwgroup-ref-color-grey-1000-60 ); --groupui-sys-color-action-quiet-hover: var( --groupui-vwgroup-ref-color-grey-1000-80 ); --groupui-sys-color-action-quiet-default: var( --groupui-vwgroup-ref-color-grey-1000 ); --groupui-sys-color-action-quiet-disabled-inverse: var( --groupui-vwgroup-ref-color-pure-white-20 ); --groupui-sys-color-action-subtle-pressed-inverse: var( --groupui-vwgroup-ref-color-pure-white-20 ); --groupui-sys-color-action-subtle-hover-inverse: var( --groupui-vwgroup-ref-color-pure-white-10 ); --groupui-sys-color-action-subtle-default-inverse: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-action-subtle-pressed: var( --groupui-vwgroup-ref-color-vivid-green-600-05 ); --groupui-sys-color-action-subtle-hover: var( --groupui-vwgroup-ref-color-vivid-green-600-03 ); --groupui-sys-color-action-subtle-default: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-action-subtle-disabled: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-action-subtle-disabled-inverse: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-action-basic-disabled-inverse: var( --groupui-vwgroup-ref-color-pure-white-40 ); --groupui-sys-color-action-basic-pressed-inverse: var( --groupui-vwgroup-ref-color-pure-white-80 ); --groupui-sys-color-action-basic-hover-inverse: var( --groupui-vwgroup-ref-color-pure-white-90 ); --groupui-sys-color-action-basic-default-inverse: var( --groupui-vwgroup-ref-color-pure-white ); --groupui-sys-color-action-basic-disabled: var( --groupui-vwgroup-ref-color-grey-400 ); --groupui-sys-color-action-basic-pressed: var( --groupui-vwgroup-ref-color-vivid-green-800 ); --groupui-sys-color-action-basic-hover: var( --groupui-vwgroup-ref-color-vivid-green-700 ); --groupui-sys-color-action-basic-default: var( --groupui-vwgroup-ref-color-vivid-green-600 ); --groupui-sys-color-action-silent-default: var( --groupui-vwgroup-ref-color-pure-white ); --groupui-sys-color-action-silent-disabled: var( --groupui-vwgroup-ref-color-grey-100 ); --groupui-sys-color-action-silent-default-inverse: var( --groupui-vwgroup-ref-color-pure-white ); --groupui-sys-color-action-quiet-subtle-default: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-action-quiet-subtle-hover: var( --groupui-vwgroup-ref-color-grey-1000-05 ); --groupui-sys-color-action-quiet-subtle-pressed: var( --groupui-vwgroup-ref-color-grey-1000-10 ); --groupui-sys-color-action-quiet-subtle-disabled: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-background-connect: var( --groupui-vwgroup-ref-color-vivid-green-600 ); --groupui-sys-color-background-inform: var( --groupui-vwgroup-ref-color-deep-space-blue-900 ); --groupui-sys-color-background-canvas: var( --groupui-vwgroup-ref-color-grey-100 ); --groupui-sys-color-background-base: var( --groupui-vwgroup-ref-color-pure-white ); --groupui-sys-color-background-backdrop: var( --groupui-vwgroup-ref-color-deep-space-blue-900-80 ); --groupui-sys-color-background-stripe: var( --groupui-vwgroup-ref-color-grey-100-50 ); --groupui-sys-color-background-float: var( --groupui-vwgroup-ref-color-grey-1000 ); --groupui-sys-color-accent-basic-default-01: var( --groupui-vwgroup-ref-color-coral-400 ); --groupui-sys-color-accent-basic-default-02: var( --groupui-vwgroup-ref-color-beige-200 ); --groupui-sys-color-accent-basic-default-03: var( --groupui-vwgroup-ref-color-blue-300 ); --groupui-sys-color-accent-basic-default-04: var( --groupui-vwgroup-ref-color-violet-400 ); --groupui-sys-color-accent-basic-default-05: var( --groupui-vwgroup-ref-color-lavender-200 ); --groupui-sys-color-accent-basic-default-06: var( --groupui-vwgroup-ref-color-orange-300 ); --groupui-sys-color-accent-weak-default-01: var( --groupui-vwgroup-ref-color-coral-400-20 ); --groupui-sys-color-accent-weak-default-02: var( --groupui-vwgroup-ref-color-beige-200-20 ); --groupui-sys-color-accent-weak-default-03: var( --groupui-vwgroup-ref-color-blue-300-20 ); --groupui-sys-color-accent-weak-default-04: var( --groupui-vwgroup-ref-color-violet-400-20 ); --groupui-sys-color-accent-weak-default-05: var( --groupui-vwgroup-ref-color-lavender-200-20 ); --groupui-sys-color-accent-weak-default-06: var( --groupui-vwgroup-ref-color-orange-300-20 ); --groupui-sys-color-accent-subtle-default-01: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-accent-subtle-default-02: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-accent-subtle-default-03: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-accent-subtle-default-04: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-accent-subtle-default-05: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-accent-subtle-default-06: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-on-accent-basic-default-01: var( --groupui-vwgroup-ref-color-grey-1000 ); --groupui-sys-color-on-accent-basic-default-02: var( --groupui-vwgroup-ref-color-grey-1000 ); --groupui-sys-color-on-accent-basic-default-03: var( --groupui-vwgroup-ref-color-grey-1000 ); --groupui-sys-color-on-accent-basic-default-04: var( --groupui-vwgroup-ref-color-grey-1000 ); --groupui-sys-color-on-accent-basic-default-05: var( --groupui-vwgroup-ref-color-grey-1000 ); --groupui-sys-color-on-accent-basic-default-06: var( --groupui-vwgroup-ref-color-grey-1000 ); --groupui-sys-color-navigation-unselected-basic-default-inverse: var( --groupui-vwgroup-ref-color-pure-white ); --groupui-sys-color-navigation-unselected-basic-hover-inverse: var( --groupui-vwgroup-ref-color-electric-neon-100 ); --groupui-sys-color-navigation-unselected-basic-pressed-inverse: var( --groupui-vwgroup-ref-color-electric-neon-100 ); --groupui-sys-color-navigation-unselected-basic-disabled-inverse: var( --groupui-vwgroup-ref-color-pure-white-40 ); --groupui-sys-color-navigation-unselected-basic-default: var( --groupui-vwgroup-ref-color-grey-1000 ); --groupui-sys-color-navigation-unselected-basic-hover: var( --groupui-vwgroup-ref-color-vivid-green-600 ); --groupui-sys-color-navigation-unselected-basic-pressed: var( --groupui-vwgroup-ref-color-vivid-green-600 ); --groupui-sys-color-navigation-unselected-basic-disabled: var( --groupui-vwgroup-ref-color-grey-400 ); --groupui-sys-color-navigation-unselected-subtle-pressed-inverse: var( --groupui-vwgroup-ref-color-electric-neon-100-20 ); --groupui-sys-color-navigation-unselected-subtle-default-inverse: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-navigation-unselected-subtle-hover-inverse: var( --groupui-vwgroup-ref-color-electric-neon-100-10 ); --groupui-sys-color-navigation-unselected-subtle-disabled-inverse: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-navigation-unselected-subtle-default: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-navigation-unselected-subtle-hover: var( --groupui-vwgroup-ref-color-vivid-green-600-03 ); --groupui-sys-color-navigation-unselected-subtle-pressed: var( --groupui-vwgroup-ref-color-vivid-green-600-05 ); --groupui-sys-color-navigation-unselected-subtle-disabled: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-navigation-selected-basic-default-inverse: var( --groupui-vwgroup-ref-color-electric-neon-100 ); --groupui-sys-color-navigation-selected-basic-hover-inverse: var( --groupui-vwgroup-ref-color-electric-neon-100 ); --groupui-sys-color-navigation-selected-basic-pressed-inverse: var( --groupui-vwgroup-ref-color-electric-neon-100 ); --groupui-sys-color-navigation-selected-basic-default: var( --groupui-vwgroup-ref-color-vivid-green-600 ); --groupui-sys-color-navigation-selected-basic-hover: var( --groupui-vwgroup-ref-color-vivid-green-600 ); --groupui-sys-color-navigation-selected-basic-pressed: var( --groupui-vwgroup-ref-color-vivid-green-600 ); --groupui-sys-color-navigation-selected-basic-disabled: var( --groupui-vwgroup-ref-color-grey-400 ); --groupui-sys-color-navigation-selected-basic-disabled-inverse: var( --groupui-vwgroup-ref-color-pure-white-40 ); --groupui-sys-color-navigation-selected-subtle-default-inverse: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-navigation-selected-subtle-hover-inverse: var( --groupui-vwgroup-ref-color-electric-neon-100-10 ); --groupui-sys-color-navigation-selected-subtle-pressed-inverse: var( --groupui-vwgroup-ref-color-electric-neon-100-20 ); --groupui-sys-color-navigation-selected-subtle-default: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-navigation-selected-subtle-hover: var( --groupui-vwgroup-ref-color-vivid-green-600-03 ); --groupui-sys-color-navigation-selected-subtle-pressed: var( --groupui-vwgroup-ref-color-vivid-green-600-05 ); --groupui-sys-color-navigation-selected-subtle-disabled: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-navigation-selected-subtle-disabled-inverse: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-card-border-level-2: var( --groupui-vwgroup-ref-color-grey-200 ); --groupui-sys-color-card-border-level-2-inverse: var( --groupui-vwgroup-ref-color-pure-white-20 ); --groupui-sys-letter-spacing-regular: var( --groupui-vwgroup-ref-letter-spacing-0 ); --groupui-sys-letter-spacing-loose: var( --groupui-vwgroup-ref-letter-spacing-18 ); --groupui-sys-font-weight-light: var(--groupui-vwgroup-ref-font-weight-300); --groupui-sys-font-weight-normal: var( --groupui-vwgroup-ref-font-weight-400 ); --groupui-sys-font-weight-action: var( --groupui-vwgroup-ref-font-weight-500 ); --groupui-sys-font-weight-bold: var(--groupui-vwgroup-ref-font-weight-700); --groupui-sys-font-size-200: var(--groupui-vwgroup-ref-font-size-8); --groupui-sys-font-size-250: var(--groupui-vwgroup-ref-font-size-10); --groupui-sys-font-size-300: var(--groupui-vwgroup-ref-font-size-12); --groupui-sys-font-size-350: var(--groupui-vwgroup-ref-font-size-14); --groupui-sys-font-size-375: var(--groupui-vwgroup-ref-font-size-15); --groupui-sys-font-size-400: var(--groupui-vwgroup-ref-font-size-16); --groupui-sys-font-size-425: var(--groupui-vwgroup-ref-font-size-17); --groupui-sys-font-size-450: var(--groupui-vwgroup-ref-font-size-18); --groupui-sys-font-size-500: var(--groupui-vwgroup-ref-font-size-20); --groupui-sys-font-size-550: var(--groupui-vwgroup-ref-font-size-22); --groupui-sys-font-size-600: var(--groupui-vwgroup-ref-font-size-24); --groupui-sys-font-size-650: var(--groupui-vwgroup-ref-font-size-26); --groupui-sys-font-size-700: var(--groupui-vwgroup-ref-font-size-28); --groupui-sys-font-size-750: var(--groupui-vwgroup-ref-font-size-30); --groupui-sys-font-size-800: var(--groupui-vwgroup-ref-font-size-32); --groupui-sys-font-size-850: var(--groupui-vwgroup-ref-font-size-34); --groupui-sys-font-size-900: var(--groupui-vwgroup-ref-font-size-36); --groupui-sys-font-size-1000: var(--groupui-vwgroup-ref-font-size-40); --groupui-sys-font-size-1200: var(--groupui-vwgroup-ref-font-size-48); --groupui-sys-font-size-1250: var(--groupui-vwgroup-ref-font-size-50); --groupui-sys-font-size-1500: var(--groupui-vwgroup-ref-font-size-60); --groupui-sys-font-size-1800: var(--groupui-vwgroup-ref-font-size-72); } [data-gui-mode='dark'] { --groupui-sys-color-shadow-0: var(--groupui-vwgroup-ref-color-transparent); --groupui-sys-color-shadow-8: var(--groupui-vwgroup-ref-color-black-80); --groupui-sys-color-brand-core-inverse: var( --groupui-vwgroup-ref-color-pure-white ); --groupui-sys-color-brand-core: var(--groupui-vwgroup-ref-color-pure-white); --groupui-sys-color-link-secondary-visited-pressed-inverse: var( --groupui-vwgroup-ref-color-violet-400 ); --groupui-sys-color-link-secondary-visited-hover-inverse: var( --groupui-vwgroup-ref-color-violet-300 ); --groupui-sys-color-link-secondary-visited-default-inverse: var( --groupui-vwgroup-ref-color-violet-200 ); --groupui-sys-color-link-secondary-visited-pressed: var( --groupui-vwgroup-ref-color-violet-400 ); --groupui-sys-color-link-secondary-visited-hover: var( --groupui-vwgroup-ref-color-violet-300 ); --groupui-sys-color-link-secondary-visited-default: var( --groupui-vwgroup-ref-color-violet-200 ); --groupui-sys-color-link-secondary-unvisited-pressed-inverse: var( --groupui-vwgroup-ref-color-pure-white-60 ); --groupui-sys-color-link-secondary-unvisited-hover-inverse: var( --groupui-vwgroup-ref-color-pure-white-80 ); --groupui-sys-color-link-secondary-unvisited-default-inverse: var( --groupui-vwgroup-ref-color-pure-white ); --groupui-sys-color-link-secondary-unvisited-pressed: var( --groupui-vwgroup-ref-color-pure-white-60 ); --groupui-sys-color-link-secondary-unvisited-hover: var( --groupui-vwgroup-ref-color-pure-white-80 ); --groupui-sys-color-link-secondary-unvisited-default: var( --groupui-vwgroup-ref-color-pure-white ); --groupui-sys-color-link-primary-visited-pressed-inverse: var( --groupui-vwgroup-ref-color-violet-400 ); --groupui-sys-color-link-primary-visited-hover-inverse: var( --groupui-vwgroup-ref-color-violet-300 ); --groupui-sys-color-link-primary-visited-default-inverse: var( --groupui-vwgroup-ref-color-violet-200 ); --groupui-sys-color-link-primary-visited-pressed: var( --groupui-vwgroup-ref-color-violet-400 ); --groupui-sys-color-link-primary-visited-hover: var( --groupui-vwgroup-ref-color-violet-300 ); --groupui-sys-color-link-primary-visited-default: var( --groupui-vwgroup-ref-color-violet-200 ); --groupui-sys-color-link-primary-unvisited-pressed-inverse: var( --groupui-vwgroup-ref-color-pure-white-80 ); --groupui-sys-color-link-primary-unvisited-hover-inverse: var( --groupui-vwgroup-ref-color-pure-white-90 ); --groupui-sys-color-link-primary-unvisited-default-inverse: var( --groupui-vwgroup-ref-color-pure-white ); --groupui-sys-color-link-primary-unvisited-pressed: var( --groupui-vwgroup-ref-color-vivid-green-600 ); --groupui-sys-color-link-primary-unvisited-hover: var( --groupui-vwgroup-ref-color-vivid-green-500 ); --groupui-sys-color-link-primary-unvisited-default: var( --groupui-vwgroup-ref-color-vivid-green-400 ); --groupui-sys-color-text-weakest-inverse: var( --groupui-vwgroup-ref-color-pure-white-40 ); --groupui-sys-color-text-weaker-inverse: var( --groupui-vwgroup-ref-color-pure-white-60 ); --groupui-sys-color-text-weak-inverse: var( --groupui-vwgroup-ref-color-pure-white-80 ); --groupui-sys-color-text-normal-inverse: var( --groupui-vwgroup-ref-color-pure-white ); --groupui-sys-color-text-weakest: var(--groupui-vwgroup-ref-color-grey-600); --groupui-sys-color-text-weaker: var(--groupui-vwgroup-ref-color-grey-400); --groupui-sys-color-text-weak: var(--groupui-vwgroup-ref-color-grey-200); --groupui-sys-color-text-normal: var( --groupui-vwgroup-ref-color-pure-white ); --groupui-sys-color-line-ghost: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-line-silent-inverse: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-line-silent: var(--groupui-vwgroup-ref-color-grey-1000); --groupui-sys-color-line-weak-inverse: var( --groupui-vwgroup-ref-color-pure-white-20 ); --groupui-sys-color-line-weak: var(--groupui-vwgroup-ref-color-grey-900); --groupui-sys-color-line-ghost-inverse: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-on-light-subtle-default: var( --groupui-vwgroup-ref-color-grey-200 ); --groupui-sys-color-on-light-subtle-default-inverse: var( --groupui-vwgroup-ref-color-pure-white ); --groupui-sys-color-on-light-basic-default: var( --groupui-vwgroup-ref-color-grey-1000 ); --groupui-sys-color-on-light-basic-default-inverse: var( --groupui-vwgroup-ref-color-grey-1000 ); --groupui-sys-color-light-subtle-pressed: var( --groupui-vwgroup-ref-color-grey-300-20 ); --groupui-sys-color-light-subtle-hover: var( --groupui-vwgroup-ref-color-grey-300-10 ); --groupui-sys-color-light-subtle-default: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-light-subtle-default-inverse: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-light-subtle-hover-inverse: var( --groupui-vwgroup-ref-color-pure-white-10 ); --groupui-sys-color-light-subtle-pressed-inverse: var( --groupui-vwgroup-ref-color-pure-white-20 ); --groupui-sys-color-light-basic-pressed: var( --groupui-vwgroup-ref-color-grey-400 ); --groupui-sys-color-light-basic-hover: var( --groupui-vwgroup-ref-color-grey-300 ); --groupui-sys-color-light-basic-default: var( --groupui-vwgroup-ref-color-grey-200 ); --groupui-sys-color-light-basic-default-inverse: var( --groupui-vwgroup-ref-color-grey-200 ); --groupui-sys-color-light-basic-hover-inverse: var( --groupui-vwgroup-ref-color-grey-300 ); --groupui-sys-color-light-basic-pressed-inverse: var( --groupui-vwgroup-ref-color-grey-400 ); --groupui-sys-color-on-neutral-basic-default: var( --groupui-vwgroup-ref-color-grey-1000 ); --groupui-sys-color-neutral-subtle-pressed: var( --groupui-vwgroup-ref-color-grey-600-20 ); --groupui-sys-color-neutral-subtle-hover: var( --groupui-vwgroup-ref-color-grey-600-10 ); --groupui-sys-color-neutral-subtle-default: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-neutral-basic-pressed: var( --groupui-vwgroup-ref-color-grey-500 ); --groupui-sys-color-neutral-basic-hover: var( --groupui-vwgroup-ref-color-grey-400 ); --groupui-sys-color-neutral-basic-default: var( --groupui-vwgroup-ref-color-grey-300 ); --groupui-sys-color-neutral-basic-default-inverse: var( --groupui-vwgroup-ref-color-grey-300 ); --groupui-sys-color-neutral-weak-default: var( --groupui-vwgroup-ref-color-grey-500-20 ); --groupui-sys-color-on-information-basic-default: var( --groupui-vwgroup-ref-color-grey-1000 ); --groupui-sys-color-information-weak-default: var( --groupui-vwgroup-ref-color-system-blue-500-20 ); --groupui-sys-color-information-subtle-pressed: var( --groupui-vwgroup-ref-color-system-blue-500-20 ); --groupui-sys-color-information-subtle-hover: var( --groupui-vwgroup-ref-color-system-blue-500-10 ); --groupui-sys-color-information-subtle-default: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-information-basic-default: var( --groupui-vwgroup-ref-color-system-blue-500 ); --groupui-sys-color-information-basic-hover: var( --groupui-vwgroup-ref-color-system-blue-600 ); --groupui-sys-color-information-basic-pressed: var( --groupui-vwgroup-ref-color-system-blue-700 ); --groupui-sys-color-information-basic-default-inverse: var( --groupui-vwgroup-ref-color-system-blue-500 ); --groupui-sys-color-on-success-basic-default: var( --groupui-vwgroup-ref-color-grey-1000 ); --groupui-sys-color-success-weak-default: var( --groupui-vwgroup-ref-color-system-green-500-20 ); --groupui-sys-color-success-subtle-pressed: var( --groupui-vwgroup-ref-color-system-green-500-20 ); --groupui-sys-color-success-subtle-hover: var( --groupui-vwgroup-ref-color-system-green-500-10 ); --groupui-sys-color-success-subtle-default: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-success-basic-pressed: var( --groupui-vwgroup-ref-color-system-green-700 ); --groupui-sys-color-success-basic-hover: var( --groupui-vwgroup-ref-color-system-green-600 ); --groupui-sys-color-success-basic-default: var( --groupui-vwgroup-ref-color-system-green-500 ); --groupui-sys-color-success-basic-default-inverse: var( --groupui-vwgroup-ref-color-system-green-500 ); --groupui-sys-color-on-warning-basic-default: var( --groupui-vwgroup-ref-color-grey-1000 ); --groupui-sys-color-warning-weak-default: var( --groupui-vwgroup-ref-color-system-orange-500-20 ); --groupui-sys-color-warning-subtle-pressed: var( --groupui-vwgroup-ref-color-system-orange-500-20 ); --groupui-sys-color-warning-subtle-hover: var( --groupui-vwgroup-ref-color-system-orange-500-10 ); --groupui-sys-color-warning-subtle-default: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-warning-basic-pressed: var( --groupui-vwgroup-ref-color-system-orange-700 ); --groupui-sys-color-warning-basic-hover: var( --groupui-vwgroup-ref-color-system-orange-600 ); --groupui-sys-color-warning-basic-default: var( --groupui-vwgroup-ref-color-system-orange-500 ); --groupui-sys-color-warning-basic-default-inverse: var( --groupui-vwgroup-ref-color-system-orange-500 ); --groupui-sys-color-on-danger-basic-default: var( --groupui-vwgroup-ref-color-black ); --groupui-sys-color-danger-weak-default: var( --groupui-vwgroup-ref-color-system-red-500-20 ); --groupui-sys-color-danger-subtle-pressed: var( --groupui-vwgroup-ref-color-system-red-500-10 ); --groupui-sys-color-danger-subtle-hover: var( --groupui-vwgroup-ref-color-system-red-500-05 ); --groupui-sys-color-danger-subtle-default: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-danger-basic-pressed: var( --groupui-vwgroup-ref-color-system-red-700 ); --groupui-sys-color-danger-basic-hover: var( --groupui-vwgroup-ref-color-system-red-600 ); --groupui-sys-color-danger-basic-default: var( --groupui-vwgroup-ref-color-system-red-500 ); --groupui-sys-color-danger-basic-default-inverse: var( --groupui-vwgroup-ref-color-system-red-500 ); --groupui-sys-color-on-hero-basic-disabled: var( --groupui-vwgroup-ref-color-grey-1000 ); --groupui-sys-color-on-hero-basic-default: var( --groupui-vwgroup-ref-color-grey-1000 ); --groupui-sys-color-hero-subtle-pressed: var( --groupui-vwgroup-ref-color-pure-white-20 ); --groupui-sys-color-hero-subtle-hover: var( --groupui-vwgroup-ref-color-pure-white-10 ); --groupui-sys-color-hero-subtle-default: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-hero-basic-disabled: var( --groupui-vwgroup-ref-color-pure-white-40 ); --groupui-sys-color-hero-basic-pressed: var( --groupui-vwgroup-ref-color-pure-white-80 ); --groupui-sys-color-hero-basic-hover: var( --groupui-vwgroup-ref-color-pure-white-90 ); --groupui-sys-color-hero-basic-default: var( --groupui-vwgroup-ref-color-pure-white ); --groupui-sys-color-on-action-basic-disabled-inverse: var( --groupui-vwgroup-ref-color-grey-1000 ); --groupui-sys-color-on-action-basic-default-inverse: var( --groupui-vwgroup-ref-color-grey-1000 ); --groupui-sys-color-on-action-basic-disabled: var( --groupui-vwgroup-ref-color-grey-950 ); --groupui-sys-color-on-action-basic-default: var( --groupui-vwgroup-ref-color-grey-1000 ); --groupui-sys-color-on-action-muted-default: var( --groupui-vwgroup-ref-color-grey-1000 ); --groupui-sys-color-on-action-muted-disabled: var( --groupui-vwgroup-ref-color-grey-950 ); --groupui-sys-color-on-action-quiet-default: var( --groupui-vwgroup-ref-color-grey-1000 ); --groupui-sys-color-action-muted-disabled: var( --groupui-vwgroup-ref-color-grey-600 ); --groupui-sys-color-action-muted-pressed: var( --groupui-vwgroup-ref-color-grey-500 ); --groupui-sys-color-action-muted-hover: var( --groupui-vwgroup-ref-color-grey-400 ); --groupui-sys-color-action-muted-default: var( --groupui-vwgroup-ref-color-grey-300 ); --groupui-sys-color-action-quiet-disabled: var( --groupui-vwgroup-ref-color-grey-800 ); --groupui-sys-color-action-quiet-pressed: var( --groupui-vwgroup-ref-color-pure-white-80 ); --groupui-sys-color-action-quiet-hover: var( --groupui-vwgroup-ref-color-pure-white-90 ); --groupui-sys-color-action-quiet-default: var( --groupui-vwgroup-ref-color-pure-white ); --groupui-sys-color-action-quiet-disabled-inverse: var( --groupui-vwgroup-ref-color-pure-white-20 ); --groupui-sys-color-action-subtle-pressed-inverse: var( --groupui-vwgroup-ref-color-pure-white-20 ); --groupui-sys-color-action-subtle-hover-inverse: var( --groupui-vwgroup-ref-color-pure-white-10 ); --groupui-sys-color-action-subtle-default-inverse: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-action-subtle-pressed: var( --groupui-vwgroup-ref-color-vivid-green-400-15 ); --groupui-sys-color-action-subtle-hover: var( --groupui-vwgroup-ref-color-vivid-green-400-10 ); --groupui-sys-color-action-subtle-default: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-action-subtle-disabled: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-action-subtle-disabled-inverse: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-action-basic-disabled-inverse: var( --groupui-vwgroup-ref-color-pure-white-40 ); --groupui-sys-color-action-basic-pressed-inverse: var( --groupui-vwgroup-ref-color-pure-white-80 ); --groupui-sys-color-action-basic-hover-inverse: var( --groupui-vwgroup-ref-color-pure-white-90 ); --groupui-sys-color-action-basic-default-inverse: var( --groupui-vwgroup-ref-color-pure-white ); --groupui-sys-color-action-basic-disabled: var( --groupui-vwgroup-ref-color-grey-600 ); --groupui-sys-color-action-basic-pressed: var( --groupui-vwgroup-ref-color-vivid-green-480 ); --groupui-sys-color-action-basic-hover: var( --groupui-vwgroup-ref-color-vivid-green-450 ); --groupui-sys-color-action-basic-default: var( --groupui-vwgroup-ref-color-vivid-green-400 ); --groupui-sys-color-action-silent-default: var( --groupui-vwgroup-ref-color-grey-1000 ); --groupui-sys-color-action-silent-disabled: var( --groupui-vwgroup-ref-color-grey-900 ); --groupui-sys-color-action-silent-default-inverse: var( --groupui-vwgroup-ref-color-grey-1000 ); --groupui-sys-color-action-quiet-subtle-default: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-action-quiet-subtle-hover: var( --groupui-vwgroup-ref-color-pure-white-10 ); --groupui-sys-color-action-quiet-subtle-pressed: var( --groupui-vwgroup-ref-color-pure-white-20 ); --groupui-sys-color-action-quiet-subtle-disabled: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-background-connect: var( --groupui-vwgroup-ref-color-grey-950 ); --groupui-sys-color-background-inform: var( --groupui-vwgroup-ref-color-grey-950 ); --groupui-sys-color-background-canvas: var( --groupui-vwgroup-ref-color-grey-1100 ); --groupui-sys-color-background-base: var( --groupui-vwgroup-ref-color-grey-1000 ); --groupui-sys-color-background-backdrop: var( --groupui-vwgroup-ref-color-black-60 ); --groupui-sys-color-background-stripe: var( --groupui-vwgroup-ref-color-grey-900-50 ); --groupui-sys-color-background-float: var( --groupui-vwgroup-ref-color-grey-1000 ); --groupui-sys-color-accent-basic-default-01: var( --groupui-vwgroup-ref-color-coral-400 ); --groupui-sys-color-accent-basic-default-02: var( --groupui-vwgroup-ref-color-beige-200 ); --groupui-sys-color-accent-basic-default-03: var( --groupui-vwgroup-ref-color-blue-300 ); --groupui-sys-color-accent-basic-default-04: var( --groupui-vwgroup-ref-color-violet-400 ); --groupui-sys-color-accent-basic-default-05: var( --groupui-vwgroup-ref-color-lavender-200 ); --groupui-sys-color-accent-basic-default-06: var( --groupui-vwgroup-ref-color-orange-300 ); --groupui-sys-color-accent-weak-default-01: var( --groupui-vwgroup-ref-color-coral-400-20 ); --groupui-sys-color-accent-weak-default-02: var( --groupui-vwgroup-ref-color-beige-200-20 ); --groupui-sys-color-accent-weak-default-03: var( --groupui-vwgroup-ref-color-blue-300-20 ); --groupui-sys-color-accent-weak-default-04: var( --groupui-vwgroup-ref-color-violet-400-20 ); --groupui-sys-color-accent-weak-default-05: var( --groupui-vwgroup-ref-color-lavender-200-20 ); --groupui-sys-color-accent-weak-default-06: var( --groupui-vwgroup-ref-color-orange-300-20 ); --groupui-sys-color-accent-subtle-default-01: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-accent-subtle-default-02: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-accent-subtle-default-03: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-accent-subtle-default-04: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-accent-subtle-default-05: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-accent-subtle-default-06: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-on-accent-basic-default-01: var( --groupui-vwgroup-ref-color-grey-1000 ); --groupui-sys-color-on-accent-basic-default-02: var( --groupui-vwgroup-ref-color-grey-1000 ); --groupui-sys-color-on-accent-basic-default-03: var( --groupui-vwgroup-ref-color-grey-1000 ); --groupui-sys-color-on-accent-basic-default-04: var( --groupui-vwgroup-ref-color-grey-1000 ); --groupui-sys-color-on-accent-basic-default-05: var( --groupui-vwgroup-ref-color-grey-1000 ); --groupui-sys-color-on-accent-basic-default-06: var( --groupui-vwgroup-ref-color-grey-1000 ); --groupui-sys-color-navigation-unselected-basic-default-inverse: var( --groupui-vwgroup-ref-color-pure-white-70 ); --groupui-sys-color-navigation-unselected-basic-hover-inverse: var( --groupui-vwgroup-ref-color-pure-white ); --groupui-sys-color-navigation-unselected-basic-pressed-inverse: var( --groupui-vwgroup-ref-color-pure-white ); --groupui-sys-color-navigation-unselected-basic-disabled-inverse: var( --groupui-vwgroup-ref-color-pure-white-40 ); --groupui-sys-color-navigation-unselected-basic-default: var( --groupui-vwgroup-ref-color-pure-white-70 ); --groupui-sys-color-navigation-unselected-basic-hover: var( --groupui-vwgroup-ref-color-pure-white ); --groupui-sys-color-navigation-unselected-basic-pressed: var( --groupui-vwgroup-ref-color-pure-white ); --groupui-sys-color-navigation-unselected-basic-disabled: var( --groupui-vwgroup-ref-color-grey-600 ); --groupui-sys-color-navigation-unselected-subtle-pressed-inverse: var( --groupui-vwgroup-ref-color-pure-white-20 ); --groupui-sys-color-navigation-unselected-subtle-default-inverse: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-navigation-unselected-subtle-hover-inverse: var( --groupui-vwgroup-ref-color-pure-white-10 ); --groupui-sys-color-navigation-unselected-subtle-disabled-inverse: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-navigation-unselected-subtle-default: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-navigation-unselected-subtle-hover: var( --groupui-vwgroup-ref-color-pure-white-10 ); --groupui-sys-color-navigation-unselected-subtle-pressed: var( --groupui-vwgroup-ref-color-pure-white-20 ); --groupui-sys-color-navigation-unselected-subtle-disabled: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-navigation-selected-basic-default-inverse: var( --groupui-vwgroup-ref-color-pure-white ); --groupui-sys-color-navigation-selected-basic-hover-inverse: var( --groupui-vwgroup-ref-color-pure-white ); --groupui-sys-color-navigation-selected-basic-pressed-inverse: var( --groupui-vwgroup-ref-color-pure-white ); --groupui-sys-color-navigation-selected-basic-default: var( --groupui-vwgroup-ref-color-pure-white ); --groupui-sys-color-navigation-selected-basic-hover: var( --groupui-vwgroup-ref-color-pure-white ); --groupui-sys-color-navigation-selected-basic-pressed: var( --groupui-vwgroup-ref-color-pure-white ); --groupui-sys-color-navigation-selected-basic-disabled: var( --groupui-vwgroup-ref-color-grey-600 ); --groupui-sys-color-navigation-selected-basic-disabled-inverse: var( --groupui-vwgroup-ref-color-pure-white-40 ); --groupui-sys-color-navigation-selected-subtle-default-inverse: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-navigation-selected-subtle-hover-inverse: var( --groupui-vwgroup-ref-color-pure-white-10 ); --groupui-sys-color-navigation-selected-subtle-pressed-inverse: var( --groupui-vwgroup-ref-color-pure-white-20 ); --groupui-sys-color-navigation-selected-subtle-default: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-navigation-selected-subtle-hover: var( --groupui-vwgroup-ref-color-pure-white-10 ); --groupui-sys-color-navigation-selected-subtle-pressed: var( --groupui-vwgroup-ref-color-pure-white-20 ); --groupui-sys-color-navigation-selected-subtle-disabled: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-navigation-selected-subtle-disabled-inverse: var( --groupui-vwgroup-ref-color-transparent ); --groupui-sys-color-card-border-level-2: var( --groupui-vwgroup-ref-color-grey-900 ); --groupui-sys-color-card-border-level-2-inverse: var( --groupui-vwgroup-ref-color-pure-white-20 ); } /** * Autogenerated file (2026-01-20T13:48:42.543Z). Do not edit directly */ :root { --groupui-vwag-ref-color-dummy: #421337; --groupui-vwag-ref-color-black: #000000; --groupui-vwag-ref-color-white-0: #ffffff; --groupui-vwag-ref-color-white-0-20: #ffffff33; --groupui-vwag-ref-color-white-0-90: #ffffffe6; --groupui-vwag-ref-color-white-0-80: #ffffffcc; --groupui-vwag-ref-color-white-0-40: #ffffff66; --groupui-vwag-ref-color-white-0-10: #ffffff1a; --groupui-vwag-ref-color-white-0-60: #ffffff99; --groupui-vwag-ref-color-transparent: transparent; --groupui-vwag-ref-color-petrol-100: #eaf4f7; --groupui-vwag-ref-color-petrol-200: #c6dfe7; --groupui-vwag-ref-color-petrol-300: #a4c8d8; --groupui-vwag-ref-color-petrol-400: #80b0c8; --groupui-vwag-ref-color-petrol-500: #5f95af; --groupui-vwag-ref-color-petrol-600: #4a849f; --groupui-vwag-ref-color-petrol-700: #35718e; --groupui-vwag-ref-color-petrol-800: #20607e; --groupui-vwag-ref-color-petrol-900: #004666; --groupui-vwag-ref-color-petrol-1000: #00354d; --groupui-vwag-ref-color-petrol-800-10: #20607e1a; --groupui-vwag-ref-color-petrol-800-20: #20607e33; --groupui-vwag-ref-color-aqua-100: #e2f7f7; --groupui-vwag-ref-color-aqua-200: #a6fefc; --groupui-vwag-ref-color-aqua-300: #72faff; --groupui-vwag-ref-color-aqua-400: #41e0e6; --groupui-vwag-ref-color-aqua-500: #3bd8dd; --groupui-vwag-ref-color-aqua-600: #3cc0c9; --groupui-vwag-ref-color-aqua-700: #37b4ba; --groupui-vwag-ref-color-aqua-800: #349ca0; --groupui-vwag-ref-color-aqua-900: #2b8a91; --groupui-vwag-ref-color-aqua-1000: #226f78; --groupui-vwag-ref-color-aqua-500-10: #3bd8dd1a; --groupui-vwag-ref-color-aqua-500-20: #3bd8dd33; --groupui-vwag-ref-color-aqua-500-80: #3bd8ddcc; --groupui-vwag-ref-color-aqua-500-90: #3bd8dde6; --groupui-vwag-ref-color-grey-100: #f0f1f2; --groupui-vwag-ref-color-grey-200: #dfe2e6; --groupui-vwag-ref-color-grey-300: #cacdd2; --groupui-vwag-ref-color-grey-400: #a8adb3; --groupui-vwag-ref-color-grey-500: #91979c; --groupui-vwag-ref-color-grey-600: #7a8084; --groupui-vwag-ref-color-grey-700: #636a6d; --groupui-vwag-ref-color-grey-800: #4c5356; --groupui-vwag-ref-color-grey-900: #34393b; --groupui-vwag-ref-color-grey-950: #282c2d; --groupui-vwag-ref-color-grey-1000: #1b1e1f; --groupui-vwag-ref-color-grey-1000-80: #1b1e1fcc; --groupui-vwag-ref-color-grey-1000-60: #1b1e1f99; --groupui-vwag-ref-color-grey-700-10: #636a6d1a; --groupui-vwag-ref-color-grey-700-20: #636a6d33; --groupui-vwag-ref-color-grey-300-10: #cacdd21a; --groupui-vwag-ref-color-grey-300-20: #cacdd233; --groupui-vwag-ref-color-grey-500-10: #91979c1a; --groupui-vwag-ref-color-grey-500-20: #91979c33; --groupui-vwag-ref-color-grey-900-50: #34393b80; --groupui-vwag-ref-color-grey-100-50: #f0f1f280; --groupui-vwag-ref-color-grey-1000-10: #1b1e1f1a; --groupui-vwag-ref-color-grey-1000-05: #1b1e1f0d; --groupui-vwag-ref-color-violet-100: #ecdfff; --groupui-vwag-ref-color-violet-200: #d2b6fa; --groupui-vwag-ref-color-violet-300: #bb93f4; --groupui-vwag-ref-color-violet-400: #a36cf0; --groupui-vwag-ref-color-violet-500: #803ae3; --groupui-vwag-ref-color-violet-600: #7727e7; --groupui-vwag-ref-color-violet-700: #691ed0; --groupui-vwag-ref-color-violet-800: #5915b8; --groupui-vwag-ref-color-violet-900: #4a0ba0; --groupui-vwag-ref-color-violet-1000: #390185; --groupui-vwag-ref-color-violet-400-20: #a36cf033; --groupui-vwag-ref-color-blue-100: #cce5f9; --groupui-vwag-ref-color-blue-200: #a9d6fa; --groupui-vwag-ref-color-blue-300: #8bc9fb; --groupui-vwag-ref-color-blue-400: #66b9fc; --groupui-vwag-ref-color-blue-500: #4fb0fd; --groupui-vwag-ref-color-blue-600: #30a2fe; --groupui-vwag-ref-color-blue-700: #268de0; --groupui-vwag-ref-color-blue-800: #1873bb; --groupui-vwag-ref-color-blue-900: #0f5f9f; --groupui-vwag-ref-color-blue-1000: #03477d; --groupui-vwag-ref-color-blue-500-20: #4fb0fd33; --groupui-vwag-ref-color-purple-100: #f1d6f6; --groupui-vwag-ref-color-purple-200: #e3a3ef; --groupui-vwag-ref-color-purple-300: #d673ea; --groupui-vwag-ref-color-purple-400: #c944e3; --groupui-vwag-ref-color-purple-500: #be1bde; --groupui-vwag-ref-color-purple-600: #b600da; --groupui-vwag-ref-color-purple-700: #a400c5; --groupui-vwag-ref-color-purple-800: #9600b4; --groupui-vwag-ref-color-purple-900: #8700a3; --groupui-vwag-ref-color-purple-1000: #790092; --groupui-vwag-ref-color-purple-300-20: #d673ea33; --groupui-vwag-ref-color-mint-100: #c5fae8; --groupui-vwag-ref-color-mint-200: #9fedd1; --groupui-vwag-ref-color-mint-300: #7ee2bf; --groupui-vwag-ref-color-mint-400: #5cd6ab; --groupui-vwag-ref-color-mint-500: #38ca97; --groupui-vwag-ref-color-mint-600: #16be83; --groupui-vwag-ref-color-mint-700: #11a872; --groupui-vwag-ref-color-mint-800: #109365; --groupui-vwag-ref-color-mint-900: #0f7c55; --groupui-vwag-ref-color-mint-1000: #0d6042; --groupui-vwag-ref-color-mint-600-20: #16be8333; --groupui-vwag-ref-color-lime-100: #eef9d3; --groupui-vwag-ref-color-lime-200: #ddf2a8; --groupui-vwag-ref-color-lime-300: #ceed82; --groupui-vwag-ref-color-lime-400: #c1e85e; --groupui-vwag-ref-color-lime-500: #afe230; --groupui-vwag-ref-color-lime-600: #a2dd0e; --groupui-vwag-ref-color-lime-700: #8fc409; --groupui-vwag-ref-color-lime-800: #7faf08; --groupui-vwag-ref-color-lime-900: #6c9506; --groupui-vwag-ref-color-lime-1000: #577903; --groupui-vwag-ref-color-lime-600-20: #a2dd0e33; --groupui-vwag-ref-color-green-100: #f5f7eb; --groupui-vwag-ref-color-green-200: #eaeeda; --groupui-vwag-ref-color-green-300: #dae1be; --groupui-vwag-ref-color-green-400: #cad3a1; --groupui-vwag-ref-color-green-500: #bdc88a; --groupui-vwag-ref-color-green-600: #afbd72; --groupui-vwag-ref-color-green-700: #a2b25b; --groupui-vwag-ref-color-green-800: #95a844; --groupui-vwag-ref-color-green-900: #7f8f3a; --groupui-vwag-ref-color-green-1000: #68752f; --groupui-vwag-ref-color-green-700-20: #a2b25b33; --groupui-vwag-ref-color-orange-100: #fff7db; --groupui-vwag-ref-color-orange-200: #f3e5b2; --groupui-vwag-ref-color-orange-300: #efdc99; --groupui-vwag-ref-color-orange-400: #ebd47f; --groupui-vwag-ref-color-orange-500: #e6c95f; --groupui-vwag-ref-color-orange-600: #e2bf40; --groupui-vwag-ref-color-orange-700: #ddb420; --groupui-vwag-ref-color-orange-800: #d8aa00; --groupui-vwag-ref-color-orange-900: #be9500; --groupui-vwag-ref-color-orange-1000: #a68200; --groupui-vwag-ref-color-orange-700-20: #ddb42033; --groupui-vwag-ref-color-red-100: #f7ebef; --groupui-vwag-ref-color-red-200: #ebced7; --groupui-vwag-ref-color-red-300: #d69daf; --groupui-vwag-ref-color-red-400: #c26d88; --groupui-vwag-ref-color-red-500: #ba5a79; --groupui-vwag-ref-color-red-600: #b2466b; --groupui-vwag-ref-color-red-700: #aa325c; --groupui-vwag-ref-color-red-800: #a21e4d; --groupui-vwag-ref-color-red-900: #801b42; --groupui-vwag-ref-color-red-1000: #5f1939; --groupui-vwag-ref-color-red-400-20: #c26d8833; --groupui-vwag-ref-color-signal-green-100: #eff7eb; --groupui-vwag-ref-color-signal-green-200: #ddedd5; --groupui-vwag-ref-color-signal-green-300: #c8e1bc; --groupui-vwag-ref-color-signal-green-400: #b5d6a5; --groupui-vwag-ref-color-signal-green-500: #a2cb8e; --groupui-vwag-ref-color-signal-green-600: #8dc076; --groupui-vwag-ref-color-signal-green-700: #7ab55e; --groupui-vwag-ref-color-signal-green-800: #64a844; --groupui-vwag-ref-color-signal-green-850: #66a14a; --groupui-vwag-ref-color-signal-green-900: #558f3a; --groupui-vwag-ref-color-signal-green-1000: #46752f; --groupui-vwag-ref-color-signal-green-1100: #395f26; --groupui-vwag-ref-color-signal-green-1200: #305020; --groupui-vwag-ref-color-signal-green-800-10: #64a8441a; --groupui-vwag-ref-color-signal-green-800-20: #64a84433; --groupui-vwag-ref-color-signal-green-700-10: #7ab55e1a; --groupui-vwag-ref-color-signal-green-700-20: #7ab55e33; --groupui-vwag-ref-color-signal-green-700-14: #7ab55e24; --groupui-vwag-ref-color-signal-orange-100: #f7f2eb; --groupui-vwag-ref-color-signal-orange-200: #f9e6cb; --groupui-vwag-ref-color-signal-orange-300: #fadaa9; --groupui-vwag-ref-color-signal-orange-400: #fbcd87; --groupui-vwag-ref-color-signal-orange-500: #fcc167; --groupui-vwag-ref-color-signal-orange-600: #fdb547; --groupui-vwag-ref-color-signal-orange-700: #fea925; --groupui-vwag-ref-color-signal-orange-800: #ff9b00; --groupui-vwag-ref-color-signal-orange-900: #e58b00; --groupui-vwag-ref-color-signal-orange-1000: #bf7400; --groupui-vwag-ref-color-signal-orange-1100: #a96700; --groupui-vwag-ref-color-signal-orange-1200: #8f5700; --groupui-vwag-ref-color-signal-orange-1300: #754700; --groupui-vwag-ref-color-signal-orange-800-10: #ff9b001a; --groupui-vwag-ref-color-signal-orange-800-20: #ff9b0033; --groupui-vwag-ref-color-signal-orange-700-10: #fea9251a; --groupui-vwag-ref-color-signal-orange-700-20: #fea92533; --groupui-vwag-ref-color-signal-orange-700-01: #fea92503; --groupui-vwag-ref-color-signal-red-100: #f7ebef; --groupui-vwag-ref-color-signal-red-200: #f3ccd0; --groupui-vwag-ref-color-signal-red-300: #efacb2; --groupui-vwag-ref-color-signal-red-400: #eb8c95; --groupui-vwag-ref-color-signal-red-500: #e76e79; --groupui-vwag-ref-color-signal-red-600: #e34f5c; --groupui-vwag-ref-color-signal-red-700: #df2f3f; --groupui-vwag-ref-color-signal-red-800: #da0c1f; --groupui-vwag-ref-color-signal-red-900: #a60918; --groupui-vwag-ref-color-signal-red-1000: #800712; --groupui-vwag-ref-color-signal-red-800-10: #da0c1f1a; --groupui-vwag-ref-color-signal-red-800-20: #da0c1f33; --groupui-vwag-ref-color-signal-red-500-10: #e76e791a; --groupui-vwag-ref-color-signal-red-500-20: #e76e7933; --groupui-vwag-ref-color-signal-red-800-04: #da0c1f0a; --groupui-vwag-ref-color-signal-red-800-08: #da0c1f14; --groupui-vwag-ref-color-signal-red-500-01: #e76e7903; --groupui-vwag-ref-color-signal-red-500-02: #e76e7905; --groupui-vwag-ref-color-black-20: #00000033; --groupui-vwag-ref-color-black-16: #00000029; --groupui-vwag-ref-color-black-60: #00000099; --groupui-vwag-ref-color-signal-blue-100: #cce6f9; --groupui-vwag-ref-color-signal-blue-200: #a9d8fa; --groupui-vwag-ref-color-signal-blue-300: #8bc8f4; --groupui-vwag-ref-color-signal-blue-400: #68b3e8; --groupui-vwag-ref-color-signal-blue-500: #489edb; --groupui-vwag-ref-color-signal-blue-600: #278cd3; --groupui-vwag-ref-color-signal-blue-700: #1477bd; --groupui-vwag-ref-color-signal-blue-800: #196195; --groupui-vwag-ref-color-signal-blue-900: #104870; --groupui-vwag-ref-color-signal-blue-1000: #0e394e; --groupui-vwag-ref-color-signal-blue-500-20: #489edb33; --groupui-vwag-ref-color-signal-blue-500-10: #489edb1a; --groupui-vwag-ref-color-signal-blue-700-20: #1477bd33; --groupui-vwag-ref-color-signal-blue-700-10: #1477bd1a; --groupui-vwag-ref-font-family-dummy: VWAG TheDummy; --groupui-vwag-ref-font-family-sans: VWAG TheSans; --groupui-vwag-ref-font-family-serif: VWAG TheAntiqua; --groupui-vwag-ref-font-size-8: 8px; --groupui-vwag-ref-font-size-10: 10px; --groupui-vwag-ref-font-size-12: 12px; --groupui-vwag-ref-font-size-14: 14px; --groupui-vwag-ref-font-size-15: 15px; --groupui-vwag-ref-font-size-16: 16px; --groupui-vwag-ref-font-size-17: 17px; --groupui-vwag-ref-font-size-18: 18px; --groupui-vwag-ref-font-size-20: 20px; --groupui-vwag-ref-font-size-22: 22px; --groupui-vwag-ref-font-size-24: 24px; --groupui-vwag-ref-font-size-26: 26px; --groupui-vwag-ref-font-size-28: 28px; --groupui-vwag-ref-font-size-30: 30px; --groupui-vwag-ref-font-size-32: 32px; --groupui-vwag-ref-font-size-34: 34px; --groupui-vwag-ref-font-size-36: 36px; --groupui-vwag-ref-font-size-40: 40px; --groupui-vwag-ref-font-size-48: 48px; --groupui-vwag-ref-font-size-50: 50px; --groupui-vwag-ref-font-size-60: 60px; --groupui-vwag-ref-font-size-72: 72px; --groupui-vwag-ref-letter-spacing-0: 0px; --groupui-vwag-ref-letter-spacing-18: 1.8px; --groupui-vwag-ref-letter-spacing-02: 0.2px; --groupui-vwag-ref-spacing-0: 0px; --groupui-vwag-ref-spacing-1: 1px; --groupui-vwag-ref-spacing-2: 2px; --groupui-vwag-ref-spacing-4: 4px; --groupui-vwag-ref-spacing-6: 6px; --groupui-vwag-ref-spacing-8: 8px; --groupui-vwag-ref-spacing-12: 12px; --groupui-vwag-ref-spacing-16: 16px; --groupui-vwag-ref-spacing-20: 20px; --groupui-vwag-ref-spacing-24: 24px; --groupui-vwag-ref-spacing-28: 28px; --groupui-vwag-ref-spacing-32: 32px; --groupui-vwag-ref-spacing-36: 36px; --groupui-vwag-ref-spacing-40: 40px; --groupui-vwag-ref-spacing-48: 48px; --groupui-vwag-ref-spacing-56: 56px; --groupui-vwag-ref-spacing-64: 64px; --groupui-vwag-ref-spacing-72: 72px; --groupui-vwag-ref-spacing-96: 96px; --groupui-vwag-ref-spacing-112: 112px; --groupui-vwag-ref-spacing-136: 136px; --groupui-vwag-ref-spacing-320: 320px; --groupui-vwag-ref-spacing-640: 640px; --groupui-vwag-ref-media-query-320: 320px; --groupui-vwag-ref-media-query-560: 560px; --groupui-vwag-ref-media-query-960: 960px; --groupui-vwag-ref-media-query-1280: 1280px; --groupui-vwag-ref-media-query-1620: 1620px; --groupui-vwag-ref-border-radius-0: 0px; --groupui-vwag-ref-border-radius-2: 2px; --groupui-vwag-ref-border-radius-12: 12px; --groupui-vwag-ref-border-radius-20: 20px; --groupui-vwag-ref-border-radius-9999: 9999px; --groupui-vwag-ref-border-width-0: 0px; --groupui-vwag-ref-border-width-1: 1px; --groupui-vwag-ref-border-width-2: 2px; --groupui-vwag-ref-border-width-3: 3px; --groupui-vwag-ref-border-width-4: 4px; --groupui-vwag-ref-border-width-5: 5px; --groupui-vwag-ref-border-width-6: 6px; --groupui-vwag-ref-icon-size-16: 16px; --groupui-vwag-ref-icon-size-24: 24px; --groupui-vwag-ref-icon-size-32: 32px; --groupui-vwag-ref-icon-size-48: 48px; --groupui-vwag-ref-line-height-100: 1; --groupui-vwag-ref-line-height-110: 1.1; --groupui-vwag-ref-line-height-114: 1.14; --groupui-vwag-ref-line-height-120: 1.2; --groupui-vwag-ref-line-height-130: 1.3; --groupui-vwag-ref-line-height-140: 1.4; --groupui-vwag-ref-line-height-150: 1.5; --groupui-vwag-ref-line-height-178: 1.78; --groupui-vwag-ref-z-index-100: 100; --groupui-vwag-ref-z-index-200: 200; --groupui-vwag-ref-z-index-300: 300; --groupui-vwag-ref-z-index-350: 350; --groupui-vwag-ref-z-index-400: 400; --groupui-vwag-ref-z-index-500: 500; --groupui-vwag-ref-z-index-600: 600; --groupui-vwag-ref-z-index-700: 700; --groupui-vwag-ref-z-index-800: 800; --groupui-vwag-ref-z-index-900: 900; --groupui-vwag-ref-opacity-0: 0; --groupui-vwag-ref-opacity-10: 0.1; --groupui-vwag-ref-opacity-20: 0.2; --groupui-vwag-ref-opacity-30: 0.3; --groupui-vwag-ref-opacity-40: 0.4; --groupui-vwag-ref-opacity-50: 0.5; --groupui-vwag-ref-opacity-60: 0.6; --groupui-vwag-ref-opacity-70: 0.7; --groupui-vwag-ref-opacity-80: 0.8; --groupui-vwag-ref-opacity-90: 0.9; --groupui-vwag-ref-opacity-100: 1; --groupui-vwag-ref-font-weight-300: 300; --groupui-vwag-ref-font-weight-400: 400; --groupui-vwag-ref-font-weight-700: 700; --groupui-vwag-ref-font-weight-dummy: normal; --groupui-vwag-ref-stroke-style-dashed: dashed; --groupui-vwag-ref-stroke-style-solid: solid; --groupui-vwag-ref-duration-0: 0s; --groupui-vwag-ref-duration-120: 0.12s; --groupui-vwag-ref-duration-160: 0.16s; --groupui-vwag-ref-duration-240: 0.24s; --groupui-vwag-ref-duration-320: 0.32s; --groupui-vwag-ref-duration-480: 0.48s; --groupui-vwag-ref-duration-640: 0.64s; --groupui-vwag-ref-duration-2000: 2s; --groupui-vwag-ref-cubic-bezier-ease: cubic-bezier(0.25, 0.1, 0.25, 1); --groupui-vwag-ref-cubic-bezier-ease-in: cubic-bezier(0.42, 0, 1, 1); --groupui-vwag-ref-cubic-bezier-ease-out: cubic-bezier(0, 0, 0.58, 1); --groupui-vwag-ref-cubic-bezier-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1); --groupui-vwag-ref-cubic-bezier-linear: cubic-bezier(0, 0, 1, 1); --groupui-vwag-ref-shadow-0: 0px 0px 0px 0px #00000000; --groupui-vwag-ref-shadow-16: 0px 8px 16px 1px #0000003d; --groupui-vwag-ref-shadow-24: 0px 16px 24px 1px #0000003d; --groupui-vwag-ref-shadow-32: 0px 24px 32px 1px #0000003d; --groupui-vwag-ref-shadow-04: 0px 2px 4px 1px #0000003d; --groupui-vwag-ref-shadow-08: 0px 4px 8px 1px #0000003d; } [data-gui-brand='vwag'] { --groupui-sys-color-shadow-0: var(--groupui-vwag-ref-color-transparent); --groupui-sys-color-shadow-4: var(--groupui-vwag-ref-color-black-20); --groupui-sys-color-shadow-8: var(--groupui-vwag-ref-color-black-20); --groupui-sys-color-shadow-16: var(--groupui-vwag-ref-color-black-16); --groupui-sys-color-shadow-24: var(--groupui-vwag-ref-color-black-20); --groupui-sys-color-brand-core-inverse: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-brand-core: var(--groupui-vwag-ref-color-grey-800); --groupui-sys-color-link-secondary-visited-pressed-inverse: var( --groupui-vwag-ref-color-violet-200 ); --groupui-sys-color-link-secondary-visited-hover-inverse: var( --groupui-vwag-ref-color-violet-200 ); --groupui-sys-color-link-secondary-visited-default-inverse: var( --groupui-vwag-ref-color-violet-200 ); --groupui-sys-color-link-secondary-visited-pressed: var( --groupui-vwag-ref-color-violet-500 ); --groupui-sys-color-link-secondary-visited-hover: var( --groupui-vwag-ref-color-violet-500 ); --groupui-sys-color-link-secondary-visited-default: var( --groupui-vwag-ref-color-violet-800 ); --groupui-sys-color-link-secondary-unvisited-pressed-inverse: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-link-secondary-unvisited-hover-inverse: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-link-secondary-unvisited-default-inverse: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-link-secondary-unvisited-pressed: var( --groupui-vwag-ref-color-grey-1000-80 ); --groupui-sys-color-link-secondary-unvisited-hover: var( --groupui-vwag-ref-color-grey-1000-80 ); --groupui-sys-color-link-secondary-unvisited-default: var( --groupui-vwag-ref-color-grey-1000 ); --groupui-sys-color-link-primary-visited-pressed-inverse: var( --groupui-vwag-ref-color-violet-200 ); --groupui-sys-color-link-primary-visited-hover-inverse: var( --groupui-vwag-ref-color-violet-200 ); --groupui-sys-color-link-primary-visited-default-inverse: var( --groupui-vwag-ref-color-violet-200 ); --groupui-sys-color-link-primary-visited-pressed: var( --groupui-vwag-ref-color-violet-800 ); --groupui-sys-color-link-primary-visited-hover: var( --groupui-vwag-ref-color-violet-800 ); --groupui-sys-color-link-primary-visited-default: var( --groupui-vwag-ref-color-violet-800 ); --groupui-sys-color-link-primary-unvisited-pressed-inverse: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-link-primary-unvisited-hover-inverse: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-link-primary-unvisited-default-inverse: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-link-primary-unvisited-pressed: var( --groupui-vwag-ref-color-petrol-1000 ); --groupui-sys-color-link-primary-unvisited-hover: var( --groupui-vwag-ref-color-petrol-900 ); --groupui-sys-color-link-primary-unvisited-default: var( --groupui-vwag-ref-color-petrol-800 ); --groupui-sys-color-text-weakest-inverse: var( --groupui-vwag-ref-color-white-0-40 ); --groupui-sys-color-text-weaker-inverse: var( --groupui-vwag-ref-color-white-0-60 ); --groupui-sys-color-text-weak-inverse: var( --groupui-vwag-ref-color-white-0-80 ); --groupui-sys-color-text-normal-inverse: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-text-weakest: var(--groupui-vwag-ref-color-grey-400); --groupui-sys-color-text-weaker: var(--groupui-vwag-ref-color-grey-700); --groupui-sys-color-text-weak: var(--groupui-vwag-ref-color-grey-800); --groupui-sys-color-text-normal: var(--groupui-vwag-ref-color-grey-1000); --groupui-sys-color-line-ghost: var(--groupui-vwag-ref-color-transparent); --groupui-sys-color-line-silent-inverse: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-line-silent: var(--groupui-vwag-ref-color-white-0); --groupui-sys-color-line-weak-inverse: var( --groupui-vwag-ref-color-white-0-20 ); --groupui-sys-color-line-weak: var(--groupui-vwag-ref-color-grey-200); --groupui-sys-color-line-ghost-inverse: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-on-light-subtle-default: var( --groupui-vwag-ref-color-grey-1000 ); --groupui-sys-color-on-light-subtle-default-inverse: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-on-light-basic-default: var( --groupui-vwag-ref-color-grey-1000 ); --groupui-sys-color-on-light-basic-default-inverse: var( --groupui-vwag-ref-color-grey-1000 ); --groupui-sys-color-light-subtle-pressed: var( --groupui-vwag-ref-color-grey-300-20 ); --groupui-sys-color-light-subtle-hover: var( --groupui-vwag-ref-color-grey-300-10 ); --groupui-sys-color-light-subtle-default: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-light-subtle-default-inverse: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-light-subtle-hover-inverse: var( --groupui-vwag-ref-color-white-0-10 ); --groupui-sys-color-light-subtle-pressed-inverse: var( --groupui-vwag-ref-color-white-0-20 ); --groupui-sys-color-light-basic-pressed: var( --groupui-vwag-ref-color-grey-400 ); --groupui-sys-color-light-basic-hover: var( --groupui-vwag-ref-color-grey-300 ); --groupui-sys-color-light-basic-default: var( --groupui-vwag-ref-color-grey-200 ); --groupui-sys-color-light-basic-default-inverse: var( --groupui-vwag-ref-color-grey-200 ); --groupui-sys-color-light-basic-hover-inverse: var( --groupui-vwag-ref-color-grey-300 ); --groupui-sys-color-light-basic-pressed-inverse: var( --groupui-vwag-ref-color-grey-400 ); --groupui-sys-color-on-neutral-basic-default: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-neutral-subtle-pressed: var( --groupui-vwag-ref-color-grey-700-20 ); --groupui-sys-color-neutral-subtle-hover: var( --groupui-vwag-ref-color-grey-700-10 ); --groupui-sys-color-neutral-subtle-default: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-neutral-basic-pressed: var( --groupui-vwag-ref-color-grey-900 ); --groupui-sys-color-neutral-basic-hover: var( --groupui-vwag-ref-color-grey-800 ); --groupui-sys-color-neutral-basic-default: var( --groupui-vwag-ref-color-grey-700 ); --groupui-sys-color-neutral-basic-default-inverse: var( --groupui-vwag-ref-color-grey-300 ); --groupui-sys-color-neutral-weak-default: var( --groupui-vwag-ref-color-grey-200 ); --groupui-sys-color-on-information-basic-default: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-information-weak-default: var( --groupui-vwag-ref-color-signal-blue-100 ); --groupui-sys-color-information-subtle-pressed: var( --groupui-vwag-ref-color-signal-blue-700-20 ); --groupui-sys-color-information-subtle-hover: var( --groupui-vwag-ref-color-signal-blue-700-10 ); --groupui-sys-color-information-subtle-default: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-information-basic-default: var( --groupui-vwag-ref-color-signal-blue-700 ); --groupui-sys-color-information-basic-hover: var( --groupui-vwag-ref-color-signal-blue-800 ); --groupui-sys-color-information-basic-pressed: var( --groupui-vwag-ref-color-signal-blue-900 ); --groupui-sys-color-information-basic-default-inverse: var( --groupui-vwag-ref-color-signal-blue-500 ); --groupui-sys-color-on-success-basic-default: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-success-weak-default: var( --groupui-vwag-ref-color-signal-green-200 ); --groupui-sys-color-success-subtle-pressed: var( --groupui-vwag-ref-color-signal-green-800-20 ); --groupui-sys-color-success-subtle-hover: var( --groupui-vwag-ref-color-signal-green-800-10 ); --groupui-sys-color-success-subtle-default: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-success-basic-pressed: var( --groupui-vwag-ref-color-signal-green-1200 ); --groupui-sys-color-success-basic-hover: var( --groupui-vwag-ref-color-signal-green-1100 ); --groupui-sys-color-success-basic-default: var( --groupui-vwag-ref-color-signal-green-1000 ); --groupui-sys-color-success-basic-default-inverse: var( --groupui-vwag-ref-color-signal-green-700 ); --groupui-sys-color-on-warning-basic-default: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-warning-weak-default: var( --groupui-vwag-ref-color-signal-orange-200 ); --groupui-sys-color-warning-subtle-pressed: var( --groupui-vwag-ref-color-signal-orange-700-01 ); --groupui-sys-color-warning-subtle-hover: var( --groupui-vwag-ref-color-signal-orange-700-01 ); --groupui-sys-color-warning-subtle-default: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-warning-basic-pressed: var( --groupui-vwag-ref-color-signal-orange-1300 ); --groupui-sys-color-warning-basic-hover: var( --groupui-vwag-ref-color-signal-orange-1200 ); --groupui-sys-color-warning-basic-default: var( --groupui-vwag-ref-color-signal-orange-1100 ); --groupui-sys-color-warning-basic-default-inverse: var( --groupui-vwag-ref-color-signal-orange-500 ); --groupui-sys-color-on-danger-basic-default: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-danger-weak-default: var( --groupui-vwag-ref-color-signal-red-200 ); --groupui-sys-color-danger-subtle-pressed: var( --groupui-vwag-ref-color-signal-red-800-08 ); --groupui-sys-color-danger-subtle-hover: var( --groupui-vwag-ref-color-signal-red-800-04 ); --groupui-sys-color-danger-subtle-default: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-danger-basic-pressed: var( --groupui-vwag-ref-color-signal-red-1000 ); --groupui-sys-color-danger-basic-hover: var( --groupui-vwag-ref-color-signal-red-900 ); --groupui-sys-color-danger-basic-default: var( --groupui-vwag-ref-color-signal-red-800 ); --groupui-sys-color-danger-basic-default-inverse: var( --groupui-vwag-ref-color-signal-red-500 ); --groupui-sys-color-on-hero-basic-disabled: var( --groupui-vwag-ref-color-dummy ); --groupui-sys-color-on-hero-basic-default: var( --groupui-vwag-ref-color-dummy ); --groupui-sys-color-hero-subtle-pressed: var( --groupui-vwag-ref-color-dummy ); --groupui-sys-color-hero-subtle-hover: var(--groupui-vwag-ref-color-dummy); --groupui-sys-color-hero-subtle-default: var( --groupui-vwag-ref-color-dummy ); --groupui-sys-color-hero-basic-disabled: var( --groupui-vwag-ref-color-dummy ); --groupui-sys-color-hero-basic-pressed: var(--groupui-vwag-ref-color-dummy); --groupui-sys-color-hero-basic-hover: var(--groupui-vwag-ref-color-dummy); --groupui-sys-color-hero-basic-default: var(--groupui-vwag-ref-color-dummy); --groupui-sys-color-on-action-basic-disabled-inverse: var( --groupui-vwag-ref-color-petrol-800 ); --groupui-sys-color-on-action-basic-default-inverse: var( --groupui-vwag-ref-color-petrol-800 ); --groupui-sys-color-on-action-basic-disabled: var( --groupui-vwag-ref-color-grey-100 ); --groupui-sys-color-on-action-basic-default: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-on-action-muted-default: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-on-action-muted-disabled: var( --groupui-vwag-ref-color-grey-100 ); --groupui-sys-color-on-action-quiet-default: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-action-muted-disabled: var( --groupui-vwag-ref-color-grey-400 ); --groupui-sys-color-action-muted-pressed: var( --groupui-vwag-ref-color-grey-900 ); --groupui-sys-color-action-muted-hover: var( --groupui-vwag-ref-color-grey-800 ); --groupui-sys-color-action-muted-default: var( --groupui-vwag-ref-color-grey-700 ); --groupui-sys-color-action-quiet-disabled: var( --groupui-vwag-ref-color-grey-200 ); --groupui-sys-color-action-quiet-pressed: var( --groupui-vwag-ref-color-grey-1000-60 ); --groupui-sys-color-action-quiet-hover: var( --groupui-vwag-ref-color-grey-1000-80 ); --groupui-sys-color-action-quiet-default: var( --groupui-vwag-ref-color-grey-1000 ); --groupui-sys-color-action-quiet-disabled-inverse: var( --groupui-vwag-ref-color-white-0-20 ); --groupui-sys-color-action-subtle-pressed-inverse: var( --groupui-vwag-ref-color-white-0-20 ); --groupui-sys-color-action-subtle-hover-inverse: var( --groupui-vwag-ref-color-white-0-10 ); --groupui-sys-color-action-subtle-default-inverse: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-action-subtle-pressed: var( --groupui-vwag-ref-color-petrol-800-20 ); --groupui-sys-color-action-subtle-hover: var( --groupui-vwag-ref-color-petrol-800-10 ); --groupui-sys-color-action-subtle-default: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-action-subtle-disabled: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-action-subtle-disabled-inverse: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-action-basic-disabled-inverse: var( --groupui-vwag-ref-color-white-0-40 ); --groupui-sys-color-action-basic-pressed-inverse: var( --groupui-vwag-ref-color-white-0-80 ); --groupui-sys-color-action-basic-hover-inverse: var( --groupui-vwag-ref-color-white-0-90 ); --groupui-sys-color-action-basic-default-inverse: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-action-basic-disabled: var( --groupui-vwag-ref-color-grey-400 ); --groupui-sys-color-action-basic-pressed: var( --groupui-vwag-ref-color-petrol-1000 ); --groupui-sys-color-action-basic-hover: var( --groupui-vwag-ref-color-petrol-900 ); --groupui-sys-color-action-basic-default: var( --groupui-vwag-ref-color-petrol-800 ); --groupui-sys-color-action-silent-default: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-action-silent-disabled: var( --groupui-vwag-ref-color-grey-100 ); --groupui-sys-color-action-silent-default-inverse: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-action-quiet-subtle-default: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-action-quiet-subtle-hover: var( --groupui-vwag-ref-color-grey-1000-05 ); --groupui-sys-color-action-quiet-subtle-pressed: var( --groupui-vwag-ref-color-grey-1000-10 ); --groupui-sys-color-action-quiet-subtle-disabled: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-background-connect: var(--groupui-vwag-ref-color-dummy); --groupui-sys-color-background-inform: var( --groupui-vwag-ref-color-petrol-1000 ); --groupui-sys-color-background-canvas: var( --groupui-vwag-ref-color-grey-100 ); --groupui-sys-color-background-base: var(--groupui-vwag-ref-color-white-0); --groupui-sys-color-background-backdrop: var( --groupui-vwag-ref-color-black-60 ); --groupui-sys-color-background-stripe: var( --groupui-vwag-ref-color-grey-100-50 ); --groupui-sys-color-background-float: var( --groupui-vwag-ref-color-grey-1000 ); --groupui-sys-color-accent-weak-default-01: var( --groupui-vwag-ref-color-purple-100 ); --groupui-sys-color-accent-weak-default-02: var( --groupui-vwag-ref-color-violet-100 ); --groupui-sys-color-accent-weak-default-03: var( --groupui-vwag-ref-color-blue-100 ); --groupui-sys-color-accent-weak-default-04: var( --groupui-vwag-ref-color-lime-200 ); --groupui-sys-color-accent-weak-default-05: var( --groupui-vwag-ref-color-mint-100 ); --groupui-sys-color-accent-weak-default-06: var( --groupui-vwag-ref-color-red-200 ); --groupui-sys-color-accent-weak-default-07: var( --groupui-vwag-ref-color-orange-200 ); --groupui-sys-color-accent-weak-default-08: var( --groupui-vwag-ref-color-green-200 ); --groupui-sys-color-accent-basic-default-01: var( --groupui-vwag-ref-color-purple-700 ); --groupui-sys-color-accent-basic-default-02: var( --groupui-vwag-ref-color-violet-700 ); --groupui-sys-color-accent-basic-default-03: var( --groupui-vwag-ref-color-blue-700 ); --groupui-sys-color-accent-basic-default-04: var( --groupui-vwag-ref-color-lime-800 ); --groupui-sys-color-accent-basic-default-05: var( --groupui-vwag-ref-color-mint-900 ); --groupui-sys-color-accent-basic-default-06: var( --groupui-vwag-ref-color-red-800 ); --groupui-sys-color-accent-basic-default-07: var( --groupui-vwag-ref-color-orange-800 ); --groupui-sys-color-accent-basic-default-08: var( --groupui-vwag-ref-color-green-800 ); --groupui-sys-color-accent-subtle-default-01: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-accent-subtle-default-02: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-accent-subtle-default-03: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-accent-subtle-default-04: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-accent-subtle-default-05: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-accent-subtle-default-06: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-accent-subtle-default-07: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-accent-subtle-default-08: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-on-accent-basic-default-01: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-on-accent-basic-default-02: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-on-accent-basic-default-03: var( --groupui-vwag-ref-color-grey-1000 ); --groupui-sys-color-on-accent-basic-default-04: var( --groupui-vwag-ref-color-grey-1000 ); --groupui-sys-color-on-accent-basic-default-05: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-on-accent-basic-default-06: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-on-accent-basic-default-07: var( --groupui-vwag-ref-color-grey-1000 ); --groupui-sys-color-on-accent-basic-default-08: var( --groupui-vwag-ref-color-grey-1000 ); --groupui-sys-color-navigation-unselected-basic-default-inverse: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-navigation-unselected-basic-hover-inverse: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-navigation-unselected-basic-pressed-inverse: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-navigation-unselected-basic-disabled-inverse: var( --groupui-vwag-ref-color-white-0-40 ); --groupui-sys-color-navigation-unselected-basic-default: var( --groupui-vwag-ref-color-petrol-800 ); --groupui-sys-color-navigation-unselected-basic-hover: var( --groupui-vwag-ref-color-petrol-800 ); --groupui-sys-color-navigation-unselected-basic-pressed: var( --groupui-vwag-ref-color-petrol-800 ); --groupui-sys-color-navigation-unselected-basic-disabled: var( --groupui-vwag-ref-color-grey-400 ); --groupui-sys-color-navigation-unselected-subtle-default-inverse: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-navigation-unselected-subtle-hover-inverse: var( --groupui-vwag-ref-color-white-0-10 ); --groupui-sys-color-navigation-unselected-subtle-pressed-inverse: var( --groupui-vwag-ref-color-white-0-20 ); --groupui-sys-color-navigation-unselected-subtle-disabled-inverse: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-navigation-unselected-subtle-default: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-navigation-unselected-subtle-hover: var( --groupui-vwag-ref-color-petrol-800-10 ); --groupui-sys-color-navigation-unselected-subtle-pressed: var( --groupui-vwag-ref-color-petrol-800-20 ); --groupui-sys-color-navigation-unselected-subtle-disabled: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-navigation-selected-basic-default-inverse: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-navigation-selected-basic-hover-inverse: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-navigation-selected-basic-pressed-inverse: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-navigation-selected-basic-default: var( --groupui-vwag-ref-color-petrol-800 ); --groupui-sys-color-navigation-selected-basic-hover: var( --groupui-vwag-ref-color-petrol-800 ); --groupui-sys-color-navigation-selected-basic-pressed: var( --groupui-vwag-ref-color-petrol-800 ); --groupui-sys-color-navigation-selected-subtle-default-inverse: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-navigation-selected-subtle-hover-inverse: var( --groupui-vwag-ref-color-white-0-10 ); --groupui-sys-color-navigation-selected-subtle-pressed-inverse: var( --groupui-vwag-ref-color-white-0-20 ); --groupui-sys-color-navigation-selected-subtle-default: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-navigation-selected-subtle-hover: var( --groupui-vwag-ref-color-petrol-800-10 ); --groupui-sys-color-navigation-selected-subtle-pressed: var( --groupui-vwag-ref-color-petrol-800-20 ); --groupui-sys-color-card-border-level-2: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-card-border-level-2-inverse: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-border-radius-none: var(--groupui-vwag-ref-border-radius-0); --groupui-sys-border-radius-s: var(--groupui-vwag-ref-border-radius-2); --groupui-sys-border-radius-m: var(--groupui-vwag-ref-border-radius-2); --groupui-sys-border-radius-xl: var(--groupui-vwag-ref-border-radius-2); --groupui-sys-border-radius-full: var( --groupui-vwag-ref-border-radius-9999 ); --groupui-sys-icon-size-l: var(--groupui-vwag-ref-icon-size-32); --groupui-sys-icon-size-m: var(--groupui-vwag-ref-icon-size-24); --groupui-sys-icon-size-s: var(--groupui-vwag-ref-icon-size-16); --groupui-sys-icon-size-xl: var(--groupui-vwag-ref-icon-size-48); --groupui-sys-media-query-s: var(--groupui-vwag-ref-media-query-320); --groupui-sys-media-query-m: var(--groupui-vwag-ref-media-query-560); --groupui-sys-media-query-l: var(--groupui-vwag-ref-media-query-960); --groupui-sys-media-query-xl: var(--groupui-vwag-ref-media-query-1280); --groupui-sys-media-query-xxl: var(--groupui-vwag-ref-media-query-1620); --groupui-sys-font-size-200: var(--groupui-vwag-ref-font-size-8); --groupui-sys-font-size-250: var(--groupui-vwag-ref-font-size-10); --groupui-sys-font-size-300: var(--groupui-vwag-ref-font-size-12); --groupui-sys-font-size-350: var(--groupui-vwag-ref-font-size-14); --groupui-sys-font-size-375: var(--groupui-vwag-ref-font-size-15); --groupui-sys-font-size-400: var(--groupui-vwag-ref-font-size-16); --groupui-sys-font-size-425: var(--groupui-vwag-ref-font-size-17); --groupui-sys-font-size-450: var(--groupui-vwag-ref-font-size-18); --groupui-sys-font-size-500: var(--groupui-vwag-ref-font-size-20); --groupui-sys-font-size-550: var(--groupui-vwag-ref-font-size-22); --groupui-sys-font-size-600: var(--groupui-vwag-ref-font-size-24); --groupui-sys-font-size-650: var(--groupui-vwag-ref-font-size-26); --groupui-sys-font-size-700: var(--groupui-vwag-ref-font-size-28); --groupui-sys-font-size-750: var(--groupui-vwag-ref-font-size-30); --groupui-sys-font-size-800: var(--groupui-vwag-ref-font-size-32); --groupui-sys-font-size-850: var(--groupui-vwag-ref-font-size-34); --groupui-sys-font-size-900: var(--groupui-vwag-ref-font-size-36); --groupui-sys-font-size-1000: var(--groupui-vwag-ref-font-size-40); --groupui-sys-font-size-1200: var(--groupui-vwag-ref-font-size-48); --groupui-sys-font-size-1250: var(--groupui-vwag-ref-font-size-50); --groupui-sys-font-size-1500: var(--groupui-vwag-ref-font-size-60); --groupui-sys-font-size-1800: var(--groupui-vwag-ref-font-size-72); --groupui-sys-spacing-0: var(--groupui-vwag-ref-spacing-0); --groupui-sys-spacing-25: var(--groupui-vwag-ref-spacing-1); --groupui-sys-spacing-50: var(--groupui-vwag-ref-spacing-2); --groupui-sys-spacing-100: var(--groupui-vwag-ref-spacing-4); --groupui-sys-spacing-150: var(--groupui-vwag-ref-spacing-6); --groupui-sys-spacing-200: var(--groupui-vwag-ref-spacing-8); --groupui-sys-spacing-300: var(--groupui-vwag-ref-spacing-12); --groupui-sys-spacing-400: var(--groupui-vwag-ref-spacing-16); --groupui-sys-spacing-500: var(--groupui-vwag-ref-spacing-20); --groupui-sys-spacing-600: var(--groupui-vwag-ref-spacing-24); --groupui-sys-spacing-700: var(--groupui-vwag-ref-spacing-28); --groupui-sys-spacing-800: var(--groupui-vwag-ref-spacing-32); --groupui-sys-spacing-900: var(--groupui-vwag-ref-spacing-36); --groupui-sys-spacing-1000: var(--groupui-vwag-ref-spacing-40); --groupui-sys-spacing-1200: var(--groupui-vwag-ref-spacing-48); --groupui-sys-spacing-1400: var(--groupui-vwag-ref-spacing-56); --groupui-sys-spacing-1600: var(--groupui-vwag-ref-spacing-64); --groupui-sys-spacing-1800: var(--groupui-vwag-ref-spacing-72); --groupui-sys-spacing-2400: var(--groupui-vwag-ref-spacing-96); --groupui-sys-spacing-2800: var(--groupui-vwag-ref-spacing-112); --groupui-sys-spacing-3400: var(--groupui-vwag-ref-spacing-136); --groupui-sys-spacing-8000: var(--groupui-vwag-ref-spacing-320); --groupui-sys-spacing-16000: var(--groupui-vwag-ref-spacing-640); --groupui-sys-letter-spacing-regular: var( --groupui-vwag-ref-letter-spacing-02 ); --groupui-sys-letter-spacing-loose: var( --groupui-vwag-ref-letter-spacing-18 ); --groupui-sys-border-width-none: var(--groupui-vwag-ref-border-width-0); --groupui-sys-border-width-s: var(--groupui-vwag-ref-border-width-1); --groupui-sys-border-width-m: var(--groupui-vwag-ref-border-width-2); --groupui-sys-border-width-card-level-2: var( --groupui-vwag-ref-border-width-0 ); --groupui-sys-border-width-navigation: var( --groupui-vwag-ref-border-width-0 ); --groupui-sys-border-width-l: var(--groupui-vwag-ref-border-width-3); --groupui-sys-border-width-xl: var(--groupui-vwag-ref-border-width-4); --groupui-sys-border-width-xxl: var(--groupui-vwag-ref-border-width-5); --groupui-sys-border-width-xxxl: var(--groupui-vwag-ref-border-width-6); --groupui-sys-z-index-content-layer: var(--groupui-vwag-ref-z-index-100); --groupui-sys-z-index-navigation: var(--groupui-vwag-ref-z-index-300); --groupui-sys-z-index-popover: var(--groupui-vwag-ref-z-index-400); --groupui-sys-z-index-toast: var(--groupui-vwag-ref-z-index-600); --groupui-sys-z-index-backdrop: var(--groupui-vwag-ref-z-index-700); --groupui-sys-z-index-modal: var(--groupui-vwag-ref-z-index-800); --groupui-sys-z-index-process-indicator: var( --groupui-vwag-ref-z-index-900 ); --groupui-sys-z-index-tooltip: var(--groupui-vwag-ref-z-index-500); --groupui-sys-z-index-fab: var(--groupui-vwag-ref-z-index-350); --groupui-sys-line-height-s: var(--groupui-vwag-ref-line-height-110); --groupui-sys-line-height-m: var(--groupui-vwag-ref-line-height-120); --groupui-sys-line-height-l: var(--groupui-vwag-ref-line-height-130); --groupui-sys-line-height-xl: var(--groupui-vwag-ref-line-height-140); --groupui-sys-line-height-xxl: var(--groupui-vwag-ref-line-height-150); --groupui-sys-line-height-xs: var(--groupui-vwag-ref-line-height-100); --groupui-sys-opacity-0: var(--groupui-vwag-ref-opacity-0); --groupui-sys-opacity-10: var(--groupui-vwag-ref-opacity-10); --groupui-sys-opacity-20: var(--groupui-vwag-ref-opacity-20); --groupui-sys-opacity-30: var(--groupui-vwag-ref-opacity-30); --groupui-sys-opacity-40: var(--groupui-vwag-ref-opacity-40); --groupui-sys-opacity-50: var(--groupui-vwag-ref-opacity-50); --groupui-sys-opacity-60: var(--groupui-vwag-ref-opacity-60); --groupui-sys-opacity-70: var(--groupui-vwag-ref-opacity-70); --groupui-sys-opacity-80: var(--groupui-vwag-ref-opacity-80); --groupui-sys-opacity-90: var(--groupui-vwag-ref-opacity-90); --groupui-sys-opacity-100: var(--groupui-vwag-ref-opacity-100); --groupui-sys-duration-none: var(--groupui-vwag-ref-duration-0); --groupui-sys-duration-slow-1: var(--groupui-vwag-ref-duration-640); --groupui-sys-duration-slow-2: var(--groupui-vwag-ref-duration-480); --groupui-sys-duration-medium-1: var(--groupui-vwag-ref-duration-320); --groupui-sys-duration-medium-2: var(--groupui-vwag-ref-duration-240); --groupui-sys-duration-fast-1: var(--groupui-vwag-ref-duration-160); --groupui-sys-duration-fast-2: var(--groupui-vwag-ref-duration-120); --groupui-sys-duration-spinner: var(--groupui-vwag-ref-duration-2000); --groupui-sys-font-family-secondary: var( --groupui-vwag-ref-font-family-serif ); --groupui-sys-font-family-primary: var(--groupui-vwag-ref-font-family-sans); --groupui-sys-stroke-style-primary: var( --groupui-vwag-ref-stroke-style-solid ); --groupui-sys-stroke-style-secondary: var( --groupui-vwag-ref-stroke-style-dashed ); --groupui-sys-font-weight-action: var(--groupui-vwag-ref-font-weight-700); --groupui-sys-font-weight-normal: var(--groupui-vwag-ref-font-weight-400); --groupui-sys-font-weight-bold: var(--groupui-vwag-ref-font-weight-700); --groupui-sys-font-weight-light: var(--groupui-vwag-ref-font-weight-300); --groupui-sys-cubic-bezier-linear: var( --groupui-vwag-ref-cubic-bezier-linear ); --groupui-sys-cubic-bezier-ease-in-out: var( --groupui-vwag-ref-cubic-bezier-ease-in-out ); --groupui-sys-cubic-bezier-ease-out: var( --groupui-vwag-ref-cubic-bezier-ease-out ); --groupui-sys-cubic-bezier-ease-in: var( --groupui-vwag-ref-cubic-bezier-ease-in ); --groupui-sys-cubic-bezier-ease: var(--groupui-vwag-ref-cubic-bezier-ease); --groupui-sys-shadow-none: var(--groupui-vwag-ref-shadow-0); --groupui-sys-shadow-m: var(--groupui-vwag-ref-shadow-08); --groupui-sys-shadow-navigation: var(--groupui-vwag-ref-shadow-08); --groupui-sys-shadow-tooltip: var(--groupui-vwag-ref-shadow-08); --groupui-sys-shadow-modal: var(--groupui-vwag-ref-shadow-08); --groupui-sys-shadow-card-level-1-default: var(--groupui-vwag-ref-shadow-0); --groupui-sys-shadow-card-level-1-hover: var(--groupui-vwag-ref-shadow-04); --groupui-sys-shadow-card-level-2-default: var( --groupui-vwag-ref-shadow-08 ); --groupui-sys-shadow-card-level-2-hover: var(--groupui-vwag-ref-shadow-16); --groupui-sys-shadow-card-level-3-default: var( --groupui-vwag-ref-shadow-24 ); --groupui-sys-shadow-card-level-3-hover: var(--groupui-vwag-ref-shadow-32); --groupui-sys-shadow-popover: var(--groupui-vwag-ref-shadow-08); --groupui-sys-shadow-toast: var(--groupui-vwag-ref-shadow-08); } [data-gui-brand='vwag'][data-gui-mode='dark'] { --groupui-sys-color-shadow-0: var(--groupui-vwag-ref-color-transparent); --groupui-sys-color-shadow-4: var(--groupui-vwag-ref-color-black-60); --groupui-sys-color-shadow-8: var(--groupui-vwag-ref-color-black-60); --groupui-sys-color-shadow-16: var(--groupui-vwag-ref-color-black-60); --groupui-sys-color-shadow-24: var(--groupui-vwag-ref-color-black-60); --groupui-sys-color-brand-core-inverse: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-brand-core: var(--groupui-vwag-ref-color-white-0); --groupui-sys-color-link-secondary-visited-pressed-inverse: var( --groupui-vwag-ref-color-violet-200 ); --groupui-sys-color-link-secondary-visited-hover-inverse: var( --groupui-vwag-ref-color-violet-200 ); --groupui-sys-color-link-secondary-visited-default-inverse: var( --groupui-vwag-ref-color-violet-200 ); --groupui-sys-color-link-secondary-visited-pressed: var( --groupui-vwag-ref-color-violet-200 ); --groupui-sys-color-link-secondary-visited-hover: var( --groupui-vwag-ref-color-violet-200 ); --groupui-sys-color-link-secondary-visited-default: var( --groupui-vwag-ref-color-violet-200 ); --groupui-sys-color-link-secondary-unvisited-pressed-inverse: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-link-secondary-unvisited-hover-inverse: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-link-secondary-unvisited-default-inverse: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-link-secondary-unvisited-pressed: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-link-secondary-unvisited-hover: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-link-secondary-unvisited-default: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-link-primary-visited-pressed-inverse: var( --groupui-vwag-ref-color-violet-200 ); --groupui-sys-color-link-primary-visited-hover-inverse: var( --groupui-vwag-ref-color-violet-200 ); --groupui-sys-color-link-primary-visited-default-inverse: var( --groupui-vwag-ref-color-violet-200 ); --groupui-sys-color-link-primary-visited-pressed: var( --groupui-vwag-ref-color-violet-200 ); --groupui-sys-color-link-primary-visited-hover: var( --groupui-vwag-ref-color-violet-200 ); --groupui-sys-color-link-primary-visited-default: var( --groupui-vwag-ref-color-violet-200 ); --groupui-sys-color-link-primary-unvisited-pressed-inverse: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-link-primary-unvisited-hover-inverse: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-link-primary-unvisited-default-inverse: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-link-primary-unvisited-pressed: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-link-primary-unvisited-hover: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-link-primary-unvisited-default: var( --groupui-vwag-ref-color-aqua-500 ); --groupui-sys-color-text-weakest-inverse: var( --groupui-vwag-ref-color-white-0-40 ); --groupui-sys-color-text-weaker-inverse: var( --groupui-vwag-ref-color-white-0-60 ); --groupui-sys-color-text-weak-inverse: var( --groupui-vwag-ref-color-white-0-80 ); --groupui-sys-color-text-normal-inverse: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-text-weakest: var(--groupui-vwag-ref-color-grey-600); --groupui-sys-color-text-weaker: var(--groupui-vwag-ref-color-grey-400); --groupui-sys-color-text-weak: var(--groupui-vwag-ref-color-grey-200); --groupui-sys-color-text-normal: var(--groupui-vwag-ref-color-white-0); --groupui-sys-color-line-ghost: var(--groupui-vwag-ref-color-transparent); --groupui-sys-color-line-silent-inverse: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-line-silent: var(--groupui-vwag-ref-color-white-0); --groupui-sys-color-line-weak-inverse: var( --groupui-vwag-ref-color-white-0-20 ); --groupui-sys-color-line-weak: var(--groupui-vwag-ref-color-grey-800); --groupui-sys-color-line-ghost-inverse: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-on-light-subtle-default: var( --groupui-vwag-ref-color-grey-200 ); --groupui-sys-color-on-light-subtle-default-inverse: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-on-light-basic-default: var( --groupui-vwag-ref-color-grey-1000 ); --groupui-sys-color-on-light-basic-default-inverse: var( --groupui-vwag-ref-color-grey-1000 ); --groupui-sys-color-light-subtle-pressed: var( --groupui-vwag-ref-color-grey-300-20 ); --groupui-sys-color-light-subtle-hover: var( --groupui-vwag-ref-color-grey-300-20 ); --groupui-sys-color-light-subtle-default: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-light-subtle-default-inverse: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-light-subtle-hover-inverse: var( --groupui-vwag-ref-color-white-0-10 ); --groupui-sys-color-light-subtle-pressed-inverse: var( --groupui-vwag-ref-color-white-0-20 ); --groupui-sys-color-light-basic-pressed: var( --groupui-vwag-ref-color-grey-400 ); --groupui-sys-color-light-basic-hover: var( --groupui-vwag-ref-color-grey-300 ); --groupui-sys-color-light-basic-default: var( --groupui-vwag-ref-color-grey-200 ); --groupui-sys-color-light-basic-default-inverse: var( --groupui-vwag-ref-color-grey-200 ); --groupui-sys-color-light-basic-hover-inverse: var( --groupui-vwag-ref-color-grey-300 ); --groupui-sys-color-light-basic-pressed-inverse: var( --groupui-vwag-ref-color-grey-400 ); --groupui-sys-color-on-neutral-basic-default: var( --groupui-vwag-ref-color-grey-1000 ); --groupui-sys-color-neutral-subtle-pressed: var( --groupui-vwag-ref-color-grey-500-20 ); --groupui-sys-color-neutral-subtle-hover: var( --groupui-vwag-ref-color-grey-500-10 ); --groupui-sys-color-neutral-subtle-default: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-neutral-basic-pressed: var( --groupui-vwag-ref-color-grey-700 ); --groupui-sys-color-neutral-basic-hover: var( --groupui-vwag-ref-color-grey-600 ); --groupui-sys-color-neutral-basic-default: var( --groupui-vwag-ref-color-grey-500 ); --groupui-sys-color-neutral-basic-default-inverse: var( --groupui-vwag-ref-color-grey-300 ); --groupui-sys-color-neutral-weak-default: var( --groupui-vwag-ref-color-grey-500-20 ); --groupui-sys-color-on-information-basic-default: var( --groupui-vwag-ref-color-grey-1000 ); --groupui-sys-color-information-weak-default: var( --groupui-vwag-ref-color-signal-blue-500-20 ); --groupui-sys-color-information-subtle-pressed: var( --groupui-vwag-ref-color-signal-blue-500-20 ); --groupui-sys-color-information-subtle-hover: var( --groupui-vwag-ref-color-signal-blue-500-10 ); --groupui-sys-color-information-subtle-default: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-information-basic-default: var( --groupui-vwag-ref-color-signal-blue-500 ); --groupui-sys-color-information-basic-hover: var( --groupui-vwag-ref-color-signal-blue-600 ); --groupui-sys-color-information-basic-pressed: var( --groupui-vwag-ref-color-signal-blue-700 ); --groupui-sys-color-information-basic-default-inverse: var( --groupui-vwag-ref-color-signal-blue-500 ); --groupui-sys-color-on-success-basic-default: var( --groupui-vwag-ref-color-grey-1000 ); --groupui-sys-color-success-weak-default: var( --groupui-vwag-ref-color-signal-green-700-20 ); --groupui-sys-color-success-subtle-pressed: var( --groupui-vwag-ref-color-signal-green-700-14 ); --groupui-sys-color-success-subtle-hover: var( --groupui-vwag-ref-color-signal-green-700-10 ); --groupui-sys-color-success-subtle-default: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-success-basic-pressed: var( --groupui-vwag-ref-color-signal-green-850 ); --groupui-sys-color-success-basic-hover: var( --groupui-vwag-ref-color-signal-green-800 ); --groupui-sys-color-success-basic-default: var( --groupui-vwag-ref-color-signal-green-700 ); --groupui-sys-color-success-basic-default-inverse: var( --groupui-vwag-ref-color-signal-green-700 ); --groupui-sys-color-on-warning-basic-default: var( --groupui-vwag-ref-color-grey-1000 ); --groupui-sys-color-warning-weak-default: var( --groupui-vwag-ref-color-signal-orange-800-20 ); --groupui-sys-color-warning-subtle-pressed: var( --groupui-vwag-ref-color-signal-orange-700-20 ); --groupui-sys-color-warning-subtle-hover: var( --groupui-vwag-ref-color-signal-orange-700-10 ); --groupui-sys-color-warning-subtle-default: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-warning-basic-pressed: var( --groupui-vwag-ref-color-signal-orange-900 ); --groupui-sys-color-warning-basic-hover: var( --groupui-vwag-ref-color-signal-orange-800 ); --groupui-sys-color-warning-basic-default: var( --groupui-vwag-ref-color-signal-orange-700 ); --groupui-sys-color-warning-basic-default-inverse: var( --groupui-vwag-ref-color-signal-orange-500 ); --groupui-sys-color-on-danger-basic-default: var( --groupui-vwag-ref-color-black ); --groupui-sys-color-danger-weak-default: var( --groupui-vwag-ref-color-signal-red-500-20 ); --groupui-sys-color-danger-subtle-pressed: var( --groupui-vwag-ref-color-signal-red-500-02 ); --groupui-sys-color-danger-subtle-hover: var( --groupui-vwag-ref-color-signal-red-500-01 ); --groupui-sys-color-danger-subtle-default: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-danger-basic-pressed: var( --groupui-vwag-ref-color-signal-red-700 ); --groupui-sys-color-danger-basic-hover: var( --groupui-vwag-ref-color-signal-red-600 ); --groupui-sys-color-danger-basic-default: var( --groupui-vwag-ref-color-signal-red-500 ); --groupui-sys-color-danger-basic-default-inverse: var( --groupui-vwag-ref-color-signal-red-500 ); --groupui-sys-color-on-action-basic-disabled-inverse: var( --groupui-vwag-ref-color-grey-1000 ); --groupui-sys-color-on-action-basic-default-inverse: var( --groupui-vwag-ref-color-grey-1000 ); --groupui-sys-color-on-action-basic-disabled: var( --groupui-vwag-ref-color-grey-950 ); --groupui-sys-color-on-action-basic-default: var( --groupui-vwag-ref-color-grey-1000 ); --groupui-sys-color-on-action-muted-default: var( --groupui-vwag-ref-color-grey-1000 ); --groupui-sys-color-on-action-muted-disabled: var( --groupui-vwag-ref-color-grey-950 ); --groupui-sys-color-on-action-quiet-default: var( --groupui-vwag-ref-color-grey-1000 ); --groupui-sys-color-action-muted-disabled: var( --groupui-vwag-ref-color-grey-600 ); --groupui-sys-color-action-muted-pressed: var( --groupui-vwag-ref-color-grey-500 ); --groupui-sys-color-action-muted-hover: var( --groupui-vwag-ref-color-grey-400 ); --groupui-sys-color-action-muted-default: var( --groupui-vwag-ref-color-grey-300 ); --groupui-sys-color-action-quiet-disabled: var( --groupui-vwag-ref-color-grey-800 ); --groupui-sys-color-action-quiet-pressed: var( --groupui-vwag-ref-color-white-0-80 ); --groupui-sys-color-action-quiet-hover: var( --groupui-vwag-ref-color-white-0-90 ); --groupui-sys-color-action-quiet-default: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-action-quiet-disabled-inverse: var( --groupui-vwag-ref-color-white-0-20 ); --groupui-sys-color-action-subtle-pressed-inverse: var( --groupui-vwag-ref-color-white-0-20 ); --groupui-sys-color-action-subtle-hover-inverse: var( --groupui-vwag-ref-color-white-0-10 ); --groupui-sys-color-action-subtle-default-inverse: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-action-subtle-pressed: var( --groupui-vwag-ref-color-aqua-500-20 ); --groupui-sys-color-action-subtle-hover: var( --groupui-vwag-ref-color-aqua-500-10 ); --groupui-sys-color-action-subtle-default: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-action-subtle-disabled: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-action-subtle-disabled-inverse: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-action-basic-disabled-inverse: var( --groupui-vwag-ref-color-white-0-40 ); --groupui-sys-color-action-basic-pressed-inverse: var( --groupui-vwag-ref-color-white-0-80 ); --groupui-sys-color-action-basic-hover-inverse: var( --groupui-vwag-ref-color-white-0-90 ); --groupui-sys-color-action-basic-default-inverse: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-action-basic-disabled: var( --groupui-vwag-ref-color-grey-600 ); --groupui-sys-color-action-basic-pressed: var( --groupui-vwag-ref-color-aqua-700 ); --groupui-sys-color-action-basic-hover: var( --groupui-vwag-ref-color-aqua-600 ); --groupui-sys-color-action-basic-default: var( --groupui-vwag-ref-color-aqua-500 ); --groupui-sys-color-action-silent-default: var( --groupui-vwag-ref-color-grey-950 ); --groupui-sys-color-action-silent-disabled: var( --groupui-vwag-ref-color-grey-900 ); --groupui-sys-color-action-silent-default-inverse: var( --groupui-vwag-ref-color-grey-950 ); --groupui-sys-color-action-quiet-subtle-default: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-action-quiet-subtle-hover: var( --groupui-vwag-ref-color-white-0-10 ); --groupui-sys-color-action-quiet-subtle-pressed: var( --groupui-vwag-ref-color-white-0-20 ); --groupui-sys-color-action-quiet-subtle-disabled: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-background-inform: var( --groupui-vwag-ref-color-grey-900 ); --groupui-sys-color-background-canvas: var( --groupui-vwag-ref-color-grey-1000 ); --groupui-sys-color-background-base: var(--groupui-vwag-ref-color-grey-950); --groupui-sys-color-background-backdrop: var( --groupui-vwag-ref-color-black-60 ); --groupui-sys-color-background-stripe: var( --groupui-vwag-ref-color-grey-900-50 ); --groupui-sys-color-background-float: var( --groupui-vwag-ref-color-grey-1000 ); --groupui-sys-color-accent-weak-default-01: var( --groupui-vwag-ref-color-purple-300-20 ); --groupui-sys-color-accent-weak-default-02: var( --groupui-vwag-ref-color-violet-400-20 ); --groupui-sys-color-accent-weak-default-03: var( --groupui-vwag-ref-color-blue-500-20 ); --groupui-sys-color-accent-weak-default-04: var( --groupui-vwag-ref-color-lime-600-20 ); --groupui-sys-color-accent-weak-default-05: var( --groupui-vwag-ref-color-mint-600-20 ); --groupui-sys-color-accent-weak-default-06: var( --groupui-vwag-ref-color-red-400-20 ); --groupui-sys-color-accent-weak-default-07: var( --groupui-vwag-ref-color-orange-700-20 ); --groupui-sys-color-accent-weak-default-08: var( --groupui-vwag-ref-color-green-700-20 ); --groupui-sys-color-accent-basic-default-01: var( --groupui-vwag-ref-color-purple-300 ); --groupui-sys-color-accent-basic-default-02: var( --groupui-vwag-ref-color-violet-400 ); --groupui-sys-color-accent-basic-default-03: var( --groupui-vwag-ref-color-blue-500 ); --groupui-sys-color-accent-basic-default-04: var( --groupui-vwag-ref-color-lime-600 ); --groupui-sys-color-accent-basic-default-05: var( --groupui-vwag-ref-color-mint-600 ); --groupui-sys-color-accent-basic-default-06: var( --groupui-vwag-ref-color-red-400 ); --groupui-sys-color-accent-basic-default-07: var( --groupui-vwag-ref-color-orange-700 ); --groupui-sys-color-accent-basic-default-08: var( --groupui-vwag-ref-color-green-700 ); --groupui-sys-color-accent-subtle-default-01: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-accent-subtle-default-02: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-accent-subtle-default-03: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-accent-subtle-default-04: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-accent-subtle-default-05: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-accent-subtle-default-06: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-accent-subtle-default-07: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-accent-subtle-default-08: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-on-accent-basic-default-01: var( --groupui-vwag-ref-color-grey-1000 ); --groupui-sys-color-on-accent-basic-default-02: var( --groupui-vwag-ref-color-grey-1000 ); --groupui-sys-color-on-accent-basic-default-03: var( --groupui-vwag-ref-color-grey-1000 ); --groupui-sys-color-on-accent-basic-default-04: var( --groupui-vwag-ref-color-grey-1000 ); --groupui-sys-color-on-accent-basic-default-05: var( --groupui-vwag-ref-color-grey-1000 ); --groupui-sys-color-on-accent-basic-default-06: var( --groupui-vwag-ref-color-grey-1000 ); --groupui-sys-color-on-accent-basic-default-07: var( --groupui-vwag-ref-color-grey-1000 ); --groupui-sys-color-on-accent-basic-default-08: var( --groupui-vwag-ref-color-grey-1000 ); --groupui-sys-color-navigation-unselected-basic-default-inverse: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-navigation-unselected-basic-hover-inverse: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-navigation-unselected-basic-pressed-inverse: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-navigation-unselected-basic-disabled-inverse: var( --groupui-vwag-ref-color-white-0-40 ); --groupui-sys-color-navigation-unselected-basic-default: var( --groupui-vwag-ref-color-aqua-500 ); --groupui-sys-color-navigation-unselected-basic-hover: var( --groupui-vwag-ref-color-aqua-500 ); --groupui-sys-color-navigation-unselected-basic-pressed: var( --groupui-vwag-ref-color-aqua-500 ); --groupui-sys-color-navigation-unselected-basic-disabled: var( --groupui-vwag-ref-color-grey-600 ); --groupui-sys-color-navigation-unselected-subtle-default-inverse: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-navigation-unselected-subtle-hover-inverse: var( --groupui-vwag-ref-color-white-0-10 ); --groupui-sys-color-navigation-unselected-subtle-pressed-inverse: var( --groupui-vwag-ref-color-white-0-20 ); --groupui-sys-color-navigation-unselected-subtle-disabled-inverse: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-navigation-unselected-subtle-default: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-navigation-unselected-subtle-hover: var( --groupui-vwag-ref-color-aqua-500-10 ); --groupui-sys-color-navigation-unselected-subtle-pressed: var( --groupui-vwag-ref-color-aqua-500-20 ); --groupui-sys-color-navigation-unselected-subtle-disabled: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-navigation-selected-basic-default-inverse: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-navigation-selected-basic-hover-inverse: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-navigation-selected-basic-pressed-inverse: var( --groupui-vwag-ref-color-white-0 ); --groupui-sys-color-navigation-selected-basic-default: var( --groupui-vwag-ref-color-aqua-500 ); --groupui-sys-color-navigation-selected-basic-hover: var( --groupui-vwag-ref-color-aqua-500 ); --groupui-sys-color-navigation-selected-basic-pressed: var( --groupui-vwag-ref-color-aqua-500 ); --groupui-sys-color-navigation-selected-subtle-default-inverse: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-navigation-selected-subtle-hover-inverse: var( --groupui-vwag-ref-color-white-0-10 ); --groupui-sys-color-navigation-selected-subtle-pressed-inverse: var( --groupui-vwag-ref-color-white-0-20 ); --groupui-sys-color-navigation-selected-subtle-default: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-navigation-selected-subtle-hover: var( --groupui-vwag-ref-color-aqua-500-10 ); --groupui-sys-color-navigation-selected-subtle-pressed: var( --groupui-vwag-ref-color-aqua-500-20 ); --groupui-sys-color-card-border-level-2: var( --groupui-vwag-ref-color-transparent ); --groupui-sys-color-card-border-level-2-inverse: var( --groupui-vwag-ref-color-transparent ); } @font-face { font-family: TheGroupTEXT; src: url('https://groupui-css.vwapps.run/fonts/vwgroup/TheGroupTEXT-Regular.woff2') format('woff2'), url('https://groupui-css.vwapps.run/fonts/vwgroup/TheGroupTEXT-Regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: TheGroupTEXT; src: url('https://groupui-css.vwapps.run/fonts/vwgroup/TheGroupTEXT-RegularItalic.woff2') format('woff2'), url('https://groupui-css.vwapps.run/fonts/vwgroup/TheGroupTEXT-RegularItalic.woff') format('woff'); font-weight: normal; font-style: italic; font-display: swap; } @font-face { font-family: TheGroupTEXT; src: url('https://groupui-css.vwapps.run/fonts/vwgroup/TheGroupTEXT-Medium.woff2') format('woff2'), url('https://groupui-css.vwapps.run/fonts/vwgroup/TheGroupTEXT-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: TheGroupTEXT; src: url('https://groupui-css.vwapps.run/fonts/vwgroup/TheGroupTEXT-Medium.woff2') format('woff2'), url('https://groupui-css.vwapps.run/fonts/vwgroup/TheGroupTEXT-Medium.woff') format('woff'); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: TheGroupTEXT; src: url('https://groupui-css.vwapps.run/fonts/vwgroup/TheGroupTEXT-Bold.woff2') format('woff2'), url('https://groupui-css.vwapps.run/fonts/vwgroup/TheGroupTEXT-Bold.woff') format('woff'); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: TheGroupTEXT; src: url('https://groupui-css.vwapps.run/fonts/vwgroup/TheGroupTEXT-BoldItalic.woff2') format('woff2'), url('https://groupui-css.vwapps.run/fonts/vwgroup/TheGroupTEXT-BoldItalic.woff') format('woff'); font-weight: bold; font-style: italic; font-display: swap; } @font-face { font-family: TheGroupHEAD; src: url('https://groupui-css.vwapps.run/fonts/vwgroup/TheGroupHEAD-Light.woff2') format('woff2'), url('https://groupui-css.vwapps.run/fonts/vwgroup/TheGroupHEAD-Light.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: TheGroupHEAD; src: url('https://groupui-css.vwapps.run/fonts/vwgroup/TheGroupHEAD-LightItalic.woff2') format('woff2'), url('https://groupui-css.vwapps.run/fonts/vwgroup/TheGroupHEAD-LightItalic.woff') format('woff'); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: GroupUi; src: url('https://groupui-css.vwapps.run/fonts/vwag/VWAGTheSans-Regular.woff2') format('woff2'), url('https://groupui-css.vwapps.run/fonts/vwag/VWAGTheSans-Regular.woff') format('woff'), url('https://groupui-css.vwapps.run/fonts/vwag/VWAGTheSans-Regular.eot?#iefix') format('embedded-opentype'), url('https://groupui-css.vwapps.run/fonts/vwag/VWAGTheSans-Regular.svg#VWAGTheSans-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: GroupUi; src: url('https://groupui-css.vwapps.run/fonts/vwag/VWAGTheSans-Light.woff2') format('woff2'), url('https://groupui-css.vwapps.run/fonts/vwag/VWAGTheSans-Light.woff') format('woff'), url('https://groupui-css.vwapps.run/fonts/vwag/VWAGTheSans-Light.eot?#iefix') format('embedded-opentype'), url('https://groupui-css.vwapps.run/fonts/vwag/VWAGTheSans-Light.svg#VWAGTheSans-Light') format('svg'); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: GroupUi; src: url('https://groupui-css.vwapps.run/fonts/vwag/VWAGTheSans-Bold.woff2') format('woff2'), url('https://groupui-css.vwapps.run/fonts/vwag/VWAGTheSans-Bold.woff') format('woff'), url('https://groupui-css.vwapps.run/fonts/vwag/VWAGTheSans-Bold.eot?#iefix') format('embedded-opentype'), url('https://groupui-css.vwapps.run/fonts/vwag/VWAGTheSans-Bold.svg#VWAGTheSans-Bold') format('svg'); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: GroupUi; src: url('https://groupui-css.vwapps.run/fonts/vwag/VWAGTheSans-Italic.woff2') format('woff2'), url('https://groupui-css.vwapps.run/fonts/vwag/VWAGTheSans-Italic.woff') format('woff'), url('https://groupui-css.vwapps.run/fonts/vwag/VWAGTheSans-Italic.eot?#iefix') format('embedded-opentype'), url('https://groupui-css.vwapps.run/fonts/vwag/VWAGTheSans-Italic.svg#VWAGTheSans-Italic') format('svg'); font-weight: normal; font-style: italic; font-display: swap; } @font-face { font-family: GroupUiSerif; src: url('https://groupui-css.vwapps.run/fonts/vwag/VWAGTheAntiqua-Regular.woff2') format('woff2'), url('https://groupui-css.vwapps.run/fonts/vwag/VWAGTheAntiqua-Regular.woff') format('woff'), url('https://groupui-css.vwapps.run/fonts/vwag/VWAGTheAntiqua-Regular.eot?#iefix') format('embedded-opentype'), url('https://groupui-css.vwapps.run/fonts/vwag/VWAGTheAntiqua-Regular.svg#VWAGTheAntiqua-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: GroupUiSerif; src: url('https://groupui-css.vwapps.run/fonts/vwag/VWAGTheAntiqua-Bold.woff2') format('woff2'), url('https://groupui-css.vwapps.run/fonts/vwag/VWAGTheAntiqua-Bold.woff') format('woff'), url('https://groupui-css.vwapps.run/fonts/vwag/VWAGTheAntiqua-Bold.eot?#iefix') format('embedded-opentype'), url('https://groupui-css.vwapps.run/fonts/vwag/VWAGTheAntiqua-Bold.svg#VWAGTheAntiqua-Bold') format('svg'); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: GroupUiSerif; src: url('https://groupui-css.vwapps.run/fonts/vwag/VWAGTheAntiqua-Italic.woff2') format('woff2'), url('https://groupui-css.vwapps.run/fonts/vwag/VWAGTheAntiqua-Italic.woff') format('woff'), url('https://groupui-css.vwapps.run/fonts/vwag/VWAGTheAntiqua-Italic.eot?#iefix') format('embedded-opentype'), url('https://groupui-css.vwapps.run/fonts/vwag/VWAGTheAntiqua-Italic.svg#VWAGTheAntiqua-Italic') format('svg'); font-weight: normal; font-style: italic; font-display: swap; } .g-avatar { display: inline-block; box-sizing: border-box; width: calc( var(--groupui-sys-icon-size-s) + 2 * var(--groupui-sys-spacing-100) ); height: calc( var(--groupui-sys-icon-size-s) + 2 * var(--groupui-sys-spacing-100) ); border-radius: var(--groupui-sys-border-radius-xl); border: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-action-silent-default); padding: var(--groupui-sys-spacing-100); background-color: var(--groupui-sys-color-action-basic-default); color: var(--groupui-sys-color-on-action-basic-default); font-family: var(--groupui-sys-font-family-primary), sans-serif; font-weight: var(--groupui-sys-font-weight-bold); line-height: calc( var(--groupui-sys-icon-size-s) - var(--groupui-sys-border-width-s) ); font-size: var(--groupui-sys-font-size-250); text-align: center; vertical-align: middle; } .g-avatar .g-avatar-icon { display: block; color: var(--groupui-sys-color-on-action-basic-default); margin-top: calc(-1 * var(--groupui-sys-border-width-s)); margin-left: calc(-1 * var(--groupui-sys-border-width-s)); } .g-avatar.g-avatar-xs { padding: var(--groupui-sys-spacing-0); width: var(--groupui-sys-icon-size-s); height: var(--groupui-sys-icon-size-s); line-height: calc( var(--groupui-sys-icon-size-s) - var(--groupui-sys-border-width-s) ); font-size: var(--groupui-sys-font-size-200); } .g-avatar.g-avatar-s { padding: var(--groupui-sys-spacing-100); width: calc( var(--groupui-sys-icon-size-s) + 2 * var(--groupui-sys-spacing-100) ); height: calc( var(--groupui-sys-icon-size-s) + 2 * var(--groupui-sys-spacing-100) ); line-height: calc( var(--groupui-sys-icon-size-s) - var(--groupui-sys-border-width-s) ); font-size: var(--groupui-sys-font-size-250); } .g-avatar.g-avatar-m { padding: var(--groupui-sys-spacing-100); width: calc( var(--groupui-sys-icon-size-m) + 2 * var(--groupui-sys-spacing-100) ); height: calc( var(--groupui-sys-icon-size-m) + 2 * var(--groupui-sys-spacing-100) ); line-height: calc( var(--groupui-sys-icon-size-m) - var(--groupui-sys-border-width-s) ); font-size: var(--groupui-sys-font-size-300); } .g-avatar.g-avatar-l { padding: var(--groupui-sys-spacing-200); width: calc( var(--groupui-sys-icon-size-l) + 2 * var(--groupui-sys-spacing-200) ); height: calc( var(--groupui-sys-icon-size-l) + 2 * var(--groupui-sys-spacing-200) ); line-height: calc( var(--groupui-sys-icon-size-l) - var(--groupui-sys-border-width-s) ); font-size: var(--groupui-sys-font-size-400); } .g-avatar.g-avatar-xl { padding: var(--groupui-sys-spacing-200); width: calc( var(--groupui-sys-icon-size-xl) + 2 * var(--groupui-sys-spacing-200) ); height: calc( var(--groupui-sys-icon-size-xl) + 2 * var(--groupui-sys-spacing-200) ); line-height: calc( var(--groupui-sys-icon-size-xl) - var(--groupui-sys-border-width-s) ); font-size: var(--groupui-sys-font-size-500); } .g-avatar.g-avatar-inverse { background-color: var(--groupui-sys-color-action-basic-default-inverse); color: var(--groupui-sys-color-on-action-basic-default-inverse); border-color: var(--groupui-sys-color-action-silent-default-inverse); } .g-avatar.g-avatar-inverse .g-avatar-icon { color: var(--groupui-sys-color-on-action-basic-default-inverse); } .g-avatar:has(.g-avatar-image) { padding: 0; } .g-avatar:has(.g-avatar-image) .g-avatar-image { border-radius: var(--groupui-sys-border-radius-xl); width: 100%; height: 100%; } /** * ---------------------------- * GroupUi Badge - g-badge * ---------------------------- */ .g-badge { width: fit-content; height: fit-content; position: relative; --optional-offset-x: var(--g-badge-offset-x, var(--groupui-sys-spacing-0)); --optional-offset-y: var(--g-badge-offset-y, var(--groupui-sys-spacing-0)); --top: calc(var(--groupui-sys-spacing-0) - var(--optional-offset-y)); --right: calc(var(--groupui-sys-spacing-0) - var(--optional-offset-x)); --translate-x: 50%; --translate-y: -50%; --left: auto; --bottom: auto; --background-color: var(--groupui-sys-color-information-basic-default); --padding: var(--groupui-sys-spacing-100); --border-color: var( --g-badge-border-color, var(--groupui-sys-color-line-ghost) ); --color: var(--groupui-sys-color-on-information-basic-default); } .g-badge .g-badge-content, .g-badge:not(:has(.g-badge-content))::after { position: absolute; background-color: var(--background-color); inset: var(--top) var(--right) var(--bottom) var(--left); border: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--border-color); translate: var(--translate-x) var(--translate-y); border-radius: var(--groupui-sys-border-radius-full); color: var(--color); } .g-badge .g-badge-content { padding-inline: var(--padding); min-height: calc(4 * var(--padding)); min-width: calc(2 * var(--padding)); font-weight: var(--groupui-sys-font-weight-bold); letter-spacing: var(--groupui-sys-letter-spacing-regular); font-family: var(--groupui-sys-font-family-primary), sans-serif; line-height: var(--groupui-sys-line-height-m); font-size: var(--groupui-sys-font-size-250); display: grid; place-items: center; } .g-badge:not(:has(.g-badge-content))::after { content: ''; width: var(--groupui-sys-spacing-200); height: var(--groupui-sys-spacing-200); } .g-badge.g-badge-top-right { --top: calc(var(--groupui-sys-spacing-0) - var(--optional-offset-y)); --right: calc(var(--groupui-sys-spacing-0) - var(--optional-offset-x)); --translate-x: 50%; --translate-y: -50%; } .g-badge.g-badge-top-left { --right: auto; --top: calc(var(--groupui-sys-spacing-0) - var(--optional-offset-y)); --left: calc(var(--groupui-sys-spacing-0) - var(--optional-offset-x)); --translate-x: -50%; --translate-y: -50%; } .g-badge.g-badge-bottom-right { --top: auto; --bottom: calc(var(--groupui-sys-spacing-0) - var(--optional-offset-y)); --right: calc(var(--groupui-sys-spacing-0) - var(--optional-offset-x)); --translate-x: 50%; --translate-y: 50%; } .g-badge.g-badge-bottom-left { --top: auto; --right: auto; --bottom: calc(var(--groupui-sys-spacing-0) - var(--optional-offset-y)); --left: calc(var(--groupui-sys-spacing-0) - var(--optional-offset-x)); --translate-x: -50%; --translate-y: 50%; } .g-badge.g-badge-information { --background-color: var(--groupui-sys-color-information-basic-default); --color: var(--groupui-sys-color-on-information-basic-default); } .g-badge.g-badge-success { --background-color: var(--groupui-sys-color-success-basic-default); --color: var(--groupui-sys-color-on-success-basic-default); } .g-badge.g-badge-warning { --background-color: var(--groupui-sys-color-warning-basic-default); --color: var(--groupui-sys-color-on-warning-basic-default); } .g-badge.g-badge-error { --background-color: var(--groupui-sys-color-danger-basic-default); --color: var(--groupui-sys-color-on-danger-basic-default); } .g-badge.g-badge-neutral { --background-color: var(--groupui-sys-color-neutral-basic-default); --color: var(--groupui-sys-color-on-neutral-basic-default); } .g-badge.g-badge-light { --background-color: var(--groupui-sys-color-light-basic-default); --color: var(--groupui-sys-color-on-light-basic-default); } .g-brand-logo { color: var(--groupui-sys-color-text-normal-inverse); width: fit-content; display: inline-grid; height: var(--groupui-sys-spacing-1600); align-items: center; grid-template-areas: 'logo content'; --logo-url: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/logos/vwgroup/logo_vwgroup_global-navigation.svg'); --wordmark-width: 222px; --wordmark-height: 12px; } .g-brand-logo:has(.g-brand-logo-division) .g-brand-logo-entity { display: none; } .g-brand-logo:has(.g-brand-logo-application) .g-brand-logo-division, .g-brand-logo:has(.g-brand-logo-application) .g-brand-logo-entity { display: none; } .g-brand-logo::before { grid-area: logo; content: 'volkswagen group logo'; color: transparent; width: var(--wordmark-width); height: var(--wordmark-height); display: inline-block; background: var(--logo-url); background-position: left center; background-size: cover; } .g-brand-logo-entity, .g-brand-logo-division, .g-brand-logo-application { grid-area: content; font-size: var(--groupui-sys-font-size-425); line-height: var(--groupui-sys-line-height-m); } .g-brand-logo-entity, .g-brand-logo-division { margin-left: var(--groupui-sys-spacing-400); font-weight: var(--groupui-sys-font-weight-normal); font-family: var(--groupui-sys-font-family-primary), sans-serif; letter-spacing: var(--groupui-sys-letter-spacing-loose); } .g-brand-logo-entity { text-transform: uppercase; } .g-brand-logo-application { display: flex; align-items: center; font-family: var(--groupui-sys-font-family-secondary), sans-serif; font-weight: var(--groupui-sys-font-weight-light); } .g-brand-logo-application::before { content: ''; margin-inline: var(--groupui-sys-spacing-400); display: inline-block; width: var(--groupui-sys-spacing-25); height: var(--groupui-sys-spacing-800); background-color: var(--groupui-sys-color-line-weak-inverse); } @media screen and (max-width: 559px) { .g-brand-logo[data-breakpoint='s']:not(:has(.g-brand-logo-application)) { grid-template: 'logo' 1fr 'content' 1fr; gap: var(--groupui-sys-spacing-100); } .g-brand-logo[data-breakpoint='s']:not(:has(.g-brand-logo-application)):has( .g-brand-logo-entity ) { gap: var(--groupui-sys-spacing-150); } .g-brand-logo[data-breakpoint='s']:not( :has(.g-brand-logo-application) )::before { align-self: end; } .g-brand-logo[data-breakpoint='s']:has(.g-brand-logo-application) { --logo-url: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/logos/vwgroup/logo_vwgroup_global-navigation_small.svg'); } .g-brand-logo[data-breakpoint='s']:has(.g-brand-logo-application)::before { align-self: center; width: var(--groupui-sys-icon-size-m); height: var(--groupui-sys-icon-size-m); } .g-brand-logo[data-breakpoint='s'] .g-brand-logo-entity, .g-brand-logo[data-breakpoint='s'] .g-brand-logo-division { align-self: baseline; margin-left: var(--groupui-sys-spacing-0); grid-area: content; } .g-brand-logo[data-breakpoint='s'] .g-brand-logo-entity { font-size: var(--groupui-sys-font-size-375); } } @media screen and (max-width: 959px) { .g-brand-logo[data-breakpoint='m']:not(:has(.g-brand-logo-application)) { grid-template: 'logo' 1fr 'content' 1fr; gap: var(--groupui-sys-spacing-100); } .g-brand-logo[data-breakpoint='m']:not(:has(.g-brand-logo-application)):has( .g-brand-logo-entity ) { gap: var(--groupui-sys-spacing-150); } .g-brand-logo[data-breakpoint='m']:not( :has(.g-brand-logo-application) )::before { align-self: end; } .g-brand-logo[data-breakpoint='m']:has(.g-brand-logo-application) { --logo-url: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/logos/vwgroup/logo_vwgroup_global-navigation_small.svg'); } .g-brand-logo[data-breakpoint='m']:has(.g-brand-logo-application)::before { align-self: center; width: var(--groupui-sys-icon-size-m); height: var(--groupui-sys-icon-size-m); } .g-brand-logo[data-breakpoint='m'] .g-brand-logo-entity, .g-brand-logo[data-breakpoint='m'] .g-brand-logo-division { align-self: baseline; margin-left: var(--groupui-sys-spacing-0); grid-area: content; } .g-brand-logo[data-breakpoint='m'] .g-brand-logo-entity { font-size: var(--groupui-sys-font-size-375); } } @media screen and (max-width: 1279px) { :is( .g-brand-logo[data-breakpoint='l'], .g-brand-logo:not([data-breakpoint]) ):not(:has(.g-brand-logo-application)) { grid-template: 'logo' 1fr 'content' 1fr; gap: var(--groupui-sys-spacing-100); } :is( .g-brand-logo[data-breakpoint='l'], .g-brand-logo:not([data-breakpoint]) ):not(:has(.g-brand-logo-application)):has(.g-brand-logo-entity) { gap: var(--groupui-sys-spacing-150); } :is( .g-brand-logo[data-breakpoint='l'], .g-brand-logo:not([data-breakpoint]) ):not(:has(.g-brand-logo-application))::before { align-self: end; } :is( .g-brand-logo[data-breakpoint='l'], .g-brand-logo:not([data-breakpoint]) ):has(.g-brand-logo-application) { --logo-url: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/logos/vwgroup/logo_vwgroup_global-navigation_small.svg'); } :is( .g-brand-logo[data-breakpoint='l'], .g-brand-logo:not([data-breakpoint]) ):has(.g-brand-logo-application)::before { align-self: center; width: var(--groupui-sys-icon-size-m); height: var(--groupui-sys-icon-size-m); } :is( .g-brand-logo[data-breakpoint='l'], .g-brand-logo:not([data-breakpoint]) ) .g-brand-logo-entity, :is( .g-brand-logo[data-breakpoint='l'], .g-brand-logo:not([data-breakpoint]) ) .g-brand-logo-division { align-self: baseline; margin-left: var(--groupui-sys-spacing-0); grid-area: content; } :is( .g-brand-logo[data-breakpoint='l'], .g-brand-logo:not([data-breakpoint]) ) .g-brand-logo-entity { font-size: var(--groupui-sys-font-size-375); } } @media screen and (max-width: 1619px) { .g-brand-logo[data-breakpoint='xl']:not(:has(.g-brand-logo-application)) { grid-template: 'logo' 1fr 'content' 1fr; gap: var(--groupui-sys-spacing-100); } .g-brand-logo[data-breakpoint='xl']:not( :has(.g-brand-logo-application) ):has(.g-brand-logo-entity) { gap: var(--groupui-sys-spacing-150); } .g-brand-logo[data-breakpoint='xl']:not( :has(.g-brand-logo-application) )::before { align-self: end; } .g-brand-logo[data-breakpoint='xl']:has(.g-brand-logo-application) { --logo-url: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/logos/vwgroup/logo_vwgroup_global-navigation_small.svg'); } .g-brand-logo[data-breakpoint='xl']:has(.g-brand-logo-application)::before { align-self: center; width: var(--groupui-sys-icon-size-m); height: var(--groupui-sys-icon-size-m); } .g-brand-logo[data-breakpoint='xl'] .g-brand-logo-entity, .g-brand-logo[data-breakpoint='xl'] .g-brand-logo-division { align-self: baseline; margin-left: var(--groupui-sys-spacing-0); grid-area: content; } .g-brand-logo[data-breakpoint='xl'] .g-brand-logo-entity { font-size: var(--groupui-sys-font-size-375); } } @media screen and (max-width: 100vw) { .g-brand-logo[data-breakpoint='xxl']:not(:has(.g-brand-logo-application)) { grid-template: 'logo' 1fr 'content' 1fr; gap: var(--groupui-sys-spacing-100); } .g-brand-logo[data-breakpoint='xxl']:not( :has(.g-brand-logo-application) ):has(.g-brand-logo-entity) { gap: var(--groupui-sys-spacing-150); } .g-brand-logo[data-breakpoint='xxl']:not( :has(.g-brand-logo-application) )::before { align-self: end; } .g-brand-logo[data-breakpoint='xxl']:has(.g-brand-logo-application) { --logo-url: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/logos/vwgroup/logo_vwgroup_global-navigation_small.svg'); } .g-brand-logo[data-breakpoint='xxl']:has( .g-brand-logo-application )::before { align-self: center; width: var(--groupui-sys-icon-size-m); height: var(--groupui-sys-icon-size-m); } .g-brand-logo[data-breakpoint='xxl'] .g-brand-logo-entity, .g-brand-logo[data-breakpoint='xxl'] .g-brand-logo-division { align-self: baseline; margin-left: var(--groupui-sys-spacing-0); grid-area: content; } .g-brand-logo[data-breakpoint='xxl'] .g-brand-logo-entity { font-size: var(--groupui-sys-font-size-375); } } .g-btn .g-btn-icon, .g-btn.g-btn-primary .g-btn-icon { color: var(--groupui-sys-color-on-action-basic-default); } .g-btn:hover, .g-btn.g-btn-primary:hover { background: var(--groupui-sys-color-action-basic-hover); border-color: var(--groupui-sys-color-action-basic-hover); } .g-btn:focus-visible, .g-btn.g-btn-primary:focus-visible { outline: var(--groupui-sys-color-action-basic-default) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-spacing-50); outline-offset: var(--groupui-sys-spacing-50); } .g-btn:active, .g-btn.g-btn-primary:active { background: var(--groupui-sys-color-action-basic-pressed); border-color: var(--groupui-sys-color-action-basic-pressed); } .g-btn.g-btn-success, .g-btn.g-btn-primary.g-btn-success { border: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-success-basic-default); background: var(--groupui-sys-color-success-basic-default); color: var(--groupui-sys-color-on-success-basic-default); } .g-btn.g-btn-success .g-btn-status, .g-btn.g-btn-primary.g-btn-success .g-btn-status { color: var(--groupui-sys-color-on-success-basic-default); } .g-btn.g-btn-success:hover, .g-btn.g-btn-primary.g-btn-success:hover { background: var(--groupui-sys-color-success-basic-hover); border-color: var(--groupui-sys-color-success-basic-hover); } .g-btn.g-btn-success:active, .g-btn.g-btn-primary.g-btn-success:active { background: var(--groupui-sys-color-success-basic-pressed); border-color: var(--groupui-sys-color-success-basic-pressed); } .g-btn.g-btn-success.g-btn-disabled, .g-btn.g-btn-success[disabled], .g-btn.g-btn-primary.g-btn-success.g-btn-disabled, .g-btn.g-btn-primary.g-btn-success[disabled] { outline: none; } .g-btn.g-btn-danger, .g-btn.g-btn-primary.g-btn-danger { border: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-danger-basic-default); background-color: var(--groupui-sys-color-danger-basic-default); color: var(--groupui-sys-color-on-danger-basic-default); } .g-btn.g-btn-danger .g-btn-status, .g-btn.g-btn-primary.g-btn-danger .g-btn-status { color: var(--groupui-sys-color-on-danger-basic-default); } .g-btn.g-btn-danger:hover, .g-btn.g-btn-primary.g-btn-danger:hover { background: var(--groupui-sys-color-danger-basic-hover); border-color: var(--groupui-sys-color-danger-basic-hover); } .g-btn.g-btn-danger:active, .g-btn.g-btn-primary.g-btn-danger:active { background: var(--groupui-sys-color-danger-basic-pressed); border-color: var(--groupui-sys-color-danger-basic-pressed); } .g-btn.g-btn-danger.g-btn-disabled, .g-btn.g-btn-danger[disabled], .g-btn.g-btn-primary.g-btn-danger.g-btn-disabled, .g-btn.g-btn-primary.g-btn-danger[disabled] { outline: none; } .g-btn.g-btn-warning, .g-btn.g-btn-primary.g-btn-warning { border: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-warning-basic-default); background-color: var(--groupui-sys-color-warning-basic-default); color: var(--groupui-sys-color-on-warning-basic-default); } .g-btn.g-btn-warning .g-btn-status, .g-btn.g-btn-primary.g-btn-warning .g-btn-status { color: var(--groupui-sys-color-on-warning-basic-default); } .g-btn.g-btn-warning:hover, .g-btn.g-btn-primary.g-btn-warning:hover { background: var(--groupui-sys-color-warning-basic-hover); border-color: var(--groupui-sys-color-warning-basic-hover); } .g-btn.g-btn-warning:active, .g-btn.g-btn-primary.g-btn-warning:active { background: var(--groupui-sys-color-warning-basic-pressed); border-color: var(--groupui-sys-color-warning-basic-pressed); } .g-btn.g-btn-warning.g-btn-disabled, .g-btn.g-btn-warning[disabled], .g-btn.g-btn-primary.g-btn-warning.g-btn-disabled, .g-btn.g-btn-primary.g-btn-warning[disabled] { outline: none; } .g-btn.g-btn-disabled, .g-btn[disabled], .g-btn.g-btn-primary.g-btn-disabled, .g-btn.g-btn-primary[disabled] { border: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-action-basic-disabled); background: var(--groupui-sys-color-action-basic-disabled); color: var(--groupui-sys-color-on-action-basic-disabled); outline: none; } .g-btn.g-btn-disabled .g-btn-icon, .g-btn[disabled] .g-btn-icon, .g-btn.g-btn-primary.g-btn-disabled .g-btn-icon, .g-btn.g-btn-primary[disabled] .g-btn-icon { color: var(--groupui-sys-color-on-action-basic-disabled); } .g-btn.g-btn-disabled:hover, .g-btn[disabled]:hover, .g-btn.g-btn-primary.g-btn-disabled:hover, .g-btn.g-btn-primary[disabled]:hover { cursor: not-allowed; color: var(--groupui-sys-color-on-action-basic-disabled); border: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-action-basic-disabled); background: var(--groupui-sys-color-action-basic-disabled); } .g-btn.g-btn-disabled:active, .g-btn[disabled]:active, .g-btn.g-btn-primary.g-btn-disabled:active, .g-btn.g-btn-primary[disabled]:active { background: var(--groupui-sys-color-action-basic-disabled); border-color: var(--groupui-sys-color-action-basic-disabled); } .g-btn.g-btn-disabled:focus-visible, .g-btn[disabled]:focus-visible, .g-btn.g-btn-primary.g-btn-disabled:focus-visible, .g-btn.g-btn-primary[disabled]:focus-visible { outline: none; } .g-btn.g-btn-inverted, .g-btn.g-btn-primary.g-btn-inverted { border-color: var(--groupui-sys-color-action-basic-default-inverse); background: var(--groupui-sys-color-action-basic-default-inverse); color: var(--groupui-sys-color-on-action-basic-default-inverse); } .g-btn.g-btn-inverted .g-btn-icon, .g-btn.g-btn-primary.g-btn-inverted .g-btn-icon { color: var(--groupui-sys-color-on-action-basic-default-inverse); } .g-btn.g-btn-inverted:hover, .g-btn.g-btn-primary.g-btn-inverted:hover { background: var(--groupui-sys-color-action-basic-hover-inverse); border-color: var(--groupui-sys-color-line-ghost); } .g-btn.g-btn-inverted:focus-visible, .g-btn.g-btn-primary.g-btn-inverted:focus-visible { outline-color: var(--groupui-sys-color-action-basic-default-inverse); } .g-btn.g-btn-inverted:active, .g-btn.g-btn-primary.g-btn-inverted:active { background: var(--groupui-sys-color-action-basic-pressed-inverse); border-color: var(--groupui-sys-color-line-ghost); } .g-btn.g-btn-inverted.g-btn-disabled, .g-btn.g-btn-inverted[disabled], .g-btn.g-btn-primary.g-btn-inverted.g-btn-disabled, .g-btn.g-btn-primary.g-btn-inverted[disabled] { border-color: var(--groupui-sys-color-line-ghost); background: var(--groupui-sys-color-action-basic-disabled-inverse); color: var(--groupui-sys-color-on-action-basic-disabled-inverse); } .g-btn.g-btn-inverted.g-btn-disabled .g-btn-icon, .g-btn.g-btn-inverted[disabled] .g-btn-icon, .g-btn.g-btn-primary.g-btn-inverted.g-btn-disabled .g-btn-icon, .g-btn.g-btn-primary.g-btn-inverted[disabled] .g-btn-icon { color: var(--groupui-sys-color-on-action-basic-disabled-inverse); } .g-btn.g-btn-inverted.g-btn-disabled:hover, .g-btn.g-btn-inverted[disabled]:hover, .g-btn.g-btn-primary.g-btn-inverted.g-btn-disabled:hover, .g-btn.g-btn-primary.g-btn-inverted[disabled]:hover { color: var(--groupui-sys-color-on-action-basic-disabled-inverse); border-color: var(--groupui-sys-color-line-ghost); background: var(--groupui-sys-color-action-basic-disabled-inverse); } .g-btn.g-btn-inverted.g-btn-disabled:active, .g-btn.g-btn-inverted[disabled]:active, .g-btn.g-btn-primary.g-btn-inverted.g-btn-disabled:active, .g-btn.g-btn-primary.g-btn-inverted[disabled]:active { background: var(--groupui-sys-color-action-basic-disabled-inverse); border-color: var(--groupui-sys-color-line-ghost); } .g-btn.g-btn-secondary { border: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-action-basic-default); background-color: var(--groupui-sys-color-action-subtle-default); color: var(--groupui-sys-color-action-basic-default); } .g-btn.g-btn-secondary .g-btn-icon { color: var(--groupui-sys-color-action-basic-default); } .g-btn.g-btn-secondary:hover { background: var(--groupui-sys-color-action-subtle-hover); border-color: var(--groupui-sys-color-action-basic-default); } .g-btn.g-btn-secondary:active { background: var(--groupui-sys-color-action-subtle-pressed); } .g-btn.g-btn-secondary.g-btn-success { border: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-success-basic-default); background-color: var(--groupui-sys-color-success-subtle-default); color: var(--groupui-sys-color-success-basic-default); } .g-btn.g-btn-secondary.g-btn-success .g-btn-status { color: var(--groupui-sys-color-success-basic-default); } .g-btn.g-btn-secondary.g-btn-success:hover { background: var(--groupui-sys-color-success-subtle-hover); border-color: var(--groupui-sys-color-success-basic-default); } .g-btn.g-btn-secondary.g-btn-success:active { background: var(--groupui-sys-color-success-subtle-pressed); } .g-btn.g-btn-secondary.g-btn-success.g-btn-disabled { outline: none; } .g-btn.g-btn-secondary.g-btn-warning { border: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-warning-basic-default); background-color: var(--groupui-sys-color-warning-subtle-default); color: var(--groupui-sys-color-warning-basic-default); } .g-btn.g-btn-secondary.g-btn-warning .g-btn-status { color: var(--groupui-sys-color-warning-basic-default); } .g-btn.g-btn-secondary.g-btn-warning:hover { background: var(--groupui-sys-color-warning-subtle-hover); border-color: var(--groupui-sys-color-warning-basic-default); } .g-btn.g-btn-secondary.g-btn-warning:active { background: var(--groupui-sys-color-warning-subtle-pressed); } .g-btn.g-btn-secondary.g-btn-warning.g-btn-disabled { outline: none; } .g-btn.g-btn-secondary.g-btn-danger { border: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-danger-basic-default); background-color: var(--groupui-sys-color-danger-subtle-default); color: var(--groupui-sys-color-danger-basic-default); } .g-btn.g-btn-secondary.g-btn-danger .g-btn-status { color: var(--groupui-sys-color-danger-basic-default); } .g-btn.g-btn-secondary.g-btn-danger:hover { background: var(--groupui-sys-color-danger-subtle-hover); border-color: var(--groupui-sys-color-danger-basic-default); } .g-btn.g-btn-secondary.g-btn-danger:active { background: var(--groupui-sys-color-danger-subtle-pressed); } .g-btn.g-btn-secondary.g-btn-danger.g-btn-disabled { outline: none; } .g-btn.g-btn-secondary.g-btn-disabled, .g-btn.g-btn-secondary[disabled] { border: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-action-basic-disabled); background-color: var(--groupui-sys-color-action-subtle-disabled); color: var(--groupui-sys-color-action-basic-disabled); outline: none; } .g-btn.g-btn-secondary.g-btn-disabled .g-btn-icon, .g-btn.g-btn-secondary[disabled] .g-btn-icon { color: var(--groupui-sys-color-action-basic-disabled); } .g-btn.g-btn-secondary.g-btn-disabled:hover, .g-btn.g-btn-secondary[disabled]:hover { cursor: not-allowed; color: var(--groupui-sys-color-action-basic-disabled); border: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-action-basic-disabled); background: var(--groupui-sys-color-action-subtle-disabled); } .g-btn.g-btn-secondary.g-btn-disabled:active, .g-btn.g-btn-secondary[disabled]:active { background: var(--groupui-sys-color-action-subtle-disabled); border-color: var(--groupui-sys-color-action-basic-disabled); } .g-btn.g-btn-secondary.g-btn-disabled:focus-visible, .g-btn.g-btn-secondary[disabled]:focus-visible { outline: none; } .g-btn.g-btn-secondary.g-btn-inverted { border-color: var(--groupui-sys-color-action-basic-default-inverse); background-color: var(--groupui-sys-color-action-subtle-default-inverse); color: var(--groupui-sys-color-action-basic-default-inverse); } .g-btn.g-btn-secondary.g-btn-inverted .g-btn-icon { color: var(--groupui-sys-color-action-basic-default-inverse); } .g-btn.g-btn-secondary.g-btn-inverted:hover { background: var(--groupui-sys-color-action-subtle-hover-inverse); border-color: var(--groupui-sys-color-action-basic-default-inverse); } .g-btn.g-btn-secondary.g-btn-inverted:active { background: var(--groupui-sys-color-action-subtle-pressed-inverse); } .g-btn.g-btn-secondary.g-btn-inverted.g-btn-disabled, .g-btn.g-btn-secondary.g-btn-inverted[disabled] { border-color: var(--groupui-sys-color-action-basic-disabled-inverse); background-color: var(--groupui-sys-color-action-subtle-disabled-inverse); color: var(--groupui-sys-color-action-basic-disabled-inverse); } .g-btn.g-btn-secondary.g-btn-inverted.g-btn-disabled .g-btn-icon, .g-btn.g-btn-secondary.g-btn-inverted[disabled] .g-btn-icon { color: var(--groupui-sys-color-action-basic-disabled-inverse); } .g-btn.g-btn-secondary.g-btn-inverted.g-btn-disabled:hover, .g-btn.g-btn-secondary.g-btn-inverted[disabled]:hover { color: var(--groupui-sys-color-action-basic-disabled-inverse); border-color: var(--groupui-sys-color-action-basic-disabled-inverse); background: var(--groupui-sys-color-action-subtle-disabled-inverse); } .g-btn.g-btn-secondary.g-btn-inverted.g-btn-disabled:active, .g-btn.g-btn-secondary.g-btn-inverted[disabled]:active { background: var(--groupui-sys-color-action-subtle-disabled-inverse); border-color: var(--groupui-sys-color-action-basic-disabled-inverse); } .g-btn.g-btn-tertiary { border: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-action-subtle-default); background-color: var(--groupui-sys-color-action-subtle-default); color: var(--groupui-sys-color-action-basic-default); } .g-btn.g-btn-tertiary .g-btn-icon { color: var(--groupui-sys-color-action-basic-default); } .g-btn.g-btn-tertiary:hover { background: var(--groupui-sys-color-action-subtle-hover); border-color: var(--groupui-sys-color-action-subtle-default); } .g-btn.g-btn-tertiary:active { background: var(--groupui-sys-color-action-subtle-pressed); border-color: var(--groupui-sys-color-action-subtle-default); } .g-btn.g-btn-tertiary.g-btn-success { border: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-success-subtle-default); background-color: var(--groupui-sys-color-success-subtle-default); color: var(--groupui-sys-color-success-basic-default); } .g-btn.g-btn-tertiary.g-btn-success .g-btn-status { color: var(--groupui-sys-color-success-basic-default); } .g-btn.g-btn-tertiary.g-btn-success:hover { background: var(--groupui-sys-color-success-subtle-hover); border-color: var(--groupui-sys-color-success-subtle-default); } .g-btn.g-btn-tertiary.g-btn-success:active { background: var(--groupui-sys-color-success-subtle-pressed); border-color: var(--groupui-sys-color-success-subtle-default); } .g-btn.g-btn-tertiary.g-btn-success.g-btn-disabled, .g-btn.g-btn-tertiary.g-btn-success[disabled] { outline: none; } .g-btn.g-btn-tertiary.g-btn-warning { border: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-warning-subtle-default); background-color: var(--groupui-sys-color-warning-subtle-default); color: var(--groupui-sys-color-warning-basic-default); } .g-btn.g-btn-tertiary.g-btn-warning .g-btn-status { color: var(--groupui-sys-color-warning-basic-default); } .g-btn.g-btn-tertiary.g-btn-warning:hover { background: var(--groupui-sys-color-warning-subtle-hover); border-color: var(--groupui-sys-color-warning-subtle-default); } .g-btn.g-btn-tertiary.g-btn-warning:active { background: var(--groupui-sys-color-warning-subtle-pressed); border-color: var(--groupui-sys-color-warning-subtle-default); } .g-btn.g-btn-tertiary.g-btn-warning.g-btn-disabled { outline: none; } .g-btn.g-btn-tertiary.g-btn-danger { border: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-danger-subtle-default); background-color: var(--groupui-sys-color-danger-subtle-default); color: var(--groupui-sys-color-danger-basic-default); } .g-btn.g-btn-tertiary.g-btn-danger .g-btn-status { color: var(--groupui-sys-color-danger-basic-default); } .g-btn.g-btn-tertiary.g-btn-danger:hover { background: var(--groupui-sys-color-danger-subtle-hover); border-color: var(--groupui-sys-color-danger-subtle-default); } .g-btn.g-btn-tertiary.g-btn-danger:active { background: var(--groupui-sys-color-danger-subtle-pressed); border-color: var(--groupui-sys-color-danger-subtle-default); } .g-btn.g-btn-tertiary.g-btn-danger.g-btn-disabled { outline: none; } .g-btn.g-btn-tertiary.g-btn-disabled, .g-btn.g-btn-tertiary[disabled] { border: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-action-subtle-disabled); background: var(--groupui-sys-color-action-subtle-disabled); color: var(--groupui-sys-color-action-basic-disabled); outline: none; } .g-btn.g-btn-tertiary.g-btn-disabled .g-btn-icon, .g-btn.g-btn-tertiary[disabled] .g-btn-icon { color: var(--groupui-sys-color-action-basic-disabled); } .g-btn.g-btn-tertiary.g-btn-disabled:hover, .g-btn.g-btn-tertiary[disabled]:hover { cursor: not-allowed; color: var(--groupui-sys-color-action-basic-disabled); border: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-action-subtle-disabled); background: var(--groupui-sys-color-action-subtle-disabled); } .g-btn.g-btn-tertiary.g-btn-disabled:active, .g-btn.g-btn-tertiary[disabled]:active { background: var(--groupui-sys-color-action-subtle-disabled); border-color: var(--groupui-sys-color-action-subtle-disabled); } .g-btn.g-btn-tertiary.g-btn-disabled:focus-visible, .g-btn.g-btn-tertiary[disabled]:focus-visible { outline: none; } .g-btn.g-btn-tertiary.g-btn-inverted { border-color: var(--groupui-sys-color-action-subtle-default-inverse); background-color: var(--groupui-sys-color-action-subtle-default-inverse); color: var(--groupui-sys-color-action-basic-default-inverse); } .g-btn.g-btn-tertiary.g-btn-inverted .g-btn-icon { color: var(--groupui-sys-color-action-basic-default-inverse); } .g-btn.g-btn-tertiary.g-btn-inverted:hover { background: var(--groupui-sys-color-action-subtle-hover-inverse); border-color: var(--groupui-sys-color-line-ghost); } .g-btn.g-btn-tertiary.g-btn-inverted:active { background: var(--groupui-sys-color-action-subtle-pressed-inverse); border-color: var(--groupui-sys-color-line-ghost); } .g-btn.g-btn-tertiary.g-btn-inverted.g-btn-disabled, .g-btn.g-btn-tertiary.g-btn-inverted[disabled] { border-color: var(--groupui-sys-color-action-subtle-disabled-inverse); background: var(--groupui-sys-color-action-subtle-disabled-inverse); color: var(--groupui-sys-color-action-basic-disabled-inverse); } .g-btn.g-btn-tertiary.g-btn-inverted.g-btn-disabled .g-btn-icon, .g-btn.g-btn-tertiary.g-btn-inverted[disabled] .g-btn-icon { color: var(--groupui-sys-color-action-basic-disabled-inverse); } .g-btn.g-btn-tertiary.g-btn-inverted.g-btn-disabled:hover, .g-btn.g-btn-tertiary.g-btn-inverted[disabled]:hover { color: var(--groupui-sys-color-action-basic-disabled-inverse); border-color: var(--groupui-sys-color-action-subtle-disabled-inverse); background: var(--groupui-sys-color-action-subtle-disabled-inverse); } .g-btn.g-btn-tertiary.g-btn-inverted.g-btn-disabled:active, .g-btn.g-btn-tertiary.g-btn-inverted[disabled]:active { background: var(--groupui-sys-color-action-subtle-disabled-inverse); border-color: var(--groupui-sys-color-action-subtle-disabled-inverse); } /** * ---------------------------- * GroupUi Button - g-btn * ---------------------------- */ .g-btn { line-height: var(--groupui-sys-line-height-xxl); letter-spacing: var(--groupui-sys-spacing-0); color: var(--groupui-sys-color-on-action-basic-default); background-color: var(--groupui-sys-color-action-basic-default); font-family: var(--groupui-sys-font-family-primary); font-size: var(--groupui-sys-font-size-400); font-weight: var(--groupui-sys-font-weight-action); outline: none; border-radius: var(--groupui-sys-border-radius-xl); border: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-action-basic-default); cursor: pointer; padding: calc( var(--groupui-sys-spacing-200) - var(--groupui-sys-border-width-s) ) calc(var(--groupui-sys-spacing-500) - var(--groupui-sys-border-width-s)); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--groupui-sys-spacing-200); height: fit-content; } .g-btn .g-btn-icon { width: var(--groupui-sys-icon-size-m); height: var(--groupui-sys-icon-size-m); } .g-btn.g-btn-full-width { width: 100%; } .g-btn.g-btn-full-width.g-btn-alignment-left { justify-content: start; } .g-btn.g-btn-full-width.g-btn-alignment-center { justify-content: center; } .g-btn.g-btn-full-width.g-btn-alignment-right { justify-content: end; } .g-btn:hover, .g-btn:active { transition: all var(--groupui-sys-duration-slow-2) var(--groupui-sys-cubic-bezier-ease-in-out); } .g-btn:hover { background: var(--groupui-sys-color-action-basic-hover); border-color: var(--groupui-sys-color-action-basic-hover); } .g-btn.g-btn-icon-only { padding: calc( var(--groupui-sys-spacing-200) - var(--groupui-sys-border-width-s) ); } .g-btn.g-btn-hero { border: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-hero-basic-default); background-color: var(--groupui-sys-color-hero-basic-default); color: var(--groupui-sys-color-on-hero-basic-default); } .g-btn.g-btn-hero .g-btn-icon { color: var(--groupui-sys-color-on-hero-basic-default); } .g-btn.g-btn-hero:not(.g-btn-disabled):hover { background: var(--groupui-sys-color-hero-basic-hover); border-color: var(--groupui-sys-color-hero-basic-hover); } .g-btn.g-btn-hero:not(.g-btn-disabled):active { background: var(--groupui-sys-color-hero-basic-pressed); border-color: var(--groupui-sys-color-hero-basic-pressed); } .g-btn.g-btn-hero:focus-visible { outline-color: var(--groupui-sys-color-action-basic-default-inverse); } .g-btn.g-btn-hero.g-btn-disabled { background: var(--groupui-sys-color-hero-basic-disabled); border-color: transparent; color: var(--groupui-sys-color-on-hero-basic-disabled); } .g-btn.g-btn-small { font-size: var(--groupui-sys-font-size-350); line-height: var(--groupui-sys-spacing-400); padding-inline: calc( var(--groupui-sys-spacing-400) - var(--groupui-sys-border-width-s) ); } .g-btn.g-btn-small .g-btn-icon { min-width: var(--groupui-sys-icon-size-s); min-height: var(--groupui-sys-icon-size-s); width: var(--groupui-sys-icon-size-s); height: var(--groupui-sys-icon-size-s); } .g-btn.g-btn-small.g-btn-icon-only { padding: calc( var(--groupui-sys-spacing-200) - var(--groupui-sys-border-width-s) ); } .g-btn.g-btn-medium { font-size: var(--groupui-sys-font-size-400); line-height: var(--groupui-sys-spacing-600); } .g-btn.g-btn-medium .g-btn-icon { min-width: var(--groupui-sys-icon-size-m); min-height: var(--groupui-sys-icon-size-m); width: var(--groupui-sys-icon-size-m); height: var(--groupui-sys-icon-size-m); } .g-btn.g-btn-medium.g-btn-icon-only { padding: calc( var(--groupui-sys-spacing-200) - var(--groupui-sys-border-width-s) ); } .g-btn.g-btn-large { font-size: var(--groupui-sys-font-size-450); line-height: var(--groupui-sys-spacing-800); padding-inline: calc( var(--groupui-sys-spacing-600) - var(--groupui-sys-border-width-s) ); } .g-btn.g-btn-large .g-btn-icon { min-width: var(--groupui-sys-icon-size-l); min-height: var(--groupui-sys-icon-size-l); width: var(--groupui-sys-icon-size-l); height: var(--groupui-sys-icon-size-l); } .g-btn.g-btn-large.g-btn-icon-only { padding: calc( var(--groupui-sys-spacing-200) - var(--groupui-sys-border-width-s) ); } /** * ---------------------------- * GroupUi Card - g-card * ---------------------------- */ .g-card { display: block; box-sizing: border-box; outline: none; position: relative; font-family: var(--groupui-sys-font-family-primary), sans-serif; line-height: var(--groupui-sys-line-height-xxl); background-color: var(--groupui-sys-color-background-base); padding: var(--groupui-sys-spacing-600); border-radius: var(--groupui-sys-border-radius-m); color: var(--groupui-sys-color-text-weak); box-shadow: 0 0 0 var(--groupui-sys-border-width-s) var(--groupui-sys-color-line-weak); transition: box-shadow 0.1s var(--groupui-sys-cubic-bezier-ease-in-out); } .g-card.g-card-interactive { cursor: pointer; } .g-card.g-card-interactive:hover:not(:active) { box-shadow: var(--groupui-sys-shadow-m); } .g-card:focus-visible:not(:active) { box-shadow: var(--groupui-sys-shadow-m); } .g-card .g-card-highlight-left, .g-card .g-card-highlight-right { position: absolute; top: 0; height: 100%; width: var(--groupui-sys-spacing-150); } .g-card .g-card-highlight-left { border-top-left-radius: var(--groupui-sys-border-radius-m); border-bottom-left-radius: var(--groupui-sys-border-radius-m); left: 0; } .g-card .g-card-highlight-right { border-top-right-radius: var(--groupui-sys-border-radius-m); border-bottom-right-radius: var(--groupui-sys-border-radius-m); right: 0; } input[type='checkbox'].g-checkbox, label.g-checkbox input[type='checkbox'] { margin: 0; appearance: none; position: relative; cursor: pointer; width: var(--groupui-sys-icon-size-m); aspect-ratio: 1; background-color: var(--groupui-sys-color-background-base); border: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-action-muted-default); border-radius: var(--groupui-sys-border-radius-s); } input[type='checkbox'].g-checkbox::before, label.g-checkbox input[type='checkbox']::before { content: ''; position: absolute; inset: 0; } input[type='checkbox'].g-checkbox:checked::before, label.g-checkbox input[type='checkbox']:checked::before { background-color: var(--groupui-sys-color-background-base); mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/check-16.svg'); mask-repeat: no-repeat; mask-position: center; } input[type='checkbox'].g-checkbox:indeterminate::before, label.g-checkbox input[type='checkbox']:indeterminate::before { background-color: var(--groupui-sys-color-background-base); mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/minus-16.svg'); mask-repeat: no-repeat; mask-position: center; } input[type='checkbox'].g-checkbox:not([disabled]):hover, label.g-checkbox input[type='checkbox']:not([disabled]):hover { background-color: var(--groupui-sys-color-action-subtle-hover); border-color: var(--groupui-sys-color-action-basic-default); } input[type='checkbox'].g-checkbox:not([disabled]):active, label.g-checkbox input[type='checkbox']:not([disabled]):active { background-color: var(--groupui-sys-color-action-subtle-pressed); border-color: var(--groupui-sys-color-action-basic-hover); } input[type='checkbox'].g-checkbox:not([disabled]):focus-visible, label.g-checkbox input[type='checkbox']:not([disabled]):focus-visible { outline-offset: var(--groupui-sys-border-width-m); outline: var(--groupui-sys-border-width-m) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-action-basic-default); border: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-action-basic-default); } input[type='checkbox'].g-checkbox:not([disabled]):checked, input[type='checkbox'].g-checkbox:not([disabled]):indeterminate, label.g-checkbox input[type='checkbox']:not([disabled]):checked, label.g-checkbox input[type='checkbox']:not([disabled]):indeterminate { border-color: var(--groupui-sys-color-action-basic-default); background-color: var(--groupui-sys-color-action-basic-default); } input[type='checkbox'].g-checkbox:not([disabled]):checked:hover, input[type='checkbox'].g-checkbox:not([disabled]):indeterminate:hover, label.g-checkbox input[type='checkbox']:not([disabled]):checked:hover, label.g-checkbox input[type='checkbox']:not([disabled]):indeterminate:hover { background-color: var(--groupui-sys-color-action-basic-hover); border-color: var(--groupui-sys-color-action-basic-hover); } input[type='checkbox'].g-checkbox:not([disabled]):checked:active, input[type='checkbox'].g-checkbox:not([disabled]):indeterminate:active, label.g-checkbox input[type='checkbox']:not([disabled]):checked:active, label.g-checkbox input[type='checkbox']:not([disabled]):indeterminate:active { background-color: var(--groupui-sys-color-action-basic-pressed); border-color: var(--groupui-sys-color-action-basic-pressed); } input[type='checkbox'].g-checkbox[disabled], label.g-checkbox input[type='checkbox'][disabled] { cursor: not-allowed; border-color: var(--groupui-sys-color-action-basic-disabled); background-color: var(--groupui-sys-color-action-basic-disabled); } input[type='checkbox'].g-checkbox[disabled]:not(:checked), input[type='checkbox'].g-checkbox[disabled]:not(:indeterminate), label.g-checkbox input[type='checkbox'][disabled]:not(:checked), label.g-checkbox input[type='checkbox'][disabled]:not(:indeterminate) { background-color: var(--groupui-vwgroup-ref-color-grey-200); } input[type='checkbox'].g-checkbox[disabled]:checked, input[type='checkbox'].g-checkbox[disabled]:indeterminate, label.g-checkbox input[type='checkbox'][disabled]:checked, label.g-checkbox input[type='checkbox'][disabled]:indeterminate { background-color: var(--groupui-sys-color-action-basic-disabled); } /* danger */ input[type='checkbox'].g-checkbox.g-checkbox-danger:not([disabled]), label.g-checkbox.g-checkbox-danger input[type='checkbox']:not([disabled]) { border-color: var(--groupui-sys-color-danger-basic-default); } input[type='checkbox'].g-checkbox.g-checkbox-danger:not([disabled]):hover, label.g-checkbox.g-checkbox-danger input[type='checkbox']:not([disabled]):hover { background-color: var(--groupui-vwgroup-ref-color-system-red-700-10); border-color: var(--groupui-vwgroup-ref-color-system-red-700); } input[type='checkbox'].g-checkbox.g-checkbox-danger:not([disabled]):active, label.g-checkbox.g-checkbox-danger input[type='checkbox']:not([disabled]):active { background-color: var(--groupui-vwgroup-ref-color-system-red-700-20); border-color: var(--groupui-vwgroup-ref-color-system-red-700); } input[type='checkbox'].g-checkbox.g-checkbox-danger:not([disabled]):checked, input[type='checkbox'].g-checkbox.g-checkbox-danger:not( [disabled] ):indeterminate, label.g-checkbox.g-checkbox-danger input[type='checkbox']:not([disabled]):checked, label.g-checkbox.g-checkbox-danger input[type='checkbox']:not([disabled]):indeterminate { border-color: var(--groupui-sys-color-danger-basic-default); background-color: var(--groupui-sys-color-danger-basic-default); } input[type='checkbox'].g-checkbox.g-checkbox-danger:not( [disabled] ):checked:hover, input[type='checkbox'].g-checkbox.g-checkbox-danger:not( [disabled] ):indeterminate:hover, label.g-checkbox.g-checkbox-danger input[type='checkbox']:not([disabled]):checked:hover, label.g-checkbox.g-checkbox-danger input[type='checkbox']:not([disabled]):indeterminate:hover { background-color: var(--groupui-sys-color-danger-basic-hover); border-color: var(--groupui-sys-color-danger-basic-hover); } input[type='checkbox'].g-checkbox.g-checkbox-danger:not( [disabled] ):checked:active, input[type='checkbox'].g-checkbox.g-checkbox-danger:not( [disabled] ):indeterminate:active, label.g-checkbox.g-checkbox-danger input[type='checkbox']:not([disabled]):checked:active, label.g-checkbox.g-checkbox-danger input[type='checkbox']:not([disabled]):indeterminate:active { background-color: var(--groupui-sys-color-danger-basic-pressed); border-color: var(--groupui-sys-color-danger-basic-pressed); } /* label */ label.g-checkbox { color: var(--groupui-sys-color-text-normal); cursor: pointer; position: relative; gap: var(--groupui-sys-spacing-200); line-height: var(--groupui-sys-line-height-xxl); font-family: var(--groupui-sys-font-family-primary), sans-serif; } label.g-checkbox:has(input[type='checkbox']) { display: inline-flex; vertical-align: middle; align-items: center; } label.g-checkbox:not(:has(input[type='checkbox'])) { padding-left: var(--groupui-sys-spacing-200); } input[type='checkbox']:has(+ label.g-checkbox) { vertical-align: top; } label.g-checkbox:has(input[type='checkbox'][disabled]), input[type='checkbox'][disabled] + label.g-checkbox { cursor: not-allowed; color: var(--groupui-vwgroup-ref-color-grey-400); } label.g-checkbox.g-checkbox-small { font-size: var(--groupui-sys-font-size-350); } input[type='checkbox'].g-checkbox.g-checkbox-small, label.g-checkbox.g-checkbox-small input[type='checkbox'] { width: var(--groupui-sys-spacing-500); } .g-chip:not(.g-chip-disabled).g-chip-light { background-color: var(--groupui-sys-color-light-basic-default); border-color: var(--groupui-sys-color-light-basic-default); color: var(--groupui-sys-color-on-light-basic-default); } .g-chip:not(.g-chip-disabled).g-chip-light .g-chip-icon { color: var(--groupui-sys-color-on-light-basic-default); } .g-chip:not(.g-chip-disabled).g-chip-light:hover { background-color: var(--groupui-sys-color-light-basic-hover); border-color: var(--groupui-sys-color-light-basic-hover); } .g-chip:not(.g-chip-disabled).g-chip-light:active { background-color: var(--groupui-sys-color-light-basic-pressed); border-color: var(--groupui-sys-color-light-basic-pressed); } .g-chip:not(.g-chip-disabled).g-chip-light.g-chip-secondary { background: none; border-color: var(--groupui-sys-color-light-basic-default); color: var(--groupui-sys-color-on-light-basic-default); } .g-chip:not(.g-chip-disabled).g-chip-light.g-chip-secondary .g-chip-icon { color: var(--groupui-sys-color-on-light-basic-default); } .g-chip:not(.g-chip-disabled).g-chip-light.g-chip-secondary:hover { background-color: var(--groupui-sys-color-light-subtle-hover); border-color: var(--groupui-sys-color-light-basic-default); } .g-chip:not(.g-chip-disabled).g-chip-light.g-chip-secondary:active { background-color: var(--groupui-sys-color-light-subtle-pressed); border-color: var(--groupui-sys-color-light-basic-default); } /** * ---------------------------- * GroupUi Chip - g-chip * ---------------------------- */ .g-chip { cursor: pointer; text-decoration: none; background-color: var(--groupui-sys-color-action-basic-default); color: var(--groupui-sys-color-on-action-basic-default); border: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-action-basic-default); border-radius: var(--groupui-sys-border-radius-xl); padding: var(--groupui-sys-spacing-50) var(--groupui-sys-spacing-200); font-family: var(--groupui-sys-font-family-primary), sans-serif; font-size: var(--groupui-sys-font-size-300); line-height: var(--groupui-sys-line-height-xxl); font-weight: var(--groupui-sys-font-weight-action); display: inline-flex; align-items: center; justify-content: center; gap: var(--groupui-sys-spacing-100); height: fit-content; } .g-chip .g-chip-icon { color: var(--groupui-sys-color-on-action-basic-default); } .g-chip:not(.g-chip-disabled):hover { background-color: var(--groupui-sys-color-action-basic-hover); border-color: var(--groupui-sys-color-action-basic-hover); } .g-chip:not(.g-chip-disabled):active { background-color: var(--groupui-sys-color-action-basic-pressed); border-color: var(--groupui-sys-color-action-basic-pressed); } .g-chip:not(.g-chip-disabled).g-chip-secondary { background-color: var(--groupui-sys-color-action-subtle-default); color: var(--groupui-sys-color-action-basic-default); } .g-chip:not(.g-chip-disabled).g-chip-secondary .g-chip-icon { color: var(--groupui-sys-color-action-basic-default); } .g-chip:not(.g-chip-disabled).g-chip-secondary:hover { background-color: var(--groupui-sys-color-action-subtle-hover); border-color: var(--groupui-sys-color-action-basic-default); } .g-chip:not(.g-chip-disabled).g-chip-secondary:active { background-color: var(--groupui-sys-color-action-subtle-pressed); border-color: var(--groupui-sys-color-action-basic-default); } .g-chip.g-chip-disabled { cursor: not-allowed; background-color: var(--groupui-sys-color-action-basic-disabled); color: var(--groupui-sys-color-on-action-basic-disabled); border-color: var(--groupui-sys-color-action-basic-disabled); } .g-chip.g-chip-disabled:focus-visible { outline: none; } .g-chip.g-chip-disabled .g-chip-icon { color: var(--groupui-sys-color-on-action-basic-disabled); } .g-chip.g-chip-disabled.g-chip-secondary { background-color: var(--groupui-sys-color-action-subtle-disabled); color: var(--groupui-sys-color-action-basic-disabled); } .g-chip.g-chip-disabled.g-chip-secondary .g-chip-icon { color: var(--groupui-sys-color-action-basic-disabled); } .g-chip.g-chip-large { padding: var(--groupui-sys-spacing-0) var(--groupui-sys-spacing-300); line-height: 2.5; } .g-chip:focus-visible { outline: var(--groupui-sys-color-action-basic-default) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-border-width-m); outline-offset: var(--groupui-sys-spacing-50); } /** * -------------------------------------- * GroupUi Description - g-description * -------------------------------------- */ .g-description { flex-basis: 100%; margin-top: var(--groupui-sys-spacing-100); line-height: var(--groupui-sys-line-height-xxl); font-family: var(--groupui-sys-font-family-primary); position: relative; font-size: var(--groupui-sys-font-size-350); display: flex; align-items: center; transition: transform var(--groupui-sys-duration-medium-1); cursor: default; color: var(--groupui-sys-color-text-normal); } *[class*='-disabled'] + .g-description, *:disabled + .g-description, .g-description-disabled { color: var(--groupui-sys-color-action-basic-disabled); } *:not( [class*='-disabled'], [class*='-readonly'], :is(input, textarea):disabled, :is(input, textarea):read-only )[class*='-danger'] + .g-description, *:not( [class*='-disabled'], [class*='-readonly'], :is(input, textarea):disabled, :is(input, textarea):read-only ) .g-description-danger { color: var(--groupui-sys-color-danger-basic-default); } *:not( [class*='-disabled'], [class*='-readonly'], :is(input, textarea):disabled, :is(input, textarea):read-only )[class*='-warning'] + .g-description, *:not( [class*='-disabled'], [class*='-readonly'], :is(input, textarea):disabled, :is(input, textarea):read-only ) .g-description-warning { color: var(--groupui-sys-color-warning-basic-default); } *:not( [class*='-disabled'], [class*='-readonly'], :is(input, textarea):disabled, :is(input, textarea):read-only )[class*='-success'] + .g-description, *:not( [class*='-disabled'], [class*='-readonly'], :is(input, textarea):disabled, :is(input, textarea):read-only ) .g-description-success { color: var(--groupui-sys-color-success-basic-default); } .g-divider { width: 100%; box-sizing: border-box; margin: var(--groupui-sys-spacing-0); height: var(--groupui-sys-spacing-0); border: none; border-top: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-line-weak); } .g-divider.g-divider-dashed { border-top-style: var(--groupui-sys-stroke-style-secondary); } .g-divider.g-divider-vertical { height: 100%; width: var(--groupui-sys-spacing-0); border-top: none; border-right: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-line-weak); } .g-divider.g-divider-vertical.g-divider-dashed { border-right-style: var(--groupui-sys-stroke-style-secondary); } .g-divider.g-divider-inverted { border-color: var(--groupui-sys-color-line-weak-inverse); } /** * --------------------------------------- * GroupUi Floating Action Button - g-fab * --------------------------------------- */ .g-fab { position: absolute; cursor: pointer; display: inline-flex; align-items: center; font-family: var(--groupui-sys-font-family-primary), sans-serif; font-size: var(--groupui-sys-font-size-400); font-weight: var(--groupui-sys-font-weight-action); line-height: var(--groupui-sys-icon-size-m); letter-spacing: var(--groupui-sys-spacing-0); padding: var(--groupui-sys-spacing-200) var(--groupui-sys-spacing-500); background-color: var(--groupui-sys-color-action-basic-default); color: var(--groupui-sys-color-on-action-basic-default); border: none; border-radius: var(--groupui-sys-border-radius-xl); gap: var(--groupui-sys-spacing-200); box-shadow: var(--groupui-sys-shadow-m); z-index: var(--groupui-sys-z-index-fab); } .g-fab::before { position: absolute; left: 0; content: ''; width: 100%; height: 100%; background-color: transparent; border-radius: var(--groupui-sys-border-radius-xl); } .g-fab:hover { background-color: var(--groupui-sys-color-action-basic-hover); } .g-fab:active { background-color: var(--groupui-sys-color-action-basic-pressed); } .g-fab:focus-visible { outline: var(--groupui-sys-color-action-basic-default) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-spacing-50); outline-offset: var(--groupui-sys-spacing-50); } .g-fab .g-fab-icon { width: var(--groupui-sys-icon-size-m); height: var(--groupui-sys-icon-size-m); color: var(--groupui-sys-color-on-action-basic-default); } .g-fab.g-fab-secondary { background-color: var(--groupui-sys-color-action-silent-default); color: var(--groupui-sys-color-action-basic-default); } .g-fab.g-fab-secondary:hover::before { background-color: var(--groupui-sys-color-action-subtle-hover); } .g-fab.g-fab-secondary:active::before { background-color: var(--groupui-sys-color-action-subtle-pressed); } .g-fab.g-fab-secondary .g-fab-icon { color: var(--groupui-sys-color-on-action-silent-default); } .g-fab.g-fab-icon-only { padding: var(--groupui-sys-spacing-200); } .g-fab.g-fab-large { line-height: var(--groupui-sys-icon-size-l); font-size: var(--groupui-sys-font-size-450); padding: var(--groupui-sys-spacing-300) var(--groupui-sys-spacing-700); } .g-fab.g-fab-large .g-fab-icon { width: var(--groupui-sys-icon-size-l); height: var(--groupui-sys-icon-size-l); } .g-fab.g-fab-large.g-fab-icon-only { padding: var(--groupui-sys-spacing-300); } .g-fab.g-fab-disabled { cursor: not-allowed; background-color: var(--groupui-sys-color-action-basic-disabled); color: var(--groupui-sys-color-on-action-basic-disabled); } .g-fab.g-fab-disabled:hover, .g-fab.g-fab-disabled:active { background-color: var(--groupui-sys-color-action-basic-disabled); } .g-fab.g-fab-disabled:focus-visible { outline: none; } .g-fab.g-fab-disabled .g-fab-icon { color: var(--groupui-sys-color-on-action-basic-disabled); } .g-fab.g-fab-disabled.g-fab-secondary { background-color: var(--groupui-sys-color-action-silent-disabled); color: var(--groupui-sys-color-action-basic-disabled); } .g-fab.g-fab-disabled.g-fab-secondary:hover, .g-fab.g-fab-disabled.g-fab-secondary:active { background-color: var(--groupui-sys-color-action-silent-disabled); } .g-fab.g-fab-disabled.g-fab-secondary:hover::before, .g-fab.g-fab-disabled.g-fab-secondary:active::before { background-color: transparent; } .g-fab.g-fab-disabled.g-fab-secondary .g-fab-icon { color: var(--groupui-sys-color-action-basic-disabled); } dialog.g-flyout.g-flyout-position-right { transform: translateX(calc(100% + var(--groupui-sys-spacing-200))); top: 0; right: 0; height: 100%; } dialog.g-flyout.g-flyout-position-left { transform: translateX(calc(-100% - var(--groupui-sys-spacing-200))); top: 0; left: 0; height: 100%; } dialog.g-flyout.g-flyout-position-top { transform: translateY(calc(-100% - var(--groupui-sys-spacing-200))); top: 0; left: 0; width: 100%; } dialog.g-flyout.g-flyout-position-bottom { transform: translateY(calc(100% + var(--groupui-sys-spacing-200))); width: 100%; left: 0; bottom: 0; } dialog.g-flyout[open] { transform: unset; } dialog.g-flyout[open].g-flyout-position-right { animation: slide-left var(--groupui-sys-duration-medium-2) var(--groupui-sys-cubic-bezier-ease-in-out); } dialog.g-flyout[open].g-flyout-position-left { animation: slide-right var(--groupui-sys-duration-medium-2) var(--groupui-sys-cubic-bezier-ease-in-out); } dialog.g-flyout[open].g-flyout-position-top { animation: slide-down var(--groupui-sys-duration-medium-2) var(--groupui-sys-cubic-bezier-ease-in-out); } dialog.g-flyout[open].g-flyout-position-bottom { animation: slide-up var(--groupui-sys-duration-medium-2) var(--groupui-sys-cubic-bezier-ease-in-out); } @keyframes slide-left { from { transform: translateX(calc(100% + var(--groupui-sys-spacing-200))); } to { transform: unset; } } @keyframes slide-right { from { transform: translateX(calc(-100% - var(--groupui-sys-spacing-200))); } to { transform: unset; } } @keyframes slide-down { from { transform: translateY(calc(-100% - var(--groupui-sys-spacing-200))); } to { transform: unset; } } @keyframes slide-up { from { transform: translateY(calc(100% + var(--groupui-sys-spacing-200))); } to { transform: unset; } } /** * ------------------------- * GroupUi Flyout - g-flyout * ------------------------- */ dialog.g-flyout { position: fixed; font-family: var(--groupui-sys-font-family-primary), sans-serif; line-height: var(--groupui-sys-line-height-xxl); box-sizing: border-box; box-shadow: var(--groupui-sys-shadow-modal); overflow: visible auto; background: var(--groupui-sys-color-background-base); color: var(--groupui-sys-color-text-normal); transition: transform var(--groupui-sys-duration-medium-2) var(--groupui-sys-cubic-bezier-ease-in-out); padding: unset; margin: unset; inset: unset; border: unset; max-width: unset; max-height: unset; width: unset; height: unset; } dialog.g-flyout .g-flyout-content { width: 100%; height: 100%; box-sizing: border-box; padding: var(--groupui-sys-spacing-400); } dialog.g-flyout:focus-visible { outline: unset; } dialog.g-flyout::backdrop { background: transparent; transition: background var(--groupui-sys-duration-medium-2) var(--groupui-sys-cubic-bezier-ease-in-out); animation: fade-out var(--groupui-sys-duration-medium-2) var(--groupui-sys-cubic-bezier-ease-in-out); } dialog.g-flyout[open]::backdrop { background: var(--groupui-sys-color-background-backdrop); animation: fade-in var(--groupui-sys-duration-medium-2) var(--groupui-sys-cubic-bezier-ease-in-out); } @keyframes fade-in { from { background: transparent; } to { background: var(--groupui-sys-color-background-backdrop); } } @keyframes fade-out { from { background: var(--groupui-sys-color-background-backdrop); } to { background: transparent; } } .g-font.g-font-marketing { font-size: var(--groupui-sys-font-size-400); } @media (width >= 960px) { .g-font.g-font-marketing { font-size: var(--groupui-sys-font-size-450); } } @media (width >= 1620px) { .g-font.g-font-marketing { font-size: var(--groupui-sys-font-size-500); } } .g-font.g-font-marketing .g-font-h1, .g-font.g-font-marketing .g-font-h2, .g-font.g-font-marketing .g-font-h3, .g-font.g-font-marketing .g-font-h4, .g-font.g-font-marketing .g-font-h5, .g-font.g-font-marketing .g-font-h6, .g-font.g-font-marketing h1, .g-font.g-font-marketing h2, .g-font.g-font-marketing h3, .g-font.g-font-marketing h4, .g-font.g-font-marketing h5, .g-font.g-font-marketing h6 { margin: 0; font-family: var(--groupui-sys-font-family-secondary), sans-serif; font-weight: var(--groupui-sys-font-weight-light); line-height: var(--groupui-sys-line-height-xxl); } .g-font.g-font-marketing .g-font-h1, .g-font.g-font-marketing h1 { font-size: var(--groupui-sys-font-size-1200); line-height: var(--groupui-sys-line-height-l); } @media (width >= 960px) { .g-font.g-font-marketing .g-font-h1, .g-font.g-font-marketing h1 { font-size: var(--groupui-sys-font-size-1500); } } @media (width >= 1620px) { .g-font.g-font-marketing .g-font-h1, .g-font.g-font-marketing h1 { font-size: var(--groupui-sys-font-size-1800); } } .g-font.g-font-marketing .g-font-h2, .g-font.g-font-marketing h2 { font-size: var(--groupui-sys-font-size-1000); line-height: var(--groupui-sys-line-height-xl); } @media (width >= 960px) { .g-font.g-font-marketing .g-font-h2, .g-font.g-font-marketing h2 { font-size: var(--groupui-sys-font-size-1250); line-height: var(--groupui-sys-line-height-l); } } @media (width >= 1620px) { .g-font.g-font-marketing .g-font-h2, .g-font.g-font-marketing h2 { font-size: var(--groupui-sys-font-size-1500); } } .g-font.g-font-marketing .g-font-h3, .g-font.g-font-marketing h3 { font-size: var(--groupui-sys-font-size-800); line-height: var(--groupui-sys-line-height-xl); } @media (width >= 960px) { .g-font.g-font-marketing .g-font-h3, .g-font.g-font-marketing h3 { font-size: var(--groupui-sys-font-size-1000); } } @media (width >= 1620px) { .g-font.g-font-marketing .g-font-h3, .g-font.g-font-marketing h3 { font-size: var(--groupui-sys-font-size-1250); } } .g-font.g-font-marketing .g-font-h4, .g-font.g-font-marketing h4 { font-size: var(--groupui-sys-font-size-650); } @media (width >= 960px) { .g-font.g-font-marketing .g-font-h4, .g-font.g-font-marketing h4 { font-size: var(--groupui-sys-font-size-800); line-height: var(--groupui-sys-line-height-xl); } } @media (width >= 1620px) { .g-font.g-font-marketing .g-font-h4, .g-font.g-font-marketing h4 { font-size: var(--groupui-sys-font-size-1000); } } .g-font.g-font-marketing .g-font-h5, .g-font.g-font-marketing h5 { font-size: var(--groupui-sys-font-size-500); } @media (width >= 960px) { .g-font.g-font-marketing .g-font-h5, .g-font.g-font-marketing h5 { font-size: var(--groupui-sys-font-size-650); } } @media (width >= 1620px) { .g-font.g-font-marketing .g-font-h5, .g-font.g-font-marketing h5 { font-size: var(--groupui-sys-font-size-800); } } .g-font.g-font-marketing .g-font-h6, .g-font.g-font-marketing h6 { font-size: var(--groupui-sys-font-size-400); } @media (width >= 960px) { .g-font.g-font-marketing .g-font-h6, .g-font.g-font-marketing h6 { font-size: var(--groupui-sys-font-size-500); } } @media (width >= 1620px) { .g-font.g-font-marketing .g-font-h6, .g-font.g-font-marketing h6 { font-size: var(--groupui-sys-font-size-650); } } .g-font.g-font-marketing .g-font-bold { font-size: var(--groupui-sys-font-size-400); } @media (width >= 960px) { .g-font.g-font-marketing .g-font-bold { font-size: var(--groupui-sys-font-size-450); } } @media (width >= 1620px) { .g-font.g-font-marketing .g-font-bold { font-size: var(--groupui-sys-font-size-500); } } /** * --------------------- * GroupUi Font - g-font * --------------------- */ .g-font { font-family: var(--groupui-sys-font-family-primary), sans-serif; font-size: var(--groupui-sys-font-size-400); letter-spacing: var(--groupui-sys-letter-spacing-regular); font-weight: var(--groupui-sys-font-weight-normal); line-height: var(--groupui-sys-line-height-xxl); color: var(--groupui-sys-color-text-normal); } .g-font .g-font-light { font-weight: var(--groupui-sys-font-weight-light); font-family: var(--groupui-sys-font-family-secondary), sans-serif; } .g-font .g-font-regular { font-weight: var(--groupui-sys-font-weight-normal); } .g-font .g-font-bold { font-weight: var(--groupui-sys-font-weight-bold); } .g-font .g-font-italic { font-style: italic; } .g-font .g-font-bold-italic { font-weight: var(--groupui-sys-font-weight-bold); font-style: italic; } .g-font .g-font-body2 { font-size: var(--groupui-sys-font-size-350); } .g-font .g-font-caption, .g-font .g-font-label { font-size: var(--groupui-sys-font-size-300); } .g-font .g-font-h1, .g-font h1 { margin: 0; font-weight: var(--groupui-sys-font-weight-bold); font-size: var(--groupui-sys-font-size-800); } @media (width >= 960px) { .g-font .g-font-h1, .g-font h1 { font-size: var(--groupui-sys-font-size-850); } } @media (width >= 1620px) { .g-font .g-font-h1, .g-font h1 { font-size: var(--groupui-sys-font-size-900); } } .g-font .g-font-h2, .g-font h2 { margin: 0; font-weight: var(--groupui-sys-font-weight-bold); font-size: var(--groupui-sys-font-size-700); } @media (width >= 960px) { .g-font .g-font-h2, .g-font h2 { font-size: var(--groupui-sys-font-size-750); } } @media (width >= 1620px) { .g-font .g-font-h2, .g-font h2 { font-size: var(--groupui-sys-font-size-800); } } .g-font .g-font-h3, .g-font h3 { margin: 0; font-weight: var(--groupui-sys-font-weight-bold); font-size: var(--groupui-sys-font-size-600); } @media (width >= 960px) { .g-font .g-font-h3, .g-font h3 { font-size: var(--groupui-sys-font-size-650); } } @media (width >= 1620px) { .g-font .g-font-h3, .g-font h3 { font-size: var(--groupui-sys-font-size-700); } } .g-font .g-font-h4, .g-font h4 { margin: 0; font-weight: var(--groupui-sys-font-weight-bold); font-size: var(--groupui-sys-font-size-500); } @media (width >= 960px) { .g-font .g-font-h4, .g-font h4 { font-size: var(--groupui-sys-font-size-550); } } @media (width >= 1620px) { .g-font .g-font-h4, .g-font h4 { font-size: var(--groupui-sys-font-size-600); } } .g-font .g-font-h5, .g-font h5 { margin: 0; font-weight: var(--groupui-sys-font-weight-bold); font-size: var(--groupui-sys-font-size-450); } @media (width >= 960px) { .g-font .g-font-h5, .g-font h5 { font-size: var(--groupui-sys-font-size-500); } } @media (width >= 1620px) { .g-font .g-font-h5, .g-font h5 { font-size: var(--groupui-sys-font-size-550); } } .g-font .g-font-h6, .g-font h6 { margin: 0; font-weight: var(--groupui-sys-font-weight-bold); font-size: var(--groupui-sys-font-size-400); } @media (width >= 960px) { .g-font .g-font-h6, .g-font h6 { font-size: var(--groupui-sys-font-size-450); } } @media (width >= 1620px) { .g-font .g-font-h6, .g-font h6 { font-size: var(--groupui-sys-font-size-500); } } /** * Cascade: gutter/margin-{breakpoint} > gutter/margin > gutter/margin descending breakpoints > gutter/margin default value */ /** * Defines CSS classes for creating grid columns based on breakpoints and column count. * For each breakpoint, it generates classes for columns with different spans and offsets. * * This will generate classes like ".g-grid-col-s-1", ".g-grid-col-m-2", etc., for each breakpoint up to the maximum column count of 12. * It will also generate offset classes like ".g-grid-col-offset-s-1", ".g-grid-col-offset-m-2", etc., for each breakpoint up to the maximum column count of 11. * */ /** * Mixin for making a certain property responsive (e.g. margin or gap) to different breakpoints. * * This mixin takes a property and a value map as parameters. * It iterates over each breakpoint in the $grid-breakpoints map and applies the property with the corresponding * value from the value map using a media query with a min-width condition. */ /** * This applies fixed width to the grid container based on the breakpoints and fixed width values either set by the user or us. */ .g-grid { grid-template-columns: repeat(12, 1fr); } @media (min-width: 0) { .g-grid .g-grid-col-s-1 { grid-column: auto/span 1; } .g-grid .g-grid-col-1 { grid-column: auto/span 1; } } @media (min-width: 0) { .g-grid .g-grid-col-s-2 { grid-column: auto/span 2; } .g-grid .g-grid-col-2 { grid-column: auto/span 2; } } @media (min-width: 0) { .g-grid .g-grid-col-s-3 { grid-column: auto/span 3; } .g-grid .g-grid-col-3 { grid-column: auto/span 3; } } @media (min-width: 0) { .g-grid .g-grid-col-s-4 { grid-column: auto/span 4; } .g-grid .g-grid-col-4 { grid-column: auto/span 4; } } @media (min-width: 0) { .g-grid .g-grid-col-s-5 { grid-column: auto/span 5; } .g-grid .g-grid-col-5 { grid-column: auto/span 5; } } @media (min-width: 0) { .g-grid .g-grid-col-s-6 { grid-column: auto/span 6; } .g-grid .g-grid-col-6 { grid-column: auto/span 6; } } @media (min-width: 0) { .g-grid .g-grid-col-s-7 { grid-column: auto/span 7; } .g-grid .g-grid-col-7 { grid-column: auto/span 7; } } @media (min-width: 0) { .g-grid .g-grid-col-s-8 { grid-column: auto/span 8; } .g-grid .g-grid-col-8 { grid-column: auto/span 8; } } @media (min-width: 0) { .g-grid .g-grid-col-s-9 { grid-column: auto/span 9; } .g-grid .g-grid-col-9 { grid-column: auto/span 9; } } @media (min-width: 0) { .g-grid .g-grid-col-s-10 { grid-column: auto/span 10; } .g-grid .g-grid-col-10 { grid-column: auto/span 10; } } @media (min-width: 0) { .g-grid .g-grid-col-s-11 { grid-column: auto/span 11; } .g-grid .g-grid-col-11 { grid-column: auto/span 11; } } @media (min-width: 0) { .g-grid .g-grid-col-s-12 { grid-column: auto/span 12; } .g-grid .g-grid-col-12 { grid-column: auto/span 12; } } @media (min-width: 0) { .g-grid .g-grid-col-offset-s-1 { grid-column-start: 2; } .g-grid .g-grid-col-offset-1 { grid-column-start: 2; } } @media (min-width: 0) { .g-grid .g-grid-col-offset-s-2 { grid-column-start: 3; } .g-grid .g-grid-col-offset-2 { grid-column-start: 3; } } @media (min-width: 0) { .g-grid .g-grid-col-offset-s-3 { grid-column-start: 4; } .g-grid .g-grid-col-offset-3 { grid-column-start: 4; } } @media (min-width: 0) { .g-grid .g-grid-col-offset-s-4 { grid-column-start: 5; } .g-grid .g-grid-col-offset-4 { grid-column-start: 5; } } @media (min-width: 0) { .g-grid .g-grid-col-offset-s-5 { grid-column-start: 6; } .g-grid .g-grid-col-offset-5 { grid-column-start: 6; } } @media (min-width: 0) { .g-grid .g-grid-col-offset-s-6 { grid-column-start: 7; } .g-grid .g-grid-col-offset-6 { grid-column-start: 7; } } @media (min-width: 0) { .g-grid .g-grid-col-offset-s-7 { grid-column-start: 8; } .g-grid .g-grid-col-offset-7 { grid-column-start: 8; } } @media (min-width: 0) { .g-grid .g-grid-col-offset-s-8 { grid-column-start: 9; } .g-grid .g-grid-col-offset-8 { grid-column-start: 9; } } @media (min-width: 0) { .g-grid .g-grid-col-offset-s-9 { grid-column-start: 10; } .g-grid .g-grid-col-offset-9 { grid-column-start: 10; } } @media (min-width: 0) { .g-grid .g-grid-col-offset-s-10 { grid-column-start: 11; } .g-grid .g-grid-col-offset-10 { grid-column-start: 11; } } @media (min-width: 0) { .g-grid .g-grid-col-offset-s-11 { grid-column-start: 12; } .g-grid .g-grid-col-offset-11 { grid-column-start: 12; } } @media (min-width: 560px) { .g-grid .g-grid-col-m-1 { grid-column: auto/span 1; } } @media (min-width: 560px) { .g-grid .g-grid-col-m-2 { grid-column: auto/span 2; } } @media (min-width: 560px) { .g-grid .g-grid-col-m-3 { grid-column: auto/span 3; } } @media (min-width: 560px) { .g-grid .g-grid-col-m-4 { grid-column: auto/span 4; } } @media (min-width: 560px) { .g-grid .g-grid-col-m-5 { grid-column: auto/span 5; } } @media (min-width: 560px) { .g-grid .g-grid-col-m-6 { grid-column: auto/span 6; } } @media (min-width: 560px) { .g-grid .g-grid-col-m-7 { grid-column: auto/span 7; } } @media (min-width: 560px) { .g-grid .g-grid-col-m-8 { grid-column: auto/span 8; } } @media (min-width: 560px) { .g-grid .g-grid-col-m-9 { grid-column: auto/span 9; } } @media (min-width: 560px) { .g-grid .g-grid-col-m-10 { grid-column: auto/span 10; } } @media (min-width: 560px) { .g-grid .g-grid-col-m-11 { grid-column: auto/span 11; } } @media (min-width: 560px) { .g-grid .g-grid-col-m-12 { grid-column: auto/span 12; } } @media (min-width: 560px) { .g-grid .g-grid-col-offset-m-1 { grid-column-start: 2; } } @media (min-width: 560px) { .g-grid .g-grid-col-offset-m-2 { grid-column-start: 3; } } @media (min-width: 560px) { .g-grid .g-grid-col-offset-m-3 { grid-column-start: 4; } } @media (min-width: 560px) { .g-grid .g-grid-col-offset-m-4 { grid-column-start: 5; } } @media (min-width: 560px) { .g-grid .g-grid-col-offset-m-5 { grid-column-start: 6; } } @media (min-width: 560px) { .g-grid .g-grid-col-offset-m-6 { grid-column-start: 7; } } @media (min-width: 560px) { .g-grid .g-grid-col-offset-m-7 { grid-column-start: 8; } } @media (min-width: 560px) { .g-grid .g-grid-col-offset-m-8 { grid-column-start: 9; } } @media (min-width: 560px) { .g-grid .g-grid-col-offset-m-9 { grid-column-start: 10; } } @media (min-width: 560px) { .g-grid .g-grid-col-offset-m-10 { grid-column-start: 11; } } @media (min-width: 560px) { .g-grid .g-grid-col-offset-m-11 { grid-column-start: 12; } } @media (min-width: 960px) { .g-grid .g-grid-col-l-1 { grid-column: auto/span 1; } } @media (min-width: 960px) { .g-grid .g-grid-col-l-2 { grid-column: auto/span 2; } } @media (min-width: 960px) { .g-grid .g-grid-col-l-3 { grid-column: auto/span 3; } } @media (min-width: 960px) { .g-grid .g-grid-col-l-4 { grid-column: auto/span 4; } } @media (min-width: 960px) { .g-grid .g-grid-col-l-5 { grid-column: auto/span 5; } } @media (min-width: 960px) { .g-grid .g-grid-col-l-6 { grid-column: auto/span 6; } } @media (min-width: 960px) { .g-grid .g-grid-col-l-7 { grid-column: auto/span 7; } } @media (min-width: 960px) { .g-grid .g-grid-col-l-8 { grid-column: auto/span 8; } } @media (min-width: 960px) { .g-grid .g-grid-col-l-9 { grid-column: auto/span 9; } } @media (min-width: 960px) { .g-grid .g-grid-col-l-10 { grid-column: auto/span 10; } } @media (min-width: 960px) { .g-grid .g-grid-col-l-11 { grid-column: auto/span 11; } } @media (min-width: 960px) { .g-grid .g-grid-col-l-12 { grid-column: auto/span 12; } } @media (min-width: 960px) { .g-grid .g-grid-col-offset-l-1 { grid-column-start: 2; } } @media (min-width: 960px) { .g-grid .g-grid-col-offset-l-2 { grid-column-start: 3; } } @media (min-width: 960px) { .g-grid .g-grid-col-offset-l-3 { grid-column-start: 4; } } @media (min-width: 960px) { .g-grid .g-grid-col-offset-l-4 { grid-column-start: 5; } } @media (min-width: 960px) { .g-grid .g-grid-col-offset-l-5 { grid-column-start: 6; } } @media (min-width: 960px) { .g-grid .g-grid-col-offset-l-6 { grid-column-start: 7; } } @media (min-width: 960px) { .g-grid .g-grid-col-offset-l-7 { grid-column-start: 8; } } @media (min-width: 960px) { .g-grid .g-grid-col-offset-l-8 { grid-column-start: 9; } } @media (min-width: 960px) { .g-grid .g-grid-col-offset-l-9 { grid-column-start: 10; } } @media (min-width: 960px) { .g-grid .g-grid-col-offset-l-10 { grid-column-start: 11; } } @media (min-width: 960px) { .g-grid .g-grid-col-offset-l-11 { grid-column-start: 12; } } @media (min-width: 1280px) { .g-grid .g-grid-col-xl-1 { grid-column: auto/span 1; } } @media (min-width: 1280px) { .g-grid .g-grid-col-xl-2 { grid-column: auto/span 2; } } @media (min-width: 1280px) { .g-grid .g-grid-col-xl-3 { grid-column: auto/span 3; } } @media (min-width: 1280px) { .g-grid .g-grid-col-xl-4 { grid-column: auto/span 4; } } @media (min-width: 1280px) { .g-grid .g-grid-col-xl-5 { grid-column: auto/span 5; } } @media (min-width: 1280px) { .g-grid .g-grid-col-xl-6 { grid-column: auto/span 6; } } @media (min-width: 1280px) { .g-grid .g-grid-col-xl-7 { grid-column: auto/span 7; } } @media (min-width: 1280px) { .g-grid .g-grid-col-xl-8 { grid-column: auto/span 8; } } @media (min-width: 1280px) { .g-grid .g-grid-col-xl-9 { grid-column: auto/span 9; } } @media (min-width: 1280px) { .g-grid .g-grid-col-xl-10 { grid-column: auto/span 10; } } @media (min-width: 1280px) { .g-grid .g-grid-col-xl-11 { grid-column: auto/span 11; } } @media (min-width: 1280px) { .g-grid .g-grid-col-xl-12 { grid-column: auto/span 12; } } @media (min-width: 1280px) { .g-grid .g-grid-col-offset-xl-1 { grid-column-start: 2; } } @media (min-width: 1280px) { .g-grid .g-grid-col-offset-xl-2 { grid-column-start: 3; } } @media (min-width: 1280px) { .g-grid .g-grid-col-offset-xl-3 { grid-column-start: 4; } } @media (min-width: 1280px) { .g-grid .g-grid-col-offset-xl-4 { grid-column-start: 5; } } @media (min-width: 1280px) { .g-grid .g-grid-col-offset-xl-5 { grid-column-start: 6; } } @media (min-width: 1280px) { .g-grid .g-grid-col-offset-xl-6 { grid-column-start: 7; } } @media (min-width: 1280px) { .g-grid .g-grid-col-offset-xl-7 { grid-column-start: 8; } } @media (min-width: 1280px) { .g-grid .g-grid-col-offset-xl-8 { grid-column-start: 9; } } @media (min-width: 1280px) { .g-grid .g-grid-col-offset-xl-9 { grid-column-start: 10; } } @media (min-width: 1280px) { .g-grid .g-grid-col-offset-xl-10 { grid-column-start: 11; } } @media (min-width: 1280px) { .g-grid .g-grid-col-offset-xl-11 { grid-column-start: 12; } } @media (min-width: 1620px) { .g-grid .g-grid-col-xxl-1 { grid-column: auto/span 1; } } @media (min-width: 1620px) { .g-grid .g-grid-col-xxl-2 { grid-column: auto/span 2; } } @media (min-width: 1620px) { .g-grid .g-grid-col-xxl-3 { grid-column: auto/span 3; } } @media (min-width: 1620px) { .g-grid .g-grid-col-xxl-4 { grid-column: auto/span 4; } } @media (min-width: 1620px) { .g-grid .g-grid-col-xxl-5 { grid-column: auto/span 5; } } @media (min-width: 1620px) { .g-grid .g-grid-col-xxl-6 { grid-column: auto/span 6; } } @media (min-width: 1620px) { .g-grid .g-grid-col-xxl-7 { grid-column: auto/span 7; } } @media (min-width: 1620px) { .g-grid .g-grid-col-xxl-8 { grid-column: auto/span 8; } } @media (min-width: 1620px) { .g-grid .g-grid-col-xxl-9 { grid-column: auto/span 9; } } @media (min-width: 1620px) { .g-grid .g-grid-col-xxl-10 { grid-column: auto/span 10; } } @media (min-width: 1620px) { .g-grid .g-grid-col-xxl-11 { grid-column: auto/span 11; } } @media (min-width: 1620px) { .g-grid .g-grid-col-xxl-12 { grid-column: auto/span 12; } } @media (min-width: 1620px) { .g-grid .g-grid-col-offset-xxl-1 { grid-column-start: 2; } } @media (min-width: 1620px) { .g-grid .g-grid-col-offset-xxl-2 { grid-column-start: 3; } } @media (min-width: 1620px) { .g-grid .g-grid-col-offset-xxl-3 { grid-column-start: 4; } } @media (min-width: 1620px) { .g-grid .g-grid-col-offset-xxl-4 { grid-column-start: 5; } } @media (min-width: 1620px) { .g-grid .g-grid-col-offset-xxl-5 { grid-column-start: 6; } } @media (min-width: 1620px) { .g-grid .g-grid-col-offset-xxl-6 { grid-column-start: 7; } } @media (min-width: 1620px) { .g-grid .g-grid-col-offset-xxl-7 { grid-column-start: 8; } } @media (min-width: 1620px) { .g-grid .g-grid-col-offset-xxl-8 { grid-column-start: 9; } } @media (min-width: 1620px) { .g-grid .g-grid-col-offset-xxl-9 { grid-column-start: 10; } } @media (min-width: 1620px) { .g-grid .g-grid-col-offset-xxl-10 { grid-column-start: 11; } } @media (min-width: 1620px) { .g-grid .g-grid-col-offset-xxl-11 { grid-column-start: 12; } } .g-grid > * { grid-column: span 1; } .g-grid, .g-grid .g-grid-row { display: grid; box-sizing: border-box; width: auto; } @media (min-width: 0) { .g-grid, .g-grid .g-grid-row { gap: var( --g-grid-gutter-s, var(--g-grid-gutter, var(--groupui-sys-spacing-400)) ); /* stylelint-disable-line no-invalid-position-declaration */ } } @media (min-width: 560px) { .g-grid, .g-grid .g-grid-row { gap: var( --g-grid-gutter-m, var( --g-grid-gutter, var(--g-grid-gutter-s, var(--groupui-sys-spacing-600)) ) ); /* stylelint-disable-line no-invalid-position-declaration */ } } @media (min-width: 960px) { .g-grid, .g-grid .g-grid-row { gap: var( --g-grid-gutter-l, var( --g-grid-gutter, var( --g-grid-gutter-m, var(--g-grid-gutter-s, var(--groupui-sys-spacing-600)) ) ) ); /* stylelint-disable-line no-invalid-position-declaration */ } } @media (min-width: 1280px) { .g-grid, .g-grid .g-grid-row { gap: var( --g-grid-gutter-xl, var( --g-grid-gutter, var( --g-grid-gutter-l, var( --g-grid-gutter-m, var(--g-grid-gutter-s, var(--groupui-sys-spacing-600)) ) ) ) ); /* stylelint-disable-line no-invalid-position-declaration */ } } @media (min-width: 1620px) { .g-grid, .g-grid .g-grid-row { gap: var( --g-grid-gutter-xxl, var( --g-grid-gutter, var( --g-grid-gutter-xl, var( --g-grid-gutter-l, var( --g-grid-gutter-m, var( --g-grid-gutter-s, var(--groupui-sys-spacing-800) ) ) ) ) ) ); /* stylelint-disable-line no-invalid-position-declaration */ } } .g-grid .g-grid-row { grid-column: span 12; grid-template-columns: subgrid; } @media (min-width: 0) { .g-grid, .g-grid.g-grid-static-margin { margin-inline: var( --g-grid-margin-s, var(--g-grid-margin, var(--groupui-sys-spacing-400)) ); /* stylelint-disable-line no-invalid-position-declaration */ } } @media (min-width: 560px) { .g-grid, .g-grid.g-grid-static-margin { margin-inline: var( --g-grid-margin-m, var( --g-grid-margin, var(--g-grid-margin-s, var(--groupui-sys-spacing-600)) ) ); /* stylelint-disable-line no-invalid-position-declaration */ } } @media (min-width: 960px) { .g-grid, .g-grid.g-grid-static-margin { margin-inline: var( --g-grid-margin-l, var( --g-grid-margin, var( --g-grid-margin-m, var(--g-grid-margin-s, var(--groupui-sys-spacing-600)) ) ) ); /* stylelint-disable-line no-invalid-position-declaration */ } } @media (min-width: 1280px) { .g-grid, .g-grid.g-grid-static-margin { margin-inline: var( --g-grid-margin-xl, var( --g-grid-margin, var( --g-grid-margin-l, var( --g-grid-margin-m, var(--g-grid-margin-s, var(--groupui-sys-spacing-600)) ) ) ) ); /* stylelint-disable-line no-invalid-position-declaration */ } } @media (min-width: 1620px) { .g-grid, .g-grid.g-grid-static-margin { margin-inline: var( --g-grid-margin-xxl, var( --g-grid-margin, var( --g-grid-margin-xl, var( --g-grid-margin-l, var( --g-grid-margin-m, var( --g-grid-margin-s, var(--groupui-sys-spacing-800) ) ) ) ) ) ); /* stylelint-disable-line no-invalid-position-declaration */ } } @media (min-width: 0) { .g-grid.g-grid-flexible-margin { margin-inline: var( --g-grid-margin-s, var(--g-grid-margin, var(--groupui-sys-spacing-400)) ); /* stylelint-disable-line no-invalid-position-declaration */ } } @media (min-width: 560px) { .g-grid.g-grid-flexible-margin { margin-inline: var( --g-grid-margin-m, var( --g-grid-margin, var(--g-grid-margin-s, var(--groupui-sys-spacing-600)) ) ); /* stylelint-disable-line no-invalid-position-declaration */ } } @media (min-width: 960px) { .g-grid.g-grid-flexible-margin { margin-inline: var( --g-grid-margin-l, var( --g-grid-margin, var( --g-grid-margin-m, var(--g-grid-margin-s, var(--groupui-sys-spacing-1200)) ) ) ); /* stylelint-disable-line no-invalid-position-declaration */ } } @media (min-width: 1280px) { .g-grid.g-grid-flexible-margin { margin-inline: var( --g-grid-margin-xl, var( --g-grid-margin, var( --g-grid-margin-l, var( --g-grid-margin-m, var(--g-grid-margin-s, var(--groupui-sys-spacing-1800)) ) ) ) ); /* stylelint-disable-line no-invalid-position-declaration */ } } @media (min-width: 1620px) { .g-grid.g-grid-flexible-margin { margin-inline: var( --g-grid-margin-xxl, var( --g-grid-margin, var( --g-grid-margin-xl, var( --g-grid-margin-l, var( --g-grid-margin-m, var( --g-grid-margin-s, var(--groupui-sys-spacing-2400) ) ) ) ) ) ); /* stylelint-disable-line no-invalid-position-declaration */ } } .g-grid.g-grid-fixed { margin: 0; } @media (min-width: 0) { .g-grid.g-grid-fixed { max-width: var( --g-grid-fixed-s, var(--g-grid-fixed, var(--groupui-sys-media-query-s)) ); /* stylelint-disable-line no-invalid-position-declaration */ } } @media (min-width: 560px) { .g-grid.g-grid-fixed { max-width: var( --g-grid-fixed-m, var( --g-grid-fixed, var(--g-grid-fixed-s, var(--groupui-sys-media-query-m)) ) ); /* stylelint-disable-line no-invalid-position-declaration */ } } @media (min-width: 960px) { .g-grid.g-grid-fixed { max-width: var( --g-grid-fixed-l, var( --g-grid-fixed, var( --g-grid-fixed-m, var(--g-grid-fixed-s, var(--groupui-sys-media-query-l)) ) ) ); /* stylelint-disable-line no-invalid-position-declaration */ } } @media (min-width: 1280px) { .g-grid.g-grid-fixed { max-width: var( --g-grid-fixed-xl, var( --g-grid-fixed, var( --g-grid-fixed-l, var( --g-grid-fixed-m, var(--g-grid-fixed-s, var(--groupui-sys-media-query-xl)) ) ) ) ); /* stylelint-disable-line no-invalid-position-declaration */ } } @media (min-width: 1620px) { .g-grid.g-grid-fixed { max-width: var( --g-grid-fixed-xxl, var( --g-grid-fixed, var( --g-grid-fixed-xl, var( --g-grid-fixed-l, var( --g-grid-fixed-m, var( --g-grid-fixed-s, var(--groupui-sys-media-query-xxl) ) ) ) ) ) ); /* stylelint-disable-line no-invalid-position-declaration */ } } .g-icon-button { background-color: var(--groupui-sys-color-action-subtle-default); } .g-icon-button .g-icon-button-icon { color: var(--groupui-sys-color-action-quiet-default); } .g-icon-button:hover { background-color: var(--groupui-sys-color-action-subtle-hover); } .g-icon-button:hover .g-icon-button-icon { color: var(--groupui-sys-color-action-basic-default); } .g-icon-button:active { background-color: var(--groupui-sys-color-action-subtle-pressed); } .g-icon-button:active .g-icon-button-icon { color: var(--groupui-sys-color-action-basic-default); } .g-icon-button:focus-visible { outline: var(--groupui-sys-color-action-basic-default) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-spacing-50); outline-offset: var(--groupui-sys-spacing-50); } .g-icon-button.g-icon-button-toggled { background-color: var(--groupui-sys-color-action-basic-default); } .g-icon-button.g-icon-button-toggled .g-icon-button-icon { color: var(--groupui-sys-color-on-action-basic-default); } .g-icon-button.g-icon-button-toggled:hover { background-color: var(--groupui-sys-color-action-basic-hover); } .g-icon-button.g-icon-button-toggled:active { background-color: var(--groupui-sys-color-action-basic-pressed); } .g-icon-button.g-icon-button-inverse { background-color: var(--groupui-sys-color-action-subtle-default-inverse); } .g-icon-button.g-icon-button-inverse .g-icon-button-icon { color: var(--groupui-sys-color-action-basic-default-inverse); } .g-icon-button.g-icon-button-inverse:hover { background-color: var(--groupui-sys-color-action-subtle-hover-inverse); } .g-icon-button.g-icon-button-inverse:active { background-color: var(--groupui-sys-color-action-subtle-pressed-inverse); } .g-icon-button.g-icon-button-inverse:focus-visible { outline-color: var(--groupui-sys-color-action-basic-default-inverse); } .g-icon-button.g-icon-button-inverse.g-icon-button-toggled { background-color: var(--groupui-sys-color-action-basic-default-inverse); } .g-icon-button.g-icon-button-inverse.g-icon-button-toggled .g-icon-button-icon { color: var(--groupui-sys-color-on-action-basic-default-inverse); } .g-icon-button.g-icon-button-inverse.g-icon-button-toggled:hover { background-color: var(--groupui-sys-color-action-basic-hover-inverse); } .g-icon-button.g-icon-button-inverse.g-icon-button-toggled:active { background-color: var(--groupui-sys-color-action-basic-pressed-inverse); } .g-icon-button.g-icon-button-weak { background-color: var(--groupui-sys-color-action-subtle-default); } .g-icon-button.g-icon-button-weak .g-icon-button-icon { color: var(--groupui-sys-color-action-quiet-default); } .g-icon-button.g-icon-button-weak:hover { background-color: var(--groupui-sys-color-action-quiet-subtle-hover); } .g-icon-button.g-icon-button-weak:active { background-color: var(--groupui-sys-color-action-quiet-subtle-pressed); } .g-icon-button.g-icon-button-weak:focus-visible { outline-color: var(--groupui-sys-color-action-quiet-default); } .g-icon-button.g-icon-button-weak.g-icon-button-toggled { background-color: var(--groupui-sys-color-action-quiet-default); } .g-icon-button.g-icon-button-weak.g-icon-button-toggled .g-icon-button-icon { color: var(--groupui-sys-color-on-action-quiet-default); } .g-icon-button.g-icon-button-weak.g-icon-button-toggled:hover { background-color: var(--groupui-sys-color-action-quiet-hover); } .g-icon-button.g-icon-button-weak.g-icon-button-toggled:active { background-color: var(--groupui-sys-color-action-quiet-pressed); } .g-icon-button.g-icon-button-disabled { cursor: not-allowed; background-color: var(--groupui-sys-color-action-subtle-disabled); } .g-icon-button.g-icon-button-disabled .g-icon-button-icon { color: var(--groupui-sys-color-action-basic-disabled); } .g-icon-button.g-icon-button-disabled:hover, .g-icon-button.g-icon-button-disabled:active { background-color: var(--groupui-sys-color-action-subtle-disabled); } .g-icon-button.g-icon-button-disabled:hover .g-icon-button-icon, .g-icon-button.g-icon-button-disabled:active .g-icon-button-icon { color: var(--groupui-sys-color-action-basic-disabled); } .g-icon-button.g-icon-button-disabled:focus-visible { outline: none; } .g-icon-button.g-icon-button-disabled.g-icon-button-toggled, .g-icon-button.g-icon-button-disabled.g-icon-button-toggled:hover, .g-icon-button.g-icon-button-disabled.g-icon-button-toggled:active { background-color: var(--groupui-sys-color-action-basic-disabled); } .g-icon-button.g-icon-button-disabled.g-icon-button-toggled .g-icon-button-icon, .g-icon-button.g-icon-button-disabled.g-icon-button-toggled:hover .g-icon-button-icon, .g-icon-button.g-icon-button-disabled.g-icon-button-toggled:active .g-icon-button-icon { color: var(--groupui-sys-color-on-action-basic-disabled); } .g-icon-button.g-icon-button-disabled.g-icon-button-inverse, .g-icon-button.g-icon-button-disabled.g-icon-button-inverse:hover, .g-icon-button.g-icon-button-disabled.g-icon-button-inverse:active { background-color: var(--groupui-sys-color-action-subtle-disabled-inverse); } .g-icon-button.g-icon-button-disabled.g-icon-button-inverse .g-icon-button-icon, .g-icon-button.g-icon-button-disabled.g-icon-button-inverse:hover .g-icon-button-icon, .g-icon-button.g-icon-button-disabled.g-icon-button-inverse:active .g-icon-button-icon { color: var(--groupui-sys-color-action-basic-disabled-inverse); } .g-icon-button.g-icon-button-disabled.g-icon-button-inverse.g-icon-button-toggled, .g-icon-button.g-icon-button-disabled.g-icon-button-inverse.g-icon-button-toggled:hover, .g-icon-button.g-icon-button-disabled.g-icon-button-inverse.g-icon-button-toggled:active { background-color: var(--groupui-sys-color-action-basic-disabled-inverse); } .g-icon-button.g-icon-button-disabled.g-icon-button-inverse.g-icon-button-toggled .g-icon-button-icon, .g-icon-button.g-icon-button-disabled.g-icon-button-inverse.g-icon-button-toggled:hover .g-icon-button-icon, .g-icon-button.g-icon-button-disabled.g-icon-button-inverse.g-icon-button-toggled:active .g-icon-button-icon { color: var(--groupui-sys-color-on-action-basic-disabled-inverse); } .g-icon-button.g-icon-button-disabled.g-icon-button-weak, .g-icon-button.g-icon-button-disabled.g-icon-button-weak:hover, .g-icon-button.g-icon-button-disabled.g-icon-button-weak:active { background-color: var(--groupui-sys-color-action-subtle-disabled); } .g-icon-button.g-icon-button-disabled.g-icon-button-weak .g-icon-button-icon, .g-icon-button.g-icon-button-disabled.g-icon-button-weak:hover .g-icon-button-icon, .g-icon-button.g-icon-button-disabled.g-icon-button-weak:active .g-icon-button-icon { color: var(--groupui-sys-color-action-basic-disabled); } .g-icon-button.g-icon-button-disabled.g-icon-button-weak.g-icon-button-toggled, .g-icon-button.g-icon-button-disabled.g-icon-button-weak.g-icon-button-toggled:hover, .g-icon-button.g-icon-button-disabled.g-icon-button-weak.g-icon-button-toggled:active { background-color: var(--groupui-sys-color-action-basic-disabled); } .g-icon-button.g-icon-button-disabled.g-icon-button-weak.g-icon-button-toggled .g-icon-button-icon, .g-icon-button.g-icon-button-disabled.g-icon-button-weak.g-icon-button-toggled:hover .g-icon-button-icon, .g-icon-button.g-icon-button-disabled.g-icon-button-weak.g-icon-button-toggled:active .g-icon-button-icon { color: var(--groupui-sys-color-on-action-basic-disabled); } .g-icon-button { border: none; outline: none; cursor: pointer; width: var(--groupui-sys-spacing-600); height: var(--groupui-sys-spacing-600); padding: calc( (var(--groupui-sys-spacing-600) - var(--groupui-sys-icon-size-s)) / 2 ); border-radius: var(--groupui-sys-border-radius-xl); } .g-icon-button .g-icon-button-icon { display: inline-block; width: var(--groupui-sys-icon-size-s); height: var(--groupui-sys-icon-size-s); vertical-align: baseline; } /* * THIS FILE WAS AUTO GENERATED BY tools/icons-fetcher.mjs - DON'T EDIT MANUALLY * LAST GENERATION: 2026-03-31T12:45:22.046Z */ i.g-icon { color: var(--groupui-sys-color-action-basic-default); background-color: currentcolor; mask-size: contain; mask-repeat: no-repeat; width: var(--groupui-sys-icon-size-m); height: var(--groupui-sys-icon-size-m); mask-image: var(--g-icon-url); display: inline-block; vertical-align: middle; } i.g-icon.g-icon-CO2-circle-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/CO2-circle-16.svg'); } i.g-icon.g-icon-CO2-circle-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/CO2-circle-24.svg'); } i.g-icon.g-icon-CO2-circle-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/CO2-circle-32.svg'); } i.g-icon.g-icon-CO2-circle-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/CO2-circle-48.svg'); } i.g-icon.g-icon-CO2-cloud-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/CO2-cloud-16.svg'); } i.g-icon.g-icon-CO2-cloud-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/CO2-cloud-24.svg'); } i.g-icon.g-icon-CO2-cloud-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/CO2-cloud-32.svg'); } i.g-icon.g-icon-CO2-cloud-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/CO2-cloud-48.svg'); } i.g-icon.g-icon-ECU-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/ECU-16.svg'); } i.g-icon.g-icon-ECU-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/ECU-24.svg'); } i.g-icon.g-icon-ECU-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/ECU-32.svg'); } i.g-icon.g-icon-ECU-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/ECU-48.svg'); } i.g-icon.g-icon-USB-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/USB-16.svg'); } i.g-icon.g-icon-USB-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/USB-24.svg'); } i.g-icon.g-icon-USB-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/USB-32.svg'); } i.g-icon.g-icon-USB-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/USB-48.svg'); } i.g-icon.g-icon-ac-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/ac-16.svg'); } i.g-icon.g-icon-ac-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/ac-24.svg'); } i.g-icon.g-icon-ac-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/ac-32.svg'); } i.g-icon.g-icon-ac-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/ac-48.svg'); } i.g-icon.g-icon-access-denied-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/access-denied-16.svg'); } i.g-icon.g-icon-access-denied-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/access-denied-24.svg'); } i.g-icon.g-icon-access-denied-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/access-denied-32.svg'); } i.g-icon.g-icon-access-denied-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/access-denied-48.svg'); } i.g-icon.g-icon-add-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/add-16.svg'); } i.g-icon.g-icon-add-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/add-24.svg'); } i.g-icon.g-icon-add-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/add-32.svg'); } i.g-icon.g-icon-add-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/add-48.svg'); } i.g-icon.g-icon-add-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/add-filled-16.svg'); } i.g-icon.g-icon-add-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/add-filled-24.svg'); } i.g-icon.g-icon-add-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/add-filled-32.svg'); } i.g-icon.g-icon-add-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/add-filled-48.svg'); } i.g-icon.g-icon-adjust-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/adjust-16.svg'); } i.g-icon.g-icon-adjust-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/adjust-24.svg'); } i.g-icon.g-icon-adjust-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/adjust-32.svg'); } i.g-icon.g-icon-adjust-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/adjust-48.svg'); } i.g-icon.g-icon-adjust-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/adjust-filled-16.svg'); } i.g-icon.g-icon-adjust-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/adjust-filled-24.svg'); } i.g-icon.g-icon-adjust-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/adjust-filled-32.svg'); } i.g-icon.g-icon-adjust-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/adjust-filled-48.svg'); } i.g-icon.g-icon-aggregation-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/aggregation-16.svg'); } i.g-icon.g-icon-aggregation-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/aggregation-24.svg'); } i.g-icon.g-icon-aggregation-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/aggregation-32.svg'); } i.g-icon.g-icon-aggregation-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/aggregation-48.svg'); } i.g-icon.g-icon-aircondition-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/aircondition-16.svg'); } i.g-icon.g-icon-aircondition-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/aircondition-24.svg'); } i.g-icon.g-icon-aircondition-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/aircondition-32.svg'); } i.g-icon.g-icon-aircondition-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/aircondition-48.svg'); } i.g-icon.g-icon-airplane-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/airplane-16.svg'); } i.g-icon.g-icon-airplane-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/airplane-24.svg'); } i.g-icon.g-icon-airplane-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/airplane-32.svg'); } i.g-icon.g-icon-airplane-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/airplane-48.svg'); } i.g-icon.g-icon-airplay-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/airplay-16.svg'); } i.g-icon.g-icon-airplay-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/airplay-24.svg'); } i.g-icon.g-icon-airplay-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/airplay-32.svg'); } i.g-icon.g-icon-airplay-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/airplay-48.svg'); } i.g-icon.g-icon-alarm-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/alarm-16.svg'); } i.g-icon.g-icon-alarm-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/alarm-24.svg'); } i.g-icon.g-icon-alarm-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/alarm-32.svg'); } i.g-icon.g-icon-alarm-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/alarm-48.svg'); } i.g-icon.g-icon-archive-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/archive-16.svg'); } i.g-icon.g-icon-archive-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/archive-24.svg'); } i.g-icon.g-icon-archive-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/archive-32.svg'); } i.g-icon.g-icon-archive-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/archive-48.svg'); } i.g-icon.g-icon-archive-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/archive-filled-16.svg'); } i.g-icon.g-icon-archive-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/archive-filled-24.svg'); } i.g-icon.g-icon-archive-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/archive-filled-32.svg'); } i.g-icon.g-icon-archive-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/archive-filled-48.svg'); } i.g-icon.g-icon-arrow-back-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-back-16.svg'); } i.g-icon.g-icon-arrow-back-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-back-24.svg'); } i.g-icon.g-icon-arrow-back-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-back-32.svg'); } i.g-icon.g-icon-arrow-back-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-back-48.svg'); } i.g-icon.g-icon-arrow-direction-down-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-direction-down-16.svg'); } i.g-icon.g-icon-arrow-direction-down-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-direction-down-24.svg'); } i.g-icon.g-icon-arrow-direction-down-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-direction-down-32.svg'); } i.g-icon.g-icon-arrow-direction-down-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-direction-down-48.svg'); } i.g-icon.g-icon-arrow-direction-left-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-direction-left-16.svg'); } i.g-icon.g-icon-arrow-direction-left-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-direction-left-24.svg'); } i.g-icon.g-icon-arrow-direction-left-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-direction-left-32.svg'); } i.g-icon.g-icon-arrow-direction-left-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-direction-left-48.svg'); } i.g-icon.g-icon-arrow-direction-right-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-direction-right-16.svg'); } i.g-icon.g-icon-arrow-direction-right-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-direction-right-24.svg'); } i.g-icon.g-icon-arrow-direction-right-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-direction-right-32.svg'); } i.g-icon.g-icon-arrow-direction-right-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-direction-right-48.svg'); } i.g-icon.g-icon-arrow-direction-up-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-direction-up-16.svg'); } i.g-icon.g-icon-arrow-direction-up-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-direction-up-24.svg'); } i.g-icon.g-icon-arrow-direction-up-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-direction-up-32.svg'); } i.g-icon.g-icon-arrow-direction-up-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-direction-up-48.svg'); } i.g-icon.g-icon-arrow-down-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-down-16.svg'); } i.g-icon.g-icon-arrow-down-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-down-24.svg'); } i.g-icon.g-icon-arrow-down-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-down-32.svg'); } i.g-icon.g-icon-arrow-down-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-down-48.svg'); } i.g-icon.g-icon-arrow-down-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-down-filled-16.svg'); } i.g-icon.g-icon-arrow-down-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-down-filled-24.svg'); } i.g-icon.g-icon-arrow-down-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-down-filled-32.svg'); } i.g-icon.g-icon-arrow-down-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-down-filled-48.svg'); } i.g-icon.g-icon-arrow-forward-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-forward-16.svg'); } i.g-icon.g-icon-arrow-forward-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-forward-24.svg'); } i.g-icon.g-icon-arrow-forward-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-forward-32.svg'); } i.g-icon.g-icon-arrow-forward-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-forward-48.svg'); } i.g-icon.g-icon-arrow-left-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-left-16.svg'); } i.g-icon.g-icon-arrow-left-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-left-24.svg'); } i.g-icon.g-icon-arrow-left-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-left-32.svg'); } i.g-icon.g-icon-arrow-left-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-left-48.svg'); } i.g-icon.g-icon-arrow-right-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-right-16.svg'); } i.g-icon.g-icon-arrow-right-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-right-24.svg'); } i.g-icon.g-icon-arrow-right-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-right-32.svg'); } i.g-icon.g-icon-arrow-right-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-right-48.svg'); } i.g-icon.g-icon-arrow-up-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-up-16.svg'); } i.g-icon.g-icon-arrow-up-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-up-24.svg'); } i.g-icon.g-icon-arrow-up-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-up-32.svg'); } i.g-icon.g-icon-arrow-up-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-up-48.svg'); } i.g-icon.g-icon-arrow-up-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-up-filled-16.svg'); } i.g-icon.g-icon-arrow-up-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-up-filled-24.svg'); } i.g-icon.g-icon-arrow-up-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-up-filled-32.svg'); } i.g-icon.g-icon-arrow-up-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/arrow-up-filled-48.svg'); } i.g-icon.g-icon-attach-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/attach-16.svg'); } i.g-icon.g-icon-attach-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/attach-24.svg'); } i.g-icon.g-icon-attach-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/attach-32.svg'); } i.g-icon.g-icon-attach-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/attach-48.svg'); } i.g-icon.g-icon-attention-circle-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/attention-circle-16.svg'); } i.g-icon.g-icon-attention-circle-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/attention-circle-24.svg'); } i.g-icon.g-icon-attention-circle-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/attention-circle-32.svg'); } i.g-icon.g-icon-attention-circle-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/attention-circle-48.svg'); } i.g-icon.g-icon-balance-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/balance-16.svg'); } i.g-icon.g-icon-balance-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/balance-24.svg'); } i.g-icon.g-icon-balance-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/balance-32.svg'); } i.g-icon.g-icon-balance-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/balance-48.svg'); } i.g-icon.g-icon-battery-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-16.svg'); } i.g-icon.g-icon-battery-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-24.svg'); } i.g-icon.g-icon-battery-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-32.svg'); } i.g-icon.g-icon-battery-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-48.svg'); } i.g-icon.g-icon-battery-basic-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-basic-16.svg'); } i.g-icon.g-icon-battery-basic-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-basic-24.svg'); } i.g-icon.g-icon-battery-basic-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-basic-32.svg'); } i.g-icon.g-icon-battery-basic-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-basic-48.svg'); } i.g-icon.g-icon-battery-charging-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-charging-16.svg'); } i.g-icon.g-icon-battery-charging-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-charging-24.svg'); } i.g-icon.g-icon-battery-charging-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-charging-32.svg'); } i.g-icon.g-icon-battery-charging-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-charging-48.svg'); } i.g-icon.g-icon-battery-charging-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-charging-filled-16.svg'); } i.g-icon.g-icon-battery-charging-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-charging-filled-24.svg'); } i.g-icon.g-icon-battery-charging-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-charging-filled-32.svg'); } i.g-icon.g-icon-battery-charging-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-charging-filled-48.svg'); } i.g-icon.g-icon-battery-error-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-error-16.svg'); } i.g-icon.g-icon-battery-error-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-error-24.svg'); } i.g-icon.g-icon-battery-error-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-error-32.svg'); } i.g-icon.g-icon-battery-error-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-error-48.svg'); } i.g-icon.g-icon-battery-error-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-error-filled-16.svg'); } i.g-icon.g-icon-battery-error-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-error-filled-24.svg'); } i.g-icon.g-icon-battery-error-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-error-filled-32.svg'); } i.g-icon.g-icon-battery-error-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-error-filled-48.svg'); } i.g-icon.g-icon-battery-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-filled-16.svg'); } i.g-icon.g-icon-battery-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-filled-24.svg'); } i.g-icon.g-icon-battery-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-filled-32.svg'); } i.g-icon.g-icon-battery-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-filled-48.svg'); } i.g-icon.g-icon-battery-off-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-off-16.svg'); } i.g-icon.g-icon-battery-off-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-off-24.svg'); } i.g-icon.g-icon-battery-off-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-off-32.svg'); } i.g-icon.g-icon-battery-off-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-off-48.svg'); } i.g-icon.g-icon-battery-off-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-off-filled-16.svg'); } i.g-icon.g-icon-battery-off-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-off-filled-24.svg'); } i.g-icon.g-icon-battery-off-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-off-filled-32.svg'); } i.g-icon.g-icon-battery-off-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-off-filled-48.svg'); } i.g-icon.g-icon-battery-polarity-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-polarity-16.svg'); } i.g-icon.g-icon-battery-polarity-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-polarity-24.svg'); } i.g-icon.g-icon-battery-polarity-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-polarity-32.svg'); } i.g-icon.g-icon-battery-polarity-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-polarity-48.svg'); } i.g-icon.g-icon-battery-polarity-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-polarity-filled-16.svg'); } i.g-icon.g-icon-battery-polarity-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-polarity-filled-24.svg'); } i.g-icon.g-icon-battery-polarity-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-polarity-filled-32.svg'); } i.g-icon.g-icon-battery-polarity-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/battery-polarity-filled-48.svg'); } i.g-icon.g-icon-bidirectional-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/bidirectional-16.svg'); } i.g-icon.g-icon-bidirectional-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/bidirectional-24.svg'); } i.g-icon.g-icon-bidirectional-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/bidirectional-32.svg'); } i.g-icon.g-icon-bidirectional-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/bidirectional-48.svg'); } i.g-icon.g-icon-bike-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/bike-16.svg'); } i.g-icon.g-icon-bike-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/bike-24.svg'); } i.g-icon.g-icon-bike-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/bike-32.svg'); } i.g-icon.g-icon-bike-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/bike-48.svg'); } i.g-icon.g-icon-binoculars-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/binoculars-16.svg'); } i.g-icon.g-icon-binoculars-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/binoculars-24.svg'); } i.g-icon.g-icon-binoculars-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/binoculars-32.svg'); } i.g-icon.g-icon-binoculars-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/binoculars-48.svg'); } i.g-icon.g-icon-bitcoin-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/bitcoin-16.svg'); } i.g-icon.g-icon-bitcoin-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/bitcoin-24.svg'); } i.g-icon.g-icon-bitcoin-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/bitcoin-32.svg'); } i.g-icon.g-icon-bitcoin-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/bitcoin-48.svg'); } i.g-icon.g-icon-bitcoin-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/bitcoin-filled-16.svg'); } i.g-icon.g-icon-bitcoin-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/bitcoin-filled-24.svg'); } i.g-icon.g-icon-bitcoin-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/bitcoin-filled-32.svg'); } i.g-icon.g-icon-bitcoin-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/bitcoin-filled-48.svg'); } i.g-icon.g-icon-blocked-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/blocked-16.svg'); } i.g-icon.g-icon-blocked-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/blocked-24.svg'); } i.g-icon.g-icon-blocked-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/blocked-32.svg'); } i.g-icon.g-icon-blocked-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/blocked-48.svg'); } i.g-icon.g-icon-blocked-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/blocked-filled-16.svg'); } i.g-icon.g-icon-blocked-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/blocked-filled-24.svg'); } i.g-icon.g-icon-blocked-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/blocked-filled-32.svg'); } i.g-icon.g-icon-blocked-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/blocked-filled-48.svg'); } i.g-icon.g-icon-bluetooth-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/bluetooth-16.svg'); } i.g-icon.g-icon-bluetooth-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/bluetooth-24.svg'); } i.g-icon.g-icon-bluetooth-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/bluetooth-32.svg'); } i.g-icon.g-icon-bluetooth-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/bluetooth-48.svg'); } i.g-icon.g-icon-book-closed-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/book-closed-16.svg'); } i.g-icon.g-icon-book-closed-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/book-closed-24.svg'); } i.g-icon.g-icon-book-closed-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/book-closed-32.svg'); } i.g-icon.g-icon-book-closed-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/book-closed-48.svg'); } i.g-icon.g-icon-bookmark-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/bookmark-16.svg'); } i.g-icon.g-icon-bookmark-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/bookmark-24.svg'); } i.g-icon.g-icon-bookmark-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/bookmark-32.svg'); } i.g-icon.g-icon-bookmark-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/bookmark-48.svg'); } i.g-icon.g-icon-bookmark-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/bookmark-filled-16.svg'); } i.g-icon.g-icon-bookmark-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/bookmark-filled-24.svg'); } i.g-icon.g-icon-bookmark-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/bookmark-filled-32.svg'); } i.g-icon.g-icon-bookmark-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/bookmark-filled-48.svg'); } i.g-icon.g-icon-brake-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/brake-16.svg'); } i.g-icon.g-icon-brake-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/brake-24.svg'); } i.g-icon.g-icon-brake-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/brake-32.svg'); } i.g-icon.g-icon-brake-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/brake-48.svg'); } i.g-icon.g-icon-brochure-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/brochure-16.svg'); } i.g-icon.g-icon-brochure-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/brochure-24.svg'); } i.g-icon.g-icon-brochure-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/brochure-32.svg'); } i.g-icon.g-icon-brochure-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/brochure-48.svg'); } i.g-icon.g-icon-build-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/build-16.svg'); } i.g-icon.g-icon-build-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/build-24.svg'); } i.g-icon.g-icon-build-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/build-32.svg'); } i.g-icon.g-icon-build-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/build-48.svg'); } i.g-icon.g-icon-build-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/build-filled-16.svg'); } i.g-icon.g-icon-build-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/build-filled-24.svg'); } i.g-icon.g-icon-build-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/build-filled-32.svg'); } i.g-icon.g-icon-build-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/build-filled-48.svg'); } i.g-icon.g-icon-business-bag-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/business-bag-16.svg'); } i.g-icon.g-icon-business-bag-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/business-bag-24.svg'); } i.g-icon.g-icon-business-bag-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/business-bag-32.svg'); } i.g-icon.g-icon-business-bag-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/business-bag-48.svg'); } i.g-icon.g-icon-butler-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/butler-16.svg'); } i.g-icon.g-icon-butler-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/butler-24.svg'); } i.g-icon.g-icon-butler-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/butler-32.svg'); } i.g-icon.g-icon-butler-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/butler-48.svg'); } i.g-icon.g-icon-caht-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/caht-16.svg'); } i.g-icon.g-icon-caht-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/caht-24.svg'); } i.g-icon.g-icon-caht-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/caht-32.svg'); } i.g-icon.g-icon-caht-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/caht-48.svg'); } i.g-icon.g-icon-calc-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/calc-16.svg'); } i.g-icon.g-icon-calc-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/calc-24.svg'); } i.g-icon.g-icon-calc-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/calc-32.svg'); } i.g-icon.g-icon-calc-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/calc-48.svg'); } i.g-icon.g-icon-calculation-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/calculation-16.svg'); } i.g-icon.g-icon-calculation-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/calculation-24.svg'); } i.g-icon.g-icon-calculation-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/calculation-32.svg'); } i.g-icon.g-icon-calculation-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/calculation-48.svg'); } i.g-icon.g-icon-calendar-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/calendar-16.svg'); } i.g-icon.g-icon-calendar-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/calendar-24.svg'); } i.g-icon.g-icon-calendar-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/calendar-32.svg'); } i.g-icon.g-icon-calendar-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/calendar-48.svg'); } i.g-icon.g-icon-call-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/call-16.svg'); } i.g-icon.g-icon-call-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/call-24.svg'); } i.g-icon.g-icon-call-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/call-32.svg'); } i.g-icon.g-icon-call-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/call-48.svg'); } i.g-icon.g-icon-call-emergency-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/call-emergency-16.svg'); } i.g-icon.g-icon-call-emergency-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/call-emergency-24.svg'); } i.g-icon.g-icon-call-emergency-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/call-emergency-32.svg'); } i.g-icon.g-icon-call-emergency-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/call-emergency-48.svg'); } i.g-icon.g-icon-call-emergency-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/call-emergency-filled-16.svg'); } i.g-icon.g-icon-call-emergency-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/call-emergency-filled-24.svg'); } i.g-icon.g-icon-call-emergency-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/call-emergency-filled-32.svg'); } i.g-icon.g-icon-call-emergency-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/call-emergency-filled-48.svg'); } i.g-icon.g-icon-call-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/call-filled-16.svg'); } i.g-icon.g-icon-call-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/call-filled-24.svg'); } i.g-icon.g-icon-call-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/call-filled-32.svg'); } i.g-icon.g-icon-call-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/call-filled-48.svg'); } i.g-icon.g-icon-camera-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/camera-16.svg'); } i.g-icon.g-icon-camera-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/camera-24.svg'); } i.g-icon.g-icon-camera-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/camera-32.svg'); } i.g-icon.g-icon-camera-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/camera-48.svg'); } i.g-icon.g-icon-camera-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/camera-filled-16.svg'); } i.g-icon.g-icon-camera-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/camera-filled-24.svg'); } i.g-icon.g-icon-camera-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/camera-filled-32.svg'); } i.g-icon.g-icon-camera-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/camera-filled-48.svg'); } i.g-icon.g-icon-car-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-16.svg'); } i.g-icon.g-icon-car-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-24.svg'); } i.g-icon.g-icon-car-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-32.svg'); } i.g-icon.g-icon-car-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-48.svg'); } i.g-icon.g-icon-car-boddy-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-boddy-16.svg'); } i.g-icon.g-icon-car-boddy-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-boddy-24.svg'); } i.g-icon.g-icon-car-boddy-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-boddy-32.svg'); } i.g-icon.g-icon-car-boddy-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-boddy-48.svg'); } i.g-icon.g-icon-car-body-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-body-16.svg'); } i.g-icon.g-icon-car-body-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-body-24.svg'); } i.g-icon.g-icon-car-body-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-body-32.svg'); } i.g-icon.g-icon-car-body-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-body-48.svg'); } i.g-icon.g-icon-car-body-add-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-body-add-16.svg'); } i.g-icon.g-icon-car-body-add-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-body-add-24.svg'); } i.g-icon.g-icon-car-body-add-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-body-add-32.svg'); } i.g-icon.g-icon-car-body-add-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-body-add-48.svg'); } i.g-icon.g-icon-car-body-check-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-body-check-16.svg'); } i.g-icon.g-icon-car-body-check-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-body-check-24.svg'); } i.g-icon.g-icon-car-body-check-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-body-check-32.svg'); } i.g-icon.g-icon-car-body-check-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-body-check-48.svg'); } i.g-icon.g-icon-car-body-equipment-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-body-equipment-16.svg'); } i.g-icon.g-icon-car-body-equipment-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-body-equipment-24.svg'); } i.g-icon.g-icon-car-body-equipment-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-body-equipment-32.svg'); } i.g-icon.g-icon-car-body-equipment-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-body-equipment-48.svg'); } i.g-icon.g-icon-car-body-extension-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-body-extension-16.svg'); } i.g-icon.g-icon-car-body-extension-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-body-extension-24.svg'); } i.g-icon.g-icon-car-body-extension-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-body-extension-32.svg'); } i.g-icon.g-icon-car-body-extension-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-body-extension-48.svg'); } i.g-icon.g-icon-car-body-remove-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-body-remove-16.svg'); } i.g-icon.g-icon-car-body-remove-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-body-remove-24.svg'); } i.g-icon.g-icon-car-body-remove-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-body-remove-32.svg'); } i.g-icon.g-icon-car-body-remove-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-body-remove-48.svg'); } i.g-icon.g-icon-car-crash-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-crash-16.svg'); } i.g-icon.g-icon-car-crash-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-crash-24.svg'); } i.g-icon.g-icon-car-crash-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-crash-32.svg'); } i.g-icon.g-icon-car-crash-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-crash-48.svg'); } i.g-icon.g-icon-car-key-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-key-16.svg'); } i.g-icon.g-icon-car-key-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-key-24.svg'); } i.g-icon.g-icon-car-key-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-key-32.svg'); } i.g-icon.g-icon-car-key-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-key-48.svg'); } i.g-icon.g-icon-car-key-error-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-key-error-16.svg'); } i.g-icon.g-icon-car-key-error-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-key-error-24.svg'); } i.g-icon.g-icon-car-key-error-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-key-error-32.svg'); } i.g-icon.g-icon-car-key-error-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-key-error-48.svg'); } i.g-icon.g-icon-car-key-progress-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-key-progress-16.svg'); } i.g-icon.g-icon-car-key-progress-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-key-progress-24.svg'); } i.g-icon.g-icon-car-key-progress-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-key-progress-32.svg'); } i.g-icon.g-icon-car-key-progress-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-key-progress-48.svg'); } i.g-icon.g-icon-car-key-success-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-key-success-16.svg'); } i.g-icon.g-icon-car-key-success-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-key-success-24.svg'); } i.g-icon.g-icon-car-key-success-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-key-success-32.svg'); } i.g-icon.g-icon-car-key-success-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-key-success-48.svg'); } i.g-icon.g-icon-car-key-unavailable-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-key-unavailable-16.svg'); } i.g-icon.g-icon-car-key-unavailable-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-key-unavailable-24.svg'); } i.g-icon.g-icon-car-key-unavailable-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-key-unavailable-32.svg'); } i.g-icon.g-icon-car-key-unavailable-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/car-key-unavailable-48.svg'); } i.g-icon.g-icon-cast-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/cast-16.svg'); } i.g-icon.g-icon-cast-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/cast-24.svg'); } i.g-icon.g-icon-cast-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/cast-32.svg'); } i.g-icon.g-icon-cast-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/cast-48.svg'); } i.g-icon.g-icon-chart-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/chart-16.svg'); } i.g-icon.g-icon-chart-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/chart-24.svg'); } i.g-icon.g-icon-chart-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/chart-32.svg'); } i.g-icon.g-icon-chart-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/chart-48.svg'); } i.g-icon.g-icon-chat-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/chat-16.svg'); } i.g-icon.g-icon-chat-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/chat-24.svg'); } i.g-icon.g-icon-chat-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/chat-32.svg'); } i.g-icon.g-icon-chat-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/chat-48.svg'); } i.g-icon.g-icon-chat-bubble-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/chat-bubble-16.svg'); } i.g-icon.g-icon-chat-bubble-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/chat-bubble-24.svg'); } i.g-icon.g-icon-chat-bubble-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/chat-bubble-32.svg'); } i.g-icon.g-icon-chat-bubble-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/chat-bubble-48.svg'); } i.g-icon.g-icon-check-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/check-16.svg'); } i.g-icon.g-icon-check-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/check-24.svg'); } i.g-icon.g-icon-check-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/check-32.svg'); } i.g-icon.g-icon-check-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/check-48.svg'); } i.g-icon.g-icon-checklist-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/checklist-16.svg'); } i.g-icon.g-icon-checklist-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/checklist-24.svg'); } i.g-icon.g-icon-checklist-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/checklist-32.svg'); } i.g-icon.g-icon-checklist-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/checklist-48.svg'); } i.g-icon.g-icon-chevron-double-left-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/chevron-double-left-16.svg'); } i.g-icon.g-icon-chevron-double-left-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/chevron-double-left-24.svg'); } i.g-icon.g-icon-chevron-double-left-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/chevron-double-left-32.svg'); } i.g-icon.g-icon-chevron-double-left-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/chevron-double-left-48.svg'); } i.g-icon.g-icon-chevron-double-right-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/chevron-double-right-16.svg'); } i.g-icon.g-icon-chevron-double-right-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/chevron-double-right-24.svg'); } i.g-icon.g-icon-chevron-double-right-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/chevron-double-right-32.svg'); } i.g-icon.g-icon-chevron-double-right-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/chevron-double-right-48.svg'); } i.g-icon.g-icon-chevron-down-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/chevron-down-16.svg'); } i.g-icon.g-icon-chevron-down-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/chevron-down-24.svg'); } i.g-icon.g-icon-chevron-down-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/chevron-down-32.svg'); } i.g-icon.g-icon-chevron-down-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/chevron-down-48.svg'); } i.g-icon.g-icon-chevron-left-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/chevron-left-16.svg'); } i.g-icon.g-icon-chevron-left-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/chevron-left-24.svg'); } i.g-icon.g-icon-chevron-left-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/chevron-left-32.svg'); } i.g-icon.g-icon-chevron-left-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/chevron-left-48.svg'); } i.g-icon.g-icon-chevron-right-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/chevron-right-16.svg'); } i.g-icon.g-icon-chevron-right-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/chevron-right-24.svg'); } i.g-icon.g-icon-chevron-right-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/chevron-right-32.svg'); } i.g-icon.g-icon-chevron-right-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/chevron-right-48.svg'); } i.g-icon.g-icon-chevron-up-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/chevron-up-16.svg'); } i.g-icon.g-icon-chevron-up-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/chevron-up-24.svg'); } i.g-icon.g-icon-chevron-up-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/chevron-up-32.svg'); } i.g-icon.g-icon-chevron-up-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/chevron-up-48.svg'); } i.g-icon.g-icon-circle-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/circle-16.svg'); } i.g-icon.g-icon-circle-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/circle-24.svg'); } i.g-icon.g-icon-circle-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/circle-32.svg'); } i.g-icon.g-icon-circle-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/circle-48.svg'); } i.g-icon.g-icon-circle-close-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/circle-close-16.svg'); } i.g-icon.g-icon-circle-close-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/circle-close-24.svg'); } i.g-icon.g-icon-circle-close-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/circle-close-32.svg'); } i.g-icon.g-icon-circle-close-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/circle-close-48.svg'); } i.g-icon.g-icon-circle-close-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/circle-close-filled-16.svg'); } i.g-icon.g-icon-circle-close-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/circle-close-filled-24.svg'); } i.g-icon.g-icon-circle-close-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/circle-close-filled-32.svg'); } i.g-icon.g-icon-circle-close-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/circle-close-filled-48.svg'); } i.g-icon.g-icon-circle-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/circle-filled-16.svg'); } i.g-icon.g-icon-circle-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/circle-filled-24.svg'); } i.g-icon.g-icon-circle-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/circle-filled-32.svg'); } i.g-icon.g-icon-circle-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/circle-filled-48.svg'); } i.g-icon.g-icon-circle-half-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/circle-half-16.svg'); } i.g-icon.g-icon-circle-half-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/circle-half-24.svg'); } i.g-icon.g-icon-circle-half-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/circle-half-32.svg'); } i.g-icon.g-icon-circle-half-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/circle-half-48.svg'); } i.g-icon.g-icon-circle-minus-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/circle-minus-16.svg'); } i.g-icon.g-icon-circle-minus-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/circle-minus-24.svg'); } i.g-icon.g-icon-circle-minus-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/circle-minus-32.svg'); } i.g-icon.g-icon-circle-minus-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/circle-minus-48.svg'); } i.g-icon.g-icon-circle-minus-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/circle-minus-filled-16.svg'); } i.g-icon.g-icon-circle-minus-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/circle-minus-filled-24.svg'); } i.g-icon.g-icon-circle-minus-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/circle-minus-filled-32.svg'); } i.g-icon.g-icon-circle-minus-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/circle-minus-filled-48.svg'); } i.g-icon.g-icon-circle-quarter-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/circle-quarter-16.svg'); } i.g-icon.g-icon-circle-quarter-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/circle-quarter-24.svg'); } i.g-icon.g-icon-circle-quarter-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/circle-quarter-32.svg'); } i.g-icon.g-icon-circle-quarter-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/circle-quarter-48.svg'); } i.g-icon.g-icon-clipboard-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/clipboard-16.svg'); } i.g-icon.g-icon-clipboard-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/clipboard-24.svg'); } i.g-icon.g-icon-clipboard-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/clipboard-32.svg'); } i.g-icon.g-icon-clipboard-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/clipboard-48.svg'); } i.g-icon.g-icon-clock-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/clock-16.svg'); } i.g-icon.g-icon-clock-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/clock-24.svg'); } i.g-icon.g-icon-clock-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/clock-32.svg'); } i.g-icon.g-icon-clock-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/clock-48.svg'); } i.g-icon.g-icon-clock-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/clock-filled-16.svg'); } i.g-icon.g-icon-clock-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/clock-filled-24.svg'); } i.g-icon.g-icon-clock-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/clock-filled-32.svg'); } i.g-icon.g-icon-clock-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/clock-filled-48.svg'); } i.g-icon.g-icon-close-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/close-16.svg'); } i.g-icon.g-icon-close-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/close-24.svg'); } i.g-icon.g-icon-close-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/close-32.svg'); } i.g-icon.g-icon-close-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/close-48.svg'); } i.g-icon.g-icon-cloud-download-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/cloud-download-16.svg'); } i.g-icon.g-icon-cloud-download-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/cloud-download-24.svg'); } i.g-icon.g-icon-cloud-download-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/cloud-download-32.svg'); } i.g-icon.g-icon-cloud-download-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/cloud-download-48.svg'); } i.g-icon.g-icon-cloud-upload-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/cloud-upload-16.svg'); } i.g-icon.g-icon-cloud-upload-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/cloud-upload-24.svg'); } i.g-icon.g-icon-cloud-upload-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/cloud-upload-32.svg'); } i.g-icon.g-icon-cloud-upload-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/cloud-upload-48.svg'); } i.g-icon.g-icon-color-bucket-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/color-bucket-16.svg'); } i.g-icon.g-icon-color-bucket-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/color-bucket-24.svg'); } i.g-icon.g-icon-color-bucket-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/color-bucket-32.svg'); } i.g-icon.g-icon-color-bucket-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/color-bucket-48.svg'); } i.g-icon.g-icon-color-bucket-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/color-bucket-filled-16.svg'); } i.g-icon.g-icon-color-bucket-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/color-bucket-filled-24.svg'); } i.g-icon.g-icon-color-bucket-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/color-bucket-filled-32.svg'); } i.g-icon.g-icon-color-bucket-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/color-bucket-filled-48.svg'); } i.g-icon.g-icon-columns-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/columns-16.svg'); } i.g-icon.g-icon-columns-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/columns-24.svg'); } i.g-icon.g-icon-columns-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/columns-32.svg'); } i.g-icon.g-icon-columns-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/columns-48.svg'); } i.g-icon.g-icon-columns-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/columns-filled-16.svg'); } i.g-icon.g-icon-columns-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/columns-filled-24.svg'); } i.g-icon.g-icon-columns-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/columns-filled-32.svg'); } i.g-icon.g-icon-columns-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/columns-filled-48.svg'); } i.g-icon.g-icon-comment-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/comment-16.svg'); } i.g-icon.g-icon-comment-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/comment-24.svg'); } i.g-icon.g-icon-comment-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/comment-32.svg'); } i.g-icon.g-icon-comment-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/comment-48.svg'); } i.g-icon.g-icon-connect-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/connect-16.svg'); } i.g-icon.g-icon-connect-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/connect-24.svg'); } i.g-icon.g-icon-connect-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/connect-32.svg'); } i.g-icon.g-icon-connect-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/connect-48.svg'); } i.g-icon.g-icon-consumable-liquid-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/consumable-liquid-16.svg'); } i.g-icon.g-icon-consumable-liquid-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/consumable-liquid-24.svg'); } i.g-icon.g-icon-consumable-liquid-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/consumable-liquid-32.svg'); } i.g-icon.g-icon-consumable-liquid-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/consumable-liquid-48.svg'); } i.g-icon.g-icon-cookie-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/cookie-16.svg'); } i.g-icon.g-icon-cookie-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/cookie-24.svg'); } i.g-icon.g-icon-cookie-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/cookie-32.svg'); } i.g-icon.g-icon-cookie-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/cookie-48.svg'); } i.g-icon.g-icon-copy-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/copy-16.svg'); } i.g-icon.g-icon-copy-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/copy-24.svg'); } i.g-icon.g-icon-copy-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/copy-32.svg'); } i.g-icon.g-icon-copy-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/copy-48.svg'); } i.g-icon.g-icon-copy-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/copy-filled-16.svg'); } i.g-icon.g-icon-copy-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/copy-filled-24.svg'); } i.g-icon.g-icon-copy-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/copy-filled-32.svg'); } i.g-icon.g-icon-copy-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/copy-filled-48.svg'); } i.g-icon.g-icon-corn-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/corn-16.svg'); } i.g-icon.g-icon-corn-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/corn-24.svg'); } i.g-icon.g-icon-corn-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/corn-32.svg'); } i.g-icon.g-icon-corn-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/corn-48.svg'); } i.g-icon.g-icon-correct-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/correct-16.svg'); } i.g-icon.g-icon-correct-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/correct-24.svg'); } i.g-icon.g-icon-correct-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/correct-32.svg'); } i.g-icon.g-icon-correct-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/correct-48.svg'); } i.g-icon.g-icon-court-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/court-16.svg'); } i.g-icon.g-icon-court-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/court-24.svg'); } i.g-icon.g-icon-court-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/court-32.svg'); } i.g-icon.g-icon-court-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/court-48.svg'); } i.g-icon.g-icon-court-house-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/court-house-16.svg'); } i.g-icon.g-icon-court-house-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/court-house-24.svg'); } i.g-icon.g-icon-court-house-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/court-house-32.svg'); } i.g-icon.g-icon-court-house-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/court-house-48.svg'); } i.g-icon.g-icon-credit-card-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/credit-card-16.svg'); } i.g-icon.g-icon-credit-card-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/credit-card-24.svg'); } i.g-icon.g-icon-credit-card-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/credit-card-32.svg'); } i.g-icon.g-icon-credit-card-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/credit-card-48.svg'); } i.g-icon.g-icon-credit-card-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/credit-card-filled-16.svg'); } i.g-icon.g-icon-credit-card-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/credit-card-filled-24.svg'); } i.g-icon.g-icon-credit-card-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/credit-card-filled-32.svg'); } i.g-icon.g-icon-credit-card-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/credit-card-filled-48.svg'); } i.g-icon.g-icon-creditcard-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/creditcard-16.svg'); } i.g-icon.g-icon-creditcard-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/creditcard-24.svg'); } i.g-icon.g-icon-creditcard-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/creditcard-32.svg'); } i.g-icon.g-icon-creditcard-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/creditcard-48.svg'); } i.g-icon.g-icon-cut-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/cut-16.svg'); } i.g-icon.g-icon-cut-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/cut-24.svg'); } i.g-icon.g-icon-cut-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/cut-32.svg'); } i.g-icon.g-icon-cut-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/cut-48.svg'); } i.g-icon.g-icon-cyber-security-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/cyber-security-16.svg'); } i.g-icon.g-icon-cyber-security-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/cyber-security-24.svg'); } i.g-icon.g-icon-cyber-security-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/cyber-security-32.svg'); } i.g-icon.g-icon-cyber-security-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/cyber-security-48.svg'); } i.g-icon.g-icon-danger-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/danger-filled-16.svg'); } i.g-icon.g-icon-danger-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/danger-filled-24.svg'); } i.g-icon.g-icon-danger-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/danger-filled-32.svg'); } i.g-icon.g-icon-danger-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/danger-filled-48.svg'); } i.g-icon.g-icon-danger-outlined-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/danger-outlined-16.svg'); } i.g-icon.g-icon-danger-outlined-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/danger-outlined-24.svg'); } i.g-icon.g-icon-danger-outlined-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/danger-outlined-32.svg'); } i.g-icon.g-icon-danger-outlined-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/danger-outlined-48.svg'); } i.g-icon.g-icon-delete-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/delete-16.svg'); } i.g-icon.g-icon-delete-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/delete-24.svg'); } i.g-icon.g-icon-delete-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/delete-32.svg'); } i.g-icon.g-icon-delete-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/delete-48.svg'); } i.g-icon.g-icon-diagram-bar-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/diagram-bar-16.svg'); } i.g-icon.g-icon-diagram-bar-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/diagram-bar-24.svg'); } i.g-icon.g-icon-diagram-bar-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/diagram-bar-32.svg'); } i.g-icon.g-icon-diagram-bar-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/diagram-bar-48.svg'); } i.g-icon.g-icon-diagram-bars-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/diagram-bars-16.svg'); } i.g-icon.g-icon-diagram-bars-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/diagram-bars-24.svg'); } i.g-icon.g-icon-diagram-bars-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/diagram-bars-32.svg'); } i.g-icon.g-icon-diagram-bars-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/diagram-bars-48.svg'); } i.g-icon.g-icon-diagram-curve-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/diagram-curve-16.svg'); } i.g-icon.g-icon-diagram-curve-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/diagram-curve-24.svg'); } i.g-icon.g-icon-diagram-curve-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/diagram-curve-32.svg'); } i.g-icon.g-icon-diagram-curve-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/diagram-curve-48.svg'); } i.g-icon.g-icon-diagram-graph-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/diagram-graph-16.svg'); } i.g-icon.g-icon-diagram-graph-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/diagram-graph-24.svg'); } i.g-icon.g-icon-diagram-graph-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/diagram-graph-32.svg'); } i.g-icon.g-icon-diagram-graph-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/diagram-graph-48.svg'); } i.g-icon.g-icon-diamond-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/diamond-16.svg'); } i.g-icon.g-icon-diamond-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/diamond-24.svg'); } i.g-icon.g-icon-diamond-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/diamond-32.svg'); } i.g-icon.g-icon-diamond-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/diamond-48.svg'); } i.g-icon.g-icon-diamond-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/diamond-filled-16.svg'); } i.g-icon.g-icon-diamond-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/diamond-filled-24.svg'); } i.g-icon.g-icon-diamond-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/diamond-filled-32.svg'); } i.g-icon.g-icon-diamond-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/diamond-filled-48.svg'); } i.g-icon.g-icon-direction-down-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/direction-down-16.svg'); } i.g-icon.g-icon-direction-down-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/direction-down-24.svg'); } i.g-icon.g-icon-direction-down-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/direction-down-32.svg'); } i.g-icon.g-icon-direction-down-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/direction-down-48.svg'); } i.g-icon.g-icon-direction-left-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/direction-left-16.svg'); } i.g-icon.g-icon-direction-left-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/direction-left-24.svg'); } i.g-icon.g-icon-direction-left-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/direction-left-32.svg'); } i.g-icon.g-icon-direction-left-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/direction-left-48.svg'); } i.g-icon.g-icon-direction-right-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/direction-right-16.svg'); } i.g-icon.g-icon-direction-right-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/direction-right-24.svg'); } i.g-icon.g-icon-direction-right-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/direction-right-32.svg'); } i.g-icon.g-icon-direction-right-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/direction-right-48.svg'); } i.g-icon.g-icon-direction-up-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/direction-up-16.svg'); } i.g-icon.g-icon-direction-up-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/direction-up-24.svg'); } i.g-icon.g-icon-direction-up-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/direction-up-32.svg'); } i.g-icon.g-icon-direction-up-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/direction-up-48.svg'); } i.g-icon.g-icon-directions-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/directions-16.svg'); } i.g-icon.g-icon-directions-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/directions-24.svg'); } i.g-icon.g-icon-directions-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/directions-32.svg'); } i.g-icon.g-icon-directions-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/directions-48.svg'); } i.g-icon.g-icon-disconnect-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/disconnect-16.svg'); } i.g-icon.g-icon-disconnect-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/disconnect-24.svg'); } i.g-icon.g-icon-disconnect-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/disconnect-32.svg'); } i.g-icon.g-icon-disconnect-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/disconnect-48.svg'); } i.g-icon.g-icon-display-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/display-16.svg'); } i.g-icon.g-icon-display-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/display-24.svg'); } i.g-icon.g-icon-display-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/display-32.svg'); } i.g-icon.g-icon-display-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/display-48.svg'); } i.g-icon.g-icon-display-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/display-filled-16.svg'); } i.g-icon.g-icon-display-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/display-filled-24.svg'); } i.g-icon.g-icon-display-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/display-filled-32.svg'); } i.g-icon.g-icon-display-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/display-filled-48.svg'); } i.g-icon.g-icon-document-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/document-16.svg'); } i.g-icon.g-icon-document-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/document-24.svg'); } i.g-icon.g-icon-document-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/document-32.svg'); } i.g-icon.g-icon-document-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/document-48.svg'); } i.g-icon.g-icon-document-delete-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/document-delete-16.svg'); } i.g-icon.g-icon-document-delete-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/document-delete-24.svg'); } i.g-icon.g-icon-document-delete-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/document-delete-32.svg'); } i.g-icon.g-icon-document-delete-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/document-delete-48.svg'); } i.g-icon.g-icon-document-minus-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/document-minus-16.svg'); } i.g-icon.g-icon-document-minus-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/document-minus-24.svg'); } i.g-icon.g-icon-document-minus-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/document-minus-32.svg'); } i.g-icon.g-icon-document-minus-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/document-minus-48.svg'); } i.g-icon.g-icon-document-new-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/document-new-16.svg'); } i.g-icon.g-icon-document-new-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/document-new-24.svg'); } i.g-icon.g-icon-document-new-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/document-new-32.svg'); } i.g-icon.g-icon-document-new-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/document-new-48.svg'); } i.g-icon.g-icon-document-plus-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/document-plus-16.svg'); } i.g-icon.g-icon-document-plus-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/document-plus-24.svg'); } i.g-icon.g-icon-document-plus-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/document-plus-32.svg'); } i.g-icon.g-icon-document-plus-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/document-plus-48.svg'); } i.g-icon.g-icon-dollar-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/dollar-16.svg'); } i.g-icon.g-icon-dollar-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/dollar-24.svg'); } i.g-icon.g-icon-dollar-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/dollar-32.svg'); } i.g-icon.g-icon-dollar-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/dollar-48.svg'); } i.g-icon.g-icon-dollar-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/dollar-filled-16.svg'); } i.g-icon.g-icon-dollar-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/dollar-filled-24.svg'); } i.g-icon.g-icon-dollar-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/dollar-filled-32.svg'); } i.g-icon.g-icon-dollar-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/dollar-filled-48.svg'); } i.g-icon.g-icon-door-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/door-16.svg'); } i.g-icon.g-icon-door-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/door-24.svg'); } i.g-icon.g-icon-door-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/door-32.svg'); } i.g-icon.g-icon-door-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/door-48.svg'); } i.g-icon.g-icon-dots-horizontal-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/dots-horizontal-16.svg'); } i.g-icon.g-icon-dots-horizontal-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/dots-horizontal-24.svg'); } i.g-icon.g-icon-dots-horizontal-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/dots-horizontal-32.svg'); } i.g-icon.g-icon-dots-horizontal-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/dots-horizontal-48.svg'); } i.g-icon.g-icon-dots-horizontal-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/dots-horizontal-filled-16.svg'); } i.g-icon.g-icon-dots-horizontal-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/dots-horizontal-filled-24.svg'); } i.g-icon.g-icon-dots-horizontal-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/dots-horizontal-filled-32.svg'); } i.g-icon.g-icon-dots-horizontal-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/dots-horizontal-filled-48.svg'); } i.g-icon.g-icon-dots-vertical-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/dots-vertical-16.svg'); } i.g-icon.g-icon-dots-vertical-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/dots-vertical-24.svg'); } i.g-icon.g-icon-dots-vertical-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/dots-vertical-32.svg'); } i.g-icon.g-icon-dots-vertical-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/dots-vertical-48.svg'); } i.g-icon.g-icon-dots-vertical-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/dots-vertical-filled-16.svg'); } i.g-icon.g-icon-dots-vertical-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/dots-vertical-filled-24.svg'); } i.g-icon.g-icon-dots-vertical-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/dots-vertical-filled-32.svg'); } i.g-icon.g-icon-dots-vertical-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/dots-vertical-filled-48.svg'); } i.g-icon.g-icon-download-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/download-16.svg'); } i.g-icon.g-icon-download-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/download-24.svg'); } i.g-icon.g-icon-download-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/download-32.svg'); } i.g-icon.g-icon-download-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/download-48.svg'); } i.g-icon.g-icon-download-cloud-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/download-cloud-16.svg'); } i.g-icon.g-icon-download-cloud-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/download-cloud-24.svg'); } i.g-icon.g-icon-download-cloud-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/download-cloud-32.svg'); } i.g-icon.g-icon-download-cloud-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/download-cloud-48.svg'); } i.g-icon.g-icon-drag-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/drag-16.svg'); } i.g-icon.g-icon-drag-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/drag-24.svg'); } i.g-icon.g-icon-drag-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/drag-32.svg'); } i.g-icon.g-icon-drag-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/drag-48.svg'); } i.g-icon.g-icon-drivetrain-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/drivetrain-16.svg'); } i.g-icon.g-icon-drivetrain-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/drivetrain-24.svg'); } i.g-icon.g-icon-drivetrain-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/drivetrain-32.svg'); } i.g-icon.g-icon-drivetrain-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/drivetrain-48.svg'); } i.g-icon.g-icon-driving-ban-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/driving-ban-16.svg'); } i.g-icon.g-icon-driving-ban-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/driving-ban-24.svg'); } i.g-icon.g-icon-driving-ban-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/driving-ban-32.svg'); } i.g-icon.g-icon-driving-ban-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/driving-ban-48.svg'); } i.g-icon.g-icon-dummy-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/dummy-16.svg'); } i.g-icon.g-icon-dummy-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/dummy-24.svg'); } i.g-icon.g-icon-dummy-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/dummy-32.svg'); } i.g-icon.g-icon-dummy-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/dummy-48.svg'); } i.g-icon.g-icon-ecu-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/ecu-16.svg'); } i.g-icon.g-icon-ecu-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/ecu-24.svg'); } i.g-icon.g-icon-ecu-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/ecu-32.svg'); } i.g-icon.g-icon-ecu-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/ecu-48.svg'); } i.g-icon.g-icon-edit-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/edit-16.svg'); } i.g-icon.g-icon-edit-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/edit-24.svg'); } i.g-icon.g-icon-edit-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/edit-32.svg'); } i.g-icon.g-icon-edit-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/edit-48.svg'); } i.g-icon.g-icon-electricity-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/electricity-16.svg'); } i.g-icon.g-icon-electricity-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/electricity-24.svg'); } i.g-icon.g-icon-electricity-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/electricity-32.svg'); } i.g-icon.g-icon-electricity-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/electricity-48.svg'); } i.g-icon.g-icon-electricity-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/electricity-filled-16.svg'); } i.g-icon.g-icon-electricity-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/electricity-filled-24.svg'); } i.g-icon.g-icon-electricity-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/electricity-filled-32.svg'); } i.g-icon.g-icon-electricity-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/electricity-filled-48.svg'); } i.g-icon.g-icon-electronic-chip-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/electronic-chip-16.svg'); } i.g-icon.g-icon-electronic-chip-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/electronic-chip-24.svg'); } i.g-icon.g-icon-electronic-chip-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/electronic-chip-32.svg'); } i.g-icon.g-icon-electronic-chip-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/electronic-chip-48.svg'); } i.g-icon.g-icon-elephant-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/elephant-16.svg'); } i.g-icon.g-icon-elephant-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/elephant-24.svg'); } i.g-icon.g-icon-elephant-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/elephant-32.svg'); } i.g-icon.g-icon-elephant-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/elephant-48.svg'); } i.g-icon.g-icon-elevator-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/elevator-16.svg'); } i.g-icon.g-icon-elevator-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/elevator-24.svg'); } i.g-icon.g-icon-elevator-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/elevator-32.svg'); } i.g-icon.g-icon-elevator-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/elevator-48.svg'); } i.g-icon.g-icon-elevator-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/elevator-filled-16.svg'); } i.g-icon.g-icon-elevator-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/elevator-filled-24.svg'); } i.g-icon.g-icon-elevator-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/elevator-filled-32.svg'); } i.g-icon.g-icon-elevator-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/elevator-filled-48.svg'); } i.g-icon.g-icon-email-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/email-16.svg'); } i.g-icon.g-icon-email-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/email-24.svg'); } i.g-icon.g-icon-email-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/email-32.svg'); } i.g-icon.g-icon-email-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/email-48.svg'); } i.g-icon.g-icon-email-open-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/email-open-16.svg'); } i.g-icon.g-icon-email-open-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/email-open-24.svg'); } i.g-icon.g-icon-email-open-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/email-open-32.svg'); } i.g-icon.g-icon-email-open-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/email-open-48.svg'); } i.g-icon.g-icon-enter-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/enter-16.svg'); } i.g-icon.g-icon-enter-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/enter-24.svg'); } i.g-icon.g-icon-enter-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/enter-32.svg'); } i.g-icon.g-icon-enter-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/enter-48.svg'); } i.g-icon.g-icon-error-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/error-16.svg'); } i.g-icon.g-icon-error-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/error-24.svg'); } i.g-icon.g-icon-error-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/error-32.svg'); } i.g-icon.g-icon-error-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/error-48.svg'); } i.g-icon.g-icon-error-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/error-filled-16.svg'); } i.g-icon.g-icon-error-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/error-filled-24.svg'); } i.g-icon.g-icon-error-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/error-filled-32.svg'); } i.g-icon.g-icon-error-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/error-filled-48.svg'); } i.g-icon.g-icon-euro-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/euro-16.svg'); } i.g-icon.g-icon-euro-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/euro-24.svg'); } i.g-icon.g-icon-euro-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/euro-32.svg'); } i.g-icon.g-icon-euro-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/euro-48.svg'); } i.g-icon.g-icon-euro-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/euro-filled-16.svg'); } i.g-icon.g-icon-euro-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/euro-filled-24.svg'); } i.g-icon.g-icon-euro-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/euro-filled-32.svg'); } i.g-icon.g-icon-euro-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/euro-filled-48.svg'); } i.g-icon.g-icon-experimental-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/experimental-16.svg'); } i.g-icon.g-icon-experimental-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/experimental-24.svg'); } i.g-icon.g-icon-experimental-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/experimental-32.svg'); } i.g-icon.g-icon-experimental-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/experimental-48.svg'); } i.g-icon.g-icon-external-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/external-16.svg'); } i.g-icon.g-icon-external-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/external-24.svg'); } i.g-icon.g-icon-external-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/external-32.svg'); } i.g-icon.g-icon-external-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/external-48.svg'); } i.g-icon.g-icon-external-link-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/external-link-16.svg'); } i.g-icon.g-icon-external-link-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/external-link-24.svg'); } i.g-icon.g-icon-external-link-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/external-link-32.svg'); } i.g-icon.g-icon-external-link-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/external-link-48.svg'); } i.g-icon.g-icon-extra-costs-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/extra-costs-16.svg'); } i.g-icon.g-icon-extra-costs-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/extra-costs-24.svg'); } i.g-icon.g-icon-extra-costs-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/extra-costs-32.svg'); } i.g-icon.g-icon-extra-costs-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/extra-costs-48.svg'); } i.g-icon.g-icon-eye-open-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/eye-open-16.svg'); } i.g-icon.g-icon-eye-open-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/eye-open-24.svg'); } i.g-icon.g-icon-eye-open-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/eye-open-32.svg'); } i.g-icon.g-icon-eye-open-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/eye-open-48.svg'); } i.g-icon.g-icon-eye-open-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/eye-open-filled-16.svg'); } i.g-icon.g-icon-eye-open-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/eye-open-filled-24.svg'); } i.g-icon.g-icon-eye-open-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/eye-open-filled-32.svg'); } i.g-icon.g-icon-eye-open-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/eye-open-filled-48.svg'); } i.g-icon.g-icon-facebook-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/facebook-16.svg'); } i.g-icon.g-icon-facebook-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/facebook-24.svg'); } i.g-icon.g-icon-facebook-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/facebook-32.svg'); } i.g-icon.g-icon-facebook-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/facebook-48.svg'); } i.g-icon.g-icon-factory-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/factory-16.svg'); } i.g-icon.g-icon-factory-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/factory-24.svg'); } i.g-icon.g-icon-factory-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/factory-32.svg'); } i.g-icon.g-icon-factory-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/factory-48.svg'); } i.g-icon.g-icon-factory-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/factory-filled-16.svg'); } i.g-icon.g-icon-factory-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/factory-filled-24.svg'); } i.g-icon.g-icon-factory-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/factory-filled-32.svg'); } i.g-icon.g-icon-factory-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/factory-filled-48.svg'); } i.g-icon.g-icon-factory-shield-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/factory-shield-16.svg'); } i.g-icon.g-icon-factory-shield-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/factory-shield-24.svg'); } i.g-icon.g-icon-factory-shield-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/factory-shield-32.svg'); } i.g-icon.g-icon-factory-shield-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/factory-shield-48.svg'); } i.g-icon.g-icon-fan-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/fan-16.svg'); } i.g-icon.g-icon-fan-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/fan-24.svg'); } i.g-icon.g-icon-fan-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/fan-32.svg'); } i.g-icon.g-icon-fan-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/fan-48.svg'); } i.g-icon.g-icon-favorite-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/favorite-16.svg'); } i.g-icon.g-icon-favorite-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/favorite-24.svg'); } i.g-icon.g-icon-favorite-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/favorite-32.svg'); } i.g-icon.g-icon-favorite-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/favorite-48.svg'); } i.g-icon.g-icon-favorite-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/favorite-filled-16.svg'); } i.g-icon.g-icon-favorite-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/favorite-filled-24.svg'); } i.g-icon.g-icon-favorite-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/favorite-filled-32.svg'); } i.g-icon.g-icon-favorite-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/favorite-filled-48.svg'); } i.g-icon.g-icon-figma-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/figma-16.svg'); } i.g-icon.g-icon-figma-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/figma-24.svg'); } i.g-icon.g-icon-figma-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/figma-32.svg'); } i.g-icon.g-icon-figma-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/figma-48.svg'); } i.g-icon.g-icon-file-add-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-add-16.svg'); } i.g-icon.g-icon-file-add-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-add-24.svg'); } i.g-icon.g-icon-file-add-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-add-32.svg'); } i.g-icon.g-icon-file-add-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-add-48.svg'); } i.g-icon.g-icon-file-audio-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-audio-16.svg'); } i.g-icon.g-icon-file-audio-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-audio-24.svg'); } i.g-icon.g-icon-file-audio-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-audio-32.svg'); } i.g-icon.g-icon-file-audio-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-audio-48.svg'); } i.g-icon.g-icon-file-csv-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-csv-16.svg'); } i.g-icon.g-icon-file-csv-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-csv-24.svg'); } i.g-icon.g-icon-file-csv-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-csv-32.svg'); } i.g-icon.g-icon-file-csv-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-csv-48.svg'); } i.g-icon.g-icon-file-edit-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-edit-16.svg'); } i.g-icon.g-icon-file-edit-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-edit-24.svg'); } i.g-icon.g-icon-file-edit-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-edit-32.svg'); } i.g-icon.g-icon-file-edit-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-edit-48.svg'); } i.g-icon.g-icon-file-excel-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-excel-16.svg'); } i.g-icon.g-icon-file-excel-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-excel-24.svg'); } i.g-icon.g-icon-file-excel-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-excel-32.svg'); } i.g-icon.g-icon-file-excel-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-excel-48.svg'); } i.g-icon.g-icon-file-generic-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-generic-16.svg'); } i.g-icon.g-icon-file-generic-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-generic-24.svg'); } i.g-icon.g-icon-file-generic-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-generic-32.svg'); } i.g-icon.g-icon-file-generic-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-generic-48.svg'); } i.g-icon.g-icon-file-protected-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-protected-16.svg'); } i.g-icon.g-icon-file-protected-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-protected-24.svg'); } i.g-icon.g-icon-file-protected-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-protected-32.svg'); } i.g-icon.g-icon-file-protected-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-protected-48.svg'); } i.g-icon.g-icon-file-remove-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-remove-16.svg'); } i.g-icon.g-icon-file-remove-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-remove-24.svg'); } i.g-icon.g-icon-file-remove-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-remove-32.svg'); } i.g-icon.g-icon-file-remove-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-remove-48.svg'); } i.g-icon.g-icon-file-text-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-text-16.svg'); } i.g-icon.g-icon-file-text-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-text-24.svg'); } i.g-icon.g-icon-file-text-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-text-32.svg'); } i.g-icon.g-icon-file-text-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-text-48.svg'); } i.g-icon.g-icon-file-video-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-video-16.svg'); } i.g-icon.g-icon-file-video-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-video-24.svg'); } i.g-icon.g-icon-file-video-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-video-32.svg'); } i.g-icon.g-icon-file-video-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-video-48.svg'); } i.g-icon.g-icon-file-xml-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-xml-16.svg'); } i.g-icon.g-icon-file-xml-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-xml-24.svg'); } i.g-icon.g-icon-file-xml-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-xml-32.svg'); } i.g-icon.g-icon-file-xml-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/file-xml-48.svg'); } i.g-icon.g-icon-filter-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/filter-16.svg'); } i.g-icon.g-icon-filter-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/filter-24.svg'); } i.g-icon.g-icon-filter-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/filter-32.svg'); } i.g-icon.g-icon-filter-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/filter-48.svg'); } i.g-icon.g-icon-filter-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/filter-filled-16.svg'); } i.g-icon.g-icon-filter-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/filter-filled-24.svg'); } i.g-icon.g-icon-filter-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/filter-filled-32.svg'); } i.g-icon.g-icon-filter-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/filter-filled-48.svg'); } i.g-icon.g-icon-fingerprint-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/fingerprint-16.svg'); } i.g-icon.g-icon-fingerprint-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/fingerprint-24.svg'); } i.g-icon.g-icon-fingerprint-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/fingerprint-32.svg'); } i.g-icon.g-icon-fingerprint-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/fingerprint-48.svg'); } i.g-icon.g-icon-fingerprint-scan-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/fingerprint-scan-16.svg'); } i.g-icon.g-icon-fingerprint-scan-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/fingerprint-scan-24.svg'); } i.g-icon.g-icon-fingerprint-scan-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/fingerprint-scan-32.svg'); } i.g-icon.g-icon-fingerprint-scan-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/fingerprint-scan-48.svg'); } i.g-icon.g-icon-first-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/first-16.svg'); } i.g-icon.g-icon-first-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/first-24.svg'); } i.g-icon.g-icon-first-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/first-32.svg'); } i.g-icon.g-icon-first-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/first-48.svg'); } i.g-icon.g-icon-flag-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/flag-16.svg'); } i.g-icon.g-icon-flag-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/flag-24.svg'); } i.g-icon.g-icon-flag-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/flag-32.svg'); } i.g-icon.g-icon-flag-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/flag-48.svg'); } i.g-icon.g-icon-folder-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-16.svg'); } i.g-icon.g-icon-folder-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-24.svg'); } i.g-icon.g-icon-folder-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-32.svg'); } i.g-icon.g-icon-folder-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-48.svg'); } i.g-icon.g-icon-folder-delete-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-delete-16.svg'); } i.g-icon.g-icon-folder-delete-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-delete-24.svg'); } i.g-icon.g-icon-folder-delete-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-delete-32.svg'); } i.g-icon.g-icon-folder-delete-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-delete-48.svg'); } i.g-icon.g-icon-folder-delete-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-delete-filled-16.svg'); } i.g-icon.g-icon-folder-delete-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-delete-filled-24.svg'); } i.g-icon.g-icon-folder-delete-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-delete-filled-32.svg'); } i.g-icon.g-icon-folder-delete-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-delete-filled-48.svg'); } i.g-icon.g-icon-folder-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-filled-16.svg'); } i.g-icon.g-icon-folder-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-filled-24.svg'); } i.g-icon.g-icon-folder-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-filled-32.svg'); } i.g-icon.g-icon-folder-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-filled-48.svg'); } i.g-icon.g-icon-folder-minus-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-minus-16.svg'); } i.g-icon.g-icon-folder-minus-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-minus-24.svg'); } i.g-icon.g-icon-folder-minus-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-minus-32.svg'); } i.g-icon.g-icon-folder-minus-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-minus-48.svg'); } i.g-icon.g-icon-folder-minus-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-minus-filled-16.svg'); } i.g-icon.g-icon-folder-minus-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-minus-filled-24.svg'); } i.g-icon.g-icon-folder-minus-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-minus-filled-32.svg'); } i.g-icon.g-icon-folder-minus-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-minus-filled-48.svg'); } i.g-icon.g-icon-folder-new-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-new-16.svg'); } i.g-icon.g-icon-folder-new-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-new-24.svg'); } i.g-icon.g-icon-folder-new-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-new-32.svg'); } i.g-icon.g-icon-folder-new-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-new-48.svg'); } i.g-icon.g-icon-folder-new-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-new-filled-16.svg'); } i.g-icon.g-icon-folder-new-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-new-filled-24.svg'); } i.g-icon.g-icon-folder-new-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-new-filled-32.svg'); } i.g-icon.g-icon-folder-new-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-new-filled-48.svg'); } i.g-icon.g-icon-folder-open-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-open-16.svg'); } i.g-icon.g-icon-folder-open-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-open-24.svg'); } i.g-icon.g-icon-folder-open-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-open-32.svg'); } i.g-icon.g-icon-folder-open-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-open-48.svg'); } i.g-icon.g-icon-folder-plus-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-plus-16.svg'); } i.g-icon.g-icon-folder-plus-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-plus-24.svg'); } i.g-icon.g-icon-folder-plus-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-plus-32.svg'); } i.g-icon.g-icon-folder-plus-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-plus-48.svg'); } i.g-icon.g-icon-folder-plus-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-plus-filled-16.svg'); } i.g-icon.g-icon-folder-plus-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-plus-filled-24.svg'); } i.g-icon.g-icon-folder-plus-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-plus-filled-32.svg'); } i.g-icon.g-icon-folder-plus-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-plus-filled-48.svg'); } i.g-icon.g-icon-folder-register-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-register-16.svg'); } i.g-icon.g-icon-folder-register-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-register-24.svg'); } i.g-icon.g-icon-folder-register-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-register-32.svg'); } i.g-icon.g-icon-folder-register-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-register-48.svg'); } i.g-icon.g-icon-folder-register-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-register-filled-16.svg'); } i.g-icon.g-icon-folder-register-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-register-filled-24.svg'); } i.g-icon.g-icon-folder-register-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-register-filled-32.svg'); } i.g-icon.g-icon-folder-register-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/folder-register-filled-48.svg'); } i.g-icon.g-icon-forklift-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/forklift-16.svg'); } i.g-icon.g-icon-forklift-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/forklift-24.svg'); } i.g-icon.g-icon-forklift-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/forklift-32.svg'); } i.g-icon.g-icon-forklift-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/forklift-48.svg'); } i.g-icon.g-icon-forward-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/forward-16.svg'); } i.g-icon.g-icon-forward-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/forward-24.svg'); } i.g-icon.g-icon-forward-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/forward-32.svg'); } i.g-icon.g-icon-forward-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/forward-48.svg'); } i.g-icon.g-icon-gavel-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/gavel-16.svg'); } i.g-icon.g-icon-gavel-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/gavel-24.svg'); } i.g-icon.g-icon-gavel-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/gavel-32.svg'); } i.g-icon.g-icon-gavel-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/gavel-48.svg'); } i.g-icon.g-icon-gears-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/gears-16.svg'); } i.g-icon.g-icon-gears-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/gears-24.svg'); } i.g-icon.g-icon-gears-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/gears-32.svg'); } i.g-icon.g-icon-gears-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/gears-48.svg'); } i.g-icon.g-icon-gift-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/gift-16.svg'); } i.g-icon.g-icon-gift-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/gift-24.svg'); } i.g-icon.g-icon-gift-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/gift-32.svg'); } i.g-icon.g-icon-gift-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/gift-48.svg'); } i.g-icon.g-icon-global-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/global-16.svg'); } i.g-icon.g-icon-global-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/global-24.svg'); } i.g-icon.g-icon-global-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/global-32.svg'); } i.g-icon.g-icon-global-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/global-48.svg'); } i.g-icon.g-icon-global-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/global-filled-16.svg'); } i.g-icon.g-icon-global-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/global-filled-24.svg'); } i.g-icon.g-icon-global-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/global-filled-32.svg'); } i.g-icon.g-icon-global-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/global-filled-48.svg'); } i.g-icon.g-icon-grid-square-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/grid-square-16.svg'); } i.g-icon.g-icon-grid-square-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/grid-square-24.svg'); } i.g-icon.g-icon-grid-square-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/grid-square-32.svg'); } i.g-icon.g-icon-grid-square-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/grid-square-48.svg'); } i.g-icon.g-icon-grid-square-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/grid-square-filled-16.svg'); } i.g-icon.g-icon-grid-square-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/grid-square-filled-24.svg'); } i.g-icon.g-icon-grid-square-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/grid-square-filled-32.svg'); } i.g-icon.g-icon-grid-square-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/grid-square-filled-48.svg'); } i.g-icon.g-icon-grid-view-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/grid-view-16.svg'); } i.g-icon.g-icon-grid-view-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/grid-view-24.svg'); } i.g-icon.g-icon-grid-view-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/grid-view-32.svg'); } i.g-icon.g-icon-grid-view-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/grid-view-48.svg'); } i.g-icon.g-icon-grid-view-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/grid-view-filled-16.svg'); } i.g-icon.g-icon-grid-view-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/grid-view-filled-24.svg'); } i.g-icon.g-icon-grid-view-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/grid-view-filled-32.svg'); } i.g-icon.g-icon-grid-view-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/grid-view-filled-48.svg'); } i.g-icon.g-icon-grip-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/grip-16.svg'); } i.g-icon.g-icon-grip-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/grip-24.svg'); } i.g-icon.g-icon-grip-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/grip-32.svg'); } i.g-icon.g-icon-grip-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/grip-48.svg'); } i.g-icon.g-icon-group-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/group-16.svg'); } i.g-icon.g-icon-group-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/group-24.svg'); } i.g-icon.g-icon-group-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/group-32.svg'); } i.g-icon.g-icon-group-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/group-48.svg'); } i.g-icon.g-icon-handbook-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/handbook-16.svg'); } i.g-icon.g-icon-handbook-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/handbook-24.svg'); } i.g-icon.g-icon-handbook-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/handbook-32.svg'); } i.g-icon.g-icon-handbook-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/handbook-48.svg'); } i.g-icon.g-icon-handbook-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/handbook-filled-16.svg'); } i.g-icon.g-icon-handbook-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/handbook-filled-24.svg'); } i.g-icon.g-icon-handbook-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/handbook-filled-32.svg'); } i.g-icon.g-icon-handbook-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/handbook-filled-48.svg'); } i.g-icon.g-icon-handshake-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/handshake-16.svg'); } i.g-icon.g-icon-handshake-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/handshake-24.svg'); } i.g-icon.g-icon-handshake-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/handshake-32.svg'); } i.g-icon.g-icon-handshake-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/handshake-48.svg'); } i.g-icon.g-icon-headphones-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/headphones-16.svg'); } i.g-icon.g-icon-headphones-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/headphones-24.svg'); } i.g-icon.g-icon-headphones-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/headphones-32.svg'); } i.g-icon.g-icon-headphones-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/headphones-48.svg'); } i.g-icon.g-icon-heart-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/heart-16.svg'); } i.g-icon.g-icon-heart-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/heart-24.svg'); } i.g-icon.g-icon-heart-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/heart-32.svg'); } i.g-icon.g-icon-heart-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/heart-48.svg'); } i.g-icon.g-icon-heart-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/heart-filled-16.svg'); } i.g-icon.g-icon-heart-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/heart-filled-24.svg'); } i.g-icon.g-icon-heart-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/heart-filled-32.svg'); } i.g-icon.g-icon-heart-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/heart-filled-48.svg'); } i.g-icon.g-icon-help-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/help-16.svg'); } i.g-icon.g-icon-help-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/help-24.svg'); } i.g-icon.g-icon-help-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/help-32.svg'); } i.g-icon.g-icon-help-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/help-48.svg'); } i.g-icon.g-icon-help-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/help-filled-16.svg'); } i.g-icon.g-icon-help-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/help-filled-24.svg'); } i.g-icon.g-icon-help-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/help-filled-32.svg'); } i.g-icon.g-icon-help-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/help-filled-48.svg'); } i.g-icon.g-icon-hide-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/hide-16.svg'); } i.g-icon.g-icon-hide-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/hide-24.svg'); } i.g-icon.g-icon-hide-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/hide-32.svg'); } i.g-icon.g-icon-hide-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/hide-48.svg'); } i.g-icon.g-icon-hide-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/hide-filled-16.svg'); } i.g-icon.g-icon-hide-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/hide-filled-24.svg'); } i.g-icon.g-icon-hide-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/hide-filled-32.svg'); } i.g-icon.g-icon-hide-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/hide-filled-48.svg'); } i.g-icon.g-icon-history-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/history-16.svg'); } i.g-icon.g-icon-history-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/history-24.svg'); } i.g-icon.g-icon-history-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/history-32.svg'); } i.g-icon.g-icon-history-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/history-48.svg'); } i.g-icon.g-icon-home-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/home-16.svg'); } i.g-icon.g-icon-home-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/home-24.svg'); } i.g-icon.g-icon-home-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/home-32.svg'); } i.g-icon.g-icon-home-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/home-48.svg'); } i.g-icon.g-icon-home-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/home-filled-16.svg'); } i.g-icon.g-icon-home-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/home-filled-24.svg'); } i.g-icon.g-icon-home-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/home-filled-32.svg'); } i.g-icon.g-icon-home-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/home-filled-48.svg'); } i.g-icon.g-icon-hourglass-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/hourglass-16.svg'); } i.g-icon.g-icon-hourglass-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/hourglass-24.svg'); } i.g-icon.g-icon-hourglass-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/hourglass-32.svg'); } i.g-icon.g-icon-hourglass-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/hourglass-48.svg'); } i.g-icon.g-icon-icon-empty-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/icon-empty-16.svg'); } i.g-icon.g-icon-icon-empty-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/icon-empty-24.svg'); } i.g-icon.g-icon-icon-empty-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/icon-empty-32.svg'); } i.g-icon.g-icon-icon-empty-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/icon-empty-48.svg'); } i.g-icon.g-icon-icon-grid-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/icon-grid-16.svg'); } i.g-icon.g-icon-icon-grid-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/icon-grid-24.svg'); } i.g-icon.g-icon-icon-grid-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/icon-grid-32.svg'); } i.g-icon.g-icon-icon-grid-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/icon-grid-48.svg'); } i.g-icon.g-icon-idea-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/idea-16.svg'); } i.g-icon.g-icon-idea-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/idea-24.svg'); } i.g-icon.g-icon-idea-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/idea-32.svg'); } i.g-icon.g-icon-idea-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/idea-48.svg'); } i.g-icon.g-icon-image-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/image-16.svg'); } i.g-icon.g-icon-image-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/image-24.svg'); } i.g-icon.g-icon-image-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/image-32.svg'); } i.g-icon.g-icon-image-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/image-48.svg'); } i.g-icon.g-icon-inbox-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/inbox-16.svg'); } i.g-icon.g-icon-inbox-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/inbox-24.svg'); } i.g-icon.g-icon-inbox-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/inbox-32.svg'); } i.g-icon.g-icon-inbox-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/inbox-48.svg'); } i.g-icon.g-icon-inconsistency-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/inconsistency-16.svg'); } i.g-icon.g-icon-inconsistency-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/inconsistency-24.svg'); } i.g-icon.g-icon-inconsistency-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/inconsistency-32.svg'); } i.g-icon.g-icon-inconsistency-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/inconsistency-48.svg'); } i.g-icon.g-icon-info-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/info-16.svg'); } i.g-icon.g-icon-info-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/info-24.svg'); } i.g-icon.g-icon-info-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/info-32.svg'); } i.g-icon.g-icon-info-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/info-48.svg'); } i.g-icon.g-icon-info-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/info-filled-16.svg'); } i.g-icon.g-icon-info-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/info-filled-24.svg'); } i.g-icon.g-icon-info-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/info-filled-32.svg'); } i.g-icon.g-icon-info-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/info-filled-48.svg'); } i.g-icon.g-icon-instagram-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/instagram-16.svg'); } i.g-icon.g-icon-instagram-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/instagram-24.svg'); } i.g-icon.g-icon-instagram-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/instagram-32.svg'); } i.g-icon.g-icon-instagram-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/instagram-48.svg'); } i.g-icon.g-icon-judge-hammer-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/judge-hammer-16.svg'); } i.g-icon.g-icon-judge-hammer-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/judge-hammer-24.svg'); } i.g-icon.g-icon-judge-hammer-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/judge-hammer-32.svg'); } i.g-icon.g-icon-judge-hammer-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/judge-hammer-48.svg'); } i.g-icon.g-icon-key-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/key-16.svg'); } i.g-icon.g-icon-key-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/key-24.svg'); } i.g-icon.g-icon-key-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/key-32.svg'); } i.g-icon.g-icon-key-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/key-48.svg'); } i.g-icon.g-icon-lab-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/lab-16.svg'); } i.g-icon.g-icon-lab-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/lab-24.svg'); } i.g-icon.g-icon-lab-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/lab-32.svg'); } i.g-icon.g-icon-lab-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/lab-48.svg'); } i.g-icon.g-icon-label-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/label-16.svg'); } i.g-icon.g-icon-label-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/label-24.svg'); } i.g-icon.g-icon-label-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/label-32.svg'); } i.g-icon.g-icon-label-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/label-48.svg'); } i.g-icon.g-icon-label-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/label-filled-16.svg'); } i.g-icon.g-icon-label-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/label-filled-24.svg'); } i.g-icon.g-icon-label-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/label-filled-32.svg'); } i.g-icon.g-icon-label-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/label-filled-48.svg'); } i.g-icon.g-icon-label-text-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/label-text-16.svg'); } i.g-icon.g-icon-label-text-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/label-text-24.svg'); } i.g-icon.g-icon-label-text-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/label-text-32.svg'); } i.g-icon.g-icon-label-text-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/label-text-48.svg'); } i.g-icon.g-icon-label-text-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/label-text-filled-16.svg'); } i.g-icon.g-icon-label-text-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/label-text-filled-24.svg'); } i.g-icon.g-icon-label-text-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/label-text-filled-32.svg'); } i.g-icon.g-icon-label-text-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/label-text-filled-48.svg'); } i.g-icon.g-icon-last-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/last-16.svg'); } i.g-icon.g-icon-last-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/last-24.svg'); } i.g-icon.g-icon-last-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/last-32.svg'); } i.g-icon.g-icon-last-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/last-48.svg'); } i.g-icon.g-icon-leaf-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/leaf-16.svg'); } i.g-icon.g-icon-leaf-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/leaf-24.svg'); } i.g-icon.g-icon-leaf-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/leaf-32.svg'); } i.g-icon.g-icon-leaf-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/leaf-48.svg'); } i.g-icon.g-icon-leave-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/leave-16.svg'); } i.g-icon.g-icon-leave-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/leave-24.svg'); } i.g-icon.g-icon-leave-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/leave-32.svg'); } i.g-icon.g-icon-leave-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/leave-48.svg'); } i.g-icon.g-icon-legal-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/legal-16.svg'); } i.g-icon.g-icon-legal-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/legal-24.svg'); } i.g-icon.g-icon-legal-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/legal-32.svg'); } i.g-icon.g-icon-legal-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/legal-48.svg'); } i.g-icon.g-icon-library-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/library-16.svg'); } i.g-icon.g-icon-library-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/library-24.svg'); } i.g-icon.g-icon-library-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/library-32.svg'); } i.g-icon.g-icon-library-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/library-48.svg'); } i.g-icon.g-icon-like-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/like-16.svg'); } i.g-icon.g-icon-like-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/like-24.svg'); } i.g-icon.g-icon-like-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/like-32.svg'); } i.g-icon.g-icon-like-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/like-48.svg'); } i.g-icon.g-icon-line-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/line-16.svg'); } i.g-icon.g-icon-line-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/line-24.svg'); } i.g-icon.g-icon-line-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/line-32.svg'); } i.g-icon.g-icon-line-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/line-48.svg'); } i.g-icon.g-icon-line-horizontal-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/line-horizontal-16.svg'); } i.g-icon.g-icon-line-horizontal-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/line-horizontal-24.svg'); } i.g-icon.g-icon-line-horizontal-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/line-horizontal-32.svg'); } i.g-icon.g-icon-line-horizontal-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/line-horizontal-48.svg'); } i.g-icon.g-icon-line-vertical-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/line-vertical-16.svg'); } i.g-icon.g-icon-line-vertical-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/line-vertical-24.svg'); } i.g-icon.g-icon-line-vertical-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/line-vertical-32.svg'); } i.g-icon.g-icon-line-vertical-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/line-vertical-48.svg'); } i.g-icon.g-icon-link-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/link-16.svg'); } i.g-icon.g-icon-link-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/link-24.svg'); } i.g-icon.g-icon-link-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/link-32.svg'); } i.g-icon.g-icon-link-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/link-48.svg'); } i.g-icon.g-icon-list-group-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/list-group-16.svg'); } i.g-icon.g-icon-list-group-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/list-group-24.svg'); } i.g-icon.g-icon-list-group-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/list-group-32.svg'); } i.g-icon.g-icon-list-group-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/list-group-48.svg'); } i.g-icon.g-icon-list-view-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/list-view-16.svg'); } i.g-icon.g-icon-list-view-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/list-view-24.svg'); } i.g-icon.g-icon-list-view-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/list-view-32.svg'); } i.g-icon.g-icon-list-view-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/list-view-48.svg'); } i.g-icon.g-icon-loading-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/loading-16.svg'); } i.g-icon.g-icon-loading-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/loading-24.svg'); } i.g-icon.g-icon-loading-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/loading-32.svg'); } i.g-icon.g-icon-loading-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/loading-48.svg'); } i.g-icon.g-icon-loading-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/loading-filled-16.svg'); } i.g-icon.g-icon-loading-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/loading-filled-24.svg'); } i.g-icon.g-icon-loading-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/loading-filled-32.svg'); } i.g-icon.g-icon-loading-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/loading-filled-48.svg'); } i.g-icon.g-icon-location-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/location-16.svg'); } i.g-icon.g-icon-location-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/location-24.svg'); } i.g-icon.g-icon-location-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/location-32.svg'); } i.g-icon.g-icon-location-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/location-48.svg'); } i.g-icon.g-icon-lock-closed-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/lock-closed-16.svg'); } i.g-icon.g-icon-lock-closed-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/lock-closed-24.svg'); } i.g-icon.g-icon-lock-closed-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/lock-closed-32.svg'); } i.g-icon.g-icon-lock-closed-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/lock-closed-48.svg'); } i.g-icon.g-icon-lock-opened-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/lock-opened-16.svg'); } i.g-icon.g-icon-lock-opened-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/lock-opened-24.svg'); } i.g-icon.g-icon-lock-opened-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/lock-opened-32.svg'); } i.g-icon.g-icon-lock-opened-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/lock-opened-48.svg'); } i.g-icon.g-icon-locked-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/locked-16.svg'); } i.g-icon.g-icon-locked-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/locked-24.svg'); } i.g-icon.g-icon-locked-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/locked-32.svg'); } i.g-icon.g-icon-locked-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/locked-48.svg'); } i.g-icon.g-icon-login-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/login-16.svg'); } i.g-icon.g-icon-login-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/login-24.svg'); } i.g-icon.g-icon-login-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/login-32.svg'); } i.g-icon.g-icon-login-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/login-48.svg'); } i.g-icon.g-icon-logout-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/logout-16.svg'); } i.g-icon.g-icon-logout-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/logout-24.svg'); } i.g-icon.g-icon-logout-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/logout-32.svg'); } i.g-icon.g-icon-logout-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/logout-48.svg'); } i.g-icon.g-icon-luxury-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/luxury-16.svg'); } i.g-icon.g-icon-luxury-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/luxury-24.svg'); } i.g-icon.g-icon-luxury-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/luxury-32.svg'); } i.g-icon.g-icon-luxury-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/luxury-48.svg'); } i.g-icon.g-icon-magic-wand-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/magic-wand-16.svg'); } i.g-icon.g-icon-magic-wand-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/magic-wand-24.svg'); } i.g-icon.g-icon-magic-wand-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/magic-wand-32.svg'); } i.g-icon.g-icon-magic-wand-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/magic-wand-48.svg'); } i.g-icon.g-icon-map-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/map-16.svg'); } i.g-icon.g-icon-map-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/map-24.svg'); } i.g-icon.g-icon-map-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/map-32.svg'); } i.g-icon.g-icon-map-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/map-48.svg'); } i.g-icon.g-icon-maximize-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/maximize-16.svg'); } i.g-icon.g-icon-maximize-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/maximize-24.svg'); } i.g-icon.g-icon-maximize-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/maximize-32.svg'); } i.g-icon.g-icon-maximize-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/maximize-48.svg'); } i.g-icon.g-icon-maximum-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/maximum-16.svg'); } i.g-icon.g-icon-maximum-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/maximum-24.svg'); } i.g-icon.g-icon-maximum-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/maximum-32.svg'); } i.g-icon.g-icon-maximum-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/maximum-48.svg'); } i.g-icon.g-icon-measure-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/measure-16.svg'); } i.g-icon.g-icon-measure-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/measure-24.svg'); } i.g-icon.g-icon-measure-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/measure-32.svg'); } i.g-icon.g-icon-measure-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/measure-48.svg'); } i.g-icon.g-icon-menu-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/menu-16.svg'); } i.g-icon.g-icon-menu-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/menu-24.svg'); } i.g-icon.g-icon-menu-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/menu-32.svg'); } i.g-icon.g-icon-menu-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/menu-48.svg'); } i.g-icon.g-icon-menu-dots-horizontal-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/menu-dots-horizontal-16.svg'); } i.g-icon.g-icon-menu-dots-horizontal-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/menu-dots-horizontal-24.svg'); } i.g-icon.g-icon-menu-dots-horizontal-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/menu-dots-horizontal-32.svg'); } i.g-icon.g-icon-menu-dots-horizontal-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/menu-dots-horizontal-48.svg'); } i.g-icon.g-icon-menu-dots-horizontal-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/menu-dots-horizontal-filled-16.svg'); } i.g-icon.g-icon-menu-dots-horizontal-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/menu-dots-horizontal-filled-24.svg'); } i.g-icon.g-icon-menu-dots-horizontal-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/menu-dots-horizontal-filled-32.svg'); } i.g-icon.g-icon-menu-dots-horizontal-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/menu-dots-horizontal-filled-48.svg'); } i.g-icon.g-icon-menu-dots-vertical-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/menu-dots-vertical-16.svg'); } i.g-icon.g-icon-menu-dots-vertical-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/menu-dots-vertical-24.svg'); } i.g-icon.g-icon-menu-dots-vertical-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/menu-dots-vertical-32.svg'); } i.g-icon.g-icon-menu-dots-vertical-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/menu-dots-vertical-48.svg'); } i.g-icon.g-icon-menu-dots-vertical-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/menu-dots-vertical-filled-16.svg'); } i.g-icon.g-icon-menu-dots-vertical-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/menu-dots-vertical-filled-24.svg'); } i.g-icon.g-icon-menu-dots-vertical-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/menu-dots-vertical-filled-32.svg'); } i.g-icon.g-icon-menu-dots-vertical-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/menu-dots-vertical-filled-48.svg'); } i.g-icon.g-icon-mic-off-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/mic-off-16.svg'); } i.g-icon.g-icon-mic-off-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/mic-off-24.svg'); } i.g-icon.g-icon-mic-off-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/mic-off-32.svg'); } i.g-icon.g-icon-mic-off-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/mic-off-48.svg'); } i.g-icon.g-icon-mic-on-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/mic-on-16.svg'); } i.g-icon.g-icon-mic-on-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/mic-on-24.svg'); } i.g-icon.g-icon-mic-on-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/mic-on-32.svg'); } i.g-icon.g-icon-mic-on-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/mic-on-48.svg'); } i.g-icon.g-icon-mic-on-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/mic-on-filled-16.svg'); } i.g-icon.g-icon-mic-on-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/mic-on-filled-24.svg'); } i.g-icon.g-icon-mic-on-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/mic-on-filled-32.svg'); } i.g-icon.g-icon-mic-on-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/mic-on-filled-48.svg'); } i.g-icon.g-icon-microphone-off-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/microphone-off-16.svg'); } i.g-icon.g-icon-microphone-off-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/microphone-off-24.svg'); } i.g-icon.g-icon-microphone-off-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/microphone-off-32.svg'); } i.g-icon.g-icon-microphone-off-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/microphone-off-48.svg'); } i.g-icon.g-icon-microphone-on-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/microphone-on-16.svg'); } i.g-icon.g-icon-microphone-on-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/microphone-on-24.svg'); } i.g-icon.g-icon-microphone-on-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/microphone-on-32.svg'); } i.g-icon.g-icon-microphone-on-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/microphone-on-48.svg'); } i.g-icon.g-icon-minimize-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/minimize-16.svg'); } i.g-icon.g-icon-minimize-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/minimize-24.svg'); } i.g-icon.g-icon-minimize-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/minimize-32.svg'); } i.g-icon.g-icon-minimize-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/minimize-48.svg'); } i.g-icon.g-icon-minimum-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/minimum-16.svg'); } i.g-icon.g-icon-minimum-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/minimum-24.svg'); } i.g-icon.g-icon-minimum-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/minimum-32.svg'); } i.g-icon.g-icon-minimum-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/minimum-48.svg'); } i.g-icon.g-icon-minus-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/minus-16.svg'); } i.g-icon.g-icon-minus-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/minus-24.svg'); } i.g-icon.g-icon-minus-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/minus-32.svg'); } i.g-icon.g-icon-minus-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/minus-48.svg'); } i.g-icon.g-icon-mode-dark-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/mode-dark-16.svg'); } i.g-icon.g-icon-mode-dark-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/mode-dark-24.svg'); } i.g-icon.g-icon-mode-dark-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/mode-dark-32.svg'); } i.g-icon.g-icon-mode-dark-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/mode-dark-48.svg'); } i.g-icon.g-icon-mode-dark-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/mode-dark-filled-16.svg'); } i.g-icon.g-icon-mode-dark-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/mode-dark-filled-24.svg'); } i.g-icon.g-icon-mode-dark-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/mode-dark-filled-32.svg'); } i.g-icon.g-icon-mode-dark-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/mode-dark-filled-48.svg'); } i.g-icon.g-icon-mode-light-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/mode-light-16.svg'); } i.g-icon.g-icon-mode-light-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/mode-light-24.svg'); } i.g-icon.g-icon-mode-light-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/mode-light-32.svg'); } i.g-icon.g-icon-mode-light-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/mode-light-48.svg'); } i.g-icon.g-icon-mode-light-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/mode-light-filled-16.svg'); } i.g-icon.g-icon-mode-light-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/mode-light-filled-24.svg'); } i.g-icon.g-icon-mode-light-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/mode-light-filled-32.svg'); } i.g-icon.g-icon-mode-light-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/mode-light-filled-48.svg'); } i.g-icon.g-icon-mouse-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/mouse-16.svg'); } i.g-icon.g-icon-mouse-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/mouse-24.svg'); } i.g-icon.g-icon-mouse-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/mouse-32.svg'); } i.g-icon.g-icon-mouse-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/mouse-48.svg'); } i.g-icon.g-icon-music-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/music-16.svg'); } i.g-icon.g-icon-music-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/music-24.svg'); } i.g-icon.g-icon-music-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/music-32.svg'); } i.g-icon.g-icon-music-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/music-48.svg'); } i.g-icon.g-icon-navigation-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/navigation-16.svg'); } i.g-icon.g-icon-navigation-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/navigation-24.svg'); } i.g-icon.g-icon-navigation-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/navigation-32.svg'); } i.g-icon.g-icon-navigation-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/navigation-48.svg'); } i.g-icon.g-icon-navigation-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/navigation-filled-16.svg'); } i.g-icon.g-icon-navigation-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/navigation-filled-24.svg'); } i.g-icon.g-icon-navigation-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/navigation-filled-32.svg'); } i.g-icon.g-icon-navigation-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/navigation-filled-48.svg'); } i.g-icon.g-icon-network-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/network-16.svg'); } i.g-icon.g-icon-network-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/network-24.svg'); } i.g-icon.g-icon-network-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/network-32.svg'); } i.g-icon.g-icon-network-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/network-48.svg'); } i.g-icon.g-icon-no-parking-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/no-parking-16.svg'); } i.g-icon.g-icon-no-parking-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/no-parking-24.svg'); } i.g-icon.g-icon-no-parking-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/no-parking-32.svg'); } i.g-icon.g-icon-no-parking-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/no-parking-48.svg'); } i.g-icon.g-icon-no-parking-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/no-parking-filled-16.svg'); } i.g-icon.g-icon-no-parking-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/no-parking-filled-24.svg'); } i.g-icon.g-icon-no-parking-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/no-parking-filled-32.svg'); } i.g-icon.g-icon-no-parking-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/no-parking-filled-48.svg'); } i.g-icon.g-icon-none-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/none-16.svg'); } i.g-icon.g-icon-none-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/none-24.svg'); } i.g-icon.g-icon-none-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/none-32.svg'); } i.g-icon.g-icon-none-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/none-48.svg'); } i.g-icon.g-icon-notes-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/notes-16.svg'); } i.g-icon.g-icon-notes-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/notes-24.svg'); } i.g-icon.g-icon-notes-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/notes-32.svg'); } i.g-icon.g-icon-notes-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/notes-48.svg'); } i.g-icon.g-icon-notification-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/notification-16.svg'); } i.g-icon.g-icon-notification-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/notification-24.svg'); } i.g-icon.g-icon-notification-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/notification-32.svg'); } i.g-icon.g-icon-notification-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/notification-48.svg'); } i.g-icon.g-icon-notification-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/notification-filled-16.svg'); } i.g-icon.g-icon-notification-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/notification-filled-24.svg'); } i.g-icon.g-icon-notification-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/notification-filled-32.svg'); } i.g-icon.g-icon-notification-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/notification-filled-48.svg'); } i.g-icon.g-icon-origami-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/origami-16.svg'); } i.g-icon.g-icon-origami-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/origami-24.svg'); } i.g-icon.g-icon-origami-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/origami-32.svg'); } i.g-icon.g-icon-origami-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/origami-48.svg'); } i.g-icon.g-icon-parking-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/parking-16.svg'); } i.g-icon.g-icon-parking-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/parking-24.svg'); } i.g-icon.g-icon-parking-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/parking-32.svg'); } i.g-icon.g-icon-parking-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/parking-48.svg'); } i.g-icon.g-icon-parking-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/parking-filled-16.svg'); } i.g-icon.g-icon-parking-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/parking-filled-24.svg'); } i.g-icon.g-icon-parking-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/parking-filled-32.svg'); } i.g-icon.g-icon-parking-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/parking-filled-48.svg'); } i.g-icon.g-icon-parking-not-allowed-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/parking-not-allowed-16.svg'); } i.g-icon.g-icon-parking-not-allowed-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/parking-not-allowed-24.svg'); } i.g-icon.g-icon-parking-not-allowed-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/parking-not-allowed-32.svg'); } i.g-icon.g-icon-parking-not-allowed-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/parking-not-allowed-48.svg'); } i.g-icon.g-icon-passport-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/passport-16.svg'); } i.g-icon.g-icon-passport-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/passport-24.svg'); } i.g-icon.g-icon-passport-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/passport-32.svg'); } i.g-icon.g-icon-passport-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/passport-48.svg'); } i.g-icon.g-icon-paste-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/paste-16.svg'); } i.g-icon.g-icon-paste-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/paste-24.svg'); } i.g-icon.g-icon-paste-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/paste-32.svg'); } i.g-icon.g-icon-paste-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/paste-48.svg'); } i.g-icon.g-icon-pause-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/pause-16.svg'); } i.g-icon.g-icon-pause-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/pause-24.svg'); } i.g-icon.g-icon-pause-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/pause-32.svg'); } i.g-icon.g-icon-pause-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/pause-48.svg'); } i.g-icon.g-icon-pause-circle-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/pause-circle-16.svg'); } i.g-icon.g-icon-pause-circle-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/pause-circle-24.svg'); } i.g-icon.g-icon-pause-circle-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/pause-circle-32.svg'); } i.g-icon.g-icon-pause-circle-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/pause-circle-48.svg'); } i.g-icon.g-icon-pause-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/pause-filled-16.svg'); } i.g-icon.g-icon-pause-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/pause-filled-24.svg'); } i.g-icon.g-icon-pause-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/pause-filled-32.svg'); } i.g-icon.g-icon-pause-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/pause-filled-48.svg'); } i.g-icon.g-icon-pencil-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/pencil-16.svg'); } i.g-icon.g-icon-pencil-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/pencil-24.svg'); } i.g-icon.g-icon-pencil-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/pencil-32.svg'); } i.g-icon.g-icon-pencil-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/pencil-48.svg'); } i.g-icon.g-icon-pin-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/pin-16.svg'); } i.g-icon.g-icon-pin-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/pin-24.svg'); } i.g-icon.g-icon-pin-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/pin-32.svg'); } i.g-icon.g-icon-pin-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/pin-48.svg'); } i.g-icon.g-icon-pin-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/pin-filled-16.svg'); } i.g-icon.g-icon-pin-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/pin-filled-24.svg'); } i.g-icon.g-icon-pin-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/pin-filled-32.svg'); } i.g-icon.g-icon-pin-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/pin-filled-48.svg'); } i.g-icon.g-icon-pivot-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/pivot-16.svg'); } i.g-icon.g-icon-pivot-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/pivot-24.svg'); } i.g-icon.g-icon-pivot-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/pivot-32.svg'); } i.g-icon.g-icon-pivot-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/pivot-48.svg'); } i.g-icon.g-icon-play-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/play-16.svg'); } i.g-icon.g-icon-play-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/play-24.svg'); } i.g-icon.g-icon-play-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/play-32.svg'); } i.g-icon.g-icon-play-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/play-48.svg'); } i.g-icon.g-icon-play-circle-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/play-circle-16.svg'); } i.g-icon.g-icon-play-circle-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/play-circle-24.svg'); } i.g-icon.g-icon-play-circle-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/play-circle-32.svg'); } i.g-icon.g-icon-play-circle-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/play-circle-48.svg'); } i.g-icon.g-icon-play-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/play-filled-16.svg'); } i.g-icon.g-icon-play-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/play-filled-24.svg'); } i.g-icon.g-icon-play-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/play-filled-32.svg'); } i.g-icon.g-icon-play-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/play-filled-48.svg'); } i.g-icon.g-icon-plug-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/plug-16.svg'); } i.g-icon.g-icon-plug-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/plug-24.svg'); } i.g-icon.g-icon-plug-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/plug-32.svg'); } i.g-icon.g-icon-plug-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/plug-48.svg'); } i.g-icon.g-icon-plus-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/plus-16.svg'); } i.g-icon.g-icon-plus-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/plus-24.svg'); } i.g-icon.g-icon-plus-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/plus-32.svg'); } i.g-icon.g-icon-plus-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/plus-48.svg'); } i.g-icon.g-icon-plus-circle-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/plus-circle-16.svg'); } i.g-icon.g-icon-plus-circle-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/plus-circle-24.svg'); } i.g-icon.g-icon-plus-circle-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/plus-circle-32.svg'); } i.g-icon.g-icon-plus-circle-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/plus-circle-48.svg'); } i.g-icon.g-icon-plus-circle-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/plus-circle-filled-16.svg'); } i.g-icon.g-icon-plus-circle-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/plus-circle-filled-24.svg'); } i.g-icon.g-icon-plus-circle-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/plus-circle-filled-32.svg'); } i.g-icon.g-icon-plus-circle-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/plus-circle-filled-48.svg'); } i.g-icon.g-icon-plus-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/plus-filled-16.svg'); } i.g-icon.g-icon-plus-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/plus-filled-24.svg'); } i.g-icon.g-icon-plus-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/plus-filled-32.svg'); } i.g-icon.g-icon-plus-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/plus-filled-48.svg'); } i.g-icon.g-icon-power-plug-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/power-plug-16.svg'); } i.g-icon.g-icon-power-plug-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/power-plug-24.svg'); } i.g-icon.g-icon-power-plug-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/power-plug-32.svg'); } i.g-icon.g-icon-power-plug-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/power-plug-48.svg'); } i.g-icon.g-icon-power-plug-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/power-plug-filled-16.svg'); } i.g-icon.g-icon-power-plug-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/power-plug-filled-24.svg'); } i.g-icon.g-icon-power-plug-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/power-plug-filled-32.svg'); } i.g-icon.g-icon-power-plug-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/power-plug-filled-48.svg'); } i.g-icon.g-icon-print-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/print-16.svg'); } i.g-icon.g-icon-print-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/print-24.svg'); } i.g-icon.g-icon-print-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/print-32.svg'); } i.g-icon.g-icon-print-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/print-48.svg'); } i.g-icon.g-icon-print-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/print-filled-16.svg'); } i.g-icon.g-icon-print-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/print-filled-24.svg'); } i.g-icon.g-icon-print-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/print-filled-32.svg'); } i.g-icon.g-icon-print-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/print-filled-48.svg'); } i.g-icon.g-icon-privacy-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/privacy-16.svg'); } i.g-icon.g-icon-privacy-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/privacy-24.svg'); } i.g-icon.g-icon-privacy-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/privacy-32.svg'); } i.g-icon.g-icon-privacy-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/privacy-48.svg'); } i.g-icon.g-icon-pump-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/pump-16.svg'); } i.g-icon.g-icon-pump-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/pump-24.svg'); } i.g-icon.g-icon-pump-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/pump-32.svg'); } i.g-icon.g-icon-pump-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/pump-48.svg'); } i.g-icon.g-icon-pump-electric-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/pump-electric-16.svg'); } i.g-icon.g-icon-pump-electric-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/pump-electric-24.svg'); } i.g-icon.g-icon-pump-electric-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/pump-electric-32.svg'); } i.g-icon.g-icon-pump-electric-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/pump-electric-48.svg'); } i.g-icon.g-icon-redo-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/redo-16.svg'); } i.g-icon.g-icon-redo-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/redo-24.svg'); } i.g-icon.g-icon-redo-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/redo-32.svg'); } i.g-icon.g-icon-redo-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/redo-48.svg'); } i.g-icon.g-icon-reload-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/reload-16.svg'); } i.g-icon.g-icon-reload-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/reload-24.svg'); } i.g-icon.g-icon-reload-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/reload-32.svg'); } i.g-icon.g-icon-reload-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/reload-48.svg'); } i.g-icon.g-icon-rename-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/rename-16.svg'); } i.g-icon.g-icon-rename-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/rename-24.svg'); } i.g-icon.g-icon-rename-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/rename-32.svg'); } i.g-icon.g-icon-rename-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/rename-48.svg'); } i.g-icon.g-icon-rename-letters-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/rename-letters-16.svg'); } i.g-icon.g-icon-rename-letters-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/rename-letters-24.svg'); } i.g-icon.g-icon-rename-letters-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/rename-letters-32.svg'); } i.g-icon.g-icon-rename-letters-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/rename-letters-48.svg'); } i.g-icon.g-icon-repair-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/repair-16.svg'); } i.g-icon.g-icon-repair-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/repair-24.svg'); } i.g-icon.g-icon-repair-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/repair-32.svg'); } i.g-icon.g-icon-repair-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/repair-48.svg'); } i.g-icon.g-icon-reset-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/reset-16.svg'); } i.g-icon.g-icon-reset-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/reset-24.svg'); } i.g-icon.g-icon-reset-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/reset-32.svg'); } i.g-icon.g-icon-reset-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/reset-48.svg'); } i.g-icon.g-icon-rhombus-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/rhombus-16.svg'); } i.g-icon.g-icon-rhombus-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/rhombus-24.svg'); } i.g-icon.g-icon-rhombus-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/rhombus-32.svg'); } i.g-icon.g-icon-rhombus-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/rhombus-48.svg'); } i.g-icon.g-icon-rocket-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/rocket-16.svg'); } i.g-icon.g-icon-rocket-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/rocket-24.svg'); } i.g-icon.g-icon-rocket-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/rocket-32.svg'); } i.g-icon.g-icon-rocket-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/rocket-48.svg'); } i.g-icon.g-icon-save-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/save-16.svg'); } i.g-icon.g-icon-save-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/save-24.svg'); } i.g-icon.g-icon-save-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/save-32.svg'); } i.g-icon.g-icon-save-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/save-48.svg'); } i.g-icon.g-icon-scale-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/scale-16.svg'); } i.g-icon.g-icon-scale-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/scale-24.svg'); } i.g-icon.g-icon-scale-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/scale-32.svg'); } i.g-icon.g-icon-scale-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/scale-48.svg'); } i.g-icon.g-icon-scale-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/scale-filled-16.svg'); } i.g-icon.g-icon-scale-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/scale-filled-24.svg'); } i.g-icon.g-icon-scale-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/scale-filled-32.svg'); } i.g-icon.g-icon-scale-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/scale-filled-48.svg'); } i.g-icon.g-icon-scan-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/scan-16.svg'); } i.g-icon.g-icon-scan-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/scan-24.svg'); } i.g-icon.g-icon-scan-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/scan-32.svg'); } i.g-icon.g-icon-scan-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/scan-48.svg'); } i.g-icon.g-icon-search-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/search-16.svg'); } i.g-icon.g-icon-search-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/search-24.svg'); } i.g-icon.g-icon-search-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/search-32.svg'); } i.g-icon.g-icon-search-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/search-48.svg'); } i.g-icon.g-icon-search-cross-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/search-cross-16.svg'); } i.g-icon.g-icon-search-cross-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/search-cross-24.svg'); } i.g-icon.g-icon-search-cross-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/search-cross-32.svg'); } i.g-icon.g-icon-search-cross-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/search-cross-48.svg'); } i.g-icon.g-icon-search-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/search-filled-16.svg'); } i.g-icon.g-icon-search-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/search-filled-24.svg'); } i.g-icon.g-icon-search-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/search-filled-32.svg'); } i.g-icon.g-icon-search-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/search-filled-48.svg'); } i.g-icon.g-icon-search-minus-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/search-minus-16.svg'); } i.g-icon.g-icon-search-minus-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/search-minus-24.svg'); } i.g-icon.g-icon-search-minus-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/search-minus-32.svg'); } i.g-icon.g-icon-search-minus-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/search-minus-48.svg'); } i.g-icon.g-icon-search-minus-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/search-minus-filled-16.svg'); } i.g-icon.g-icon-search-minus-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/search-minus-filled-24.svg'); } i.g-icon.g-icon-search-minus-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/search-minus-filled-32.svg'); } i.g-icon.g-icon-search-minus-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/search-minus-filled-48.svg'); } i.g-icon.g-icon-search-plus-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/search-plus-16.svg'); } i.g-icon.g-icon-search-plus-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/search-plus-24.svg'); } i.g-icon.g-icon-search-plus-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/search-plus-32.svg'); } i.g-icon.g-icon-search-plus-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/search-plus-48.svg'); } i.g-icon.g-icon-search-plus-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/search-plus-filled-16.svg'); } i.g-icon.g-icon-search-plus-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/search-plus-filled-24.svg'); } i.g-icon.g-icon-search-plus-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/search-plus-filled-32.svg'); } i.g-icon.g-icon-search-plus-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/search-plus-filled-48.svg'); } i.g-icon.g-icon-security-attention-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/security-attention-16.svg'); } i.g-icon.g-icon-security-attention-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/security-attention-24.svg'); } i.g-icon.g-icon-security-attention-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/security-attention-32.svg'); } i.g-icon.g-icon-security-attention-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/security-attention-48.svg'); } i.g-icon.g-icon-send-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/send-16.svg'); } i.g-icon.g-icon-send-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/send-24.svg'); } i.g-icon.g-icon-send-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/send-32.svg'); } i.g-icon.g-icon-send-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/send-48.svg'); } i.g-icon.g-icon-service-bell-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/service-bell-16.svg'); } i.g-icon.g-icon-service-bell-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/service-bell-24.svg'); } i.g-icon.g-icon-service-bell-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/service-bell-32.svg'); } i.g-icon.g-icon-service-bell-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/service-bell-48.svg'); } i.g-icon.g-icon-service-bell-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/service-bell-filled-16.svg'); } i.g-icon.g-icon-service-bell-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/service-bell-filled-24.svg'); } i.g-icon.g-icon-service-bell-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/service-bell-filled-32.svg'); } i.g-icon.g-icon-service-bell-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/service-bell-filled-48.svg'); } i.g-icon.g-icon-settings-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/settings-16.svg'); } i.g-icon.g-icon-settings-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/settings-24.svg'); } i.g-icon.g-icon-settings-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/settings-32.svg'); } i.g-icon.g-icon-settings-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/settings-48.svg'); } i.g-icon.g-icon-share-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/share-16.svg'); } i.g-icon.g-icon-share-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/share-24.svg'); } i.g-icon.g-icon-share-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/share-32.svg'); } i.g-icon.g-icon-share-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/share-48.svg'); } i.g-icon.g-icon-shield-attention-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/shield-attention-16.svg'); } i.g-icon.g-icon-shield-attention-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/shield-attention-24.svg'); } i.g-icon.g-icon-shield-attention-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/shield-attention-32.svg'); } i.g-icon.g-icon-shield-attention-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/shield-attention-48.svg'); } i.g-icon.g-icon-shield-attention-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/shield-attention-filled-16.svg'); } i.g-icon.g-icon-shield-attention-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/shield-attention-filled-24.svg'); } i.g-icon.g-icon-shield-attention-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/shield-attention-filled-32.svg'); } i.g-icon.g-icon-shield-attention-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/shield-attention-filled-48.svg'); } i.g-icon.g-icon-shield-safety-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/shield-safety-16.svg'); } i.g-icon.g-icon-shield-safety-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/shield-safety-24.svg'); } i.g-icon.g-icon-shield-safety-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/shield-safety-32.svg'); } i.g-icon.g-icon-shield-safety-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/shield-safety-48.svg'); } i.g-icon.g-icon-shield-safety-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/shield-safety-filled-16.svg'); } i.g-icon.g-icon-shield-safety-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/shield-safety-filled-24.svg'); } i.g-icon.g-icon-shield-safety-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/shield-safety-filled-32.svg'); } i.g-icon.g-icon-shield-safety-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/shield-safety-filled-48.svg'); } i.g-icon.g-icon-shopping-cart-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/shopping-cart-16.svg'); } i.g-icon.g-icon-shopping-cart-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/shopping-cart-24.svg'); } i.g-icon.g-icon-shopping-cart-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/shopping-cart-32.svg'); } i.g-icon.g-icon-shopping-cart-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/shopping-cart-48.svg'); } i.g-icon.g-icon-shoppingcart-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/shoppingcart-16.svg'); } i.g-icon.g-icon-shoppingcart-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/shoppingcart-24.svg'); } i.g-icon.g-icon-shoppingcart-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/shoppingcart-32.svg'); } i.g-icon.g-icon-shoppingcart-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/shoppingcart-48.svg'); } i.g-icon.g-icon-shovel-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/shovel-16.svg'); } i.g-icon.g-icon-shovel-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/shovel-24.svg'); } i.g-icon.g-icon-shovel-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/shovel-32.svg'); } i.g-icon.g-icon-shovel-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/shovel-48.svg'); } i.g-icon.g-icon-signature-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/signature-16.svg'); } i.g-icon.g-icon-signature-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/signature-24.svg'); } i.g-icon.g-icon-signature-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/signature-32.svg'); } i.g-icon.g-icon-signature-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/signature-48.svg'); } i.g-icon.g-icon-skid-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/skid-16.svg'); } i.g-icon.g-icon-skid-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/skid-24.svg'); } i.g-icon.g-icon-skid-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/skid-32.svg'); } i.g-icon.g-icon-skid-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/skid-48.svg'); } i.g-icon.g-icon-slack-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/slack-16.svg'); } i.g-icon.g-icon-slack-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/slack-24.svg'); } i.g-icon.g-icon-slack-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/slack-32.svg'); } i.g-icon.g-icon-slack-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/slack-48.svg'); } i.g-icon.g-icon-smartphone-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/smartphone-16.svg'); } i.g-icon.g-icon-smartphone-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/smartphone-24.svg'); } i.g-icon.g-icon-smartphone-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/smartphone-32.svg'); } i.g-icon.g-icon-smartphone-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/smartphone-48.svg'); } i.g-icon.g-icon-snowflake-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/snowflake-16.svg'); } i.g-icon.g-icon-snowflake-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/snowflake-24.svg'); } i.g-icon.g-icon-snowflake-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/snowflake-32.svg'); } i.g-icon.g-icon-snowflake-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/snowflake-48.svg'); } i.g-icon.g-icon-sort-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sort-16.svg'); } i.g-icon.g-icon-sort-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sort-24.svg'); } i.g-icon.g-icon-sort-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sort-32.svg'); } i.g-icon.g-icon-sort-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sort-48.svg'); } i.g-icon.g-icon-sort-filter-down-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sort-filter-down-16.svg'); } i.g-icon.g-icon-sort-filter-down-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sort-filter-down-24.svg'); } i.g-icon.g-icon-sort-filter-down-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sort-filter-down-32.svg'); } i.g-icon.g-icon-sort-filter-down-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sort-filter-down-48.svg'); } i.g-icon.g-icon-sort-filter-up-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sort-filter-up-16.svg'); } i.g-icon.g-icon-sort-filter-up-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sort-filter-up-24.svg'); } i.g-icon.g-icon-sort-filter-up-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sort-filter-up-32.svg'); } i.g-icon.g-icon-sort-filter-up-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sort-filter-up-48.svg'); } i.g-icon.g-icon-sort-list-down-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sort-list-down-16.svg'); } i.g-icon.g-icon-sort-list-down-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sort-list-down-24.svg'); } i.g-icon.g-icon-sort-list-down-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sort-list-down-32.svg'); } i.g-icon.g-icon-sort-list-down-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sort-list-down-48.svg'); } i.g-icon.g-icon-sort-list-up-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sort-list-up-16.svg'); } i.g-icon.g-icon-sort-list-up-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sort-list-up-24.svg'); } i.g-icon.g-icon-sort-list-up-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sort-list-up-32.svg'); } i.g-icon.g-icon-sort-list-up-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sort-list-up-48.svg'); } i.g-icon.g-icon-sort-title-a-z-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sort-title-a-z-16.svg'); } i.g-icon.g-icon-sort-title-a-z-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sort-title-a-z-24.svg'); } i.g-icon.g-icon-sort-title-a-z-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sort-title-a-z-32.svg'); } i.g-icon.g-icon-sort-title-a-z-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sort-title-a-z-48.svg'); } i.g-icon.g-icon-sort-title-z-a-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sort-title-z-a-16.svg'); } i.g-icon.g-icon-sort-title-z-a-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sort-title-z-a-24.svg'); } i.g-icon.g-icon-sort-title-z-a-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sort-title-z-a-32.svg'); } i.g-icon.g-icon-sort-title-z-a-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sort-title-z-a-48.svg'); } i.g-icon.g-icon-sorting-default-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sorting-default-16.svg'); } i.g-icon.g-icon-sorting-default-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sorting-default-24.svg'); } i.g-icon.g-icon-sorting-default-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sorting-default-32.svg'); } i.g-icon.g-icon-sorting-default-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sorting-default-48.svg'); } i.g-icon.g-icon-sorting-default-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sorting-default-filled-16.svg'); } i.g-icon.g-icon-sorting-default-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sorting-default-filled-24.svg'); } i.g-icon.g-icon-sorting-default-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sorting-default-filled-32.svg'); } i.g-icon.g-icon-sorting-default-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sorting-default-filled-48.svg'); } i.g-icon.g-icon-sorting-down-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sorting-down-16.svg'); } i.g-icon.g-icon-sorting-down-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sorting-down-24.svg'); } i.g-icon.g-icon-sorting-down-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sorting-down-32.svg'); } i.g-icon.g-icon-sorting-down-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sorting-down-48.svg'); } i.g-icon.g-icon-sorting-down-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sorting-down-filled-16.svg'); } i.g-icon.g-icon-sorting-down-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sorting-down-filled-24.svg'); } i.g-icon.g-icon-sorting-down-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sorting-down-filled-32.svg'); } i.g-icon.g-icon-sorting-down-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sorting-down-filled-48.svg'); } i.g-icon.g-icon-sorting-left-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sorting-left-filled-16.svg'); } i.g-icon.g-icon-sorting-left-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sorting-left-filled-24.svg'); } i.g-icon.g-icon-sorting-left-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sorting-left-filled-32.svg'); } i.g-icon.g-icon-sorting-left-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sorting-left-filled-48.svg'); } i.g-icon.g-icon-sorting-right-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sorting-right-filled-16.svg'); } i.g-icon.g-icon-sorting-right-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sorting-right-filled-24.svg'); } i.g-icon.g-icon-sorting-right-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sorting-right-filled-32.svg'); } i.g-icon.g-icon-sorting-right-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sorting-right-filled-48.svg'); } i.g-icon.g-icon-sorting-up-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sorting-up-16.svg'); } i.g-icon.g-icon-sorting-up-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sorting-up-24.svg'); } i.g-icon.g-icon-sorting-up-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sorting-up-32.svg'); } i.g-icon.g-icon-sorting-up-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sorting-up-48.svg'); } i.g-icon.g-icon-sorting-up-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sorting-up-filled-16.svg'); } i.g-icon.g-icon-sorting-up-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sorting-up-filled-24.svg'); } i.g-icon.g-icon-sorting-up-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sorting-up-filled-32.svg'); } i.g-icon.g-icon-sorting-up-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sorting-up-filled-48.svg'); } i.g-icon.g-icon-sparkle-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sparkle-16.svg'); } i.g-icon.g-icon-sparkle-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sparkle-24.svg'); } i.g-icon.g-icon-sparkle-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sparkle-32.svg'); } i.g-icon.g-icon-sparkle-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/sparkle-48.svg'); } i.g-icon.g-icon-stack-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/stack-16.svg'); } i.g-icon.g-icon-stack-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/stack-24.svg'); } i.g-icon.g-icon-stack-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/stack-32.svg'); } i.g-icon.g-icon-stack-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/stack-48.svg'); } i.g-icon.g-icon-star-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/star-16.svg'); } i.g-icon.g-icon-star-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/star-24.svg'); } i.g-icon.g-icon-star-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/star-32.svg'); } i.g-icon.g-icon-star-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/star-48.svg'); } i.g-icon.g-icon-stop-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/stop-16.svg'); } i.g-icon.g-icon-stop-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/stop-24.svg'); } i.g-icon.g-icon-stop-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/stop-32.svg'); } i.g-icon.g-icon-stop-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/stop-48.svg'); } i.g-icon.g-icon-stop-circle-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/stop-circle-16.svg'); } i.g-icon.g-icon-stop-circle-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/stop-circle-24.svg'); } i.g-icon.g-icon-stop-circle-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/stop-circle-32.svg'); } i.g-icon.g-icon-stop-circle-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/stop-circle-48.svg'); } i.g-icon.g-icon-stop-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/stop-filled-16.svg'); } i.g-icon.g-icon-stop-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/stop-filled-24.svg'); } i.g-icon.g-icon-stop-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/stop-filled-32.svg'); } i.g-icon.g-icon-stop-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/stop-filled-48.svg'); } i.g-icon.g-icon-success-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/success-16.svg'); } i.g-icon.g-icon-success-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/success-24.svg'); } i.g-icon.g-icon-success-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/success-32.svg'); } i.g-icon.g-icon-success-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/success-48.svg'); } i.g-icon.g-icon-success-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/success-filled-16.svg'); } i.g-icon.g-icon-success-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/success-filled-24.svg'); } i.g-icon.g-icon-success-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/success-filled-32.svg'); } i.g-icon.g-icon-success-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/success-filled-48.svg'); } i.g-icon.g-icon-success-outlined-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/success-outlined-16.svg'); } i.g-icon.g-icon-success-outlined-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/success-outlined-24.svg'); } i.g-icon.g-icon-success-outlined-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/success-outlined-32.svg'); } i.g-icon.g-icon-success-outlined-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/success-outlined-48.svg'); } i.g-icon.g-icon-suitcase-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/suitcase-16.svg'); } i.g-icon.g-icon-suitcase-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/suitcase-24.svg'); } i.g-icon.g-icon-suitcase-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/suitcase-32.svg'); } i.g-icon.g-icon-suitcase-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/suitcase-48.svg'); } i.g-icon.g-icon-tablet-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/tablet-16.svg'); } i.g-icon.g-icon-tablet-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/tablet-24.svg'); } i.g-icon.g-icon-tablet-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/tablet-32.svg'); } i.g-icon.g-icon-tablet-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/tablet-48.svg'); } i.g-icon.g-icon-target-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/target-16.svg'); } i.g-icon.g-icon-target-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/target-24.svg'); } i.g-icon.g-icon-target-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/target-32.svg'); } i.g-icon.g-icon-target-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/target-48.svg'); } i.g-icon.g-icon-task-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/task-16.svg'); } i.g-icon.g-icon-task-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/task-24.svg'); } i.g-icon.g-icon-task-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/task-32.svg'); } i.g-icon.g-icon-task-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/task-48.svg'); } i.g-icon.g-icon-temperature-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/temperature-16.svg'); } i.g-icon.g-icon-temperature-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/temperature-24.svg'); } i.g-icon.g-icon-temperature-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/temperature-32.svg'); } i.g-icon.g-icon-temperature-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/temperature-48.svg'); } i.g-icon.g-icon-temperature-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/temperature-filled-16.svg'); } i.g-icon.g-icon-temperature-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/temperature-filled-24.svg'); } i.g-icon.g-icon-temperature-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/temperature-filled-32.svg'); } i.g-icon.g-icon-temperature-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/temperature-filled-48.svg'); } i.g-icon.g-icon-temperature-minus-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/temperature-minus-16.svg'); } i.g-icon.g-icon-temperature-minus-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/temperature-minus-24.svg'); } i.g-icon.g-icon-temperature-minus-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/temperature-minus-32.svg'); } i.g-icon.g-icon-temperature-minus-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/temperature-minus-48.svg'); } i.g-icon.g-icon-temperature-minus-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/temperature-minus-filled-16.svg'); } i.g-icon.g-icon-temperature-minus-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/temperature-minus-filled-24.svg'); } i.g-icon.g-icon-temperature-minus-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/temperature-minus-filled-32.svg'); } i.g-icon.g-icon-temperature-minus-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/temperature-minus-filled-48.svg'); } i.g-icon.g-icon-temperature-plus-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/temperature-plus-16.svg'); } i.g-icon.g-icon-temperature-plus-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/temperature-plus-24.svg'); } i.g-icon.g-icon-temperature-plus-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/temperature-plus-32.svg'); } i.g-icon.g-icon-temperature-plus-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/temperature-plus-48.svg'); } i.g-icon.g-icon-temperature-plus-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/temperature-plus-filled-16.svg'); } i.g-icon.g-icon-temperature-plus-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/temperature-plus-filled-24.svg'); } i.g-icon.g-icon-temperature-plus-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/temperature-plus-filled-32.svg'); } i.g-icon.g-icon-temperature-plus-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/temperature-plus-filled-48.svg'); } i.g-icon.g-icon-thermometer-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/thermometer-16.svg'); } i.g-icon.g-icon-thermometer-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/thermometer-24.svg'); } i.g-icon.g-icon-thermometer-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/thermometer-32.svg'); } i.g-icon.g-icon-thermometer-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/thermometer-48.svg'); } i.g-icon.g-icon-thermometer-down-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/thermometer-down-16.svg'); } i.g-icon.g-icon-thermometer-down-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/thermometer-down-24.svg'); } i.g-icon.g-icon-thermometer-down-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/thermometer-down-32.svg'); } i.g-icon.g-icon-thermometer-down-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/thermometer-down-48.svg'); } i.g-icon.g-icon-thermometer-minus-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/thermometer-minus-16.svg'); } i.g-icon.g-icon-thermometer-minus-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/thermometer-minus-24.svg'); } i.g-icon.g-icon-thermometer-minus-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/thermometer-minus-32.svg'); } i.g-icon.g-icon-thermometer-minus-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/thermometer-minus-48.svg'); } i.g-icon.g-icon-thermometer-plus-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/thermometer-plus-16.svg'); } i.g-icon.g-icon-thermometer-plus-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/thermometer-plus-24.svg'); } i.g-icon.g-icon-thermometer-plus-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/thermometer-plus-32.svg'); } i.g-icon.g-icon-thermometer-plus-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/thermometer-plus-48.svg'); } i.g-icon.g-icon-thermometer-up-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/thermometer-up-16.svg'); } i.g-icon.g-icon-thermometer-up-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/thermometer-up-24.svg'); } i.g-icon.g-icon-thermometer-up-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/thermometer-up-32.svg'); } i.g-icon.g-icon-thermometer-up-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/thermometer-up-48.svg'); } i.g-icon.g-icon-ticket-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/ticket-16.svg'); } i.g-icon.g-icon-ticket-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/ticket-24.svg'); } i.g-icon.g-icon-ticket-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/ticket-32.svg'); } i.g-icon.g-icon-ticket-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/ticket-48.svg'); } i.g-icon.g-icon-toolbox-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/toolbox-16.svg'); } i.g-icon.g-icon-toolbox-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/toolbox-24.svg'); } i.g-icon.g-icon-toolbox-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/toolbox-32.svg'); } i.g-icon.g-icon-toolbox-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/toolbox-48.svg'); } i.g-icon.g-icon-toolbox-eye-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/toolbox-eye-16.svg'); } i.g-icon.g-icon-toolbox-eye-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/toolbox-eye-24.svg'); } i.g-icon.g-icon-toolbox-eye-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/toolbox-eye-32.svg'); } i.g-icon.g-icon-toolbox-eye-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/toolbox-eye-48.svg'); } i.g-icon.g-icon-tooltip-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/tooltip-16.svg'); } i.g-icon.g-icon-tooltip-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/tooltip-24.svg'); } i.g-icon.g-icon-tooltip-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/tooltip-32.svg'); } i.g-icon.g-icon-tooltip-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/tooltip-48.svg'); } i.g-icon.g-icon-tooltip-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/tooltip-filled-16.svg'); } i.g-icon.g-icon-tooltip-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/tooltip-filled-24.svg'); } i.g-icon.g-icon-tooltip-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/tooltip-filled-32.svg'); } i.g-icon.g-icon-tooltip-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/tooltip-filled-48.svg'); } i.g-icon.g-icon-train-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/train-16.svg'); } i.g-icon.g-icon-train-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/train-24.svg'); } i.g-icon.g-icon-train-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/train-32.svg'); } i.g-icon.g-icon-train-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/train-48.svg'); } i.g-icon.g-icon-trash-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/trash-16.svg'); } i.g-icon.g-icon-trash-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/trash-24.svg'); } i.g-icon.g-icon-trash-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/trash-32.svg'); } i.g-icon.g-icon-trash-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/trash-48.svg'); } i.g-icon.g-icon-triangle-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/triangle-16.svg'); } i.g-icon.g-icon-triangle-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/triangle-24.svg'); } i.g-icon.g-icon-triangle-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/triangle-32.svg'); } i.g-icon.g-icon-triangle-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/triangle-48.svg'); } i.g-icon.g-icon-triangle-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/triangle-filled-16.svg'); } i.g-icon.g-icon-triangle-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/triangle-filled-24.svg'); } i.g-icon.g-icon-triangle-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/triangle-filled-32.svg'); } i.g-icon.g-icon-triangle-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/triangle-filled-48.svg'); } i.g-icon.g-icon-truck-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/truck-16.svg'); } i.g-icon.g-icon-truck-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/truck-24.svg'); } i.g-icon.g-icon-truck-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/truck-32.svg'); } i.g-icon.g-icon-truck-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/truck-48.svg'); } i.g-icon.g-icon-turntable-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/turntable-16.svg'); } i.g-icon.g-icon-turntable-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/turntable-24.svg'); } i.g-icon.g-icon-turntable-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/turntable-32.svg'); } i.g-icon.g-icon-turntable-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/turntable-48.svg'); } i.g-icon.g-icon-twitter-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/twitter-16.svg'); } i.g-icon.g-icon-twitter-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/twitter-24.svg'); } i.g-icon.g-icon-twitter-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/twitter-32.svg'); } i.g-icon.g-icon-twitter-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/twitter-48.svg'); } i.g-icon.g-icon-undercarriage-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/undercarriage-16.svg'); } i.g-icon.g-icon-undercarriage-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/undercarriage-24.svg'); } i.g-icon.g-icon-undercarriage-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/undercarriage-32.svg'); } i.g-icon.g-icon-undercarriage-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/undercarriage-48.svg'); } i.g-icon.g-icon-ungroup-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/ungroup-16.svg'); } i.g-icon.g-icon-ungroup-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/ungroup-24.svg'); } i.g-icon.g-icon-ungroup-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/ungroup-32.svg'); } i.g-icon.g-icon-ungroup-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/ungroup-48.svg'); } i.g-icon.g-icon-unlink-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/unlink-16.svg'); } i.g-icon.g-icon-unlink-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/unlink-24.svg'); } i.g-icon.g-icon-unlink-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/unlink-32.svg'); } i.g-icon.g-icon-unlink-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/unlink-48.svg'); } i.g-icon.g-icon-unlocked-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/unlocked-16.svg'); } i.g-icon.g-icon-unlocked-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/unlocked-24.svg'); } i.g-icon.g-icon-unlocked-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/unlocked-32.svg'); } i.g-icon.g-icon-unlocked-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/unlocked-48.svg'); } i.g-icon.g-icon-update-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/update-16.svg'); } i.g-icon.g-icon-update-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/update-24.svg'); } i.g-icon.g-icon-update-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/update-32.svg'); } i.g-icon.g-icon-update-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/update-48.svg'); } i.g-icon.g-icon-upload-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/upload-16.svg'); } i.g-icon.g-icon-upload-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/upload-24.svg'); } i.g-icon.g-icon-upload-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/upload-32.svg'); } i.g-icon.g-icon-upload-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/upload-48.svg'); } i.g-icon.g-icon-upload-cloud-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/upload-cloud-16.svg'); } i.g-icon.g-icon-upload-cloud-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/upload-cloud-24.svg'); } i.g-icon.g-icon-upload-cloud-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/upload-cloud-32.svg'); } i.g-icon.g-icon-upload-cloud-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/upload-cloud-48.svg'); } i.g-icon.g-icon-usb-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/usb-16.svg'); } i.g-icon.g-icon-usb-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/usb-24.svg'); } i.g-icon.g-icon-usb-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/usb-32.svg'); } i.g-icon.g-icon-usb-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/usb-48.svg'); } i.g-icon.g-icon-user-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/user-16.svg'); } i.g-icon.g-icon-user-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/user-24.svg'); } i.g-icon.g-icon-user-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/user-32.svg'); } i.g-icon.g-icon-user-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/user-48.svg'); } i.g-icon.g-icon-user-comment-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/user-comment-16.svg'); } i.g-icon.g-icon-user-comment-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/user-comment-24.svg'); } i.g-icon.g-icon-user-comment-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/user-comment-32.svg'); } i.g-icon.g-icon-user-comment-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/user-comment-48.svg'); } i.g-icon.g-icon-user-comment-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/user-comment-filled-16.svg'); } i.g-icon.g-icon-user-comment-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/user-comment-filled-24.svg'); } i.g-icon.g-icon-user-comment-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/user-comment-filled-32.svg'); } i.g-icon.g-icon-user-comment-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/user-comment-filled-48.svg'); } i.g-icon.g-icon-user-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/user-filled-16.svg'); } i.g-icon.g-icon-user-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/user-filled-24.svg'); } i.g-icon.g-icon-user-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/user-filled-32.svg'); } i.g-icon.g-icon-user-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/user-filled-48.svg'); } i.g-icon.g-icon-user-group-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/user-group-16.svg'); } i.g-icon.g-icon-user-group-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/user-group-24.svg'); } i.g-icon.g-icon-user-group-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/user-group-32.svg'); } i.g-icon.g-icon-user-group-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/user-group-48.svg'); } i.g-icon.g-icon-user-manual-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/user-manual-16.svg'); } i.g-icon.g-icon-user-manual-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/user-manual-24.svg'); } i.g-icon.g-icon-user-manual-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/user-manual-32.svg'); } i.g-icon.g-icon-user-manual-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/user-manual-48.svg'); } i.g-icon.g-icon-users-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/users-16.svg'); } i.g-icon.g-icon-users-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/users-24.svg'); } i.g-icon.g-icon-users-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/users-32.svg'); } i.g-icon.g-icon-users-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/users-48.svg'); } i.g-icon.g-icon-vehicle-key-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/vehicle-key-16.svg'); } i.g-icon.g-icon-vehicle-key-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/vehicle-key-24.svg'); } i.g-icon.g-icon-vehicle-key-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/vehicle-key-32.svg'); } i.g-icon.g-icon-vehicle-key-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/vehicle-key-48.svg'); } i.g-icon.g-icon-vehicle-key-default-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/vehicle-key-default-16.svg'); } i.g-icon.g-icon-vehicle-key-default-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/vehicle-key-default-24.svg'); } i.g-icon.g-icon-vehicle-key-default-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/vehicle-key-default-32.svg'); } i.g-icon.g-icon-vehicle-key-default-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/vehicle-key-default-48.svg'); } i.g-icon.g-icon-vehicle-key-disabled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/vehicle-key-disabled-16.svg'); } i.g-icon.g-icon-vehicle-key-disabled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/vehicle-key-disabled-24.svg'); } i.g-icon.g-icon-vehicle-key-disabled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/vehicle-key-disabled-32.svg'); } i.g-icon.g-icon-vehicle-key-disabled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/vehicle-key-disabled-48.svg'); } i.g-icon.g-icon-vehicle-key-nok-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/vehicle-key-nok-16.svg'); } i.g-icon.g-icon-vehicle-key-nok-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/vehicle-key-nok-24.svg'); } i.g-icon.g-icon-vehicle-key-nok-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/vehicle-key-nok-32.svg'); } i.g-icon.g-icon-vehicle-key-nok-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/vehicle-key-nok-48.svg'); } i.g-icon.g-icon-vehicle-key-ok-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/vehicle-key-ok-16.svg'); } i.g-icon.g-icon-vehicle-key-ok-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/vehicle-key-ok-24.svg'); } i.g-icon.g-icon-vehicle-key-ok-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/vehicle-key-ok-32.svg'); } i.g-icon.g-icon-vehicle-key-ok-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/vehicle-key-ok-48.svg'); } i.g-icon.g-icon-vehicle-key-wait-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/vehicle-key-wait-16.svg'); } i.g-icon.g-icon-vehicle-key-wait-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/vehicle-key-wait-24.svg'); } i.g-icon.g-icon-vehicle-key-wait-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/vehicle-key-wait-32.svg'); } i.g-icon.g-icon-vehicle-key-wait-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/vehicle-key-wait-48.svg'); } i.g-icon.g-icon-video-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/video-16.svg'); } i.g-icon.g-icon-video-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/video-24.svg'); } i.g-icon.g-icon-video-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/video-32.svg'); } i.g-icon.g-icon-video-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/video-48.svg'); } i.g-icon.g-icon-video-file-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/video-file-16.svg'); } i.g-icon.g-icon-video-file-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/video-file-24.svg'); } i.g-icon.g-icon-video-file-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/video-file-32.svg'); } i.g-icon.g-icon-video-file-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/video-file-48.svg'); } i.g-icon.g-icon-video-off-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/video-off-16.svg'); } i.g-icon.g-icon-video-off-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/video-off-24.svg'); } i.g-icon.g-icon-video-off-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/video-off-32.svg'); } i.g-icon.g-icon-video-off-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/video-off-48.svg'); } i.g-icon.g-icon-video-off-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/video-off-filled-16.svg'); } i.g-icon.g-icon-video-off-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/video-off-filled-24.svg'); } i.g-icon.g-icon-video-off-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/video-off-filled-32.svg'); } i.g-icon.g-icon-video-off-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/video-off-filled-48.svg'); } i.g-icon.g-icon-video-on-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/video-on-16.svg'); } i.g-icon.g-icon-video-on-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/video-on-24.svg'); } i.g-icon.g-icon-video-on-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/video-on-32.svg'); } i.g-icon.g-icon-video-on-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/video-on-48.svg'); } i.g-icon.g-icon-video-on-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/video-on-filled-16.svg'); } i.g-icon.g-icon-video-on-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/video-on-filled-24.svg'); } i.g-icon.g-icon-video-on-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/video-on-filled-32.svg'); } i.g-icon.g-icon-video-on-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/video-on-filled-48.svg'); } i.g-icon.g-icon-video-pause-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/video-pause-16.svg'); } i.g-icon.g-icon-video-pause-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/video-pause-24.svg'); } i.g-icon.g-icon-video-pause-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/video-pause-32.svg'); } i.g-icon.g-icon-video-pause-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/video-pause-48.svg'); } i.g-icon.g-icon-video-play-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/video-play-16.svg'); } i.g-icon.g-icon-video-play-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/video-play-24.svg'); } i.g-icon.g-icon-video-play-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/video-play-32.svg'); } i.g-icon.g-icon-video-play-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/video-play-48.svg'); } i.g-icon.g-icon-video-stop-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/video-stop-16.svg'); } i.g-icon.g-icon-video-stop-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/video-stop-24.svg'); } i.g-icon.g-icon-video-stop-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/video-stop-32.svg'); } i.g-icon.g-icon-video-stop-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/video-stop-48.svg'); } i.g-icon.g-icon-visible-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/visible-16.svg'); } i.g-icon.g-icon-visible-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/visible-24.svg'); } i.g-icon.g-icon-visible-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/visible-32.svg'); } i.g-icon.g-icon-visible-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/visible-48.svg'); } i.g-icon.g-icon-visual-check-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/visual-check-16.svg'); } i.g-icon.g-icon-visual-check-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/visual-check-24.svg'); } i.g-icon.g-icon-visual-check-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/visual-check-32.svg'); } i.g-icon.g-icon-visual-check-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/visual-check-48.svg'); } i.g-icon.g-icon-warning-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/warning-16.svg'); } i.g-icon.g-icon-warning-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/warning-24.svg'); } i.g-icon.g-icon-warning-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/warning-32.svg'); } i.g-icon.g-icon-warning-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/warning-48.svg'); } i.g-icon.g-icon-warning-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/warning-filled-16.svg'); } i.g-icon.g-icon-warning-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/warning-filled-24.svg'); } i.g-icon.g-icon-warning-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/warning-filled-32.svg'); } i.g-icon.g-icon-warning-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/warning-filled-48.svg'); } i.g-icon.g-icon-warning-outlined-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/warning-outlined-16.svg'); } i.g-icon.g-icon-warning-outlined-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/warning-outlined-24.svg'); } i.g-icon.g-icon-warning-outlined-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/warning-outlined-32.svg'); } i.g-icon.g-icon-warning-outlined-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/warning-outlined-48.svg'); } i.g-icon.g-icon-wifi-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/wifi-16.svg'); } i.g-icon.g-icon-wifi-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/wifi-24.svg'); } i.g-icon.g-icon-wifi-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/wifi-32.svg'); } i.g-icon.g-icon-wifi-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/wifi-48.svg'); } i.g-icon.g-icon-wifi-off-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/wifi-off-16.svg'); } i.g-icon.g-icon-wifi-off-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/wifi-off-24.svg'); } i.g-icon.g-icon-wifi-off-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/wifi-off-32.svg'); } i.g-icon.g-icon-wifi-off-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/wifi-off-48.svg'); } i.g-icon.g-icon-wifi-on-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/wifi-on-16.svg'); } i.g-icon.g-icon-wifi-on-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/wifi-on-24.svg'); } i.g-icon.g-icon-wifi-on-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/wifi-on-32.svg'); } i.g-icon.g-icon-wifi-on-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/wifi-on-48.svg'); } i.g-icon.g-icon-zoom-in-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/zoom-in-16.svg'); } i.g-icon.g-icon-zoom-in-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/zoom-in-24.svg'); } i.g-icon.g-icon-zoom-in-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/zoom-in-32.svg'); } i.g-icon.g-icon-zoom-in-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/zoom-in-48.svg'); } i.g-icon.g-icon-zoom-in-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/zoom-in-filled-16.svg'); } i.g-icon.g-icon-zoom-in-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/zoom-in-filled-24.svg'); } i.g-icon.g-icon-zoom-in-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/zoom-in-filled-32.svg'); } i.g-icon.g-icon-zoom-in-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/zoom-in-filled-48.svg'); } i.g-icon.g-icon-zoom-out-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/zoom-out-16.svg'); } i.g-icon.g-icon-zoom-out-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/zoom-out-24.svg'); } i.g-icon.g-icon-zoom-out-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/zoom-out-32.svg'); } i.g-icon.g-icon-zoom-out-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/zoom-out-48.svg'); } i.g-icon.g-icon-zoom-out-filled-16 { width: 16px; height: 16px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/zoom-out-filled-16.svg'); } i.g-icon.g-icon-zoom-out-filled-24 { width: 24px; height: 24px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/zoom-out-filled-24.svg'); } i.g-icon.g-icon-zoom-out-filled-32 { width: 32px; height: 32px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/zoom-out-filled-32.svg'); } i.g-icon.g-icon-zoom-out-filled-48 { width: 48px; height: 48px; mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/zoom-out-filled-48.svg'); } i.g-icon.g-icon-success { color: var(--groupui-sys-color-success-basic-default); } i.g-icon.g-icon-danger { color: var(--groupui-sys-color-danger-basic-default); } i.g-icon.g-icon-warning { color: var(--groupui-sys-color-warning-basic-default); } /** * ---------------------------- * GroupUi Input - g-input * ---------------------------- */ .g-input { position: relative; display: flex; align-items: center; letter-spacing: var(--groupui-sys-spacing-0); font-family: var(--groupui-sys-font-family-primary), sans-serif; font-size: var(--groupui-sys-font-size-400); border-radius: var(--groupui-sys-border-radius-s); padding: var(--groupui-sys-spacing-0) var(--groupui-sys-spacing-300); outline: none; resize: none; margin: var(--groupui-sys-spacing-0); box-sizing: border-box; color: var(--groupui-sys-color-text-normal); border: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-action-muted-default); width: 100%; height: var(--groupui-sys-spacing-1000); gap: var(--groupui-sys-spacing-200); } .g-input input { width: 100%; padding: calc( var(--groupui-sys-spacing-200) - var(--groupui-sys-border-width-s) ) var(--groupui-sys-spacing-0); margin: 0; border: none; outline: none; background: none; font-size: inherit; font-family: inherit; box-sizing: border-box; color: var(--groupui-sys-color-text-normal); } .g-input input.g-input-disabled:hover, .g-input input[disabled]:hover { cursor: not-allowed; } .g-input input.g-input-readonly, .g-input input[readonly] { border-color: var(--groupui-sys-color-action-basic-disabled); background-color: var(--groupui-sys-color-background-canvas); } .g-input input::placeholder { color: var(--groupui-sys-color-text-weakest); opacity: 1; } .g-input:hover { border-color: var(--groupui-sys-color-action-basic-default); } .g-input:focus-within { outline: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-action-basic-default); border-color: var(--groupui-sys-color-action-basic-default); } .g-input .g-input-icon { color: var(--groupui-sys-color-action-basic-default); min-width: var(--groupui-sys-icon-size-m); min-height: var(--groupui-sys-icon-size-m); width: var(--groupui-sys-icon-size-m); height: var(--groupui-sys-icon-size-m); } .g-input.g-input-readonly { border-color: var(--groupui-sys-color-action-basic-disabled); background-color: var(--groupui-sys-color-background-canvas); } .g-input.g-input-readonly .g-input-icon { color: var(--groupui-sys-color-action-quiet-default); } .g-input.g-input-success { border-color: var(--groupui-sys-color-success-basic-default); } .g-input.g-input-success > .g-input-status { color: var(--groupui-sys-color-success-basic-default); } .g-input.g-input-success:hover { border-color: var(--groupui-sys-color-success-basic-hover); } .g-input.g-input-success:focus-within { outline: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-success-basic-default); border-color: var(--groupui-sys-color-success-basic-default); } .g-input.g-input-danger { border-color: var(--groupui-sys-color-danger-basic-default); } .g-input.g-input-danger > .g-input-status { color: var(--groupui-sys-color-danger-basic-default); } .g-input.g-input-danger:hover { border-color: var(--groupui-sys-color-danger-basic-hover); } .g-input.g-input-danger:focus-within { outline: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-danger-basic-default); border-color: var(--groupui-sys-color-danger-basic-default); } .g-input.g-input-warning { border-color: var(--groupui-sys-color-warning-basic-default); } .g-input.g-input-warning > .g-input-status { color: var(--groupui-sys-color-warning-basic-default); } .g-input.g-input-warning:hover { border-color: var(--groupui-sys-color-warning-basic-hover); } .g-input.g-input-warning:focus-within { outline: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-warning-basic-default); border-color: var(--groupui-sys-color-warning-basic-default); } .g-input.g-input-disabled { border-color: var(--groupui-sys-color-action-basic-disabled); background-color: var(--groupui-sys-color-action-silent-disabled); } .g-input.g-input-disabled:hover { cursor: not-allowed; border-color: var(--groupui-sys-color-action-basic-disabled); } .g-input.g-input-disabled:focus { outline: none; box-shadow: none; } .g-input.g-input-disabled .g-input-icon { color: var(--groupui-sys-color-action-basic-disabled); } .g-input.g-input-small { font-size: var(--groupui-sys-font-size-350); height: var(--groupui-sys-spacing-800); padding-inline: var(--groupui-sys-spacing-200); } .g-input.g-input-small .g-icon { min-width: var(--groupui-sys-icon-size-s); min-height: var(--groupui-sys-icon-size-s); } /** * --------------------------------- * GroupUi Form Label - g-label * --------------------------------- */ .g-label { color: var(--groupui-sys-color-text-normal); margin-bottom: var(--groupui-sys-spacing-100); line-height: var(--groupui-sys-line-height-xxl); font-family: var(--groupui-sys-font-family-primary); position: relative; font-weight: bold; font-size: var(--groupui-sys-font-size-350); display: flex; align-items: center; transition: transform var(--groupui-sys-duration-medium-1); cursor: default; } .g-label:has(+ [class*='-disabled']), .g-label:has(+ :disabled), .g-label.g-label-disabled { color: var(--groupui-sys-color-action-basic-disabled); } .g-label:has(+ .g-select > select[disabled]), .g-label:has(+ .g-select > select.g-select-disabled) { color: var(--groupui-sys-color-action-basic-disabled); } /** * --------------------------------- * GroupUi Link - g-link * --------------------------------- */ .g-link { color: var(--groupui-sys-color-link-primary-unvisited-default); } .g-link .g-link-icon { color: var(--groupui-sys-color-link-primary-unvisited-default); } .g-link:hover { color: var(--groupui-sys-color-link-primary-unvisited-hover); } .g-link:hover .g-link-icon { color: var(--groupui-sys-color-link-primary-unvisited-hover); } .g-link:active { color: var(--groupui-sys-color-link-primary-unvisited-pressed); } .g-link:active .g-link-icon { color: var(--groupui-sys-color-link-primary-unvisited-pressed); } .g-link:focus-visible { outline: var(--groupui-sys-color-action-basic-default) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-border-width-m); outline-offset: var(--groupui-sys-spacing-50); border-radius: var(--groupui-sys-border-radius-s); } .g-link:visited { color: var(--groupui-sys-color-link-primary-visited-default); } .g-link:visited .g-link-icon { color: var(--groupui-sys-color-link-primary-visited-default); } .g-link:visited:hover { color: var(--groupui-sys-color-link-primary-visited-hover); } .g-link:visited:hover .g-link-icon { color: var(--groupui-sys-color-link-primary-visited-hover); } .g-link:visited:active { color: var(--groupui-sys-color-link-primary-visited-pressed); } .g-link:visited:active .g-link-icon { color: var(--groupui-sys-color-link-primary-visited-pressed); } .g-link.g-link-inverse { color: var(--groupui-sys-color-link-primary-unvisited-default-inverse); } .g-link.g-link-inverse .g-link-icon { color: var(--groupui-sys-color-link-primary-unvisited-default-inverse); } .g-link.g-link-inverse:hover { color: var(--groupui-sys-color-link-primary-unvisited-hover-inverse); } .g-link.g-link-inverse:hover .g-link-icon { color: var(--groupui-sys-color-link-primary-unvisited-hover-inverse); } .g-link.g-link-inverse:active { color: var(--groupui-sys-color-link-primary-unvisited-pressed-inverse); } .g-link.g-link-inverse:active .g-link-icon { color: var(--groupui-sys-color-link-primary-unvisited-pressed-inverse); } .g-link.g-link-inverse:focus-visible { outline-color: var(--groupui-sys-color-action-basic-default-inverse); } .g-link.g-link-inverse:visited { color: var(--groupui-sys-color-link-primary-visited-default-inverse); } .g-link.g-link-inverse:visited .g-link-icon { color: var(--groupui-sys-color-link-primary-visited-default-inverse); } .g-link.g-link-inverse:visited:hover { color: var(--groupui-sys-color-link-primary-visited-hover-inverse); } .g-link.g-link-inverse:visited:hover .g-link-icon { color: var(--groupui-sys-color-link-primary-visited-hover-inverse); } .g-link.g-link-inverse:visited:active { color: var(--groupui-sys-color-link-primary-visited-pressed-inverse); } .g-link.g-link-inverse:visited:active .g-link-icon { color: var(--groupui-sys-color-link-primary-visited-pressed-inverse); } .g-link.g-link-secondary { color: var(--groupui-sys-color-link-secondary-unvisited-default); } .g-link.g-link-secondary .g-link-icon { color: var(--groupui-sys-color-link-secondary-unvisited-default); } .g-link.g-link-secondary:hover { color: var(--groupui-sys-color-link-secondary-unvisited-hover); } .g-link.g-link-secondary:hover .g-link-icon { color: var(--groupui-sys-color-link-secondary-unvisited-hover); } .g-link.g-link-secondary:active { color: var(--groupui-sys-color-link-secondary-unvisited-pressed); } .g-link.g-link-secondary:active .g-link-icon { color: var(--groupui-sys-color-link-secondary-unvisited-pressed); } .g-link.g-link-secondary:visited { color: var(--groupui-sys-color-link-secondary-visited-default); } .g-link.g-link-secondary:visited .g-link-icon { color: var(--groupui-sys-color-link-secondary-visited-default); } .g-link.g-link-secondary:visited:hover { color: var(--groupui-sys-color-link-secondary-visited-hover); } .g-link.g-link-secondary:visited:hover .g-link-icon { color: var(--groupui-sys-color-link-secondary-visited-hover); } .g-link.g-link-secondary:visited:active { color: var(--groupui-sys-color-link-secondary-visited-pressed); } .g-link.g-link-secondary:visited:active .g-link-icon { color: var(--groupui-sys-color-link-secondary-visited-pressed); } .g-link.g-link-inverse.g-link-secondary { color: var(--groupui-sys-color-link-secondary-unvisited-default-inverse); } .g-link.g-link-inverse.g-link-secondary .g-link-icon { color: var(--groupui-sys-color-link-secondary-unvisited-default-inverse); } .g-link.g-link-inverse.g-link-secondary:hover { color: var(--groupui-sys-color-link-secondary-unvisited-hover-inverse); } .g-link.g-link-inverse.g-link-secondary:hover .g-link-icon { color: var(--groupui-sys-color-link-secondary-unvisited-hover-inverse); } .g-link.g-link-inverse.g-link-secondary:active { color: var(--groupui-sys-color-link-secondary-unvisited-pressed-inverse); } .g-link.g-link-inverse.g-link-secondary:active .g-link-icon { color: var(--groupui-sys-color-link-secondary-unvisited-pressed-inverse); } .g-link.g-link-inverse.g-link-secondary:visited { color: var(--groupui-sys-color-link-secondary-visited-default-inverse); } .g-link.g-link-inverse.g-link-secondary:visited .g-link-icon { color: var(--groupui-sys-color-link-secondary-visited-default-inverse); } .g-link.g-link-inverse.g-link-secondary:visited:hover { color: var(--groupui-sys-color-link-secondary-visited-hover-inverse); } .g-link.g-link-inverse.g-link-secondary:visited:hover .g-link-icon { color: var(--groupui-sys-color-link-secondary-visited-hover-inverse); } .g-link.g-link-inverse.g-link-secondary:visited:active { color: var(--groupui-sys-color-link-secondary-visited-pressed-inverse); } .g-link.g-link-inverse.g-link-secondary:visited:active .g-link-icon { color: var(--groupui-sys-color-link-secondary-visited-pressed-inverse); } .g-link { cursor: pointer; display: inline-flex; align-items: baseline; font-family: var(--groupui-sys-font-family-primary), sans-serif; font-size: var(--groupui-sys-font-size-400); font-weight: var(--groupui-sys-font-weight-action); line-height: var(--groupui-sys-line-height-xxl); letter-spacing: var(--groupui-sys-letter-spacing-regular); transition: color var(--groupui-sys-duration-fast-1) var(--groupui-sys-cubic-bezier-ease-in-out); gap: var(--groupui-sys-spacing-200); text-decoration: none; } .g-link .g-link-icon { align-self: center; } .g-link .g-link-content { display: inline-block; text-decoration: underline; } .g-link.g-link-bold { font-weight: var(--groupui-sys-font-weight-bold); } .g-link.g-link-quiet .g-link-content { text-decoration: none; } /** * --------------------------------- * GroupUi List - g-list * --------------------------------- */ .g-list { display: block; font-family: var(--groupui-sys-font-family-primary), sans-serif; letter-spacing: var(--groupui-sys-letter-spacing-regular); font-size: var(--groupui-sys-font-size-400); color: var(--groupui-sys-color-text-normal); } .g-list ul { list-style-type: disc; } .g-loading { --spinner-s: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%3E%20%3Cstyle%3E%20%3Aroot%20%7B%20--circle-stroke-width%3A%202%3B%20--circle-circumference%3A%2044%3B%20--circle-stroke-dasharray-min%3A%205%3B%20--circle-stroke-dasharray-max%3A%2040%3B%20%7D%20.circle-fill%20%7B%20transform-origin%3A%20center%3B%20fill%3A%20none%3B%20stroke-width%3A%20var(--circle-stroke-width)%3B%20stroke-linecap%3A%20butt%3B%20stroke%3A%20currentColor%3B%20animation%3A%20indeterminate%202s%20linear%20infinite%2C%20indeterminate-chasing%202s%20linear%20infinite%3B%20%7D%20%40keyframes%20indeterminate%20%7B%200%25%20%7B%20transform%3A%20rotateZ(0deg)%3B%20%7D%2050%25%20%7B%20transform%3A%20rotateZ(180deg)%3B%20%7D%20100%25%20%7B%20transform%3A%20rotateZ(720deg)%3B%20%7D%20%7D%20%40keyframes%20indeterminate-chasing%20%7B%200%25%20%7B%20stroke-dasharray%3A%20var(--circle-stroke-dasharray-min)%20var(--circle-circumference)%3B%20%7D%2050%25%20%7B%20stroke-dasharray%3A%20var(--circle-stroke-dasharray-max)%20var(--circle-circumference)%3B%20%7D%20100%25%20%7B%20stroke-dasharray%3A%20var(--circle-stroke-dasharray-min)%20var(--circle-circumference)%3B%20%7D%20%7D%20%3C%2Fstyle%3E%20%3Ccircle%20class%3D%22circle-fill%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%226%22%2F%3E%20%3C%2Fsvg%3E'); --track-s: url('data:image/svg+xml;utf8,%3Csvg%20width%3D%2216px%22%20height%3D%2216px%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cstyle%3E%20.circle-track%20%7B%20fill%3A%20none%3B%20stroke%3A%20currentColor%3B%20stroke-width%3A%202%3B%20%7D%20%3C%2Fstyle%3E%20%3Ccircle%20class%3D%22circle-track%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%226%22%20%2F%3E%20%3C%2Fsvg%3E'); --spinner-m: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224px%22%20height%3D%2224px%22%3E%20%3Cstyle%3E%20%3Aroot%20%7B%20--spinner-size%3A%2024px%3B%20--circle-stroke-width%3A%202%3B%20--circle-circumference%3A%2069%3B%20--circle-stroke-dasharray-min%3A%207%3B%20--circle-stroke-dasharray-max%3A%2062%3B%20%7D%20.circle-fill%20%7B%20transform-origin%3A%20center%3B%20fill%3A%20none%3B%20stroke-width%3A%20var(--circle-stroke-width)%3B%20stroke-linecap%3A%20butt%3B%20stroke%3A%20currentColor%3B%20animation%3A%20indeterminate%202s%20linear%20infinite%2C%20indeterminate-chasing%202s%20linear%20infinite%3B%20%7D%20%40keyframes%20indeterminate%20%7B%200%25%20%7B%20transform%3A%20rotateZ(0deg)%3B%20%7D%2050%25%20%7B%20transform%3A%20rotateZ(180deg)%3B%20%7D%20100%25%20%7B%20transform%3A%20rotateZ(720deg)%3B%20%7D%20%7D%20%40keyframes%20indeterminate-chasing%20%7B%200%25%20%7B%20stroke-dasharray%3A%20var(--circle-stroke-dasharray-min)%20var(--circle-circumference)%3B%20%7D%2050%25%20%7B%20stroke-dasharray%3A%20var(--circle-stroke-dasharray-max)%20var(--circle-circumference)%3B%20%7D%20100%25%20%7B%20stroke-dasharray%3A%20var(--circle-stroke-dasharray-min)%20var(--circle-circumference)%3B%20%7D%20%7D%20%3C%2Fstyle%3E%20%3Ccircle%20class%3D%22circle-fill%22%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%20%3C%2Fsvg%3E'); --track-m: url('data:image/svg+xml;utf8,%3Csvg%20width%3D%2224px%22%20height%3D%2224px%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cstyle%3E%20.circle-track%20%7B%20fill%3A%20none%3B%20stroke%3A%20currentColor%3B%20stroke-width%3A%202%3B%20%7D%20%3C%2Fstyle%3E%20%3Ccircle%20class%3D%22circle-track%22%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%20%2F%3E%20%3C%2Fsvg%3E'); --spinner-l: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232px%22%20height%3D%2232px%22%3E%20%3Cstyle%3E%20%3Aroot%20%7B%20--circle-stroke-width%3A%202%3B%20--circle-circumference%3A%2095%3B%20--circle-stroke-dasharray-min%3A%2010%3B%20--circle-stroke-dasharray-max%3A%2090%3B%20%7D%20.circle-fill%20%7B%20transform-origin%3A%20center%3B%20fill%3A%20none%3B%20stroke-width%3A%20var(--circle-stroke-width)%3B%20stroke-linecap%3A%20butt%3B%20stroke%3A%20currentColor%3B%20animation%3A%20indeterminate%202s%20linear%20infinite%2C%20indeterminate-chasing%202s%20linear%20infinite%3B%20%7D%20%40keyframes%20indeterminate%20%7B%200%25%20%7B%20transform%3A%20rotateZ(0deg)%3B%20%7D%2050%25%20%7B%20transform%3A%20rotateZ(180deg)%3B%20%7D%20100%25%20%7B%20transform%3A%20rotateZ(720deg)%3B%20%7D%20%7D%20%40keyframes%20indeterminate-chasing%20%7B%200%25%20%7B%20stroke-dasharray%3A%20var(--circle-stroke-dasharray-min)%20var(--circle-circumference)%3B%20%7D%2050%25%20%7B%20stroke-dasharray%3A%20var(--circle-stroke-dasharray-max)%20var(--circle-circumference)%3B%20%7D%20100%25%20%7B%20stroke-dasharray%3A%20var(--circle-stroke-dasharray-min)%20var(--circle-circumference)%3B%20%7D%20%7D%20%3C%2Fstyle%3E%20%3Ccircle%20class%3D%22circle-fill%22%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2212%22%2F%3E%20%3C%2Fsvg%3E'); --track-l: url('data:image/svg+xml;utf8,%3Csvg%20width%3D%2232px%22%20height%3D%2232px%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cstyle%3E%20.circle-track%20%7B%20fill%3A%20none%3B%20stroke%3A%20currentColor%3B%20stroke-width%3A%202%3B%20%7D%20%3C%2Fstyle%3E%20%3Ccircle%20class%3D%22circle-track%22%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2212%22%20%2F%3E%20%3C%2Fsvg%3E'); --spinner-xl: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248px%22%20height%3D%2248px%22%3E%20%3Cstyle%3E%20%3Aroot%20%7B%20--circle-stroke-width%3A%202%3B%20--circle-circumference%3A%20144%3B%20--circle-stroke-dasharray-min%3A%2014%3B%20--circle-stroke-dasharray-max%3A%20130%3B%20%7D%20.circle-fill%20%7B%20transform-origin%3A%20center%3B%20fill%3A%20none%3B%20stroke-width%3A%20var(--circle-stroke-width)%3B%20stroke-linecap%3A%20butt%3B%20stroke%3A%20currentColor%3B%20animation%3A%20indeterminate%202s%20linear%20infinite%2C%20indeterminate-chasing%202s%20linear%20infinite%3B%20%7D%20%40keyframes%20indeterminate%20%7B%200%25%20%7B%20transform%3A%20rotateZ(0deg)%3B%20%7D%2050%25%20%7B%20transform%3A%20rotateZ(180deg)%3B%20%7D%20100%25%20%7B%20transform%3A%20rotateZ(720deg)%3B%20%7D%20%7D%20%40keyframes%20indeterminate-chasing%20%7B%200%25%20%7B%20stroke-dasharray%3A%20var(--circle-stroke-dasharray-min)%20var(--circle-circumference)%3B%20%7D%2050%25%20%7B%20stroke-dasharray%3A%20var(--circle-stroke-dasharray-max)%20var(--circle-circumference)%3B%20%7D%20100%25%20%7B%20stroke-dasharray%3A%20var(--circle-stroke-dasharray-min)%20var(--circle-circumference)%3B%20%7D%20%7D%20%3C%2Fstyle%3E%20%3Ccircle%20class%3D%22circle-fill%22%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%2219%22%2F%3E%20%3C%2Fsvg%3E'); --track-xl: url('data:image/svg+xml;utf8,%3Csvg%20width%3D%2248px%22%20height%3D%2248px%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cstyle%3E%20.circle-track%20%7B%20fill%3A%20none%3B%20stroke%3A%20currentColor%3B%20stroke-width%3A%202%3B%20%7D%20%3C%2Fstyle%3E%20%3Ccircle%20class%3D%22circle-track%22%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%2219%22%20%2F%3E%20%3C%2Fsvg%3E'); --spinner-xxl: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2296px%22%20height%3D%2296px%22%3E%20%3Cstyle%3E%20%3Aroot%20%7B%20--circle-stroke-width%3A%204%3B%20--circle-circumference%3A%20290%3B%20--circle-stroke-dasharray-min%3A%2029%20%3B%20--circle-stroke-dasharray-max%3A%20261%3B%20%7D%20.circle-fill%20%7B%20transform-origin%3A%20center%3B%20fill%3A%20none%3B%20stroke-width%3A%20var(--circle-stroke-width)%3B%20stroke-linecap%3A%20butt%3B%20stroke%3A%20currentColor%3B%20animation%3A%20indeterminate%202s%20linear%20infinite%2C%20indeterminate-chasing%202s%20linear%20infinite%3B%20%7D%20%40keyframes%20indeterminate%20%7B%200%25%20%7B%20transform%3A%20rotateZ(0deg)%3B%20%7D%2050%25%20%7B%20transform%3A%20rotateZ(180deg)%3B%20%7D%20100%25%20%7B%20transform%3A%20rotateZ(720deg)%3B%20%7D%20%7D%20%40keyframes%20indeterminate-chasing%20%7B%200%25%20%7B%20stroke-dasharray%3A%20var(--circle-stroke-dasharray-min)%20var(--circle-circumference)%3B%20%7D%2050%25%20%7B%20stroke-dasharray%3A%20var(--circle-stroke-dasharray-max)%20var(--circle-circumference)%3B%20%7D%20100%25%20%7B%20stroke-dasharray%3A%20var(--circle-stroke-dasharray-min)%20var(--circle-circumference)%3B%20%7D%20%7D%20%3C%2Fstyle%3E%20%3Ccircle%20class%3D%22circle-fill%22%20cx%3D%2248%22%20cy%3D%2248%22%20r%3D%2242%22%2F%3E%20%3C%2Fsvg%3E'); --track-xxl: url('data:image/svg+xml;utf8,%3Csvg%20width%3D%2296px%22%20height%3D%2296px%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cstyle%3E%20.circle-track%20%7B%20fill%3A%20none%3B%20stroke%3A%20currentColor%3B%20stroke-width%3A%204%3B%20%7D%20%3C%2Fstyle%3E%20%3Ccircle%20class%3D%22circle-track%22%20cx%3D%2248%22%20cy%3D%2248%22%20r%3D%2242%22%20%2F%3E%20%3C%2Fsvg%3E'); --spinner-3xl: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22136px%22%20height%3D%22136px%22%3E%20%3Cstyle%3E%20%3Aroot%20%7B%20--circle-stroke-width%3A%206%3B%20--circle-circumference%3A%20409%3B%20--circle-stroke-dasharray-min%3A%2041%3B%20--circle-stroke-dasharray-max%3A%20369%3B%20%7D%20.circle-fill%20%7B%20transform-origin%3A%20center%3B%20fill%3A%20none%3B%20stroke-width%3A%20var(--circle-stroke-width)%3B%20stroke-linecap%3A%20butt%3B%20stroke%3A%20currentColor%3B%20animation%3A%20indeterminate%202s%20linear%20infinite%2C%20indeterminate-chasing%202s%20linear%20infinite%3B%20%7D%20%40keyframes%20indeterminate%20%7B%200%25%20%7B%20transform%3A%20rotateZ(0deg)%3B%20%7D%2050%25%20%7B%20transform%3A%20rotateZ(180deg)%3B%20%7D%20100%25%20%7B%20transform%3A%20rotateZ(720deg)%3B%20%7D%20%7D%20%40keyframes%20indeterminate-chasing%20%7B%200%25%20%7B%20stroke-dasharray%3A%20var(--circle-stroke-dasharray-min)%20var(--circle-circumference)%3B%20%7D%2050%25%20%7B%20stroke-dasharray%3A%20var(--circle-stroke-dasharray-max)%20var(--circle-circumference)%3B%20%7D%20100%25%20%7B%20stroke-dasharray%3A%20var(--circle-stroke-dasharray-min)%20var(--circle-circumference)%3B%20%7D%20%7D%20%3C%2Fstyle%3E%20%3Ccircle%20class%3D%22circle-fill%22%20cx%3D%2268%22%20cy%3D%2268%22%20r%3D%2261%22%2F%3E%20%3C%2Fsvg%3E'); --track-3xl: url('data:image/svg+xml;utf8,%3Csvg%20width%3D%22136px%22%20height%3D%22136px%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cstyle%3E%20.circle-track%20%7B%20fill%3A%20none%3B%20stroke%3A%20currentColor%3B%20stroke-width%3A%206%3B%20%7D%20%3C%2Fstyle%3E%20%3Ccircle%20class%3D%22circle-track%22%20cx%3D%2268%22%20cy%3D%2268%22%20r%3D%2261%22%20%2F%3E%20%3C%2Fsvg%3E'); --spinner-size: var(--groupui-sys-spacing-600); --spinner-mask: var(--spinner-m); --track-mask: var(--track-m); mask-size: contain; mask-repeat: no-repeat; width: var(--spinner-size); height: var(--spinner-size); min-width: var(--spinner-size); min-height: var(--spinner-size); max-width: var(--spinner-size); max-height: var(--spinner-size); background-color: var(--groupui-sys-color-action-quiet-disabled); mask-image: var(--track-mask); display: inline-block; } .g-loading::after { background-color: var(--groupui-sys-color-action-basic-default); position: absolute; width: var(--spinner-size); height: var(--spinner-size); content: ''; mask-image: var(--spinner-mask); } .g-loading.g-loading-s { --spinner-size: var(--groupui-sys-spacing-400); --spinner-mask: var(--spinner-s); --track-mask: var(--track-s); } .g-loading.g-loading-m { --spinner-size: var(--groupui-sys-spacing-600); --spinner-mask: var(--spinner-m); --track-mask: var(--track-m); } .g-loading.g-loading-l { --spinner-size: var(--groupui-sys-spacing-800); --spinner-mask: var(--spinner-l); --track-mask: var(--track-l); } .g-loading.g-loading-xl { --spinner-size: var(--groupui-sys-spacing-1200); --spinner-mask: var(--spinner-xl); --track-mask: var(--track-xl); } .g-loading.g-loading-xxl { --spinner-size: var(--groupui-sys-spacing-2400); --spinner-mask: var(--spinner-xxl); --track-mask: var(--track-xxl); } .g-loading.g-loading-3xl { --spinner-size: var(--groupui-sys-spacing-3400); --spinner-mask: var(--spinner-3xl); --track-mask: var(--track-3xl); } .g-loading.g-loading-inverted { background-color: var(--groupui-sys-color-action-quiet-disabled-inverse); } .g-loading.g-loading-inverted::after { background-color: var(--groupui-sys-color-action-basic-default-inverse); } .g-loading.g-loading-no-track { background-color: var(--groupui-sys-color-line-ghost); } /** * ----------------------- * GroupUi Modal - g-modal * ----------------------- */ dialog.g-modal { position: fixed; font-family: var(--groupui-sys-font-family-primary), sans-serif; line-height: var(--groupui-sys-line-height-xxl); box-sizing: border-box; box-shadow: var(--groupui-sys-shadow-modal); border-radius: var(--groupui-sys-border-radius-m); background: var(--groupui-sys-color-background-base); color: var(--groupui-sys-color-text-normal); padding: unset; margin: var(--groupui-sys-spacing-600) auto; inset: unset; border: unset; max-width: var(--groupui-sys-spacing-16000); max-height: calc(100vh - var(--groupui-sys-spacing-1200)); width: unset; height: unset; transform: translateX(-50%); left: 50%; } dialog.g-modal .g-modal-content { width: 100%; height: 100%; overflow: auto; box-sizing: border-box; padding: var(--groupui-sys-spacing-600); } dialog.g-modal .g-modal-close-button { position: absolute; top: 0; right: 0; margin: var(--groupui-sys-spacing-400); width: var(--groupui-sys-spacing-600); cursor: pointer; color: var(--groupui-sys-color-action-basic-default); } dialog.g-modal.g-modal-centered { transform: translateX(-50%) translateY(calc(-50% - var(--groupui-sys-spacing-600))); top: 50%; } dialog.g-modal:focus-visible { outline: unset; } dialog.g-modal::backdrop { background: transparent; transition: background var(--groupui-sys-duration-medium-2) var(--groupui-sys-cubic-bezier-ease-in-out); } dialog.g-modal[open]::backdrop { background: var(--groupui-sys-color-background-backdrop); animation: backdrop-fade-in var(--groupui-sys-duration-medium-2) var(--groupui-sys-cubic-bezier-ease-in-out); } @keyframes backdrop-fade-in { from { background: transparent; } to { background: var(--groupui-sys-color-background-backdrop); } } /** * ---------------------------- * GroupUi Banner - g-banner * ---------------------------- */ .g-banner { z-index: var(--groupui-sys-number-z-index-toast); width: 100%; padding: var(--groupui-sys-spacing-300); box-sizing: border-box; display: grid; gap: var(--groupui-sys-spacing-100) var(--groupui-sys-spacing-200); grid-template-columns: max-content auto max-content; grid-template-areas: 'status headline close' '. content . '; letter-spacing: var(--groupui-sys-letter-spacing-regular); font-family: var(--groupui-sys-font-family-primary); } .g-banner:has(.g-banner-status):has(.g-banner-headline):not( :has(.g-banner-content) ) { grid-template-areas: 'status headline close'; } .g-banner:has(.g-banner-status):has(.g-banner-content):not( :has(.g-banner-headline) ) { grid-template-areas: 'status content close'; } .g-banner:not(:has(.g-banner-status)) { grid-template-columns: auto max-content; } .g-banner:not(:has(.g-banner-status)):has(.g-banner-headline):has( .g-banner-content ) { grid-template-areas: 'headline close' 'content . '; } .g-banner:not(:has(.g-banner-status)):has(.g-banner-headline):not( :has(.g-banner-content) ) { grid-template-areas: 'headline close'; } .g-banner:not(:has(.g-banner-status)):has(.g-banner-content):not( :has(.g-banner-headline) ) { grid-template-areas: 'content close'; } .g-banner .g-banner-close { grid-area: close; color: var(--groupui-sys-color-text-normal); display: flex; padding: var(--groupui-sys-spacing-0); border: none; background: none; cursor: pointer; font-size: 0; } .g-banner .g-banner-close:focus { border-radius: var(--groupui-sys-border-radius-s); outline: var(--groupui-sys-stroke-style-primary) var(--groupui-sys-border-width-m) var(--groupui-sys-color-action-basic-default); } .g-banner .g-banner-close i { display: inline-block; color: var(--groupui-sys-color-text-normal); } .g-banner .g-banner-headline { grid-area: headline; font-weight: bold; align-self: center; color: var(--groupui-sys-color-text-normal); } .g-banner .g-banner-content { grid-area: content; align-self: center; color: var(--groupui-sys-color-text-normal); } .g-banner, .g-banner.g-banner-default { background-color: var(--groupui-sys-color-information-weak-default); } .g-banner .g-banner-status, .g-banner.g-banner-default .g-banner-status { grid-area: status; color: var(--groupui-sys-color-information-basic-default); } .g-banner.g-banner-success { background-color: var(--groupui-sys-color-success-weak-default); } .g-banner.g-banner-success .g-banner-status { grid-area: status; color: var(--groupui-sys-color-success-basic-default); } .g-banner.g-banner-warning { background-color: var(--groupui-sys-color-warning-weak-default); } .g-banner.g-banner-warning .g-banner-status { grid-area: status; color: var(--groupui-sys-color-warning-basic-default); } .g-banner.g-banner-danger { background-color: var(--groupui-sys-color-danger-weak-default); } .g-banner.g-banner-danger .g-banner-status { grid-area: status; color: var(--groupui-sys-color-danger-basic-default); } /** * --------------------------------------------------- * GroupUi Inline Notification - g-inline-notification * --------------------------------------------------- */ .g-inline-notification { z-index: var(--groupui-sys-number-z-index-toast); width: 100%; padding: var(--groupui-sys-spacing-300); box-sizing: border-box; display: grid; gap: var(--groupui-sys-spacing-100) var(--groupui-sys-spacing-200); grid-template-columns: max-content auto max-content; grid-template-areas: 'status headline close' '. content . '; letter-spacing: var(--groupui-sys-letter-spacing-regular); font-family: var(--groupui-sys-font-family-primary); border-radius: var(--groupui-sys-border-radius-s); padding: var(--groupui-sys-spacing-400); } .g-inline-notification:has(.g-inline-notification-status):has( .g-inline-notification-headline ):not(:has(.g-inline-notification-content)) { grid-template-areas: 'status headline close'; } .g-inline-notification:has(.g-inline-notification-status):has( .g-inline-notification-content ):not(:has(.g-inline-notification-headline)) { grid-template-areas: 'status content close'; } .g-inline-notification:not(:has(.g-inline-notification-status)) { grid-template-columns: auto max-content; } .g-inline-notification:not(:has(.g-inline-notification-status)):has( .g-inline-notification-headline ):has(.g-inline-notification-content) { grid-template-areas: 'headline close' 'content . '; } .g-inline-notification:not(:has(.g-inline-notification-status)):has( .g-inline-notification-headline ):not(:has(.g-inline-notification-content)) { grid-template-areas: 'headline close'; } .g-inline-notification:not(:has(.g-inline-notification-status)):has( .g-inline-notification-content ):not(:has(.g-inline-notification-headline)) { grid-template-areas: 'content close'; } .g-inline-notification .g-inline-notification-close { grid-area: close; color: var(--groupui-sys-color-text-normal); display: flex; padding: var(--groupui-sys-spacing-0); border: none; background: none; cursor: pointer; font-size: 0; } .g-inline-notification .g-inline-notification-close:focus { border-radius: var(--groupui-sys-border-radius-s); outline: var(--groupui-sys-stroke-style-primary) var(--groupui-sys-border-width-m) var(--groupui-sys-color-action-basic-default); } .g-inline-notification .g-inline-notification-close i { display: inline-block; color: var(--groupui-sys-color-text-normal); } .g-inline-notification .g-inline-notification-headline { grid-area: headline; font-weight: bold; align-self: center; color: var(--groupui-sys-color-text-normal); } .g-inline-notification .g-inline-notification-content { grid-area: content; align-self: center; color: var(--groupui-sys-color-text-normal); } .g-inline-notification, .g-inline-notification.g-inline-notification-default { background-color: var(--groupui-sys-color-information-weak-default); } .g-inline-notification .g-inline-notification-status, .g-inline-notification.g-inline-notification-default .g-inline-notification-status { grid-area: status; color: var(--groupui-sys-color-information-basic-default); } .g-inline-notification.g-inline-notification-success { background-color: var(--groupui-sys-color-success-weak-default); } .g-inline-notification.g-inline-notification-success .g-inline-notification-status { grid-area: status; color: var(--groupui-sys-color-success-basic-default); } .g-inline-notification.g-inline-notification-warning { background-color: var(--groupui-sys-color-warning-weak-default); } .g-inline-notification.g-inline-notification-warning .g-inline-notification-status { grid-area: status; color: var(--groupui-sys-color-warning-basic-default); } .g-inline-notification.g-inline-notification-danger { background-color: var(--groupui-sys-color-danger-weak-default); } .g-inline-notification.g-inline-notification-danger .g-inline-notification-status { grid-area: status; color: var(--groupui-sys-color-danger-basic-default); } .g-toast { position: relative; display: grid; grid-template-areas: 'status content close'; grid-template-columns: max-content auto max-content; align-items: center; padding: var(--groupui-sys-spacing-300) var(--groupui-sys-spacing-400); font-family: var(--groupui-sys-font-family-primary), sans-serif; background-color: var(--groupui-sys-color-background-inform); color: var(--groupui-sys-color-text-normal-inverse); border-radius: var(--groupui-sys-border-radius-s); box-shadow: var(--groupui-sys-shadow-m); } .g-toast .g-toast-status { grid-area: status; margin-right: var(--groupui-sys-spacing-200); color: var(--groupui-sys-color-action-basic-default-inverse); } .g-toast .g-toast-content { grid-area: content; display: flex; align-items: center; gap: var(--groupui-sys-spacing-400); } .g-toast .g-toast-close { grid-area: close; display: flex; margin-left: var(--groupui-sys-spacing-400); padding: var(--groupui-sys-spacing-0); border: none; background: none; cursor: pointer; font-size: 0; } .g-toast .g-toast-close:focus { border-radius: var(--groupui-sys-border-radius-s); outline: var(--groupui-sys-stroke-style-primary) var(--groupui-sys-border-width-m) var(--groupui-sys-color-action-basic-default-inverse); } .g-toast .g-toast-close i { display: inline-block; color: var(--groupui-sys-color-action-basic-default-inverse); } .g-toast.g-toast-information::before, .g-toast.g-toast-success::before, .g-toast.g-toast-warning::before, .g-toast.g-toast-danger::before { content: ''; position: absolute; height: 100%; width: 6px; border-radius: var(--groupui-sys-border-radius-s) 0 0 var(--groupui-sys-border-radius-s); } .g-toast.g-toast-information::before { background-color: var( --groupui-sys-color-information-basic-default-inverse ); } .g-toast.g-toast-information .g-toast-status { color: var(--groupui-sys-color-information-basic-default-inverse); } .g-toast.g-toast-success::before { background-color: var(--groupui-sys-color-success-basic-default-inverse); } .g-toast.g-toast-success .g-toast-status { color: var(--groupui-sys-color-success-basic-default-inverse); } .g-toast.g-toast-warning::before { background-color: var(--groupui-sys-color-warning-basic-default-inverse); } .g-toast.g-toast-warning .g-toast-status { color: var(--groupui-sys-color-warning-basic-default-inverse); } .g-toast.g-toast-danger::before { background-color: var(--groupui-sys-color-danger-basic-default-inverse); } .g-toast.g-toast-danger .g-toast-status { color: var(--groupui-sys-color-danger-basic-default-inverse); } /** * --------------------------- * GroupUi Popover - g-popover * --------------------------- */ .g-popover { display: inline-block; position: relative; font-family: var(--groupui-sys-font-family-primary), sans-serif; font-size: var(--groupui-sys-font-size-400); letter-spacing: var(--groupui-sys-letter-spacing-regular); } .g-popover summary { cursor: pointer; list-style: none; } .g-popover summary::marker { content: ''; } .g-popover summary::-webkit-details-marker { display: none; } .g-popover .g-popover-content { position: absolute; display: inline-block; width: max-content; left: 0; margin: 0; top: calc(var(--groupui-sys-spacing-200) + 100%); box-shadow: var(--groupui-sys-shadow-m); padding: var(--groupui-sys-spacing-200) var(--groupui-sys-spacing-300); background-color: var(--groupui-sys-color-background-base); border-radius: var(--groupui-sys-border-radius-s); z-index: var(--groupui-sys-z-index-popover); } .g-popover .g-popover-content.g-popover-full-width { width: calc(100% - 2 * var(--groupui-sys-spacing-300)); } .g-popover .g-popover-content.g-popover-placement-bottom { left: 50%; transform: translateX(-50%); } .g-popover .g-popover-content.g-popover-placement-bottom-end { left: auto; right: 0; } .g-popover .g-popover-content.g-popover-placement-bottom-start { left: 0; } .g-popover .g-popover-content.g-popover-placement-top { left: 50%; top: auto; bottom: calc(var(--groupui-sys-spacing-200) + 100%); transform: translateX(-50%); } .g-popover .g-popover-content.g-popover-placement-top-end { inset: auto 0 calc(var(--groupui-sys-spacing-200) + 100%) auto; } .g-popover .g-popover-content.g-popover-placement-top-start { left: 0; top: auto; bottom: calc(var(--groupui-sys-spacing-200) + 100%); } .g-popover .g-popover-content.g-popover-placement-left { left: auto; top: 50%; right: calc(var(--groupui-sys-spacing-200) + 100%); transform: translateY(-50%); } .g-popover .g-popover-content.g-popover-placement-left-end { inset: auto calc(var(--groupui-sys-spacing-200) + 100%) 0 auto; } .g-popover .g-popover-content.g-popover-placement-left-start { left: auto; top: 0; right: calc(var(--groupui-sys-spacing-200) + 100%); } .g-popover .g-popover-content.g-popover-placement-right { left: calc(var(--groupui-sys-spacing-200) + 100%); top: 50%; transform: translateY(-50%); } .g-popover .g-popover-content.g-popover-placement-right-end { left: calc(var(--groupui-sys-spacing-200) + 100%); top: auto; bottom: 0; } .g-popover .g-popover-content.g-popover-placement-right-start { left: calc(var(--groupui-sys-spacing-200) + 100%); top: 0; } .g-progress { --value: 0; --size: var(--groupui-sys-spacing-600); --thickness: var(--groupui-sys-border-width-m); --track-color: var(--groupui-sys-color-action-quiet-disabled); --fill-color: var(--groupui-sys-color-action-basic-default); position: relative; height: var(--size); width: var(--size); background: transparent; border-radius: var(--groupui-sys-border-radius-full); color: var(--fill-color); display: inline-block; } .g-progress::before { inset: var(--groupui-sys-spacing-50); content: ''; border-radius: var(--groupui-sys-border-radius-full); position: absolute; background: radial-gradient(farthest-side, currentcolor 98%, var(--fill-color)) top/var(--thickness) var(--thickness) no-repeat, conic-gradient( currentcolor calc(var(--value) * 1%), var(--track-color) 0 ); mask: radial-gradient( farthest-side, transparent calc(99% - var(--thickness)), var(--fill-color) calc(100% - var(--thickness)) ); } .g-progress.g-progress-s { --size: var(--groupui-sys-spacing-400); --thickness: var(--groupui-sys-border-width-m); } .g-progress.g-progress-s::before { inset: var(--groupui-sys-spacing-25); } .g-progress.g-progress-m { --size: var(--groupui-sys-spacing-600); --thickness: var(--groupui-sys-border-width-m); } .g-progress.g-progress-m::before { inset: var(--groupui-sys-spacing-50); } .g-progress.g-progress-l { --size: var(--groupui-sys-spacing-800); --thickness: var(--groupui-sys-border-width-m); } .g-progress.g-progress-l::before { inset: calc(3 * var(--groupui-sys-spacing-25)); } .g-progress.g-progress-xl { --size: var(--groupui-sys-spacing-1200); --thickness: var(--groupui-sys-border-width-m); } .g-progress.g-progress-xl::before { inset: var(--groupui-sys-spacing-100); } .g-progress.g-progress-xxl { --size: var(--groupui-sys-spacing-2400); --thickness: var(--groupui-sys-border-width-xl); } .g-progress.g-progress-xxl::before { inset: var(--groupui-sys-spacing-100); } .g-progress.g-progress-3xl { --size: var(--groupui-sys-spacing-3400); --thickness: var(--groupui-sys-border-width-xxxl); } .g-progress.g-progress-3xl::before { inset: var(--groupui-sys-spacing-100); } .g-progress.g-progress-inverted { --track-color: var(--groupui-sys-color-action-quiet-disabled-inverse); --fill-color: var(--groupui-sys-color-action-basic-default-inverse); } .g-progress.g-progress-no-track { --track-color: var(--groupui-sys-color-line-ghost); } input[type='radio'].g-radio-btn, label.g-radio-btn input[type='radio'] { margin: 0; appearance: none; position: relative; cursor: pointer; width: var(--groupui-sys-icon-size-m); aspect-ratio: 1; background-color: var(--groupui-sys-color-background-base); border: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-action-muted-default); border-radius: var(--groupui-sys-border-radius-xl); } input[type='radio'].g-radio-btn::before, label.g-radio-btn input[type='radio']::before { content: ''; position: absolute; inset: 0; margin: auto; width: var(--groupui-sys-icon-size-s); aspect-ratio: 1; background-color: var(--groupui-sys-color-action-basic-default); border-radius: var(--groupui-sys-border-radius-xl); transform: scale(0); } input[type='radio'].g-radio-btn:not([disabled]):hover, label.g-radio-btn input[type='radio']:not([disabled]):hover { background-color: var(--groupui-sys-color-action-subtle-hover); border-color: var(--groupui-sys-color-action-basic-default); } input[type='radio'].g-radio-btn:not([disabled]):active, label.g-radio-btn input[type='radio']:not([disabled]):active { background-color: var(--groupui-sys-color-action-subtle-pressed); border-color: var(--groupui-sys-color-action-basic-hover); } input[type='radio'].g-radio-btn:not([disabled]):focus-visible, label.g-radio-btn input[type='radio']:not([disabled]):focus-visible { outline-offset: var(--groupui-sys-spacing-50); outline: var(--groupui-sys-border-width-m) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-action-basic-default); } input[type='radio'].g-radio-btn:not([disabled]):checked, label.g-radio-btn input[type='radio']:not([disabled]):checked { border-color: var(--groupui-sys-color-action-basic-default); } input[type='radio'].g-radio-btn:not([disabled]):checked::before, label.g-radio-btn input[type='radio']:not([disabled]):checked::before { transform: scale(1); } input[type='radio'].g-radio-btn:not([disabled]):checked:hover, label.g-radio-btn input[type='radio']:not([disabled]):checked:hover { background-color: var(--groupui-sys-color-background-base); border-color: var(--groupui-sys-color-action-basic-hover); } input[type='radio'].g-radio-btn:not([disabled]):checked:hover::before, label.g-radio-btn input[type='radio']:not([disabled]):checked:hover::before { background-color: var(--groupui-sys-color-action-basic-hover); } input[type='radio'].g-radio-btn:not([disabled]):checked:active, label.g-radio-btn input[type='radio']:not([disabled]):checked:active { background-color: var(--groupui-sys-color-background-base); border-color: var(--groupui-sys-color-action-basic-pressed); } input[type='radio'].g-radio-btn:not([disabled]):checked:active::before, label.g-radio-btn input[type='radio']:not([disabled]):checked:active::before { background-color: var(--groupui-sys-color-action-basic-pressed); } input[type='radio'].g-radio-btn[disabled], label.g-radio-btn input[type='radio'][disabled] { cursor: not-allowed; border-color: var(--groupui-sys-color-action-basic-disabled); } input[type='radio'].g-radio-btn[disabled]:not(:checked), label.g-radio-btn input[type='radio'][disabled]:not(:checked) { background-color: var(--groupui-vwgroup-ref-color-grey-200); } input[type='radio'].g-radio-btn[disabled]:checked::before, label.g-radio-btn input[type='radio'][disabled]:checked::before { transform: scale(1); background-color: var(--groupui-sys-color-action-basic-disabled); } /* danger */ input[type='radio'].g-radio-btn.g-radio-btn-danger:not([disabled]), label.g-radio-btn.g-radio-btn-danger input[type='radio']:not([disabled]) { border-color: var(--groupui-sys-color-danger-basic-default); } input[type='radio'].g-radio-btn.g-radio-btn-danger:not([disabled]):hover, label.g-radio-btn.g-radio-btn-danger input[type='radio']:not([disabled]):hover { background-color: var(--groupui-vwgroup-ref-color-system-red-700-10); border-color: var(--groupui-vwgroup-ref-color-system-red-700); } input[type='radio'].g-radio-btn.g-radio-btn-danger:not([disabled]):active, label.g-radio-btn.g-radio-btn-danger input[type='radio']:not([disabled]):active { background-color: var(--groupui-vwgroup-ref-color-system-red-700-20); border-color: var(--groupui-vwgroup-ref-color-system-red-700); } input[type='radio'].g-radio-btn.g-radio-btn-danger:not([disabled]):checked, label.g-radio-btn.g-radio-btn-danger input[type='radio']:not([disabled]):checked { border-color: var(--groupui-sys-color-danger-basic-default); } input[type='radio'].g-radio-btn.g-radio-btn-danger:not( [disabled] ):checked::before, label.g-radio-btn.g-radio-btn-danger input[type='radio']:not([disabled]):checked::before { background-color: var(--groupui-sys-color-danger-basic-default); } input[type='radio'].g-radio-btn.g-radio-btn-danger:not( [disabled] ):checked:hover, label.g-radio-btn.g-radio-btn-danger input[type='radio']:not([disabled]):checked:hover { background-color: var(--groupui-sys-color-background-base); border-color: var(--groupui-sys-color-danger-basic-hover); } input[type='radio'].g-radio-btn.g-radio-btn-danger:not( [disabled] ):checked:hover::before, label.g-radio-btn.g-radio-btn-danger input[type='radio']:not([disabled]):checked:hover::before { background-color: var(--groupui-sys-color-danger-basic-hover); } input[type='radio'].g-radio-btn.g-radio-btn-danger:not( [disabled] ):checked:active, label.g-radio-btn.g-radio-btn-danger input[type='radio']:not([disabled]):checked:active { background-color: var(--groupui-sys-color-background-base); border-color: var(--groupui-sys-color-danger-basic-pressed); } input[type='radio'].g-radio-btn.g-radio-btn-danger:not( [disabled] ):checked:active::before, label.g-radio-btn.g-radio-btn-danger input[type='radio']:not([disabled]):checked:active::before { background-color: var(--groupui-sys-color-danger-basic-pressed); } /* label */ label.g-radio-btn { color: var(--groupui-sys-color-text-normal); cursor: pointer; position: relative; gap: var(--groupui-sys-spacing-200); line-height: var(--groupui-sys-line-height-xxl); font-family: var(--groupui-sys-font-family-primary); } label.g-radio-btn:has(input[type='radio']) { display: inline-flex; vertical-align: middle; align-items: center; } label.g-radio-btn:not(:has(input[type='radio'])) { padding-left: var(--groupui-sys-spacing-200); } input[type='radio']:has(+ label.g-radio-btn) { vertical-align: top; } label.g-radio-btn:has(input[type='radio'][disabled]), input[type='radio'][disabled] + label.g-radio-btn { cursor: not-allowed; color: var(--groupui-vwgroup-ref-color-grey-400); } label.g-radio-btn.g-radio-btn-small { font-size: var(--groupui-sys-font-size-350); } input[type='radio'].g-radio-btn.g-radio-btn-small, label.g-radio-btn.g-radio-btn-small input[type='radio'] { width: var(--groupui-sys-spacing-500); } input[type='radio'].g-radio-btn.g-radio-btn-small::before, label.g-radio-btn.g-radio-btn-small input[type='radio']::before { width: var(--groupui-sys-spacing-300); } /** * ---------------------------- * GroupUi Search-field - g-search * ---------------------------- */ .g-search { position: relative; display: flex; align-items: center; letter-spacing: var(--groupui-sys-spacing-0); font-family: var(--groupui-sys-font-family-primary), sans-serif; font-size: var(--groupui-sys-font-size-400); border-radius: var(--groupui-sys-border-radius-s); padding: var(--groupui-sys-spacing-0) var(--groupui-sys-spacing-300); outline: none; resize: none; margin: var(--groupui-sys-spacing-0); box-sizing: border-box; color: var(--groupui-sys-color-text-normal); border: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-action-muted-default); width: 100%; height: var(--groupui-sys-spacing-1000); gap: var(--groupui-sys-spacing-200); } .g-search input { width: 100%; padding: calc( var(--groupui-sys-spacing-200) - var(--groupui-sys-border-width-s) ) var(--groupui-sys-spacing-0); margin: var(--groupui-sys-spacing-0); border: none; outline: none; background: none; font-size: inherit; font-family: inherit; box-sizing: border-box; color: var(--groupui-sys-color-text-normal); } .g-search input.g-search-disabled:hover, .g-search input[disabled]:hover { cursor: not-allowed; } .g-search input.g-search-readonly, .g-search input[readonly] { border-color: var(--groupui-sys-color-action-basic-disabled); background-color: var(--groupui-sys-color-background-canvas); } .g-search input::placeholder { color: var(--groupui-sys-color-text-weakest); opacity: 1; } .g-search input[type='search']::-webkit-calendar-picker-indicator { display: none !important; } .g-search input[type='search']::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: inline-block; padding-right: var(--groupui-sys-spacing-0); width: var(--groupui-sys-icon-size-m); height: var(--groupui-sys-icon-size-m); background-color: var(--groupui-sys-color-action-basic-default); mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/close-24.svg'); mask-repeat: no-repeat; cursor: pointer; } .g-search:hover { border-color: var(--groupui-sys-color-action-basic-default); } .g-search:focus-within { outline: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-action-basic-default); border-color: var(--groupui-sys-color-action-basic-default); } .g-search .g-search-icon { color: var(--groupui-sys-color-action-basic-default); min-width: var(--groupui-sys-icon-size-m); min-height: var(--groupui-sys-icon-size-m); width: var(--groupui-sys-icon-size-m); height: var(--groupui-sys-icon-size-m); } .g-search.g-search-readonly { border-color: var(--groupui-sys-color-action-basic-disabled); background-color: var(--groupui-sys-color-background-canvas); } .g-search.g-search-readonly .g-search-icon { color: var(--groupui-vwgroup-ref-color-grey-1000); } .g-search.g-search-success { border-color: var(--groupui-sys-color-success-basic-default); } .g-search.g-search-success > .g-search-status { color: var(--groupui-sys-color-success-basic-default); } .g-search.g-search-success:hover { border-color: var(--groupui-sys-color-success-basic-hover); } .g-search.g-search-success:focus-within { outline: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-success-basic-default); border-color: var(--groupui-sys-color-success-basic-default); } .g-search.g-search-danger { border-color: var(--groupui-sys-color-danger-basic-default); } .g-search.g-search-danger > .g-search-status { color: var(--groupui-sys-color-danger-basic-default); } .g-search.g-search-danger:hover { border-color: var(--groupui-sys-color-danger-basic-hover); } .g-search.g-search-danger:focus-within { outline: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-danger-basic-default); border-color: var(--groupui-sys-color-danger-basic-default); } .g-search.g-search-warning { border-color: var(--groupui-sys-color-warning-basic-default); } .g-search.g-search-warning > .g-search-status { color: var(--groupui-sys-color-warning-basic-default); } .g-search.g-search-warning:hover { border-color: var(--groupui-sys-color-warning-basic-hover); } .g-search.g-search-warning:focus-within { outline: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-warning-basic-default); border-color: var(--groupui-sys-color-warning-basic-default); } .g-search.g-search-disabled { border-color: var(--groupui-sys-color-action-basic-disabled); background-color: var(--groupui-vwgroup-ref-color-grey-100); } .g-search.g-search-disabled:hover { cursor: not-allowed; border-color: var(--groupui-sys-color-action-basic-disabled); } .g-search.g-search-disabled:focus { outline: none; box-shadow: none; } .g-search.g-search-disabled .g-search-icon { color: var(--groupui-sys-color-action-basic-disabled); } /** * ---------------------------- * GroupUi Input - g-select * ---------------------------- */ .g-select:not(details, .g-select-custom) { position: relative; display: grid; grid-template-areas: 'select'; align-items: center; width: 100%; height: var(--groupui-sys-spacing-1000); box-sizing: border-box; margin: var(--groupui-sys-spacing-0); padding: var(--groupui-sys-spacing-0); border: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-action-muted-default); border-radius: var(--groupui-sys-border-radius-s); color: var(--groupui-sys-color-text-normal); background-color: var(--groupui-sys-color-background-base); } .g-select:not(details, .g-select-custom) select { grid-area: select; appearance: none; outline: none; border: none; resize: none; background: none; box-sizing: border-box; text-overflow: ellipsis; height: 100%; width: 100%; font-family: var(--groupui-sys-font-family-primary), sans-serif; font-size: var(--groupui-sys-font-size-400); line-height: var(--groupui-sys-line-height-l); letter-spacing: var(--groupui-sys-spacing-0); padding-left: var(--groupui-sys-spacing-300); padding-right: var(--groupui-sys-spacing-450); } .g-select:not(details, .g-select-custom)::after { grid-area: select; pointer-events: none; content: ''; justify-self: end; box-sizing: border-box; height: var(--groupui-sys-icon-size-m); width: calc( var(--groupui-sys-icon-size-m) + var(--groupui-sys-spacing-100) ); mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/chevron-down-24.svg'); mask-repeat: no-repeat; background-color: var(--groupui-sys-color-action-basic-default); margin-right: var(--groupui-sys-spacing-300); } .g-select:not(details, .g-select-custom) .g-select-icon { display: none; position: absolute; min-height: var(--groupui-sys-icon-size-m); min-width: var(--groupui-sys-icon-size-m); height: var(--groupui-sys-icon-size-m); width: var(--groupui-sys-icon-size-m); right: calc(2 * var(--groupui-sys-icon-size-m)); pointer-events: none; color: var(--groupui-sys-color-action-basic-default); } .g-select:not(details, .g-select-custom):hover { border-color: var(--groupui-sys-color-action-basic-default); } .g-select:not(details, .g-select-custom):focus-within { border-color: var(--groupui-sys-color-action-basic-default); outline: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-action-basic-default); } .g-select:not(details, .g-select-custom):has(select[disabled]) { cursor: not-allowed; border-color: var(--groupui-sys-color-action-basic-disabled); background-color: var(--groupui-vwgroup-ref-color-grey-100); } .g-select:not(details, .g-select-custom):has(select[disabled]) select { cursor: not-allowed; color: var(--groupui-vwgroup-ref-color-grey-400); } .g-select:not(details, .g-select-custom):has(select[disabled])::after { background-color: var(--groupui-vwgroup-ref-color-grey-400); } .g-select:not(details, .g-select-custom):has(select[disabled]) .g-select-icon:nth-of-type(1) { display: none; } .g-select:not(details, .g-select-custom):has(select[disabled]) ~ .g-description { color: var(--groupui-sys-color-action-basic-disabled); } .g-select:not(details, .g-select-custom).g-select-success:not( :has(select[disabled]) ) select:has(+ .g-select-icon), .g-select:not(details, .g-select-custom).g-select-warning:not( :has(select[disabled]) ) select:has(+ .g-select-icon), .g-select:not(details, .g-select-custom).g-select-danger:not( :has(select[disabled]) ) select:has(+ .g-select-icon) { padding-right: calc( 2 * var(--groupui-sys-icon-size-m) + var(--groupui-sys-spacing-300) ); } .g-select:not(details, .g-select-custom).g-select-success:not( :has(select[disabled]) ) .g-select-icon:nth-of-type(1), .g-select:not(details, .g-select-custom).g-select-warning:not( :has(select[disabled]) ) .g-select-icon:nth-of-type(1), .g-select:not(details, .g-select-custom).g-select-danger:not( :has(select[disabled]) ) .g-select-icon:nth-of-type(1) { display: initial; } .g-select:not(details, .g-select-custom).g-select-success:not( :has(select[disabled]) ) { border-color: var(--groupui-sys-color-success-basic-default); outline-color: var(--groupui-sys-color-success-basic-default); } .g-select:not(details, .g-select-custom).g-select-success:not( :has(select[disabled]) ) .g-select-icon.g-select-status { color: var(--groupui-sys-color-success-basic-default); } .g-select:not(details, .g-select-custom).g-select-success:not( :has(select[disabled]) ):hover { border-color: var(--groupui-sys-color-success-basic-hover); outline-color: var(--groupui-sys-color-success-basic-hover); } .g-select:not(details, .g-select-custom).g-select-success:not( :has(select[disabled]) ):focus-within { border-color: var(--groupui-sys-color-success-basic-default); outline-color: var(--groupui-sys-color-success-basic-default); } .g-select:not(details, .g-select-custom).g-select-warning:not( :has(select[disabled]) ) { border-color: var(--groupui-sys-color-warning-basic-default); outline-color: var(--groupui-sys-color-warning-basic-default); } .g-select:not(details, .g-select-custom).g-select-warning:not( :has(select[disabled]) ) .g-select-icon.g-select-status { color: var(--groupui-sys-color-warning-basic-default); } .g-select:not(details, .g-select-custom).g-select-warning:not( :has(select[disabled]) ):hover { border-color: var(--groupui-sys-color-warning-basic-hover); outline-color: var(--groupui-sys-color-warning-basic-hover); } .g-select:not(details, .g-select-custom).g-select-warning:not( :has(select[disabled]) ):focus-within { border-color: var(--groupui-sys-color-warning-basic-default); outline-color: var(--groupui-sys-color-warning-basic-default); } .g-select:not(details, .g-select-custom).g-select-danger:not( :has(select[disabled]) ) { border-color: var(--groupui-sys-color-danger-basic-default); outline-color: var(--groupui-sys-color-danger-basic-default); } .g-select:not(details, .g-select-custom).g-select-danger:not( :has(select[disabled]) ) .g-select-icon.g-select-status { color: var(--groupui-sys-color-danger-basic-default); } .g-select:not(details, .g-select-custom).g-select-danger:not( :has(select[disabled]) ):hover { border-color: var(--groupui-sys-color-danger-basic-hover); outline-color: var(--groupui-sys-color-danger-basic-hover); } .g-select:not(details, .g-select-custom).g-select-danger:not( :has(select[disabled]) ):focus-within { border-color: var(--groupui-sys-color-danger-basic-default); outline-color: var(--groupui-sys-color-danger-basic-default); } details.g-select, .g-select.g-select-custom { position: relative; } details.g-select summary, .g-select.g-select-custom summary { list-style: none; } details.g-select summary::marker, .g-select.g-select-custom summary::marker { content: ''; } details.g-select summary::-webkit-details-marker, .g-select.g-select-custom summary::-webkit-details-marker { display: none; } details.g-select .g-select-input, .g-select.g-select-custom .g-select-input { display: grid; cursor: pointer; align-items: center; grid-template-columns: auto repeat(2, min-content); grid-template-areas: 'selected-option status marker'; width: 100%; height: var(--groupui-sys-spacing-1000); box-sizing: border-box; margin: var(--groupui-sys-spacing-0); padding: var(--groupui-sys-spacing-0) var(--groupui-sys-spacing-300); border: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-action-muted-default); border-radius: var(--groupui-sys-border-radius-s); color: var(--groupui-sys-color-text-normal); background-color: var(--groupui-sys-color-background-base); font-family: var(--groupui-sys-font-family-primary), sans-serif; font-size: var(--groupui-sys-font-size-400); line-height: var(--groupui-sys-line-height-l); letter-spacing: var(--groupui-sys-spacing-0); } details.g-select .g-select-input::after, .g-select.g-select-custom .g-select-input::after { content: ''; grid-area: marker; justify-self: end; box-sizing: border-box; height: var(--groupui-sys-icon-size-m); width: var(--groupui-sys-icon-size-m); mask-image: url('https://assets.groupui.vwapps.run/specific/2.11.0/static/icons/vwgroup/chevron-down-24.svg'); mask-repeat: no-repeat; background-color: var(--groupui-sys-color-action-basic-default); } details.g-select:hover .g-select-input, .g-select.g-select-custom:hover .g-select-input { border-color: var(--groupui-sys-color-action-basic-default); } details.g-select:focus-within .g-select-input, .g-select.g-select-custom:focus-within .g-select-input { border-color: var(--groupui-sys-color-action-basic-default); outline: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-action-basic-default); } details.g-select .g-select-selected-option, .g-select.g-select-custom .g-select-selected-option { grid-area: selected-option; margin-right: var(--groupui-sys-spacing-200); overflow: scroll; scrollbar-width: none; } details.g-select .g-select-selected-option::-webkit-scrollbar, .g-select.g-select-custom .g-select-selected-option::-webkit-scrollbar { display: none; } details.g-select .g-select-status, .g-select.g-select-custom .g-select-status { grid-area: status; } details.g-select .g-select-icon, .g-select.g-select-custom .g-select-icon { min-height: var(--groupui-sys-icon-size-m); min-width: var(--groupui-sys-icon-size-m); height: var(--groupui-sys-icon-size-m); width: var(--groupui-sys-icon-size-m); color: var(--groupui-sys-color-action-basic-default); margin-right: var(--groupui-sys-spacing-200); } details.g-select .g-select-dropdown, .g-select.g-select-custom .g-select-dropdown { position: absolute; display: none; z-index: var(--groupui-sys-z-index-popover); border: none; width: 100%; grid-template-columns: 100%; padding: var(--groupui-sys-spacing-0); border-radius: var(--groupui-sys-border-radius-s); margin: 0; box-shadow: var(--groupui-sys-shadow-popover); margin-top: var(--groupui-sys-spacing-200); background-color: var(--groupui-sys-color-background-base); } details.g-select .g-select-option, .g-select.g-select-custom .g-select-option { display: flex; gap: var(--groupui-sys-spacing-150); align-items: center; cursor: pointer; padding: var(--groupui-sys-spacing-200) var(--groupui-sys-spacing-300); font-family: var(--groupui-sys-font-family-primary), sans-serif; font-size: var(--groupui-sys-font-size-400); line-height: var(--groupui-sys-line-height-l); letter-spacing: var(--groupui-sys-spacing-0); } details.g-select .g-select-option input[type='radio'], .g-select.g-select-custom .g-select-option input[type='radio'] { -webkit-appearance: none; appearance: none; margin: var(--groupui-sys-spacing-0); } details.g-select .g-select-option:first-of-type, .g-select.g-select-custom .g-select-option:first-of-type { border-top-left-radius: var(--groupui-sys-border-radius-s); border-top-right-radius: var(--groupui-sys-border-radius-s); } details.g-select .g-select-option:last-of-type, .g-select.g-select-custom .g-select-option:last-of-type { border-bottom-left-radius: var(--groupui-sys-border-radius-s); border-bottom-right-radius: var(--groupui-sys-border-radius-s); } details.g-select .g-select-option:hover, details.g-select .g-select-option:focus, .g-select.g-select-custom .g-select-option:hover, .g-select.g-select-custom .g-select-option:focus { background-color: var(--groupui-sys-color-action-subtle-hover); } details.g-select .g-select-option:active, .g-select.g-select-custom .g-select-option:active { background-color: var(--groupui-sys-color-action-subtle-pressed); } details.g-select .g-select-option:has(> input:checked), .g-select.g-select-custom .g-select-option:has(> input:checked) { background-color: var(--groupui-sys-color-action-subtle-pressed); } details.g-select[open] .g-select-input::after, details.g-select.g-select-open .g-select-input::after, .g-select.g-select-custom[open] .g-select-input::after, .g-select.g-select-custom.g-select-open .g-select-input::after { transform: rotate(180deg); } details.g-select[open] .g-select-dropdown, details.g-select.g-select-open .g-select-dropdown, .g-select.g-select-custom[open] .g-select-dropdown, .g-select.g-select-custom.g-select-open .g-select-dropdown { display: grid; } details.g-select.g-select-success .g-select-input, .g-select.g-select-custom.g-select-success .g-select-input { border-color: var(--groupui-sys-color-success-basic-default); } details.g-select.g-select-success .g-select-status, .g-select.g-select-custom.g-select-success .g-select-status { color: var(--groupui-sys-color-success-basic-default); } details.g-select.g-select-success:not(.g-select-disabled):hover .g-select-input, .g-select.g-select-custom.g-select-success:not(.g-select-disabled):hover .g-select-input { border-color: var(--groupui-sys-color-success-basic-hover); } details.g-select.g-select-success:not(.g-select-disabled):focus-within .g-select-input, .g-select.g-select-custom.g-select-success:not(.g-select-disabled):focus-within .g-select-input { outline: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-success-basic-default); } details.g-select.g-select-warning .g-select-input, .g-select.g-select-custom.g-select-warning .g-select-input { border-color: var(--groupui-sys-color-warning-basic-default); } details.g-select.g-select-warning .g-select-status, .g-select.g-select-custom.g-select-warning .g-select-status { color: var(--groupui-sys-color-warning-basic-default); } details.g-select.g-select-warning:not(.g-select-disabled):hover .g-select-input, .g-select.g-select-custom.g-select-warning:not(.g-select-disabled):hover .g-select-input { border-color: var(--groupui-sys-color-warning-basic-hover); } details.g-select.g-select-warning:not(.g-select-disabled):focus-within .g-select-input, .g-select.g-select-custom.g-select-warning:not(.g-select-disabled):focus-within .g-select-input { outline: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-warning-basic-default); } details.g-select.g-select-danger .g-select-input, .g-select.g-select-custom.g-select-danger .g-select-input { border-color: var(--groupui-sys-color-danger-basic-default); } details.g-select.g-select-danger .g-select-status, .g-select.g-select-custom.g-select-danger .g-select-status { color: var(--groupui-sys-color-danger-basic-default); } details.g-select.g-select-danger:not(.g-select-disabled):hover .g-select-input, .g-select.g-select-custom.g-select-danger:not(.g-select-disabled):hover .g-select-input { border-color: var(--groupui-sys-color-danger-basic-hover); } details.g-select.g-select-danger:not(.g-select-disabled):focus-within .g-select-input, .g-select.g-select-custom.g-select-danger:not(.g-select-disabled):focus-within .g-select-input { outline: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-danger-basic-default); } details.g-select.g-select-disabled, .g-select.g-select-custom.g-select-disabled { cursor: not-allowed; } details.g-select.g-select-disabled .g-select-input, .g-select.g-select-custom.g-select-disabled .g-select-input { pointer-events: none; border-color: var(--groupui-sys-color-action-basic-disabled); outline: none; background-color: var(--groupui-sys-color-action-silent-disabled); color: var(--groupui-sys-color-action-basic-disabled); cursor: not-allowed; } details.g-select.g-select-disabled .g-select-input::after, .g-select.g-select-custom.g-select-disabled .g-select-input::after { background-color: var(--groupui-sys-color-action-basic-disabled); } details.g-select.g-select-disabled .g-select-status, .g-select.g-select-custom.g-select-disabled .g-select-status { display: none; } /** * ---------------------------- * GroupUi Switch - g-switch * ---------------------------- */ .g-switch { position: relative; cursor: pointer; display: inline-flex; align-items: center; gap: var(--groupui-sys-spacing-300); font-family: var(--groupui-sys-font-family-primary), sans-serif; color: var(--groupui-sys-color-text-normal); } .g-switch * { align-self: center; } .g-switch:has(> input[type='checkbox']:disabled) { cursor: not-allowed; } .g-switch input[type='checkbox'] { position: relative; appearance: none; -webkit-appearance: none; margin: 0; height: var(--groupui-sys-spacing-800); width: var(--groupui-sys-spacing-1400); border-radius: calc(var(--groupui-sys-spacing-800) / 2); } .g-switch input[type='checkbox']::before { content: ''; cursor: pointer; position: absolute; top: 0; left: 0; height: var(--groupui-sys-spacing-800); width: var(--groupui-sys-spacing-1400); border-radius: calc(var(--groupui-sys-spacing-800) / 2); background-color: var(--groupui-sys-color-action-muted-default); transition: background-color var(--groupui-sys-duration-medium-2) var(--groupui-sys-cubic-bezier-ease-out); } .g-switch input[type='checkbox']::after { content: ''; cursor: pointer; position: absolute; top: var(--groupui-sys-spacing-50); left: var(--groupui-sys-spacing-50); height: var(--groupui-sys-spacing-700); aspect-ratio: 1/1; background-color: var(--groupui-sys-color-on-action-muted-default); border-radius: var(--groupui-sys-border-radius-xl); transition: transform var(--groupui-sys-duration-medium-2) var(--groupui-sys-cubic-bezier-ease-out); } .g-switch input[type='checkbox']:hover::before { background-color: var(--groupui-sys-color-action-muted-hover); } .g-switch input[type='checkbox']:active::before { background-color: var(--groupui-sys-color-action-muted-pressed); } .g-switch input[type='checkbox']:checked::before { background-color: var(--groupui-sys-color-action-basic-default); } .g-switch input[type='checkbox']:checked:hover::before { background-color: var(--groupui-sys-color-action-basic-hover); } .g-switch input[type='checkbox']:checked:active::before { background-color: var(--groupui-sys-color-action-basic-pressed); } .g-switch input[type='checkbox']:checked::after { transform: translateX(1.5rem); } .g-switch input[type='checkbox']:focus-visible:not([disabled='']) { outline: var(--groupui-sys-color-action-basic-default); outline-style: var(--groupui-sys-stroke-style-primary); outline-offset: var(--groupui-sys-spacing-50); outline-width: var(--groupui-sys-spacing-50); } .g-switch input[type='checkbox']:disabled::before, .g-switch input[type='checkbox']:disabled::after { cursor: not-allowed; } .g-switch input[type='checkbox']:disabled::before, .g-switch input[type='checkbox']:disabled:hover::before, .g-switch input[type='checkbox']:disabled:active::before { background-color: var(--groupui-sys-color-action-basic-disabled); } .g-switch input[type='checkbox']:disabled::after, .g-switch input[type='checkbox']:disabled:hover::after, .g-switch input[type='checkbox']:disabled:active::after { transform: translateX(0); background-color: var(--groupui-sys-color-background-canvas); } .g-switch input[type='checkbox']:disabled:checked::after { transform: translateX( calc( 0px + var(--groupui-sys-spacing-1400) - var(--groupui-sys-spacing-700) - 2 * var(--groupui-sys-spacing-50) ) ); } .g-switch.g-switch-small { font-size: var(--groupui-sys-font-size-350); } .g-switch.g-switch-small input[type='checkbox'] { width: var(--groupui-sys-spacing-1200); height: var(--groupui-sys-spacing-600); } .g-switch.g-switch-small input[type='checkbox']::before { width: var(--groupui-sys-spacing-1200); height: var(--groupui-sys-spacing-600); } .g-switch.g-switch-small input[type='checkbox']::after { height: var(--groupui-sys-spacing-500); } /** * ---------------------------- * GroupUi Table - g-table * ---------------------------- */ table.g-table { width: 100%; border-collapse: separate; border-spacing: 0; background-color: var(--groupui-sys-color-background-base); font-family: var(--groupui-sys-font-family-primary), sans-serif; font-size: var(--groupui-sys-font-size-400); line-height: var(--groupui-sys-line-height-xxl); } table.g-table tr { background-color: var(--groupui-sys-color-background-base); } table.g-table tr th, table.g-table tr td { box-sizing: border-box; padding: var(--groupui-sys-spacing-300); border-width: 0 0 var(--groupui-sys-border-width-s) 0; border-style: var(--groupui-sys-stroke-style-primary); border-color: var(--groupui-sys-color-line-weak); } table.g-table tr th.g-table-cell-interactive:focus, table.g-table tr td.g-table-cell-interactive:focus { border-radius: var(--groupui-sys-border-radius-s); outline: var(--groupui-sys-border-width-m) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-action-basic-default); outline-offset: calc(-0.5 * var(--groupui-sys-border-width-s)); } table.g-table tr th .g-table-fixed-cell, table.g-table tr td .g-table-fixed-cell { height: var(--groupui-sys-spacing-1200); max-height: var(--groupui-sys-spacing-1200); } table.g-table tr th:has(.g-table-fixed-cell), table.g-table tr td:has(.g-table-fixed-cell) { padding-top: var(--groupui-sys-spacing-0); padding-bottom: var(--groupui-sys-spacing-0); } table.g-table tr th { text-align: start; font-weight: var(--groupui-sys-font-weight-bold); } table.g-table tr:last-child th, table.g-table tr:last-child td { border-bottom-color: transparent; } table.g-table tr:hover td { background-color: var(--groupui-sys-color-action-subtle-hover); } table.g-table tr:active td, table.g-table tr.g-active td { background-color: var(--groupui-sys-color-action-subtle-pressed); } table.g-table :is(tr, td, th)[contenteditable='']:focus, table.g-table tr[contenteditable=''] :is(td, th):focus { border-radius: var(--groupui-sys-border-radius-s); outline: var(--groupui-sys-border-width-m) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-action-basic-default); outline-offset: calc(-1 * var(--groupui-sys-border-width-s)); background-color: var(--groupui-sys-color-background-base); } table.g-table tr[contenteditable='']:focus :is(td, th) { background-color: var(--groupui-sys-color-background-base); } table.g-table:has(thead) thead tr:last-child th, table.g-table:has(thead) thead tr:last-child td { border-bottom-color: var(--groupui-sys-color-line-weak); } table.g-table:has(tfoot) tbody tr:last-child td { border-bottom-color: var(--groupui-sys-color-line-weak); } table.g-table.g-table-striped:has(thead) thead tr:nth-child(even) { background-color: var(--groupui-sys-color-background-stripe); } table.g-table.g-table-striped:has(thead) tbody tr:nth-child(odd) { background-color: var(--groupui-sys-color-background-stripe); } table.g-table.g-table-striped:not(:has(thead)) tr:nth-child(even) { background-color: var(--groupui-sys-color-background-stripe); } table.g-table.g-table-striped:has(thead tr:nth-child(even)) tbody tr:nth-child(even) { background-color: var(--groupui-sys-color-background-stripe); } table.g-table.g-table-striped:has(thead tr:nth-child(even)) tbody tr:nth-child(odd) { background-color: var(--groupui-sys-color-background-base); } table.g-table.g-table-striped:has(thead tr:last-child:nth-child(odd)):has( tbody tr:last-child:nth-child(odd) ) tfoot tr:nth-child(even) { background-color: var(--groupui-sys-color-background-stripe); } table.g-table.g-table-striped:has(thead tr:last-child:nth-child(odd)):has( tbody tr:last-child:nth-child(odd) ) tfoot tr:nth-child(odd) { background-color: var(--groupui-sys-color-background-base); } table.g-table.g-table-striped:has(thead tr:last-child:nth-child(odd)):has( tbody tr:last-child:nth-child(even) ) tfoot tr:nth-child(even) { background-color: var(--groupui-sys-color-background-base); } table.g-table.g-table-striped:has(thead tr:last-child:nth-child(odd)):has( tbody tr:last-child:nth-child(even) ) tfoot tr:nth-child(odd) { background-color: var(--groupui-sys-color-background-stripe); } table.g-table.g-table-striped:has(thead tr:last-child:nth-child(even)):has( tbody tr:last-child:nth-child(odd) ) tfoot tr:nth-child(even) { background-color: var(--groupui-sys-color-background-base); } table.g-table.g-table-striped:has(thead tr:last-child:nth-child(even)):has( tbody tr:last-child:nth-child(odd) ) tfoot tr:nth-child(odd) { background-color: var(--groupui-sys-color-background-stripe); } table.g-table.g-table-striped:has(thead tr:last-child:nth-child(even)):has( tbody tr:last-child:nth-child(even) ) tfoot tr:nth-child(even) { background-color: var(--groupui-sys-color-background-stripe); } table.g-table.g-table-striped:has(thead tr:last-child:nth-child(even)):has( tbody tr:last-child:nth-child(even) ) tfoot tr:nth-child(odd) { background-color: var(--groupui-sys-color-background-base); } table.g-table.g-table-vertical-borders tr th, table.g-table.g-table-vertical-borders tr td { border-right-width: var(--groupui-sys-border-width-s); } table.g-table.g-table-vertical-borders tr th:first-child, table.g-table.g-table-vertical-borders tr td:first-child { border-left-width: var(--groupui-sys-border-width-s); } table.g-table.g-table-vertical-borders tr:first-child th, table.g-table.g-table-vertical-borders tr:first-child td { border-top-width: var(--groupui-sys-border-width-s); } table.g-table.g-table-vertical-borders tr:last-child th, table.g-table.g-table-vertical-borders tr:last-child td { border-bottom-color: var(--groupui-sys-color-line-weak); } table.g-table.g-table-no-horizontal-borders tr th, table.g-table.g-table-no-horizontal-borders tr td, table.g-table.g-table-no-horizontal-borders tr:first-child th, table.g-table.g-table-no-horizontal-borders tr:first-child td, table.g-table.g-table-no-horizontal-borders tr:last-child th, table.g-table.g-table-no-horizontal-borders tr:last-child td { border-top-width: 0; border-bottom-width: 0; } table.g-table.g-table-sticky-head tr:has(th):first-child { position: sticky; top: 0; z-index: 1; } table.g-table.g-table-small tr th, table.g-table.g-table-small tr td { padding-top: var(--groupui-sys-spacing-200); padding-bottom: var(--groupui-sys-spacing-200); } table.g-table.g-table-large tr th, table.g-table.g-table-large tr td { padding-top: var(--groupui-sys-spacing-400); padding-bottom: var(--groupui-sys-spacing-400); } table.g-table.g-table-fixed-size tr td { padding-top: var(--groupui-sys-spacing-0); padding-bottom: var(--groupui-sys-spacing-0); } table.g-table.g-table-fixed-size tr td > * { height: calc( var(--groupui-sys-spacing-1200) - var(--groupui-sys-border-width-s) ); max-height: calc( var(--groupui-sys-spacing-1200) - var(--groupui-sys-border-width-s) ); } table.g-table.g-table-fixed-size.g-table-small tr td > * { height: calc( var(--groupui-sys-spacing-1000) - var(--groupui-sys-border-width-s) ); max-height: calc( var(--groupui-sys-spacing-1000) - var(--groupui-sys-border-width-s) ); } table.g-table.g-table-fixed-size.g-table-large tr td > * { height: calc( var(--groupui-sys-spacing-1400) - var(--groupui-sys-border-width-s) ); max-height: calc( var(--groupui-sys-spacing-1400) - var(--groupui-sys-border-width-s) ); } /** * ---------------------------- * GroupUi Tabs - g-tabs * ---------------------------- */ .g-tabs { font-family: var(--groupui-sys-font-family-primary), sans-serif; } .g-tabs .g-tabs-list { position: relative; display: flex; flex-wrap: wrap; width: 100%; column-gap: var(--groupui-sys-spacing-0); } .g-tabs .g-tabs-list::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: var(--groupui-sys-border-width-s); background-color: var(--groupui-sys-color-line-weak); } .g-tabs .g-tabs-list input[type='radio'] { display: none; } .g-tabs .g-tabs-list .g-tab { position: relative; cursor: pointer; display: flex; flex-shrink: 0; justify-content: center; color: var(--groupui-sys-color-navigation-unselected-basic-default); font-size: var(--groupui-sys-font-size-400); line-height: var(--groupui-sys-line-height-xxl); padding: var(--groupui-sys-spacing-300) var(--groupui-sys-spacing-600); gap: var(--groupui-sys-spacing-300); } .g-tabs .g-tabs-list .g-tab:hover { color: var(--groupui-sys-color-navigation-unselected-basic-hover); background-color: var(--groupui-sys-color-action-subtle-hover); } .g-tabs .g-tabs-list .g-tab:hover .g-tab-icon { color: var(--groupui-sys-color-navigation-unselected-basic-hover); } .g-tabs .g-tabs-list .g-tab:active { color: var(--groupui-sys-color-navigation-unselected-basic-pressed); background-color: var(--groupui-sys-color-action-subtle-pressed); } .g-tabs .g-tabs-list .g-tab:active .g-tab-icon { color: var(--groupui-sys-color-navigation-unselected-basic-pressed); } .g-tabs .g-tabs-list .g-tab:focus-visible { outline: none; color: var(--groupui-sys-color-navigation-selected-basic-default); padding: calc( var(--groupui-sys-spacing-300) - var(--groupui-sys-border-width-m) ) calc(var(--groupui-sys-spacing-600) - var(--groupui-sys-border-width-m)); border: var(--groupui-sys-border-width-m) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-action-basic-default); } .g-tabs .g-tabs-list .g-tab:focus-visible .g-tab-icon { color: var(--groupui-sys-color-navigation-selected-basic-default); } .g-tabs .g-tabs-list .g-tab:has(+ input:checked) { color: var(--groupui-sys-color-navigation-selected-basic-default); padding-bottom: calc( var(--groupui-sys-spacing-300) - var(--groupui-sys-border-width-m) ); border-bottom: var(--groupui-sys-border-width-m) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-action-basic-default); } .g-tabs .g-tabs-list .g-tab:has(+ input:checked) .g-tab-icon { color: var(--groupui-sys-color-navigation-selected-basic-default); } .g-tabs .g-tabs-list .g-tab:has(+ input:checked):hover { color: var(--groupui-sys-color-navigation-selected-basic-hover); } .g-tabs .g-tabs-list .g-tab:has(+ input:checked):hover .g-tab-icon { color: var(--groupui-sys-color-navigation-selected-basic-hover); } .g-tabs .g-tabs-list .g-tab:has(+ input:checked):active { color: var(--groupui-sys-color-navigation-selected-basic-pressed); } .g-tabs .g-tabs-list .g-tab:has(+ input:checked):active .g-tab-icon { color: var(--groupui-sys-color-navigation-selected-basic-pressed); } .g-tabs .g-tabs-list .g-tab .g-tab-icon { width: var(--groupui-sys-icon-size-m); height: var(--groupui-sys-icon-size-m); color: var(--groupui-sys-color-navigation-unselected-basic-default); } .g-tabs .g-tabs-list .g-tab:has(+ input:disabled) { cursor: not-allowed; color: var(--groupui-sys-color-action-basic-disabled); } .g-tabs .g-tabs-list .g-tab:has(+ input:disabled):hover, .g-tabs .g-tabs-list .g-tab:has(+ input:disabled):active { background: none; } .g-tabs .g-tabs-list .g-tab:has(+ input:disabled):focus { outline: none; padding: var(--groupui-sys-spacing-300) var(--groupui-sys-spacing-600); border: none; } .g-tabs .g-tabs-list .g-tab:has(+ input:disabled) .g-tab-icon { color: var(--groupui-sys-color-action-basic-disabled); } .g-tabs .g-tabs-content { margin: var(--groupui-sys-spacing-600) var(--groupui-sys-spacing-0); } .g-tabs .g-tabs-content .g-tab-content { display: none; } .g-tabs .g-tabs-content .g-tab-content.g-tab-content-visible { display: inherit; } .g-tabs.g-tabs-no-padding .g-tabs-list { column-gap: var(--groupui-sys-spacing-800); } .g-tabs.g-tabs-no-padding .g-tabs-list .g-tab, .g-tabs.g-tabs-no-padding .g-tabs-list .g-tab:has(+ input:disabled) { padding-left: var(--groupui-sys-spacing-0); padding-right: var(--groupui-sys-spacing-0); } .g-tabs.g-tabs-no-padding .g-tabs-list .g-tab:focus, .g-tabs.g-tabs-no-padding .g-tabs-list .g-tab:has(+ input:disabled):focus { border-left: none; border-right: none; } .g-tabs.g-tabs-full-width .g-tabs-list { gap: var(--groupui-sys-spacing-0); } .g-tabs.g-tabs-full-width .g-tabs-list .g-tab { flex-grow: 1; } /** * ---------------------------- * GroupUi Tag - g-tag * ---------------------------- */ .g-tag { background-color: var(--groupui-sys-color-information-basic-default); color: var(--groupui-sys-color-on-information-basic-default); border-width: var(--groupui-sys-border-width-s); border-style: var(--groupui-sys-stroke-style-primary); border-color: var(--groupui-sys-color-information-basic-default); border-radius: var(--groupui-sys-border-radius-xl); padding: var(--groupui-sys-spacing-50) var(--groupui-sys-spacing-200); font-family: var(--groupui-sys-font-family-primary), sans-serif; font-size: var(--groupui-sys-font-size-300); line-height: var(--groupui-sys-line-height-xxl); font-weight: var(--groupui-sys-font-weight-action); display: inline-flex; align-items: center; justify-content: center; gap: var(--groupui-sys-spacing-100); height: fit-content; } .g-tag .g-tag-icon { color: var(--groupui-sys-color-on-action-basic-default); } .g-tag.g-tag-secondary { background-color: var(--groupui-sys-color-information-subtle-default); color: var(--groupui-sys-color-text-normal); } .g-tag.g-tag-secondary .g-tag-icon { color: var(--groupui-sys-color-information-basic-default); } .g-tag.g-tag-tertiary { background-color: var(--groupui-sys-color-information-weak-default); border-color: var(--groupui-sys-color-information-weak-default); color: var(--groupui-sys-color-text-normal); } .g-tag.g-tag-tertiary .g-tag-icon { color: var(--groupui-sys-color-information-basic-default); } .g-tag.g-tag-success { background-color: var(--groupui-sys-color-success-basic-default); border-color: var(--groupui-sys-color-success-basic-default); color: var(--groupui-sys-color-on-success-basic-default); } .g-tag.g-tag-success .g-tag-icon { color: var(--groupui-sys-color-on-success-basic-default); } .g-tag.g-tag-success.g-tag-secondary { background-color: var(--groupui-sys-color-success-subtle-default); border-color: var(--groupui-sys-color-success-basic-default); color: var(--groupui-sys-color-text-normal); } .g-tag.g-tag-success.g-tag-secondary .g-tag-icon { color: var(--groupui-sys-color-success-basic-default); } .g-tag.g-tag-success.g-tag-tertiary { background-color: var(--groupui-sys-color-success-weak-default); border-color: var(--groupui-sys-color-success-weak-default); color: var(--groupui-sys-color-text-normal); } .g-tag.g-tag-success.g-tag-tertiary .g-tag-icon { color: var(--groupui-sys-color-success-basic-default); } .g-tag.g-tag-warning { background-color: var(--groupui-sys-color-warning-basic-default); border-color: var(--groupui-sys-color-warning-basic-default); color: var(--groupui-sys-color-on-warning-basic-default); } .g-tag.g-tag-warning .g-tag-icon { color: var(--groupui-sys-color-on-warning-basic-default); } .g-tag.g-tag-warning.g-tag-secondary { background-color: var(--groupui-sys-color-warning-subtle-default); border-color: var(--groupui-sys-color-warning-basic-default); color: var(--groupui-sys-color-text-normal); } .g-tag.g-tag-warning.g-tag-secondary .g-tag-icon { color: var(--groupui-sys-color-warning-basic-default); } .g-tag.g-tag-warning.g-tag-tertiary { background-color: var(--groupui-sys-color-warning-weak-default); border-color: var(--groupui-sys-color-warning-weak-default); color: var(--groupui-sys-color-text-normal); } .g-tag.g-tag-warning.g-tag-tertiary .g-tag-icon { color: var(--groupui-sys-color-warning-basic-default); } .g-tag.g-tag-danger { background-color: var(--groupui-sys-color-danger-basic-default); border-color: var(--groupui-sys-color-danger-basic-default); color: var(--groupui-sys-color-on-danger-basic-default); } .g-tag.g-tag-danger .g-tag-icon { color: var(--groupui-sys-color-on-danger-basic-default); } .g-tag.g-tag-danger.g-tag-secondary { background-color: var(--groupui-sys-color-danger-subtle-default); border-color: var(--groupui-sys-color-danger-basic-default); color: var(--groupui-sys-color-text-normal); } .g-tag.g-tag-danger.g-tag-secondary .g-tag-icon { color: var(--groupui-sys-color-danger-basic-default); } .g-tag.g-tag-danger.g-tag-tertiary { background-color: var(--groupui-sys-color-danger-weak-default); border-color: var(--groupui-sys-color-danger-weak-default); color: var(--groupui-sys-color-text-normal); } .g-tag.g-tag-danger.g-tag-tertiary .g-tag-icon { color: var(--groupui-sys-color-danger-basic-default); } .g-tag.g-tag-neutral { background-color: var(--groupui-sys-color-neutral-basic-default); border-color: var(--groupui-sys-color-neutral-basic-default); color: var(--groupui-sys-color-on-neutral-basic-default); } .g-tag.g-tag-neutral .g-tag-icon { color: var(--groupui-sys-color-on-neutral-basic-default); } .g-tag.g-tag-neutral.g-tag-secondary { background-color: var(--groupui-sys-color-neutral-subtle-default); border-color: var(--groupui-sys-color-neutral-basic-default); color: var(--groupui-sys-color-text-normal); } .g-tag.g-tag-neutral.g-tag-secondary .g-tag-icon { color: var(--groupui-sys-color-neutral-basic-default); } .g-tag.g-tag-neutral.g-tag-tertiary { background-color: var(--groupui-sys-color-neutral-weak-default); border-color: var(--groupui-sys-color-neutral-weak-default); color: var(--groupui-sys-color-text-normal); } .g-tag.g-tag-neutral.g-tag-tertiary .g-tag-icon { color: var(--groupui-sys-color-neutral-basic-default); } .g-tag.g-tag-accent-01 { background-color: var(--groupui-sys-color-accent-basic-default-01); border-color: var(--groupui-sys-color-accent-basic-default-01); color: var(--groupui-sys-color-on-accent-basic-default-01); } .g-tag.g-tag-accent-01 .g-tag-icon { color: var(--groupui-sys-color-on-accent-basic-default-01); } .g-tag.g-tag-accent-01.g-tag-secondary { background-color: var(--groupui-sys-color-accent-subtle-default-01); border-color: var(--groupui-sys-color-accent-basic-default-01); color: var(--groupui-sys-color-text-normal); } .g-tag.g-tag-accent-01.g-tag-secondary .g-tag-icon { color: var(--groupui-sys-color-accent-basic-default-01); } .g-tag.g-tag-accent-01.g-tag-tertiary { background-color: var(--groupui-sys-color-accent-weak-default-01); border-color: var(--groupui-sys-color-line-ghost); color: var(--groupui-sys-color-text-normal); } .g-tag.g-tag-accent-01.g-tag-tertiary .g-tag-icon { color: var(--groupui-sys-color-accent-basic-default-01); } .g-tag.g-tag-accent-02 { background-color: var(--groupui-sys-color-accent-basic-default-02); border-color: var(--groupui-sys-color-accent-basic-default-02); color: var(--groupui-sys-color-on-accent-basic-default-02); } .g-tag.g-tag-accent-02 .g-tag-icon { color: var(--groupui-sys-color-on-accent-basic-default-02); } .g-tag.g-tag-accent-02.g-tag-secondary { background-color: var(--groupui-sys-color-accent-subtle-default-02); border-color: var(--groupui-sys-color-accent-basic-default-02); color: var(--groupui-sys-color-text-normal); } .g-tag.g-tag-accent-02.g-tag-secondary .g-tag-icon { color: var(--groupui-sys-color-accent-basic-default-02); } .g-tag.g-tag-accent-02.g-tag-tertiary { background-color: var(--groupui-sys-color-accent-weak-default-02); border-color: var(--groupui-sys-color-line-ghost); color: var(--groupui-sys-color-text-normal); } .g-tag.g-tag-accent-02.g-tag-tertiary .g-tag-icon { color: var(--groupui-sys-color-accent-basic-default-02); } .g-tag.g-tag-accent-03 { background-color: var(--groupui-sys-color-accent-basic-default-03); border-color: var(--groupui-sys-color-accent-basic-default-03); color: var(--groupui-sys-color-on-accent-basic-default-03); } .g-tag.g-tag-accent-03 .g-tag-icon { color: var(--groupui-sys-color-on-accent-basic-default-03); } .g-tag.g-tag-accent-03.g-tag-secondary { background-color: var(--groupui-sys-color-accent-subtle-default-03); border-color: var(--groupui-sys-color-accent-basic-default-03); color: var(--groupui-sys-color-text-normal); } .g-tag.g-tag-accent-03.g-tag-secondary .g-tag-icon { color: var(--groupui-sys-color-accent-basic-default-03); } .g-tag.g-tag-accent-03.g-tag-tertiary { background-color: var(--groupui-sys-color-accent-weak-default-03); border-color: var(--groupui-sys-color-line-ghost); color: var(--groupui-sys-color-text-normal); } .g-tag.g-tag-accent-03.g-tag-tertiary .g-tag-icon { color: var(--groupui-sys-color-accent-basic-default-03); } .g-tag.g-tag-accent-04 { background-color: var(--groupui-sys-color-accent-basic-default-04); border-color: var(--groupui-sys-color-accent-basic-default-04); color: var(--groupui-sys-color-on-accent-basic-default-04); } .g-tag.g-tag-accent-04 .g-tag-icon { color: var(--groupui-sys-color-on-accent-basic-default-04); } .g-tag.g-tag-accent-04.g-tag-secondary { background-color: var(--groupui-sys-color-accent-subtle-default-04); border-color: var(--groupui-sys-color-accent-basic-default-04); color: var(--groupui-sys-color-text-normal); } .g-tag.g-tag-accent-04.g-tag-secondary .g-tag-icon { color: var(--groupui-sys-color-accent-basic-default-04); } .g-tag.g-tag-accent-04.g-tag-tertiary { background-color: var(--groupui-sys-color-accent-weak-default-04); border-color: var(--groupui-sys-color-line-ghost); color: var(--groupui-sys-color-text-normal); } .g-tag.g-tag-accent-04.g-tag-tertiary .g-tag-icon { color: var(--groupui-sys-color-accent-basic-default-04); } .g-tag.g-tag-accent-05 { background-color: var(--groupui-sys-color-accent-basic-default-05); border-color: var(--groupui-sys-color-accent-basic-default-05); color: var(--groupui-sys-color-on-accent-basic-default-05); } .g-tag.g-tag-accent-05 .g-tag-icon { color: var(--groupui-sys-color-on-accent-basic-default-05); } .g-tag.g-tag-accent-05.g-tag-secondary { background-color: var(--groupui-sys-color-accent-subtle-default-05); border-color: var(--groupui-sys-color-accent-basic-default-05); color: var(--groupui-sys-color-text-normal); } .g-tag.g-tag-accent-05.g-tag-secondary .g-tag-icon { color: var(--groupui-sys-color-accent-basic-default-05); } .g-tag.g-tag-accent-05.g-tag-tertiary { background-color: var(--groupui-sys-color-accent-weak-default-05); border-color: var(--groupui-sys-color-line-ghost); color: var(--groupui-sys-color-text-normal); } .g-tag.g-tag-accent-05.g-tag-tertiary .g-tag-icon { color: var(--groupui-sys-color-accent-basic-default-05); } /** * ---------------------------- * GroupUi Input - g-textarea * ---------------------------- */ :not(textarea).g-textarea { position: relative; letter-spacing: var(--groupui-sys-spacing-0); font-family: var(--groupui-sys-font-family-primary); font-size: var(--groupui-sys-font-size-400); border-radius: var(--groupui-sys-border-radius-s); margin: var(--groupui-sys-spacing-0); color: var(--groupui-sys-color-text-normal); border: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-action-muted-default); } :not(textarea).g-textarea:hover { border-color: var(--groupui-sys-color-action-basic-default); } :not(textarea).g-textarea:focus-within { outline: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-action-basic-default); border-color: var(--groupui-sys-color-action-basic-default); } :not(textarea).g-textarea > .g-textarea-icon { position: absolute; top: var(--groupui-sys-spacing-200); right: var(--groupui-sys-spacing-300); min-width: var(--groupui-sys-icon-size-m); min-height: var(--groupui-sys-icon-size-m); width: var(--groupui-sys-icon-size-m); height: var(--groupui-sys-icon-size-m); } :not(textarea).g-textarea:not( .g-textarea-disabled, .g-textarea-readonly, :has(textarea.g-textarea-disabled), :has(textarea.g-textarea-readonly), :has(textarea:disabled), :has(textarea:read-only), :is(textarea) ).g-textarea-success, :not(textarea).g-textarea:is(textarea):not( :disabled, .disabled, :read-only, .disabled ).g-textarea-success { border-color: var(--groupui-sys-color-success-basic-default); } :not(textarea).g-textarea:not( .g-textarea-disabled, .g-textarea-readonly, :has(textarea.g-textarea-disabled), :has(textarea.g-textarea-readonly), :has(textarea:disabled), :has(textarea:read-only), :is(textarea) ).g-textarea-success:focus-within, :not(textarea).g-textarea:is(textarea):not( :disabled, .disabled, :read-only, .disabled ).g-textarea-success:focus-within { outline: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-success-basic-default); border-color: var(--groupui-sys-color-success-basic-default); } :not(textarea).g-textarea:not( .g-textarea-disabled, .g-textarea-readonly, :has(textarea.g-textarea-disabled), :has(textarea.g-textarea-readonly), :has(textarea:disabled), :has(textarea:read-only), :is(textarea) ).g-textarea-success:hover, :not(textarea).g-textarea:is(textarea):not( :disabled, .disabled, :read-only, .disabled ).g-textarea-success:hover { border-color: var(--groupui-sys-color-success-basic-hover); } :not(textarea).g-textarea:not( .g-textarea-disabled, .g-textarea-readonly, :has(textarea.g-textarea-disabled), :has(textarea.g-textarea-readonly), :has(textarea:disabled), :has(textarea:read-only), :is(textarea) ).g-textarea-danger, :not(textarea).g-textarea:is(textarea):not( :disabled, .disabled, :read-only, .disabled ).g-textarea-danger { border-color: var(--groupui-sys-color-danger-basic-default); } :not(textarea).g-textarea:not( .g-textarea-disabled, .g-textarea-readonly, :has(textarea.g-textarea-disabled), :has(textarea.g-textarea-readonly), :has(textarea:disabled), :has(textarea:read-only), :is(textarea) ).g-textarea-danger:focus-within, :not(textarea).g-textarea:is(textarea):not( :disabled, .disabled, :read-only, .disabled ).g-textarea-danger:focus-within { outline: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-danger-basic-default); border-color: var(--groupui-sys-color-danger-basic-default); } :not(textarea).g-textarea:not( .g-textarea-disabled, .g-textarea-readonly, :has(textarea.g-textarea-disabled), :has(textarea.g-textarea-readonly), :has(textarea:disabled), :has(textarea:read-only), :is(textarea) ).g-textarea-danger:hover, :not(textarea).g-textarea:is(textarea):not( :disabled, .disabled, :read-only, .disabled ).g-textarea-danger:hover { border-color: var(--groupui-sys-color-danger-basic-hover); } :not(textarea).g-textarea:not( .g-textarea-disabled, .g-textarea-readonly, :has(textarea.g-textarea-disabled), :has(textarea.g-textarea-readonly), :has(textarea:disabled), :has(textarea:read-only), :is(textarea) ).g-textarea-warning, :not(textarea).g-textarea:is(textarea):not( :disabled, .disabled, :read-only, .disabled ).g-textarea-warning { border-color: var(--groupui-sys-color-warning-basic-default); } :not(textarea).g-textarea:not( .g-textarea-disabled, .g-textarea-readonly, :has(textarea.g-textarea-disabled), :has(textarea.g-textarea-readonly), :has(textarea:disabled), :has(textarea:read-only), :is(textarea) ).g-textarea-warning:focus-within, :not(textarea).g-textarea:is(textarea):not( :disabled, .disabled, :read-only, .disabled ).g-textarea-warning:focus-within { outline: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-warning-basic-default); border-color: var(--groupui-sys-color-warning-basic-default); } :not(textarea).g-textarea:not( .g-textarea-disabled, .g-textarea-readonly, :has(textarea.g-textarea-disabled), :has(textarea.g-textarea-readonly), :has(textarea:disabled), :has(textarea:read-only), :is(textarea) ).g-textarea-warning:hover, :not(textarea).g-textarea:is(textarea):not( :disabled, .disabled, :read-only, .disabled ).g-textarea-warning:hover { border-color: var(--groupui-sys-color-warning-basic-hover); } :not(textarea).g-textarea:not( .g-textarea-disabled, .g-textarea-readonly, :has(textarea.g-textarea-disabled), :has(textarea.g-textarea-readonly), :has(textarea:disabled), :has(textarea:read-only), :is(textarea) ).g-textarea-success > .g-textarea-status:nth-of-type(1), :not(textarea).g-textarea:is(textarea):not( :disabled, .disabled, :read-only, .disabled ).g-textarea-success > .g-textarea-status:nth-of-type(1) { color: var(--groupui-sys-color-success-basic-default); display: block; } :not(textarea).g-textarea:not( .g-textarea-disabled, .g-textarea-readonly, :has(textarea.g-textarea-disabled), :has(textarea.g-textarea-readonly), :has(textarea:disabled), :has(textarea:read-only), :is(textarea) ).g-textarea-danger > .g-textarea-status:nth-of-type(1), :not(textarea).g-textarea:is(textarea):not( :disabled, .disabled, :read-only, .disabled ).g-textarea-danger > .g-textarea-status:nth-of-type(1) { color: var(--groupui-sys-color-danger-basic-default); display: block; } :not(textarea).g-textarea:not( .g-textarea-disabled, .g-textarea-readonly, :has(textarea.g-textarea-disabled), :has(textarea.g-textarea-readonly), :has(textarea:disabled), :has(textarea:read-only), :is(textarea) ).g-textarea-warning > .g-textarea-status:nth-of-type(1), :not(textarea).g-textarea:is(textarea):not( :disabled, .disabled, :read-only, .disabled ).g-textarea-warning > .g-textarea-status:nth-of-type(1) { color: var(--groupui-sys-color-warning-basic-default); display: block; } :not(textarea).g-textarea:not( .g-textarea-disabled, .g-textarea-readonly, :has(textarea.g-textarea-disabled), :has(textarea.g-textarea-readonly), :has(textarea:disabled), :has(textarea:read-only), :is(textarea) ):has(.g-textarea-icon) > textarea, :not(textarea).g-textarea:is(textarea):not( :disabled, .disabled, :read-only, .disabled ):has(.g-textarea-icon) > textarea { padding-right: calc( 2 * var(--groupui-sys-spacing-250) + var(--groupui-sys-icon-size-m) ); } :not(textarea).g-textarea.g-textarea-readonly, :not(textarea).g-textarea:is(textarea):read-only { background-color: var(--groupui-sys-color-background-canvas); } :not(textarea).g-textarea.g-textarea-disabled, :not(textarea).g-textarea:is(textarea):disabled { background-color: var(--groupui-sys-color-background-canvas); outline: none; border-color: var(--groupui-sys-color-action-basic-disabled); color: var(--groupui-sys-color-action-basic-disabled); } :not(textarea).g-textarea.g-textarea-disabled:hover, :not(textarea).g-textarea:is(textarea):disabled:hover { cursor: not-allowed; border-color: var(--groupui-sys-color-action-basic-disabled); } :not(textarea).g-textarea.g-textarea-disabled:focus, :not(textarea).g-textarea:is(textarea):disabled:focus { outline: none; box-shadow: none; } :not(textarea).g-textarea textarea { all: unset; line-height: var(--groupui-sys-line-height-xxl); width: 100%; display: block; overflow-wrap: anywhere; box-sizing: border-box; padding: var(--groupui-sys-spacing-200) var(--groupui-sys-spacing-300); } :not(textarea).g-textarea textarea::placeholder { color: var(--groupui-sys-color-text-weakest); } :not(textarea).g-textarea textarea:read-only { cursor: text; } :not(textarea).g-textarea .g-textarea-status { display: none; } :not(textarea).g-textarea.g-textarea-small { font-size: var(--groupui-sys-font-size-350); } :not(textarea).g-textarea.g-textarea-small > .g-textarea-icon { top: calc(var(--groupui-sys-spacing-200) + var(--groupui-sys-spacing-50)); min-width: var(--groupui-sys-icon-size-s); min-height: var(--groupui-sys-icon-size-s); width: var(--groupui-sys-icon-size-s); height: var(--groupui-sys-icon-size-s); } :not(textarea).g-textarea.g-textarea-small:has(.g-textarea-icon) > textarea { padding-right: calc( 2 * var(--groupui-sys-spacing-250) + var(--groupui-sys-icon-size-s) ); } textarea.g-textarea { all: unset; line-height: var(--groupui-sys-line-height-xxl); width: 100%; display: block; overflow-wrap: anywhere; box-sizing: border-box; padding: var(--groupui-sys-spacing-200) var(--groupui-sys-spacing-300); position: relative; letter-spacing: var(--groupui-sys-spacing-0); font-family: var(--groupui-sys-font-family-primary); font-size: var(--groupui-sys-font-size-400); border-radius: var(--groupui-sys-border-radius-s); margin: var(--groupui-sys-spacing-0); color: var(--groupui-sys-color-text-normal); border: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-action-muted-default); } textarea.g-textarea::placeholder { color: var(--groupui-sys-color-text-weakest); } textarea.g-textarea:read-only { cursor: text; } textarea.g-textarea:hover { border-color: var(--groupui-sys-color-action-basic-default); } textarea.g-textarea:focus-within { outline: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-action-basic-default); border-color: var(--groupui-sys-color-action-basic-default); } textarea.g-textarea > .g-textarea-icon { position: absolute; top: var(--groupui-sys-spacing-200); right: var(--groupui-sys-spacing-300); min-width: var(--groupui-sys-icon-size-m); min-height: var(--groupui-sys-icon-size-m); width: var(--groupui-sys-icon-size-m); height: var(--groupui-sys-icon-size-m); } textarea.g-textarea:not( .g-textarea-disabled, .g-textarea-readonly, :has(textarea.g-textarea-disabled), :has(textarea.g-textarea-readonly), :has(textarea:disabled), :has(textarea:read-only), :is(textarea) ).g-textarea-success, textarea.g-textarea:is(textarea):not( :disabled, .disabled, :read-only, .disabled ).g-textarea-success { border-color: var(--groupui-sys-color-success-basic-default); } textarea.g-textarea:not( .g-textarea-disabled, .g-textarea-readonly, :has(textarea.g-textarea-disabled), :has(textarea.g-textarea-readonly), :has(textarea:disabled), :has(textarea:read-only), :is(textarea) ).g-textarea-success:focus-within, textarea.g-textarea:is(textarea):not( :disabled, .disabled, :read-only, .disabled ).g-textarea-success:focus-within { outline: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-success-basic-default); border-color: var(--groupui-sys-color-success-basic-default); } textarea.g-textarea:not( .g-textarea-disabled, .g-textarea-readonly, :has(textarea.g-textarea-disabled), :has(textarea.g-textarea-readonly), :has(textarea:disabled), :has(textarea:read-only), :is(textarea) ).g-textarea-success:hover, textarea.g-textarea:is(textarea):not( :disabled, .disabled, :read-only, .disabled ).g-textarea-success:hover { border-color: var(--groupui-sys-color-success-basic-hover); } textarea.g-textarea:not( .g-textarea-disabled, .g-textarea-readonly, :has(textarea.g-textarea-disabled), :has(textarea.g-textarea-readonly), :has(textarea:disabled), :has(textarea:read-only), :is(textarea) ).g-textarea-danger, textarea.g-textarea:is(textarea):not( :disabled, .disabled, :read-only, .disabled ).g-textarea-danger { border-color: var(--groupui-sys-color-danger-basic-default); } textarea.g-textarea:not( .g-textarea-disabled, .g-textarea-readonly, :has(textarea.g-textarea-disabled), :has(textarea.g-textarea-readonly), :has(textarea:disabled), :has(textarea:read-only), :is(textarea) ).g-textarea-danger:focus-within, textarea.g-textarea:is(textarea):not( :disabled, .disabled, :read-only, .disabled ).g-textarea-danger:focus-within { outline: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-danger-basic-default); border-color: var(--groupui-sys-color-danger-basic-default); } textarea.g-textarea:not( .g-textarea-disabled, .g-textarea-readonly, :has(textarea.g-textarea-disabled), :has(textarea.g-textarea-readonly), :has(textarea:disabled), :has(textarea:read-only), :is(textarea) ).g-textarea-danger:hover, textarea.g-textarea:is(textarea):not( :disabled, .disabled, :read-only, .disabled ).g-textarea-danger:hover { border-color: var(--groupui-sys-color-danger-basic-hover); } textarea.g-textarea:not( .g-textarea-disabled, .g-textarea-readonly, :has(textarea.g-textarea-disabled), :has(textarea.g-textarea-readonly), :has(textarea:disabled), :has(textarea:read-only), :is(textarea) ).g-textarea-warning, textarea.g-textarea:is(textarea):not( :disabled, .disabled, :read-only, .disabled ).g-textarea-warning { border-color: var(--groupui-sys-color-warning-basic-default); } textarea.g-textarea:not( .g-textarea-disabled, .g-textarea-readonly, :has(textarea.g-textarea-disabled), :has(textarea.g-textarea-readonly), :has(textarea:disabled), :has(textarea:read-only), :is(textarea) ).g-textarea-warning:focus-within, textarea.g-textarea:is(textarea):not( :disabled, .disabled, :read-only, .disabled ).g-textarea-warning:focus-within { outline: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-color-warning-basic-default); border-color: var(--groupui-sys-color-warning-basic-default); } textarea.g-textarea:not( .g-textarea-disabled, .g-textarea-readonly, :has(textarea.g-textarea-disabled), :has(textarea.g-textarea-readonly), :has(textarea:disabled), :has(textarea:read-only), :is(textarea) ).g-textarea-warning:hover, textarea.g-textarea:is(textarea):not( :disabled, .disabled, :read-only, .disabled ).g-textarea-warning:hover { border-color: var(--groupui-sys-color-warning-basic-hover); } textarea.g-textarea:not( .g-textarea-disabled, .g-textarea-readonly, :has(textarea.g-textarea-disabled), :has(textarea.g-textarea-readonly), :has(textarea:disabled), :has(textarea:read-only), :is(textarea) ).g-textarea-success > .g-textarea-status:nth-of-type(1), textarea.g-textarea:is(textarea):not( :disabled, .disabled, :read-only, .disabled ).g-textarea-success > .g-textarea-status:nth-of-type(1) { color: var(--groupui-sys-color-success-basic-default); display: block; } textarea.g-textarea:not( .g-textarea-disabled, .g-textarea-readonly, :has(textarea.g-textarea-disabled), :has(textarea.g-textarea-readonly), :has(textarea:disabled), :has(textarea:read-only), :is(textarea) ).g-textarea-danger > .g-textarea-status:nth-of-type(1), textarea.g-textarea:is(textarea):not( :disabled, .disabled, :read-only, .disabled ).g-textarea-danger > .g-textarea-status:nth-of-type(1) { color: var(--groupui-sys-color-danger-basic-default); display: block; } textarea.g-textarea:not( .g-textarea-disabled, .g-textarea-readonly, :has(textarea.g-textarea-disabled), :has(textarea.g-textarea-readonly), :has(textarea:disabled), :has(textarea:read-only), :is(textarea) ).g-textarea-warning > .g-textarea-status:nth-of-type(1), textarea.g-textarea:is(textarea):not( :disabled, .disabled, :read-only, .disabled ).g-textarea-warning > .g-textarea-status:nth-of-type(1) { color: var(--groupui-sys-color-warning-basic-default); display: block; } textarea.g-textarea:not( .g-textarea-disabled, .g-textarea-readonly, :has(textarea.g-textarea-disabled), :has(textarea.g-textarea-readonly), :has(textarea:disabled), :has(textarea:read-only), :is(textarea) ):has(.g-textarea-icon) > textarea, textarea.g-textarea:is(textarea):not( :disabled, .disabled, :read-only, .disabled ):has(.g-textarea-icon) > textarea { padding-right: calc( 2 * var(--groupui-sys-spacing-250) + var(--groupui-sys-icon-size-m) ); } textarea.g-textarea.g-textarea-readonly, textarea.g-textarea:is(textarea):read-only { background-color: var(--groupui-sys-color-background-canvas); } textarea.g-textarea.g-textarea-disabled, textarea.g-textarea:is(textarea):disabled { background-color: var(--groupui-sys-color-background-canvas); outline: none; border-color: var(--groupui-sys-color-action-basic-disabled); color: var(--groupui-sys-color-action-basic-disabled); } textarea.g-textarea.g-textarea-disabled:hover, textarea.g-textarea:is(textarea):disabled:hover { cursor: not-allowed; border-color: var(--groupui-sys-color-action-basic-disabled); } textarea.g-textarea.g-textarea-disabled:focus, textarea.g-textarea:is(textarea):disabled:focus { outline: none; box-shadow: none; } textarea.g-textarea.g-textarea-small { font-size: var(--groupui-sys-font-size-350); } /** * ---------------------------- * GroupUi Tooltip - g-tooltip * ---------------------------- */ .g-tooltip { position: absolute; display: block; top: 0; left: 0; width: max-content; background-color: var(--groupui-sys-color-background-inform); color: var(--groupui-sys-color-text-normal-inverse); box-shadow: var(--groupui-sys-shadow-m); border-radius: var(--groupui-sys-border-radius-s); padding: var(--groupui-sys-spacing-300); font-family: var(--groupui-sys-font-family-primary), sans-serif; font-weight: var(--groupui-sys-font-weight-normal); font-size: var(--groupui-sys-font-size-350); line-height: var(--groupui-sys-line-height-xxl); letter-spacing: var(--groupui-sys-letter-spacing-regular); } .g-tooltip .g-tooltip-content { display: inline-flex; align-items: center; gap: var(--groupui-sys-spacing-300); } .g-tooltip .g-tooltip-arrow { position: absolute; background: inherit; transform: rotate(45deg); width: var(--groupui-sys-spacing-200); height: var(--groupui-sys-spacing-200); } .g-tooltip.g-tooltip-inverted { background-color: var(--groupui-sys-color-background-base); color: var(--groupui-sys-color-text-normal); } /** * --------------------------------- * GroupUi Upload Button - g-upload-btn * --------------------------------- */ label.g-upload-btn { display: inline-flex; align-items: center; gap: var(--groupui-sys-spacing-200); width: max-content; padding: var(--groupui-sys-spacing-200) var(--groupui-sys-spacing-500); font-size: var(--groupui-sys-font-size-400); letter-spacing: var(--groupui-sys-letter-spacing-regular); font-family: var(--groupui-sys-font-family-primary), sans-serif; background: var(--groupui-sys-color-action-basic-default); color: var(--groupui-sys-color-on-action-basic-default); border-radius: var(--groupui-sys-border-radius-xl); cursor: pointer; } label.g-upload-btn input { /* hiding the input would make it inaccessible */ position: absolute; width: 1px; height: 1px; clip: rect( 0, 0, 0, 0 ); /* stylelint-disable-line property-no-deprecated, Fallback for old browsers */ clip-path: inset(50%); /* Modern browsers */ border: 0; overflow: hidden; white-space: nowrap; } label.g-upload-btn:not(label.g-upload-btn.g-upload-btn-disabled):hover { background: var(--groupui-sys-color-action-basic-hover); border-color: var(--groupui-sys-color-action-basic-hover); } label.g-upload-btn:not(label.g-upload-btn.g-upload-btn-disabled):active { background: var(--groupui-sys-color-action-basic-pressed); border-color: var(--groupui-sys-color-action-basic-pressed); } label.g-upload-btn:not(label.g-upload-btn.g-upload-btn-disabled):focus-within { outline: var(--groupui-sys-color-action-basic-default) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-spacing-50); outline-offset: var(--groupui-sys-spacing-50); } label.g-upload-btn .g-upload-btn-icon { color: var(--groupui-sys-color-on-action-basic-default); } label.g-upload-btn.g-upload-btn-small { font-size: var(--groupui-sys-font-size-350); padding: var(--groupui-sys-spacing-200) var(--groupui-sys-spacing-400); } label.g-upload-btn.g-upload-btn-large { font-size: var(--groupui-sys-font-size-450); padding: var(--groupui-sys-spacing-200) var(--groupui-sys-spacing-600); } label.g-upload-btn.g-upload-btn-disabled { background: var(--groupui-sys-color-action-basic-disabled); color: var(--groupui-sys-color-on-action-basic-disabled); cursor: not-allowed; }