/**
* * * * * * * * * * * * * * * * * * * * * * * * *
* GroupUi CSS Framework
* by GroupUi Team - VW SDC
* * * * * * * * * * * * * * * * * * * * * * * * *
*/
/**
* Autogenerated file (2025-09-24T08:15:04.565Z). 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-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-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-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-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-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-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-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-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-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-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 (2025-09-24T08:14:24.966Z). 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-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-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-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-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-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-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-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-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-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-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);
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 {
@layer indicator-default-vars, indicator-base, positions, colors;
width: fit-content;
height: fit-content;
position: relative;
}
@layer indicator-default-vars {
.g-badge {
--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));
--translateX: 50%;
--translateY: -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);
}
}
@layer indicator-base {
.g-badge .g-badge-content, .g-badge:not(:has(.g-badge-content))::after {
position: absolute;
background-color: var(--background-color);
top: var(--top);
right: var(--right);
left: var(--left);
bottom: var(--bottom);
border: var(--groupui-sys-border-width-s) var(--groupui-sys-stroke-style-primary) var(--border-color);
translate: var(--translateX) var(--translateY);
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);
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);
}
}
@layer positions {
.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));
--translateX: 50%;
--translateY: -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));
--translateX: -50%;
--translateY: -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));
--translateX: 50%;
--translateY: 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));
--translateX: -50%;
--translateY: 50%;
}
}
@layer colors {
.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-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:focus-visible,
.g-btn.g-btn-primary.g-btn-success:focus-visible {
outline: var(--groupui-sys-color-success-basic-default) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-spacing-50);
outline-offset: var(--groupui-sys-spacing-50);
}
.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:focus-visible,
.g-btn.g-btn-primary.g-btn-danger:focus-visible {
outline: var(--groupui-sys-color-danger-basic-default) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-spacing-50);
outline-offset: var(--groupui-sys-spacing-50);
}
.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:focus-visible,
.g-btn.g-btn-primary.g-btn-warning:focus-visible {
outline: var(--groupui-sys-color-warning-basic-default) var(--groupui-sys-stroke-style-primary) var(--groupui-sys-spacing-50);
outline-offset: var(--groupui-sys-spacing-50);
}
.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.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));
}
.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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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);
}
}
/**
* ----------------------------
* GroupUi Card - g-card
* ----------------------------
*/
.g-card {
display: block;
box-sizing: border-box;
outline: none;
position: relative;
font-family: var(--groupui-sys-font-family-primary);
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/latest/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/latest/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: 0;
outline: var(--groupui-sys-border-width-s) 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]):focus-visible,
label.g-checkbox.g-checkbox-danger input[type=checkbox]:not([disabled]):focus-visible {
outline-color: var(--groupui-sys-color-danger-basic-default);
}
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 .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);
}
/**
* ---------------------
* 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 (min-width: 960px) {
.g-font .g-font-h1,
.g-font h1 {
font-size: var(--groupui-sys-font-size-850);
}
}
@media (min-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 (min-width: 960px) {
.g-font .g-font-h2,
.g-font h2 {
font-size: var(--groupui-sys-font-size-750);
}
}
@media (min-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 (min-width: 960px) {
.g-font .g-font-h3,
.g-font h3 {
font-size: var(--groupui-sys-font-size-650);
}
}
@media (min-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 (min-width: 960px) {
.g-font .g-font-h4,
.g-font h4 {
font-size: var(--groupui-sys-font-size-550);
}
}
@media (min-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 (min-width: 960px) {
.g-font .g-font-h5,
.g-font h5 {
font-size: var(--groupui-sys-font-size-500);
}
}
@media (min-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 (min-width: 960px) {
.g-font .g-font-h6,
.g-font h6 {
font-size: var(--groupui-sys-font-size-450);
}
}
@media (min-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)));
}
}
@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))));
}
}
@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)))));
}
}
@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))))));
}
}
@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)))))));
}
}
.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)));
}
}
@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))));
}
}
@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)))));
}
}
@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))))));
}
}
@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)))))));
}
}
@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)));
}
}
@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))));
}
}
@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)))));
}
}
@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))))));
}
}
@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)))))));
}
}
.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)));
}
}
@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))));
}
}
@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)))));
}
}
@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))))));
}
}
@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)))))));
}
}
/*
* THIS FILE WAS AUTO GENERATED BY tools/icons-fetcher.mjs - DON'T EDIT MANUALLY
* LAST GENERATION: 2024-12-09T07:26:25.098Z
*/
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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/static/icons/vwgroup/alarm-48.svg");
}
i.g-icon.g-icon-arrow-back-16 {
width: 16px;
height: 16px;
mask-image: url("https://assets.groupui.vwapps.run/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/static/icons/vwgroup/car-body-48.svg");
}
i.g-icon.g-icon-car-body-extension-16 {
width: 16px;
height: 16px;
mask-image: url("https://assets.groupui.vwapps.run/latest/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/latest/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/latest/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/latest/static/icons/vwgroup/car-body-extension-48.svg");
}
i.g-icon.g-icon-car-crash-16 {
width: 16px;
height: 16px;
mask-image: url("https://assets.groupui.vwapps.run/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/static/icons/vwgroup/electronic-chip-48.svg");
}
i.g-icon.g-icon-elevator-16 {
width: 16px;
height: 16px;
mask-image: url("https://assets.groupui.vwapps.run/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/static/icons/vwgroup/file-video-48.svg");
}
i.g-icon.g-icon-filter-16 {
width: 16px;
height: 16px;
mask-image: url("https://assets.groupui.vwapps.run/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/static/icons/vwgroup/instagram-48.svg");
}
i.g-icon.g-icon-key-16 {
width: 16px;
height: 16px;
mask-image: url("https://assets.groupui.vwapps.run/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/static/icons/vwgroup/privacy-48.svg");
}
i.g-icon.g-icon-reload-16 {
width: 16px;
height: 16px;
mask-image: url("https://assets.groupui.vwapps.run/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/static/icons/vwgroup/smartphone-48.svg");
}
i.g-icon.g-icon-sort-16 {
width: 16px;
height: 16px;
mask-image: url("https://assets.groupui.vwapps.run/latest/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/latest/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/latest/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/latest/static/icons/vwgroup/sort-48.svg");
}
i.g-icon.g-icon-sorting-default-16 {
width: 16px;
height: 16px;
mask-image: url("https://assets.groupui.vwapps.run/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/static/icons/vwgroup/target-48.svg");
}
i.g-icon.g-icon-temperature-16 {
width: 16px;
height: 16px;
mask-image: url("https://assets.groupui.vwapps.run/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/static/icons/vwgroup/toolbox-eye-48.svg");
}
i.g-icon.g-icon-tools-16 {
width: 16px;
height: 16px;
mask-image: url("https://assets.groupui.vwapps.run/latest/static/icons/vwgroup/tools-16.svg");
}
i.g-icon.g-icon-tools-24 {
width: 24px;
height: 24px;
mask-image: url("https://assets.groupui.vwapps.run/latest/static/icons/vwgroup/tools-24.svg");
}
i.g-icon.g-icon-tools-32 {
width: 32px;
height: 32px;
mask-image: url("https://assets.groupui.vwapps.run/latest/static/icons/vwgroup/tools-32.svg");
}
i.g-icon.g-icon-tools-48 {
width: 48px;
height: 48px;
mask-image: url("https://assets.groupui.vwapps.run/latest/static/icons/vwgroup/tools-48.svg");
}
i.g-icon.g-icon-tooltip-16 {
width: 16px;
height: 16px;
mask-image: url("https://assets.groupui.vwapps.run/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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/latest/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);
}
.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.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.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);
}
/**
* ----------------------------
* 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-width: var(--groupui-sys-border-width-m);
outline-style: var(--groupui-sys-stroke-style-primary);
outline-offset: var(--groupui-sys-spacing-50);
outline-color: var(--groupui-sys-color-action-basic-default);
}
.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: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;
}
.g-loading {
--spinner-s: url('data:image/svg+xml;utf8,');
--track-s: url('data:image/svg+xml;utf8,');
--spinner-m: url('data:image/svg+xml;utf8,');
--track-m: url('data:image/svg+xml;utf8,');
--spinner-l: url('data:image/svg+xml;utf8,');
--track-l: url('data:image/svg+xml;utf8,');
--spinner-xl: url('data:image/svg+xml;utf8,');
--track-xl: url('data:image/svg+xml;utf8,');
--spinner-xxl: url('data:image/svg+xml;utf8, ');
--track-xxl: url('data:image/svg+xml;utf8, ');
--spinner-3xl: url('data:image/svg+xml;utf8, ');
--track-3xl: url('data:image/svg+xml;utf8, ');
--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 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;
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;
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-float);
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);
}
.g-toast.g-toast-information .g-toast-status {
color: var(--groupui-sys-color-information-basic-default);
}
.g-toast.g-toast-success:before {
background-color: var(--groupui-sys-color-success-basic-default);
}
.g-toast.g-toast-success .g-toast-status {
color: var(--groupui-sys-color-success-basic-default);
}
.g-toast.g-toast-warning:before {
background-color: var(--groupui-sys-color-warning-basic-default);
}
.g-toast.g-toast-warning .g-toast-status {
color: var(--groupui-sys-color-warning-basic-default);
}
.g-toast.g-toast-danger:before {
background-color: var(--groupui-sys-color-danger-basic-default);
}
.g-toast.g-toast-danger .g-toast-status {
color: var(--groupui-sys-color-danger-basic-default);
}
/**
* ---------------------------
* 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;
}
.g-popover summary::marker {
content: "";
}
.g-popover summary::-webkit-details-marker {
display: none;
}
.g-popover .g-popover-content {
position: absolute;
display: inline-block;
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));
}
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: 0;
outline: var(--groupui-sys-border-width-s) 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]):focus-visible,
label.g-radio-btn.g-radio-btn-danger input[type=radio]:not([disabled]):focus-visible {
outline-color: var(--groupui-sys-color-danger-basic-default);
}
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 Input - g-select
* ----------------------------
*/
.g-select:not(details) {
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) 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)::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/latest/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-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):hover {
border-color: var(--groupui-sys-color-action-basic-default);
}
.g-select:not(details):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):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):has(select[disabled]) select {
cursor: not-allowed;
color: var(--groupui-vwgroup-ref-color-grey-400);
}
.g-select:not(details):has(select[disabled])::after {
background-color: var(--groupui-vwgroup-ref-color-grey-400);
}
.g-select:not(details):has(select[disabled]) .g-select-icon:nth-of-type(1) {
display: none;
}
.g-select:not(details):has(select[disabled]) ~ .g-description {
color: var(--groupui-sys-color-action-basic-disabled);
}
.g-select:not(details).g-select-success:not(:has(select[disabled])) select:has(+ .g-select-icon), .g-select:not(details).g-select-warning:not(:has(select[disabled])) select:has(+ .g-select-icon), .g-select:not(details).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-success:not(:has(select[disabled])) .g-select-icon:nth-of-type(1), .g-select:not(details).g-select-warning:not(:has(select[disabled])) .g-select-icon:nth-of-type(1), .g-select:not(details).g-select-danger:not(:has(select[disabled])) .g-select-icon:nth-of-type(1) {
display: initial;
}
.g-select:not(details).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-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-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-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-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-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-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-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-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-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-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-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 {
position: relative;
}
details.g-select summary::marker {
content: "";
}
details.g-select summary::-webkit-details-marker {
display: none;
}
details.g-select .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 {
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/latest/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 {
border-color: var(--groupui-sys-color-action-basic-default);
}
details.g-select: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 {
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 {
display: none;
}
details.g-select .g-select-status {
grid-area: status;
}
details.g-select .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 {
position: absolute;
z-index: var(--groupui-sys-z-index-popover);
border: none;
display: grid;
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 {
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] {
-webkit-appearance: none;
appearance: none;
margin: var(--groupui-sys-spacing-0);
}
details.g-select .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 {
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 {
background-color: var(--groupui-sys-color-action-subtle-hover);
}
details.g-select .g-select-option:active {
background-color: var(--groupui-sys-color-action-subtle-pressed);
}
details.g-select .g-select-option:has(> input:checked) {
background-color: var(--groupui-sys-color-action-subtle-pressed);
}
details.g-select[open] > .g-select-input::after {
transform: rotate(180deg);
}
details.g-select.g-select-success .g-select-input {
border-color: var(--groupui-sys-color-success-basic-default);
}
details.g-select.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 {
border-color: var(--groupui-sys-color-success-basic-hover);
}
details.g-select.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 {
border-color: var(--groupui-sys-color-warning-basic-default);
}
details.g-select.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 {
border-color: var(--groupui-sys-color-warning-basic-hover);
}
details.g-select.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 {
border-color: var(--groupui-sys-color-danger-basic-default);
}
details.g-select.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 {
border-color: var(--groupui-sys-color-danger-basic-hover);
}
details.g-select.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 {
cursor: not-allowed;
}
details.g-select.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 {
background-color: var(--groupui-sys-color-action-basic-disabled);
}
details.g-select.g-select-disabled .g-select-status {
display: none;
}
/**
* ----------------------------
* 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/latest/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 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 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 {
background-color: var(--groupui-sys-color-background-base);
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 {
background-color: var(--groupui-sys-color-action-subtle-pressed);
}
table.g-table.g-table-striped tr:nth-child(2n) {
background-color: var(--groupui-sys-color-background-stripe);
}
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);
}
.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);
}