/*!********************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./assets/src/css/idtTheme/colors/generalColors.css ***! \********************************************************************************************************************************/ /* ⚠️ General colors - Value */ :root { --white: hsla(0, 0%, 100%, 1); --black: hsla(0, 0%, 0%, 1); --palettes-error-50: hsla(0, 100%, 97%, 1); --palettes-error-100: hsla(0, 100%, 94%, 1); --palettes-error-200: hsla(0, 100%, 89%, 1); --palettes-error-300: hsla(0, 100%, 81%, 1); --palettes-error-400: hsla(0, 100%, 70%, 1); --palettes-error-500: hsla(0, 97%, 60%, 1); --palettes-error-main-600: hsla(0, 83%, 52%, 1); --palettes-error-700: hsla(0, 85%, 42%, 1); --palettes-error-800: hsla(0, 80%, 35%, 1); --palettes-error-900: hsla(0, 72%, 31%, 1); --palettes-error-950: hsla(0, 85%, 15%, 1); --palettes-info-50: hsla(205, 100%, 97%, 1); --palettes-info-100: hsla(205, 100%, 93%, 1); --palettes-info-200: hsla(205, 100%, 87%, 1); --palettes-info-300: hsla(204, 100%, 78%, 1); --palettes-info-400: hsla(206, 100%, 67%, 1); --palettes-info-500: hsla(210, 99%, 60%, 1); --palettes-info-main-600: hsla(214, 91%, 54%, 1); --palettes-info-700: hsla(217, 83%, 48%, 1); --palettes-info-800: hsla(219, 77%, 40%, 1); --palettes-info-900: hsla(217, 70%, 33%, 1); --palettes-info-950: hsla(219, 63%, 21%, 1); --palettes-warning-50: hsla(33, 100%, 96%, 1); --palettes-warning-100: hsla(33, 100%, 92%, 1); --palettes-warning-200: hsla(31, 100%, 83%, 1); --palettes-warning-300: hsla(29, 100%, 72%, 1); --palettes-warning-400: hsla(26, 100%, 61%, 1); --palettes-warning-main-500: hsla(23, 100%, 57%, 1); --palettes-warning-600: hsla(19, 95%, 48%, 1); --palettes-warning-700: hsla(16, 93%, 40%, 1); --palettes-warning-800: hsla(13, 84%, 34%, 1); --palettes-warning-900: hsla(14, 79%, 28%, 1); --palettes-warning-950: hsla(11, 86%, 15%, 1); --palettes-success-50: hsla(118, 86%, 95%, 1); --palettes-success-100: hsla(142, 69%, 90%, 1); --palettes-success-200: hsla(146, 66%, 80%, 1); --palettes-success-300: hsla(150, 62%, 67%, 1); --palettes-success-main-400: hsla(152, 56%, 46%, 1); --palettes-success-500: hsla(154, 73%, 39%, 1); --palettes-success-600: hsla(155, 82%, 30%, 1); --palettes-success-700: hsla(157, 82%, 24%, 1); --palettes-success-800: hsla(157, 76%, 20%, 1); --palettes-success-900: hsla(159, 74%, 16%, 1); --palettes-success-950: hsla(160, 78%, 9%, 1); --palettes-promotion-50: hsla(48, 100%, 95%, 1); --palettes-promotion-100: hsla(54, 100%, 88%, 1); --palettes-promotion-200: hsla(53, 100%, 76%, 1); --palettes-promotion-300: hsla(51, 100%, 63%, 1); --palettes-promotion-400: hsla(46, 100%, 65%, 1); --palettes-promotion-main-500: hsla(50, 100%, 50%, 1); --palettes-promotion-600: hsla(45, 100%, 41%, 1); --palettes-promotion-700: hsla(40, 98%, 33%, 1); --palettes-promotion-800: hsla(36, 86%, 29%, 1); --palettes-promotion-900: hsla(45, 100%, 18%, 1); --palettes-promotion-950: hsla(31, 89%, 14%, 1); --palettes-attention-50: hsla(230, 100%, 96%, 1); --palettes-neutral-50: hsla(0, 0%, 99%, 1); --palettes-neutral-100: hsla(0, 0%, 96%, 1); --palettes-neutral-200: hsla(240, 6%, 90%, 1); --palettes-neutral-300: hsla(240, 5%, 84%, 1); --palettes-neutral-400: hsla(240, 5%, 65%, 1); --palettes-neutral-500: hsla(240, 4%, 46%, 1); --palettes-neutral-600: hsla(240, 5%, 34%, 1); --palettes-neutral-700: hsla(240, 5%, 26%, 1); --palettes-neutral-main-800: hsla(240, 4%, 16%, 1); --palettes-neutral-900: hsla(240, 6%, 10%, 1); --palettes-neutral-950: hsla(240, 10%, 6%, 1); --palettes-attention-100: hsla(234, 100%, 94%, 1); --palettes-attention-200: hsla(235, 100%, 89%, 1); --palettes-attention-300: hsla(237, 100%, 82%, 1); --palettes-attention-400: hsla(242, 95%, 74%, 1); --palettes-attention-main-500: hsla(246, 89%, 66%, 1); --palettes-attention-600: hsla(251, 80%, 59%, 1); --palettes-attention-700: hsla(252, 61%, 51%, 1); --palettes-attention-800: hsla(251, 57%, 41%, 1); --palettes-attention-900: hsla(250, 50%, 34%, 1); --palettes-attention-950: hsla(251, 49%, 20%, 1); --transparency-error-alpha-0: hsla(0, 83%, 52%, 0); --transparency-error-alpha-5: hsla(0, 83%, 52%, 0.05); --transparency-error-alpha-10: hsla(0, 83%, 52%, 0.1); --transparency-error-variant-alpha-0: hsla(0, 100%, 95%, 0); --transparency-error-variant-alpha-5: hsla(0, 100%, 95%, 0.05); --transparency-error-variant-alpha-10: hsla(0, 100%, 95%, 0.1); --transparency-error-variant-alpha-20: hsla(0, 100%, 95%, 0.2); --transparency-error-variant-alpha-30: hsla(0, 100%, 95%, 0.3); --transparency-error-variant-alpha-40: hsla(0, 100%, 95%, 0.4); --transparency-error-variant-alpha-50: hsla(0, 100%, 95%, 0.5); --transparency-error-variant-alpha-60: hsla(0, 100%, 95%, 0.6); --transparency-error-variant-alpha-70: hsla(0, 100%, 95%, 0.7); --transparency-error-variant-alpha-80: hsla(0, 100%, 95%, 0.8); --transparency-error-variant-alpha-90: hsla(0, 100%, 95%, 0.9); --transparency-error-alpha-20: hsla(0, 83%, 52%, 0.2); --transparency-error-alpha-30: hsla(0, 83%, 52%, 0.3); --transparency-error-alpha-40: hsla(0, 83%, 52%, 0.4); --transparency-error-alpha-50: hsla(0, 83%, 52%, 0.5); --transparency-error-alpha-60: hsla(0, 83%, 52%, 0.6); --transparency-error-alpha-70: hsla(0, 83%, 52%, 0.7); --transparency-error-alpha-80: hsla(0, 83%, 52%, 0.8); --transparency-error-alpha-90: hsla(0, 83%, 52%, 0.9); --transparency-info-alpha-0: hsla(217, 91%, 60%, 0); --transparency-info-alpha-5: hsla(217, 91%, 60%, 0.05); --transparency-info-variant-alpha-0: hsla(218, 100%, 95%, 0); --transparency-info-variant-alpha-5: hsla(218, 100%, 95%, 0.05); --transparency-info-variant-alpha-10: hsla(218, 100%, 95%, 0.1); --transparency-info-variant-alpha-20: hsla(218, 100%, 95%, 0.2); --transparency-info-variant-alpha-30: hsla(218, 100%, 95%, 0.3); --transparency-info-variant-alpha-40: hsla(218, 100%, 95%, 0.4); --transparency-info-variant-alpha-50: hsla(218, 100%, 95%, 0.5); --transparency-info-variant-alpha-60: hsla(218, 100%, 95%, 0.6); --transparency-info-variant-alpha-70: hsla(218, 100%, 95%, 0.7); --transparency-info-variant-alpha-80: hsla(218, 100%, 95%, 0.8); --transparency-info-variant-alpha-90: hsla(218, 100%, 95%, 0.9); --transparency-info-alpha-10: hsla(217, 91%, 60%, 0.1); --transparency-info-alpha-20: hsla(217, 91%, 60%, 0.2); --transparency-info-alpha-30: hsla(217, 91%, 60%, 0.3); --transparency-info-alpha-40: hsla(217, 91%, 60%, 0.4); --transparency-info-alpha-50: hsla(217, 91%, 60%, 0.5); --transparency-info-alpha-60: hsla(217, 91%, 60%, 0.6); --transparency-info-alpha-70: hsla(217, 91%, 60%, 0.7); --transparency-info-alpha-80: hsla(217, 91%, 60%, 0.8); --transparency-info-alpha-90: hsla(217, 91%, 60%, 0.9); --transparency-warning-alpha-0: hsla(23, 100%, 57%, 0); --transparency-warning-alpha-5: hsla(23, 100%, 57%, 0.05); --transparency-warning-variant-alpha-0: hsla(23, 100%, 95%, 0); --transparency-warning-variant-alpha-5: hsla(23, 100%, 95%, 0.05); --transparency-warning-variant-alpha-10: hsla(23, 100%, 95%, 0.1); --transparency-warning-variant-alpha-20: hsla(23, 100%, 95%, 0.2); --transparency-warning-variant-alpha-30: hsla(23, 100%, 95%, 0.3); --transparency-warning-variant-alpha-40: hsla(23, 100%, 95%, 0.4); --transparency-warning-variant-alpha-50: hsla(23, 100%, 95%, 0.5); --transparency-warning-variant-alpha-60: hsla(23, 100%, 95%, 0.6); --transparency-warning-variant-alpha-70: hsla(23, 100%, 95%, 0.7); --transparency-warning-variant-alpha-80: hsla(23, 100%, 95%, 0.8); --transparency-warning-variant-alpha-90: hsla(23, 100%, 95%, 0.9); --transparency-warning-alpha-10: hsla(23, 100%, 57%, 0.1); --transparency-warning-alpha-20: hsla(23, 100%, 57%, 0.2); --transparency-warning-alpha-30: hsla(23, 100%, 57%, 0.3); --transparency-warning-alpha-40: hsla(23, 100%, 57%, 0.4); --transparency-warning-alpha-50: hsla(23, 100%, 57%, 0.5); --transparency-warning-alpha-60: hsla(23, 100%, 57%, 0.6); --transparency-warning-alpha-70: hsla(23, 100%, 57%, 0.7); --transparency-warning-alpha-80: hsla(23, 100%, 57%, 0.8); --transparency-warning-alpha-90: hsla(23, 100%, 57%, 0.9); --transparency-success-alpha-0: hsla(130, 65%, 57%, 0); --transparency-success-alpha-5: hsla(130, 65%, 57%, 0.05); --transparency-success-alpha-10: hsla(130, 65%, 57%, 0.1); --transparency-success-alpha-20: hsla(130, 65%, 57%, 0.2); --transparency-success-alpha-30: hsla(130, 65%, 57%, 0.3); --transparency-success-alpha-40: hsla(130, 63%, 53%, 0.4); --transparency-success-alpha-50: hsla(130, 65%, 57%, 0.5); --transparency-success-alpha-60: hsla(130, 65%, 57%, 0.6); --transparency-success-alpha-70: hsla(130, 65%, 57%, 0.7); --transparency-success-alpha-80: hsla(130, 65%, 57%, 0.8); --transparency-success-alpha-90: hsla(130, 65%, 57%, 0.9); --transparency-success-variant-alpha-0: hsla(130, 100%, 95%, 0); --transparency-success-variant-alpha-5: hsla(130, 100%, 95%, 0.05); --transparency-success-variant-alpha-10: hsla(130, 100%, 95%, 0.1); --transparency-success-variant-alpha-20: hsla(130, 100%, 95%, 0.2); --transparency-success-variant-alpha-30: hsla(130, 100%, 95%, 0.3); --transparency-success-variant-alpha-40: hsla(130, 100%, 95%, 0.4); --transparency-success-variant-alpha-50: hsla(130, 100%, 95%, 0.5); --transparency-success-variant-alpha-60: hsla(130, 100%, 95%, 0.6); --transparency-success-variant-alpha-70: hsla(130, 100%, 95%, 0.7); --transparency-success-variant-alpha-80: hsla(130, 100%, 95%, 0.8); --transparency-success-variant-alpha-90: hsla(130, 100%, 95%, 0.9); --transparency-promotion-alpha-0: hsla(50, 100%, 50%, 0); --transparency-promotion-alpha-5: hsla(50, 100%, 50%, 0.05); --transparency-promotion-variant-alpha-0: hsla(48, 100%, 95%, 0); --transparency-promotion-variant-alpha-5: hsla(48, 100%, 95%, 0.05); --transparency-promotion-variant-alpha-10: hsla(48, 100%, 95%, 0.1); --transparency-promotion-variant-alpha-20: hsla(48, 100%, 95%, 0.2); --transparency-promotion-variant-alpha-30: hsla(48, 100%, 95%, 0.3); --transparency-promotion-variant-alpha-40: hsla(48, 100%, 95%, 0.4); --transparency-promotion-variant-alpha-50: hsla(48, 100%, 95%, 0.5); --transparency-promotion-variant-alpha-60: hsla(48, 100%, 95%, 0.6); --transparency-promotion-variant-alpha-70: hsla(48, 100%, 95%, 0.7); --transparency-promotion-variant-alpha-80: hsla(48, 100%, 95%, 0.8); --transparency-promotion-variant-alpha-90: hsla(48, 100%, 95%, 0.9); --transparency-promotion-alpha-10: hsla(50, 100%, 50%, 0.1); --transparency-promotion-alpha-20: hsla(50, 100%, 50%, 0.2); --transparency-promotion-alpha-30: hsla(50, 100%, 50%, 0.3); --transparency-promotion-alpha-40: hsla(50, 100%, 50%, 0.4); --transparency-promotion-alpha-50: hsla(50, 100%, 50%, 0.5); --transparency-promotion-alpha-60: hsla(50, 100%, 50%, 0.6); --transparency-promotion-alpha-70: hsla(50, 100%, 50%, 0.7); --transparency-promotion-alpha-80: hsla(50, 100%, 50%, 0.8); --transparency-promotion-alpha-90: hsla(50, 100%, 50%, 0.9); --transparency-attention-alpha-0: hsla(246, 89%, 66%, 0); --transparency-attention-alpha-5: hsla(246, 89%, 66%, 0.05); --transparency-attention-variant-alpha-0: hsla(252, 100%, 95%, 0); --transparency-attention-variant-alpha-5: hsla(252, 100%, 95%, 0.05); --transparency-attention-variant-alpha-10: hsla(252, 100%, 95%, 0.1); --transparency-attention-variant-alpha-20: hsla(252, 100%, 95%, 0.2); --transparency-attention-variant-alpha-30: hsla(252, 100%, 95%, 0.3); --transparency-attention-variant-alpha-40: hsla(252, 100%, 95%, 0.4); --transparency-attention-variant-alpha-50: hsla(252, 100%, 95%, 0.5); --transparency-attention-variant-alpha-60: hsla(252, 100%, 95%, 0.6); --transparency-attention-variant-alpha-70: hsla(252, 100%, 95%, 0.7); --transparency-attention-variant-alpha-80: hsla(252, 100%, 95%, 0.8); --transparency-attention-variant-alpha-90: hsla(252, 100%, 95%, 0.9); --transparency-attention-alpha-10: hsla(246, 89%, 66%, 0.1); --transparency-attention-alpha-20: hsla(246, 89%, 66%, 0.2); --transparency-attention-alpha-30: hsla(246, 89%, 66%, 0.3); --transparency-attention-alpha-40: hsla(246, 89%, 66%, 0.4); --transparency-attention-alpha-50: hsla(246, 89%, 66%, 0.5); --transparency-attention-alpha-60: hsla(246, 89%, 66%, 0.6); --transparency-attention-alpha-70: hsla(246, 89%, 66%, 0.7); --transparency-attention-alpha-80: hsla(246, 89%, 66%, 0.8); --transparency-attention-alpha-90: hsla(246, 89%, 66%, 0.9); --transparency-neutral-alpha-0: hsla(240, 4%, 16%, 0); --transparency-neutral-alpha-5: hsla(240, 4%, 16%, 0.05); --transparency-neutral-variant-alpha-0: hsla(0, 0%, 95%, 0); --transparency-neutral-variant-alpha-5: hsla(0, 0%, 95%, 0.05); --transparency-neutral-variant-alpha-10: hsla(0, 0%, 95%, 0.1); --transparency-neutral-variant-alpha-20: hsla(0, 0%, 95%, 0.2); --transparency-neutral-variant-alpha-30: hsla(0, 0%, 95%, 0.3); --transparency-neutral-variant-alpha-40: hsla(0, 0%, 95%, 0.4); --transparency-neutral-variant-alpha-50: hsla(0, 0%, 95%, 0.5); --transparency-neutral-variant-alpha-60: hsla(0, 0%, 95%, 0.6); --transparency-neutral-variant-alpha-70: hsla(0, 0%, 95%, 0.7); --transparency-neutral-variant-alpha-80: hsla(0, 0%, 95%, 0.8); --transparency-neutral-variant-alpha-90: hsla(0, 0%, 95%, 0.9); --transparency-neutral-alpha-10: hsla(240, 4%, 16%, 0.1); --transparency-neutral-alpha-20: hsla(240, 4%, 16%, 0.2); --transparency-neutral-alpha-30: hsla(240, 4%, 16%, 0.3); --transparency-neutral-alpha-40: hsla(240, 4%, 16%, 0.4); --transparency-neutral-alpha-50: hsla(240, 4%, 16%, 0.5); --transparency-neutral-alpha-60: hsla(240, 4%, 16%, 0.6); --transparency-neutral-alpha-70: hsla(240, 4%, 16%, 0.7); --transparency-neutral-alpha-80: hsla(240, 4%, 16%, 0.8); --transparency-neutral-alpha-90: hsla(240, 4%, 16%, 0.9); --transparency-white-alpha-0: hsla(0, 0%, 100%, 0); --transparency-white-alpha-2: hsla(0, 0%, 100%, 0.02); --transparency-white-alpha-5: hsla(0, 0%, 100%, 0.05); --transparency-white-alpha-10: hsla(0, 0%, 100%, 0.1); --transparency-white-alpha-20: hsla(0, 0%, 100%, 0.2); --transparency-white-alpha-30: hsla(0, 0%, 100%, 0.3); --transparency-white-alpha-40: hsla(0, 0%, 100%, 0.4); --transparency-white-alpha-50: hsla(0, 0%, 100%, 0.5); --transparency-white-alpha-60: hsla(0, 0%, 100%, 0.6); --transparency-white-alpha-70: hsla(0, 0%, 100%, 0.7); --transparency-white-alpha-80: hsla(0, 0%, 100%, 0.8); --transparency-white-alpha-90: hsla(0, 0%, 100%, 0.9); --transparency-black-alpha-0: hsla(0, 0%, 0%, 0); --transparency-black-alpha-1: hsla(0, 0%, 0%, 0.01); --transparency-black-alpha-2: hsla(0, 0%, 0%, 0.02); --transparency-black-alpha-3: hsla(0, 0%, 0%, 0.03); --transparency-black-alpha-5: hsla(0, 0%, 0%, 0.05); --transparency-black-alpha-9: hsla(0, 0%, 0%, 0.09); --transparency-black-alpha-10: hsla(0, 0%, 0%, 0.1); --transparency-black-alpha-20: hsla(0, 0%, 0%, 0.2); --transparency-black-alpha-30: hsla(0, 0%, 0%, 0.3); --transparency-black-alpha-40: hsla(0, 0%, 0%, 0.4); --transparency-black-alpha-50: hsla(0, 0%, 0%, 0.5); --transparency-black-alpha-60: hsla(0, 0%, 0%, 0.6); --transparency-black-alpha-70: hsla(0, 0%, 0%, 0.7); --transparency-black-alpha-80: hsla(0, 0%, 0%, 0.8); --transparency-black-alpha-90: hsla(0, 0%, 0%, 0.9); --palettes-subtle-grey-50: hsla(0, 0%, 100%, 1); --palettes-subtle-grey-main-100: hsla(0, 0%, 98%, 1); --palettes-subtle-grey-200: hsla(0, 0%, 95%, 1); --palettes-subtle-grey-300: hsla(0, 0%, 95%, 1); --palettes-subtle-grey-400: hsla(0, 0%, 95%, 1); --palettes-subtle-grey-500: hsla(0, 0%, 94%, 1); --palettes-subtle-grey-600: hsla(0, 0%, 93%, 1); --palettes-subtle-grey-700: hsla(0, 0%, 91%, 1); --palettes-subtle-grey-800: hsla(0, 0%, 86%, 1); --palettes-subtle-grey-900: hsla(0, 0%, 81%, 1); --palettes-subtle-grey-950: hsla(0, 0%, 73%, 1); --palettes-brute-grey-50: hsla(0, 0%, 27%, 1); --palettes-brute-grey-100: hsla(0, 0%, 25%, 1); --palettes-brute-grey-200: hsla(0, 0%, 24%, 1); --palettes-brute-grey-300: hsla(0, 0%, 22%, 1); --palettes-brute-grey-400: hsla(0, 0%, 22%, 1); --palettes-brute-grey-500: hsla(0, 0%, 21%, 1); --palettes-brute-grey-600: hsla(240, 1%, 19%, 1); --palettes-brute-grey-700: hsla(240, 1%, 18%, 1); --palettes-brute-grey-800: hsla(240, 2%, 17%, 1); --palettes-brute-grey-main-900: hsla(240, 4%, 16%, 1); --palettes-brute-grey-950: hsla(240, 4%, 5%, 1); } /*!******************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./assets/src/css/idtTheme/colors/brandColors.css ***! \******************************************************************************************************************************/ /* ✋ Brand colors - Mode 1 */ :root { --BOSS-Revolution-br-primary-50: hsla(180, 100%, 95%, 1); --BOSS-Revolution-br-primary-100: hsla(181, 100%, 89%, 1); --BOSS-Revolution-br-primary-200: hsla(181, 100%, 79%, 1); --BOSS-Revolution-br-primary-300: hsla(182, 100%, 65%, 1); --BOSS-Revolution-br-primary-400: hsla(185, 100%, 50%, 1); --BOSS-Revolution-br-primary-500: hsla(191, 100%, 49%, 1); --BOSS-Revolution-br-primary-600: hsla(194, 100%, 41%, 1); --BOSS-Revolution-br-primary-700: hsla(195, 100%, 33%, 1); --BOSS-Revolution-br-primary-main-800: hsla(195, 96%, 29%, 1); --BOSS-Revolution-br-primary-900: hsla(197, 88%, 24%, 1); --BOSS-Revolution-br-primary-950: hsla(198, 100%, 15%, 1); --BOSS-Money-bm-primary-50: hsla(136, 65%, 97%, 1); --BOSS-Money-bm-primary-100: hsla(141, 74%, 93%, 1); --BOSS-Money-bm-primary-200: hsla(142, 68%, 85%, 1); --BOSS-Money-bm-primary-300: hsla(142, 65%, 73%, 1); --BOSS-Money-bm-primary-400: hsla(143, 59%, 58%, 1); --BOSS-Money-bm-primary-main-500: hsla(143, 60%, 42%, 1); --BOSS-Money-bm-primary-600: hsla(143, 65%, 36%, 1); --BOSS-Money-bm-primary-700: hsla(143, 61%, 29%, 1); --BOSS-Money-bm-primary-800: hsla(143, 54%, 24%, 1); --BOSS-Money-bm-primary-900: hsla(145, 51%, 20%, 1); --BOSS-Money-bm-primary-950: hsla(147, 69%, 10%, 1); --BOSS-REDolution-bred-primary-50: hsla(356, 100%, 97%, 1); --BOSS-REDolution-bred-primary-100: hsla(358, 100%, 93%, 1); --BOSS-REDolution-bred-primary-200: hsla(358, 100%, 88%, 1); --BOSS-REDolution-bred-primary-300: hsla(358, 100%, 79%, 1); --BOSS-REDolution-bred-primary-400: hsla(358, 100%, 67%, 1); --BOSS-REDolution-bred-primary-500: hsla(358, 100%, 57%, 1); --BOSS-REDolution-bred-primary-main-600: hsla(358, 100%, 48%, 1); --BOSS-REDolution-bred-primary-700: hsla(358, 100%, 42%, 1); --BOSS-REDolution-bred-primary-800: hsla(358, 97%, 35%, 1); --BOSS-REDolution-bred-primary-900: hsla(358, 87%, 31%, 1); --BOSS-REDolution-bred-primary-950: hsla(358, 100%, 16%, 1); } /*!***********************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./assets/src/css/idtTheme/breakpoints.css ***! \***********************************************************************************************************************/ /** * IDT Theme - Breakpoints * * Breakpoint definitions using Tailwind CSS standard breakpoints. * These can be used in media queries throughout the theme. * * Breakpoint values: * - sm: 640px (small devices, tablets) * - md: 768px (medium devices, tablets in landscape) * - lg: 1024px (large devices, desktops) * - xl: 1280px (extra large devices, large desktops) * - 2xl: 1536px (2x extra large devices, very large desktops) * * Usage in CSS: * @media (min-width: var(--breakpoint-sm)) { ... } * @media (min-width: var(--breakpoint-md)) { ... } * @media (min-width: var(--breakpoint-lg)) { ... } * @media (min-width: var(--breakpoint-xl)) { ... } * @media (min-width: var(--breakpoint-2xl)) { ... } */ :root { /* Tailwind CSS breakpoints */ --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; --breakpoint-2xl: 1536px; /* Max-width breakpoints (for max-width media queries) */ --breakpoint-sm-max: 639px; --breakpoint-md-max: 767px; --breakpoint-lg-max: 1023px; --breakpoint-xl-max: 1279px; --breakpoint-2xl-max: 1535px; } /* * Media query mixins using CSS custom properties * Note: CSS custom properties cannot be used directly in media queries, * but you can use these values as reference or use CSS preprocessors. * * For direct use in CSS, use the pixel values: * @media (min-width: 640px) { ... } * @media (min-width: 768px) { ... } * @media (min-width: 1024px) { ... } * @media (min-width: 1280px) { ... } * @media (min-width: 1536px) { ... } */ /*!****************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./assets/src/css/idtTheme/fonts/fontFamily.css ***! \****************************************************************************************************************************/ @font-face { font-family: 'IDT Sans'; src: url(../fonts/IDTSans-Rg.eot); src: url(../fonts/IDTSans-Rg.eot?#iefix) format('embedded-opentype'), url(../fonts/IDTSans-Rg.woff2) format('woff2'), url(../fonts/IDTSans-Rg.woff) format('woff'), url(../fonts/IDTSans-Rg.ttf) format('truetype'), url(../fonts/IDTSans-Rg.svg#IDTSans-Rg) format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'IDT Sans Normal'; src: url(../fonts/IDTSans-Normal.eot); src: url(../fonts/IDTSans-Normal.eot?#iefix) format('embedded-opentype'), url(../fonts/IDTSans-Normal.woff2) format('woff2'), url(../fonts/IDTSans-Normal.woff) format('woff'), url(../fonts/IDTSans-Normal.ttf) format('truetype'), url(../fonts/IDTSans-Normal.svg#IDTSans-Normal) format('svg'); font-weight: 450; font-style: normal; font-display: swap; } @font-face { font-family: 'IDT Sans Medium'; src: url(../fonts/IDTSans-Md.eot); src: url(../fonts/IDTSans-Md.eot?#iefix) format('embedded-opentype'), url(../fonts/IDTSans-Md.woff2) format('woff2'), url(../fonts/IDTSans-Md.woff) format('woff'), url(../fonts/IDTSans-Md.ttf) format('truetype'), url(../fonts/IDTSans-Md.svg#IDTSans-Md) format('svg'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'IDT Sans Demibold'; src: url(../fonts/IDTSans-DmBd.eot); src: url(../fonts/IDTSans-DmBd.eot?#iefix) format('embedded-opentype'), url(../fonts/IDTSans-DmBd.woff2) format('woff2'), url(../fonts/IDTSans-DmBd.woff) format('woff'), url(../fonts/IDTSans-DmBd.ttf) format('truetype'), url(../fonts/IDTSans-DmBd.svg#IDTSans-DmBd) format('svg'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'IDT Sans Bold'; src: url(../fonts/IDTSans-Bd.eot); src: url(../fonts/IDTSans-Bd.eot?#iefix) format('embedded-opentype'), url(../fonts/IDTSans-Bd.woff2) format('woff2'), url(../fonts/IDTSans-Bd.woff) format('woff'), url(../fonts/IDTSans-Bd.ttf) format('truetype'), url(../fonts/IDTSans-Bd.svg#IDTSans-Bd) format('svg'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'IDT Sans Extrabold'; src: url(../fonts/IDTSans-Bd.eot); src: url(../fonts/IDTSans-Bd.eot?#iefix) format('embedded-opentype'), url(../fonts/IDTSans-Bd.woff2) format('woff2'), url(../fonts/IDTSans-Bd.woff) format('woff'), url(../fonts/IDTSans-Bd.ttf) format('truetype'), url(../fonts/IDTSans-Bd.svg#IDTSans-Bd) format('svg'); font-weight: 800; font-style: normal; font-display: swap; } /*!*********************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./assets/src/css/idtTheme/fonts/defaultFontSize.css ***! \*********************************************************************************************************************************/ /* ☠️ Font setup - Default */ :root { --font-size-text-xxs: 0.625rem; --font-size-text-xs: 0.75rem; --font-size-text-sm: 0.875rem; --font-size-text-base: 1rem; --font-size-text-lg: 1.125rem; --font-size-text-xl: 1.25rem; --font-size-text-2xl: 1.375rem; --font-size-text-3xl: 1.5rem; --font-size-text-4xl: 1.75rem; --font-size-text-5xl: 2rem; --font-size-text-6xl: 2.25rem; --font-size-text-7xl: 2.5rem; --font-size-text-8xl: 3rem; --font-size-text-9xl: 3.5rem; --font-size-text-10xl: 4rem; --font-size-text-11xl: 4.5rem; --font-size-text-12xl: 6rem; --line-height-xxs: 0.875rem; --letter-spacing-tracking-tight-lg: -0.0625rem; --paragraph-spacing-xs: 0rem; --paragraph-spacing-sm: 0.5rem; --paragraph-spacing-md: 0.75rem; --paragraph-spacing-lg: 1rem; --letter-spacing-tracking-tight-md: -0.04375rem; --letter-spacing-tracking-tight-sm: -0.03125rem; --letter-spacing-tracking-tight-xs: -0.0125rem; --letter-spacing-tracking-normal: 0rem; --letter-spacing-tracking-wide-xs: 0.0125rem; --letter-spacing-tracking-wide-sm: 0.03125rem; --letter-spacing-tracking-wide-md: 0.04375rem; --letter-spacing-tracking-wide-lg: 0.0625rem; --line-height-xs: 1rem; --line-height-sm: 1.125rem; --line-height-base: 1.5rem; --line-height-lg: 1.75rem; --line-height-xl: 1.875rem; --line-height-2xl: 2rem; --line-height-3xl: 2.25rem; --line-height-4xl: 2.75rem; --line-height-5xl: 3rem; --line-height-6xl: 3.25rem; --line-height-7xl: 3.5rem; --line-height-8xl: 4.25rem; --line-height-9xl: 4.75rem; --line-height-10xl: 5.25rem; --line-height-11xl: 5.75rem; --line-height-12xl: 7.5rem; --font-weight-font-light: 300; --font-weight-font-normal: 450; --font-weight-font-medium: 500; --font-weight-font-demibold: 600; --font-weight-font-bold: 700; --font-weight-font-extrabold: 800; --font-weight-font-black: 900; --font-family-IDT-Sans-Regular: IDT Sans, sans-serif; --font-family-IDT-Sans-Normal: IDT Sans Normal, sans-serif; --font-family-IDT-Sans-Medium: IDT Sans Medium, sans-serif; --font-family-IDT-Sans-Demibold: IDT Sans Demibold, sans-serif; --font-family-IDT-Sans-Bold: IDT Sans Bold, sans-serif; --font-family-IDT-Sans-Extrabold: IDT Sans Extrabold, sans-serif; --font-family-IDT-Sans-Black: IDT Sans Black, sans-serif; } /*!*****************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./assets/src/css/idtTheme/colors/iconColors.css ***! \*****************************************************************************************************************************/ /** * Icon Color Variables * * These variables control SVG icon colors and automatically adapt to theme modes. * Use these in your SVG files: fill="var(--icon-primary)" or stroke="var(--icon-primary)" */ /* Light Mode - Default */ :root { /* Primary icon color - typically matches body text */ --icon-primary: var(--neutral-body); --icon-secondary: var(--neutral-secondary); --icon-tertiary: var(--neutral-tertiary); --icon-disabled: var(--neutral-disabled); /* Semantic icon colors */ --icon-error: var(--error-error-main); --icon-success: var(--success-success-main); --icon-warning: var(--warning-warning-main); --icon-info: var(--info-info-main); --icon-attention: var(--attention-attention-main); --icon-promotion: var(--promotion-promotion-main); /* Icon backgrounds (for icon buttons, badges, etc.) */ --icon-bg: var(--neutral-bgColor); --icon-bg-hover: var(--neutral-subtle); } /* Dark Mode */ .theme-dark { --icon-primary: var(--neutral-body); --icon-secondary: var(--neutral-secondary); --icon-tertiary: var(--neutral-tertiary); --icon-disabled: var(--neutral-disabled); /* Semantic colors remain the same or can be adjusted */ --icon-error: var(--error-error-main); --icon-success: var(--success-success-main); --icon-warning: var(--warning-warning-main); --icon-info: var(--info-info-main); --icon-attention: var(--attention-attention-main); --icon-promotion: var(--promotion-promotion-main); --icon-bg: var(--neutral-bgColor); --icon-bg-hover: var(--neutral-subtle); } /* High Contrast Mode */ .theme-high-contrast { --icon-primary: var(--neutral-title); --icon-secondary: var(--neutral-body); --icon-tertiary: var(--neutral-secondary); --icon-disabled: var(--neutral-disabled); } /*!****************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./assets/src/css/idtTheme/colors/gradients.css ***! \****************************************************************************************************************************/ /* Gradients using CSS variables from color themes */ :root { /* Neutral gradients using color variables */ --color-gradients-neutrals-neutral-darker-neutral-darker-700: linear-gradient(to bottom, var(--palettes-neutral-neutral-50) 0%, var(--palettes-neutral-neutral-100) 100%); --color-gradients-neutrals-neutral-darker-neutral-darker-600: linear-gradient(to bottom, transparent 0%, transparent 100%); --color-gradients-neutrals-neutral-darker-neutral-darker-500: linear-gradient(to bottom, var(--palettes-neutral-neutral-100) 0%, var(--palettes-neutral-neutral-200) 100%); --color-gradients-neutrals-neutral-darker-neutral-darker-400: linear-gradient(to bottom, var(--palettes-neutral-neutral-100) 0%, var(--palettes-neutral-neutral-200) 100%); --color-gradients-neutrals-neutral-darker-neutral-darker-300: linear-gradient(to bottom, var(--white) 0%, var(--palettes-neutral-neutral-200) 100%); --color-gradients-neutrals-neutral-darker-neutral-darker-200: linear-gradient(to bottom, transparent 0%, transparent 100%); --color-gradients-neutrals-neutral-darker-neutral-darker-100: linear-gradient(to bottom, transparent 0%, var(--white) 100%); --color-gradients-neutrals-neutral-medium-neutral-medium-400: linear-gradient(to bottom, var(--palettes-neutral-neutral-50) 0%, var(--white) 100%); --color-gradients-neutrals-neutral-medium-neutral-medium-300: linear-gradient(to bottom, var(--white) 0%, var(--white) 100%); --color-gradients-neutrals-neutral-medium-neutral-medium-200: linear-gradient(to bottom, var(--palettes-neutral-neutral-100) 0%, var(--white) 100%); --color-gradients-neutrals-neutral-medium-neutral-medium-100: linear-gradient(to bottom, var(--palettes-neutral-neutral-50) 0%, var(--white) 100%); --color-gradients-neutrals-neutral-lighter-neutral-lighter-400: linear-gradient(to bottom, var(--palettes-neutral-neutral-50) 0%, var(--white) 100%); --color-gradients-neutrals-neutral-lighter-neutral-lighter-300: linear-gradient(to bottom, var(--white) 0%, var(--white) 100%); --color-gradients-neutrals-neutral-lighter-neutral-lighter-200: linear-gradient(to bottom, var(--white) 0%, var(--white) 100%); --color-gradients-neutrals-neutral-lighter-neutral-lighter-100: linear-gradient(to bottom, var(--white) 0%, var(--white) 100%); --color-gradients-neutrals-neutral-softest-neutral-softest-300: linear-gradient(to bottom, var(--palettes-neutral-neutral-100) 0%, var(--palettes-neutral-neutral-200) 100%); --color-gradients-neutrals-neutral-softest-neutral-softest-200: linear-gradient(to bottom, var(--white) 0%, var(--white) 100%); --color-gradients-neutrals-neutral-softest-neutral-softest-100: linear-gradient(to bottom, var(--white) 0%, var(--white) 100%); /* Promotion gradients using theme variables */ --color-gradients-promotion-promotion-fixed: linear-gradient(to bottom, var(--promotion-promotion-gradient-start) 0%, var(--promotion-promotion-gradient-end) 100%); --color-gradients-promotion-promotion-hard: linear-gradient(to bottom, var(--palettes-promotion-promotion-400) 0%, var(--palettes-promotion-promotion-100) 100%); --color-gradients-promotion-promotion-corner-hard: linear-gradient(to bottom, var(--palettes-promotion-promotion-300) 0%, var(--white) 100%); --color-gradients-promotion-promotion-soft: linear-gradient(to bottom, var(--palettes-promotion-promotion-50) 0%, var(--palettes-promotion-promotion-50) 100%); --color-gradients-promotion-promotion-corner-soft: linear-gradient(to bottom, var(--white) 0%, var(--palettes-promotion-promotion-50) 100%); /* Info gradients using theme variables */ --color-gradients-info-info-fixed: linear-gradient(to bottom, var(--palettes-info-info-400) 0%, var(--palettes-info-info-300) 100%); --color-gradients-info-info-hard: linear-gradient(to bottom, var(--info-info-gradient-start) 0%, var(--info-info-gradient-end) 100%); --color-gradients-info-info-corner-hard: linear-gradient(to bottom, var(--palettes-info-info-200) 0%, var(--white) 100%); --color-gradients-info-info-soft: linear-gradient(to bottom, var(--palettes-info-info-50) 0%, var(--palettes-info-info-100) 100%); --color-gradients-info-info-corner-soft: linear-gradient(to bottom, var(--white) 0%, var(--palettes-info-info-50) 100%); /* Warning gradients using theme variables */ --color-gradients-warning-warning-fixed: linear-gradient(to bottom, var(--palettes-warning-warning-600) 0%, var(--palettes-warning-warning-400) 100%); --color-gradients-warning-warning-hard: linear-gradient(to bottom, var(--warning-warning-gradient-start) 0%, var(--warning-warning-gradient-end) 100%); --color-gradients-warning-warning-corner-hard: linear-gradient(to bottom, var(--palettes-warning-warning-300) 0%, var(--white) 100%); --color-gradients-warning-warning-soft: linear-gradient(to bottom, var(--palettes-warning-warning-50) 0%, var(--palettes-warning-warning-100) 100%); --color-gradients-warning-warning-corner-soft: linear-gradient(to bottom, var(--white) 0%, var(--palettes-warning-warning-50) 100%); /* Error gradients using theme variables */ --color-gradients-error-error-fixed: linear-gradient(to bottom, var(--palettes-error-error-600) 0%, var(--palettes-error-error-400) 100%); --color-gradients-error-error-hard: linear-gradient(to bottom, var(--error-error-gradient-start) 0%, var(--error-error-gradient-end) 100%); --color-gradients-error-error-corner-hard: linear-gradient(to bottom, var(--palettes-error-error-200) 0%, var(--white) 100%); --color-gradients-error-error-soft: linear-gradient(to bottom, var(--palettes-error-error-50) 0%, var(--palettes-error-error-100) 100%); --color-gradients-error-error-corner-soft: linear-gradient(to bottom, var(--white) 0%, var(--palettes-error-error-50) 100%); /* Success gradients using theme variables */ --color-gradients-success-success-fixed: linear-gradient(to bottom, var(--palettes-success-success-400) 0%, var(--palettes-success-success-300) 100%); --color-gradients-success-success-hard: linear-gradient(to bottom, var(--success-success-gradient-start) 0%, var(--success-success-gradient-end) 100%); --color-gradients-success-success-corner-hard: linear-gradient(to bottom, var(--palettes-success-success-200) 0%, var(--white) 100%); --color-gradients-success-success-soft: linear-gradient(to bottom, var(--palettes-success-success-50) 0%, var(--palettes-success-success-100) 100%); --color-gradients-success-success-corner-soft: linear-gradient(to bottom, var(--white) 0%, var(--palettes-success-success-50) 100%); /* Attention gradients using theme variables */ --color-gradients-attention-attention-fixed: linear-gradient(to bottom, var(--palettes-attention-attention-500) 0%, var(--palettes-attention-attention-400) 100%); --color-gradients-attention-attention-hard: linear-gradient(to bottom, var(--attention-attention-gradient-start) 0%, var(--attention-attention-gradient-end) 100%); --color-gradients-attention-attention-corner-hard: linear-gradient(to bottom, var(--palettes-attention-attention-300) 0%, var(--white) 100%); --color-gradients-attention-attention-soft: linear-gradient(to bottom, var(--palettes-attention-attention-50) 0%, var(--palettes-attention-attention-100) 100%); --color-gradients-attention-attention-corner-soft: linear-gradient(to bottom, var(--white) 0%, var(--palettes-attention-attention-50) 100%); /* Radial gradients */ --color-radial-radial-500: radial-gradient(var(--palettes-neutral-neutral-800) 0%, transparent 100%); --color-radial-radial-400: radial-gradient(var(--palettes-neutral-neutral-800) 0%, transparent 100%); --color-radial-radial-300: radial-gradient(transparent 0%, transparent 100%); --color-radial-radial-200: radial-gradient(var(--white) 0%, var(--white) 100%); --color-radial-radial-100: radial-gradient(var(--white) 0%, var(--white) 100%); } /*!***************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./assets/src/css/idtTheme/fonts/textStyle.css ***! \***************************************************************************************************************************/ .display-d-1-normal { font-size: var(--font-size-text-12xl); font-family: var(--font-family-IDT-Sans-Normal); font-weight: 450; font-style: normal; line-height: var(--line-height-12xl); letter-spacing: var(--letter-spacing-tracking-tight-lg); text-decoration: none; text-transform: none; } .display-d-1-medium { font-size: var(--font-size-text-12xl); font-family: var(--font-family-IDT-Sans-Medium); font-weight: 500; font-style: normal; line-height: var(--line-height-12xl); letter-spacing: var(--letter-spacing-tracking-tight-lg); text-decoration: none; text-transform: none; } .display-d-1-demibold { font-size: var(--font-size-text-12xl); font-family: var(--font-family-IDT-Sans-Demibold); font-weight: 600; font-style: normal; line-height: var(--line-height-12xl); letter-spacing: var(--letter-spacing-tracking-tight-lg); text-decoration: none; text-transform: none; } .display-d-1-bold { font-size: var(--font-size-text-12xl); font-family: var(--font-family-IDT-Sans-Bold); font-weight: 700; font-style: normal; line-height: var(--line-height-12xl); letter-spacing: var(--letter-spacing-tracking-tight-lg); text-decoration: none; text-transform: none; } .display-d-1-extrabold { font-size: var(--font-size-text-12xl); font-family: var(--font-family-IDT-Sans-Extrabold); font-weight: 800; font-style: normal; line-height: var(--line-height-12xl); letter-spacing: var(--letter-spacing-tracking-tight-lg); text-decoration: none; text-transform: none; } .display-d-2-normal { font-size: var(--font-size-text-11xl); font-family: var(--font-family-IDT-Sans-Normal); font-weight: 450; font-style: normal; line-height: var(--line-height-11xl); letter-spacing: var(--letter-spacing-tracking-tight-lg); text-decoration: none; text-transform: none; } .display-d-2-medium { font-size: var(--font-size-text-11xl); font-family: var(--font-family-IDT-Sans-Medium); font-weight: 500; font-style: normal; line-height: var(--line-height-11xl); letter-spacing: var(--letter-spacing-tracking-tight-lg); text-decoration: none; text-transform: none; } .display-d-2-demibold { font-size: var(--font-size-text-11xl); font-family: var(--font-family-IDT-Sans-Demibold); font-weight: 600; font-style: normal; line-height: var(--line-height-11xl); letter-spacing: var(--letter-spacing-tracking-tight-lg); text-decoration: none; text-transform: none; } .display-d-2-bold { font-size: var(--font-size-text-11xl); font-family: var(--font-family-IDT-Sans-Bold); font-weight: 700; font-style: normal; line-height: var(--line-height-11xl); letter-spacing: var(--letter-spacing-tracking-tight-lg); text-decoration: none; text-transform: none; } .display-d-2-extrabold { font-size: var(--font-size-text-11xl); font-family: var(--font-family-IDT-Sans-Extrabold); font-weight: 800; font-style: normal; line-height: var(--line-height-11xl); letter-spacing: var(--letter-spacing-tracking-tight-lg); text-decoration: none; text-transform: none; } .display-d-3-normal { font-size: var(--font-size-text-10xl); font-family: var(--font-family-IDT-Sans-Normal); font-weight: 450; font-style: normal; line-height: var(--line-height-9xl); letter-spacing: var(--letter-spacing-tracking-tight-md); text-decoration: none; text-transform: none; } .display-d-3-medium { font-size: var(--font-size-text-10xl); font-family: var(--font-family-IDT-Sans-Medium); font-weight: 500; font-style: normal; line-height: var(--line-height-9xl); letter-spacing: var(--letter-spacing-tracking-tight-md); text-decoration: none; text-transform: none; } .display-d-3-demibold { font-size: var(--font-size-text-10xl); font-family: var(--font-family-IDT-Sans-Demibold); font-weight: 600; font-style: normal; line-height: var(--line-height-9xl); letter-spacing: var(--letter-spacing-tracking-tight-md); text-decoration: none; text-transform: none; } .display-d-3-bold { font-size: var(--font-size-text-10xl); font-family: var(--font-family-IDT-Sans-Bold); font-weight: 700; font-style: normal; line-height: var(--line-height-9xl); letter-spacing: var(--letter-spacing-tracking-tight-md); text-decoration: none; text-transform: none; } .display-d-3-extrabold { font-size: var(--font-size-text-10xl); font-family: var(--font-family-IDT-Sans-Extrabold); font-weight: 800; font-style: normal; line-height: var(--line-height-9xl); letter-spacing: var(--letter-spacing-tracking-tight-md); text-decoration: none; text-transform: none; } .display-d-4-normal { font-size: var(--font-size-text-9xl); font-family: var(--font-family-IDT-Sans-Normal); font-weight: 450; font-style: normal; line-height: var(--line-height-8xl); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: none; } .display-d-4-medium { font-size: var(--font-size-text-9xl); font-family: var(--font-family-IDT-Sans-Medium); font-weight: 500; font-style: normal; line-height: var(--line-height-8xl); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: none; } .display-d-4-demibold { font-size: var(--font-size-text-9xl); font-family: var(--font-family-IDT-Sans-Demibold); font-weight: 600; font-style: normal; line-height: var(--line-height-8xl); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: none; } .display-d-4-bold { font-size: var(--font-size-text-9xl); font-family: var(--font-family-IDT-Sans-Bold); font-weight: 700; font-style: normal; line-height: var(--line-height-8xl); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: none; } .display-d-4-extrabold { font-size: var(--font-size-text-9xl); font-family: var(--font-family-IDT-Sans-Extrabold); font-weight: 800; font-style: normal; line-height: var(--line-height-8xl); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: none; } .header-h1-normal, .h1-normal { font-size: var(--font-size-text-8xl); font-family: var(--font-family-IDT-Sans-Normal); font-weight: 450; font-style: normal; line-height: var(--line-height-7xl); letter-spacing: var(--letter-spacing-tracking-tight-md); text-decoration: none; text-transform: none; } .header-h1-medium, .h1-medium, h1 { font-size: var(--font-size-text-8xl); font-family: var(--font-family-IDT-Sans-Medium); font-weight: 500; font-style: normal; line-height: var(--line-height-7xl); letter-spacing: var(--letter-spacing-tracking-tight-md); text-decoration: none; text-transform: none; } .header-h1-demibold, .h1-demibold { font-size: var(--font-size-text-8xl); font-family: var(--font-family-IDT-Sans-Demibold); font-weight: 600; font-style: normal; line-height: var(--line-height-7xl); letter-spacing: var(--letter-spacing-tracking-tight-md); text-decoration: none; text-transform: none; } .header-h1-bold, .h1-bold { font-size: var(--font-size-text-8xl); font-family: var(--font-family-IDT-Sans-Bold); font-weight: 700; font-style: normal; line-height: var(--line-height-7xl); letter-spacing: var(--letter-spacing-tracking-tight-md); text-decoration: none; text-transform: none; } .header-h2-normal, .h2-normal { font-size: var(--font-size-text-7xl); font-family: var(--font-family-IDT-Sans-Normal); font-weight: 450; font-style: normal; line-height: var(--line-height-6xl); letter-spacing: var(--letter-spacing-tracking-tight-md); text-decoration: none; text-transform: none; } .header-h2-medium, .h2-medium { font-size: var(--font-size-text-7xl); font-family: var(--font-family-IDT-Sans-Medium); font-weight: 500; font-style: normal; line-height: var(--line-height-6xl); letter-spacing: var(--letter-spacing-tracking-tight-md); text-decoration: none; text-transform: none; } .header-h2-demibold, .h2-demibold { font-size: var(--font-size-text-7xl); font-family: var(--font-family-IDT-Sans-Demibold); font-weight: 600; font-style: normal; line-height: var(--line-height-6xl); letter-spacing: var(--letter-spacing-tracking-tight-md); text-decoration: none; text-transform: none; } .header-h2-bold, .h2-bold, h2 { font-size: var(--font-size-text-7xl); font-family: var(--font-family-IDT-Sans-Bold); font-weight: 700; font-style: normal; line-height: var(--line-height-6xl); letter-spacing: var(--letter-spacing-tracking-tight-md); text-decoration: none; text-transform: none; } .header-h3-normal, .h3-normal { font-size: var(--font-size-text-6xl); font-family: var(--font-family-IDT-Sans-Normal); font-weight: 450; font-style: normal; line-height: var(--line-height-6xl); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: none; } .header-h3-medium, .h3-medium { font-size: var(--font-size-text-6xl); font-family: var(--font-family-IDT-Sans-Medium); font-weight: 500; font-style: normal; line-height: var(--line-height-6xl); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: none; } .header-h3-demibold, .h3-demibold { font-size: var(--font-size-text-6xl); font-family: var(--font-family-IDT-Sans-Demibold); font-weight: 600; font-style: normal; line-height: var(--line-height-6xl); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: none; } .header-h3-bold, .h3-bold, h3 { font-size: var(--font-size-text-6xl); font-family: var(--font-family-IDT-Sans-Bold); font-weight: 700; font-style: normal; line-height: var(--line-height-6xl); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: none; } .header-h4-normal, .h4-normal { font-size: var(--font-size-text-5xl); font-family: var(--font-family-IDT-Sans-Normal); font-weight: 450; font-style: normal; line-height: var(--line-height-5xl); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: none; } .header-h4-medium, .h4-medium, h4 { font-size: var(--font-size-text-5xl); font-family: var(--font-family-IDT-Sans-Medium); font-weight: 500; font-style: normal; line-height: var(--line-height-5xl); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: none; } .header-h4-demibold, .h4-demibold { font-size: var(--font-size-text-5xl); font-family: var(--font-family-IDT-Sans-Demibold); font-weight: 600; font-style: normal; line-height: var(--line-height-5xl); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: none; } .header-h4-bold, .h4-bold { font-size: var(--font-size-text-5xl); font-family: var(--font-family-IDT-Sans-Bold); font-weight: 700; font-style: normal; line-height: var(--line-height-5xl); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: none; } .header-h5-normal, .h5-normal { font-size: var(--font-size-text-4xl); font-family: var(--font-family-IDT-Sans-Normal); font-weight: 450; font-style: normal; line-height: var(--line-height-4xl); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: none; } .header-h5-medium, .h5-medium, h5 { font-size: var(--font-size-text-4xl); font-family: var(--font-family-IDT-Sans-Medium); font-weight: 500; font-style: normal; line-height: var(--line-height-4xl); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: none; } .header-h5-demibold, .h5-demibold { font-size: var(--font-size-text-4xl); font-family: var(--font-family-IDT-Sans-Demibold); font-weight: 600; font-style: normal; line-height: var(--line-height-4xl); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: none; } .header-h5-bold, .h5-bold { font-size: var(--font-size-text-4xl); font-family: var(--font-family-IDT-Sans-Bold); font-weight: 700; font-style: normal; line-height: var(--line-height-4xl); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: none; } .header-h6-normal, .h6-normal { font-size: var(--font-size-text-3xl); font-family: var(--font-family-IDT-Sans-Normal); font-weight: 450; font-style: normal; line-height: var(--line-height-3xl); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: none; } .header-h6-medium, .h6-medium, h6 { font-size: var(--font-size-text-3xl); font-family: var(--font-family-IDT-Sans-Medium); font-weight: 500; font-style: normal; line-height: var(--line-height-3xl); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: none; } .header-h6-demibold, .h6-demibold { font-size: var(--font-size-text-3xl); font-family: var(--font-family-IDT-Sans-Demibold); font-weight: 600; font-style: normal; line-height: var(--line-height-3xl); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: none; } .header-h6-bold, .h6-bold { font-size: var(--font-size-text-3xl); font-family: var(--font-family-IDT-Sans-Bold); font-weight: 700; font-style: normal; line-height: var(--line-height-3xl); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: none; } .body-2xl-normal { font-size: var(--font-size-text-2xl); font-family: var(--font-family-IDT-Sans-Normal); font-weight: 450; font-style: normal; line-height: var(--line-height-2xl); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: none; } .body-2xl-medium { font-size: var(--font-size-text-2xl); font-family: var(--font-family-IDT-Sans-Medium); font-weight: 500; font-style: normal; line-height: var(--line-height-2xl); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: none; } .body-2xl-demibold { font-size: var(--font-size-text-2xl); font-family: var(--font-family-IDT-Sans-Demibold); font-weight: 600; font-style: normal; line-height: var(--line-height-2xl); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: none; } .body-2xl-bold { font-size: var(--font-size-text-2xl); font-family: var(--font-family-IDT-Sans-Bold); font-weight: 700; font-style: normal; line-height: var(--line-height-2xl); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: none; } .body-xl-normal { font-size: var(--font-size-text-xl); font-family: var(--font-family-IDT-Sans-Normal); font-weight: 450; font-style: normal; line-height: var(--line-height-xl); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: none; } .body-xl-medium { font-size: var(--font-size-text-xl); font-family: var(--font-family-IDT-Sans-Medium); font-weight: 500; font-style: normal; line-height: var(--line-height-xl); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: none; } .body-xl-demibold { font-size: var(--font-size-text-xl); font-family: var(--font-family-IDT-Sans-Demibold); font-weight: 600; font-style: normal; line-height: var(--line-height-xl); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: none; } .body-xl-bold { font-size: var(--font-size-text-xl); font-family: var(--font-family-IDT-Sans-Bold); font-weight: 700; font-style: normal; line-height: var(--line-height-xl); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: none; } .body-lg-normal, p, p.body-base-normal { font-size: var(--font-size-text-lg); font-family: var(--font-family-IDT-Sans-Normal); font-weight: 450; font-style: normal; line-height: var(--line-height-lg); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: none; } .body-lg-medium { font-size: var(--font-size-text-lg); font-family: var(--font-family-IDT-Sans-Medium); font-weight: 500; font-style: normal; line-height: var(--line-height-lg); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: none; } .body-lg-demibold { font-size: var(--font-size-text-lg); font-family: var(--font-family-IDT-Sans-Demibold); font-weight: 600; font-style: normal; line-height: var(--line-height-lg); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: none; } .body-lg-bold { font-size: var(--font-size-text-lg); font-family: var(--font-family-IDT-Sans-Bold); font-weight: 700; font-style: normal; line-height: var(--line-height-lg); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: none; } .body-base-normal { font-size: var(--font-size-text-base); font-family: var(--font-family-IDT-Sans-Normal); font-weight: 450; font-style: normal; line-height: var(--line-height-base); letter-spacing: var(--letter-spacing-tracking-tight-xs); text-decoration: none; text-transform: none; } .body-base-medium { font-size: var(--font-size-text-base); font-family: var(--font-family-IDT-Sans-Medium); font-weight: 500; font-style: normal; line-height: var(--line-height-base); letter-spacing: var(--letter-spacing-tracking-tight-xs); text-decoration: none; text-transform: none; } .body-base-demibold { font-size: var(--font-size-text-base); font-family: var(--font-family-IDT-Sans-Demibold); font-weight: 600; font-style: normal; line-height: var(--line-height-base); letter-spacing: var(--letter-spacing-tracking-tight-xs); text-decoration: none; text-transform: none; } .body-base-bold { font-size: var(--font-size-text-base); font-family: var(--font-family-IDT-Sans-Bold); font-weight: 700; font-style: normal; line-height: var(--line-height-base); letter-spacing: var(--letter-spacing-tracking-tight-xs); text-decoration: none; text-transform: none; } .body-sm-normal { font-size: var(--font-size-text-sm); font-family: var(--font-family-IDT-Sans-Normal); font-weight: 450; font-style: normal; line-height: var(--line-height-sm); text-decoration: none; text-transform: none; } .body-sm-medium { font-size: var(--font-size-text-sm); font-family: var(--font-family-IDT-Sans-Medium); font-weight: 500; font-style: normal; line-height: var(--line-height-sm); text-decoration: none; text-transform: none; } .body-sm-demibold { font-size: var(--font-size-text-sm); font-family: var(--font-family-IDT-Sans-Demibold); font-weight: 600; font-style: normal; line-height: var(--line-height-sm); text-decoration: none; text-transform: none; } .body-sm-bold { font-size: var(--font-size-text-sm); font-family: var(--font-family-IDT-Sans-Bold); font-weight: 700; font-style: normal; line-height: var(--line-height-sm); text-decoration: none; text-transform: none; } .body-xs-normal { font-size: var(--font-size-text-xs); font-family: var(--font-family-IDT-Sans-Normal); font-weight: 400; font-style: normal; line-height: var(--line-height-xs); letter-spacing: var(--letter-spacing-tracking-wide-xs); text-decoration: none; text-transform: none; } .body-xs-medium { font-size: var(--font-size-text-xs); font-family: var(--font-family-IDT-Sans-Medium); font-weight: 500; font-style: normal; line-height: var(--line-height-xs); letter-spacing: var(--letter-spacing-tracking-wide-xs); text-decoration: none; text-transform: none; } .body-xs-demibold { font-size: var(--font-size-text-xs); font-family: var(--font-family-IDT-Sans-Demibold); font-weight: 600; font-style: normal; line-height: var(--line-height-xs); letter-spacing: var(--letter-spacing-tracking-wide-xs); text-decoration: none; text-transform: none; } .body-xs-bold { font-size: var(--font-size-text-xs); font-family: var(--font-family-IDT-Sans-Bold); font-weight: 700; font-style: normal; line-height: var(--line-height-xs); letter-spacing: var(--letter-spacing-tracking-wide-xs); text-decoration: none; text-transform: none; } .body-2xs-normal { font-size: var(--font-size-text-xxs); font-family: var(--font-family-IDT-Sans-Normal); font-weight: 400; font-style: normal; line-height: var(--line-height-xxs); letter-spacing: var(--letter-spacing-tracking-wide-xs); text-decoration: none; text-transform: none; } .body-2xs-medium { font-size: var(--font-size-text-xxs); font-family: var(--font-family-IDT-Sans-Medium); font-weight: 500; font-style: normal; line-height: var(--line-height-xxs); letter-spacing: var(--letter-spacing-tracking-wide-xs); text-decoration: none; text-transform: none; } .body-2xs-demibold { font-size: var(--font-size-text-xxs); font-family: var(--font-family-IDT-Sans-Demibold); font-weight: 600; font-style: normal; line-height: var(--line-height-xxs); letter-spacing: var(--letter-spacing-tracking-wide-xs); text-decoration: none; text-transform: none; } .body-2xs-bold { font-size: var(--font-size-text-xxs); font-family: var(--font-family-IDT-Sans-Bold); font-weight: 700; font-style: normal; line-height: var(--line-height-xxs); letter-spacing: var(--letter-spacing-tracking-wide-xs); text-decoration: none; text-transform: none; } .amount-2xl-normal { font-size: var(--font-size-text-2xl); font-family: var(--font-family-IDT-Sans-Normal); font-weight: 400; font-style: normal; line-height: var(--line-height-2xl); letter-spacing: var(--letter-spacing-tracking-wide-sm); text-decoration: none; text-transform: none; } .amount-2xl-medium { font-size: var(--font-size-text-2xl); font-family: var(--font-family-IDT-Sans-Medium); font-weight: 500; font-style: normal; line-height: var(--line-height-2xl); letter-spacing: var(--letter-spacing-tracking-wide-sm); text-decoration: none; text-transform: none; } .amount-2xl-demibold { font-size: var(--font-size-text-2xl); font-family: var(--font-family-IDT-Sans-Demibold); font-weight: 600; font-style: normal; line-height: var(--line-height-2xl); letter-spacing: var(--letter-spacing-tracking-wide-sm); text-decoration: none; text-transform: none; } .amount-2xl-bold { font-size: var(--font-size-text-2xl); font-family: var(--font-family-IDT-Sans-Bold); font-weight: 700; font-style: normal; line-height: var(--line-height-2xl); letter-spacing: var(--letter-spacing-tracking-wide-sm); text-decoration: none; text-transform: none; } .amount-xl-normal { font-size: var(--font-size-text-xl); font-family: var(--font-family-IDT-Sans-Normal); font-weight: 400; font-style: normal; line-height: var(--line-height-xl); letter-spacing: var(--letter-spacing-tracking-wide-sm); text-decoration: none; text-transform: none; } .amount-xl-medium { font-size: var(--font-size-text-xl); font-family: var(--font-family-IDT-Sans-Medium); font-weight: 500; font-style: normal; line-height: var(--line-height-xl); letter-spacing: var(--letter-spacing-tracking-wide-sm); text-decoration: none; text-transform: none; } .amount-xl-demibold { font-size: var(--font-size-text-xl); font-family: var(--font-family-IDT-Sans-Demibold); font-weight: 600; font-style: normal; line-height: var(--line-height-xl); letter-spacing: var(--letter-spacing-tracking-wide-sm); text-decoration: none; text-transform: none; } .amount-xl-bold { font-size: var(--font-size-text-xl); font-family: var(--font-family-IDT-Sans-Bold); font-weight: 700; font-style: normal; line-height: var(--line-height-xl); letter-spacing: var(--letter-spacing-tracking-wide-sm); text-decoration: none; text-transform: none; } .amount-lg-normal { font-size: var(--font-size-text-lg); font-family: var(--font-family-IDT-Sans-Normal); font-weight: 400; font-style: normal; line-height: var(--line-height-lg); letter-spacing: var(--letter-spacing-tracking-wide-sm); text-decoration: none; text-transform: none; } .amount-lg-medium { font-size: var(--font-size-text-lg); font-family: var(--font-family-IDT-Sans-Medium); font-weight: 500; font-style: normal; line-height: var(--line-height-lg); letter-spacing: var(--letter-spacing-tracking-wide-sm); text-decoration: none; text-transform: none; } .amount-lg-demibold { font-size: var(--font-size-text-lg); font-family: var(--font-family-IDT-Sans-Demibold); font-weight: 600; font-style: normal; line-height: var(--line-height-lg); letter-spacing: var(--letter-spacing-tracking-wide-sm); text-decoration: none; text-transform: none; } .amount-lg-bold { font-size: var(--font-size-text-lg); font-family: var(--font-family-IDT-Sans-Bold); font-weight: 700; font-style: normal; line-height: var(--line-height-lg); letter-spacing: var(--letter-spacing-tracking-wide-sm); text-decoration: none; text-transform: none; } .amount-base-normal { font-size: var(--font-size-text-base); font-family: var(--font-family-IDT-Sans-Normal); font-weight: 400; font-style: normal; line-height: var(--line-height-base); letter-spacing: var(--letter-spacing-tracking-wide-sm); text-decoration: none; text-transform: none; } .amount-base-medium { font-size: var(--font-size-text-base); font-family: var(--font-family-IDT-Sans-Medium); font-weight: 500; font-style: normal; line-height: var(--line-height-base); letter-spacing: var(--letter-spacing-tracking-wide-sm); text-decoration: none; text-transform: none; } .amount-base-demibold { font-size: var(--font-size-text-base); font-family: var(--font-family-IDT-Sans-Demibold); font-weight: 600; font-style: normal; line-height: var(--line-height-base); letter-spacing: var(--letter-spacing-tracking-wide-sm); text-decoration: none; text-transform: none; } .amount-base-bold { font-size: var(--font-size-text-base); font-family: var(--font-family-IDT-Sans-Bold); font-weight: 700; font-style: normal; line-height: var(--line-height-base); letter-spacing: var(--letter-spacing-tracking-wide-sm); text-decoration: none; text-transform: none; } .amount-sm-normal { font-size: var(--font-size-text-sm); font-family: var(--font-family-IDT-Sans-Normal); font-weight: 400; font-style: normal; line-height: var(--line-height-sm); letter-spacing: var(--letter-spacing-tracking-wide-sm); text-decoration: none; text-transform: none; } .amount-sm-medium { font-size: var(--font-size-text-sm); font-family: var(--font-family-IDT-Sans-Medium); font-weight: 500; font-style: normal; line-height: var(--line-height-sm); letter-spacing: var(--letter-spacing-tracking-wide-sm); text-decoration: none; text-transform: none; } .amount-sm-demibold { font-size: var(--font-size-text-sm); font-family: var(--font-family-IDT-Sans-Demibold); font-weight: 600; font-style: normal; line-height: var(--line-height-sm); letter-spacing: var(--letter-spacing-tracking-wide-sm); text-decoration: none; text-transform: none; } .amount-sm-bold { font-size: var(--font-size-text-sm); font-family: var(--font-family-IDT-Sans-Bold); font-weight: 700; font-style: normal; line-height: var(--line-height-sm); letter-spacing: var(--letter-spacing-tracking-wide-sm); text-decoration: none; text-transform: none; } .amount-xs-normal { font-size: var(--font-size-text-xs); font-family: var(--font-family-IDT-Sans-Normal); font-weight: 400; font-style: normal; line-height: var(--line-height-xs); letter-spacing: var(--letter-spacing-tracking-wide-sm); text-decoration: none; text-transform: none; } .amount-xs-medium { font-size: var(--font-size-text-xs); font-family: var(--font-family-IDT-Sans-Medium); font-weight: 500; font-style: normal; line-height: var(--line-height-xs); letter-spacing: var(--letter-spacing-tracking-wide-sm); text-decoration: none; text-transform: none; } .amount-xs-demibold { font-size: var(--font-size-text-xs); font-family: var(--font-family-IDT-Sans-Demibold); font-weight: 600; font-style: normal; line-height: var(--line-height-xs); letter-spacing: var(--letter-spacing-tracking-wide-sm); text-decoration: none; text-transform: none; } .amount-xs-bold { font-size: var(--font-size-text-xs); font-family: var(--font-family-IDT-Sans-Bold); font-weight: 700; font-style: normal; line-height: var(--line-height-xs); letter-spacing: var(--letter-spacing-tracking-wide-sm); text-decoration: none; text-transform: none; } .amount-2xs-normal { font-size: var(--font-size-text-xxs); font-family: var(--font-family-IDT-Sans-Normal); font-weight: 400; font-style: normal; line-height: var(--line-height-xxs); letter-spacing: var(--letter-spacing-tracking-wide-sm); text-decoration: none; text-transform: none; } .amount-2xs-medium { font-size: var(--font-size-text-xxs); font-family: var(--font-family-IDT-Sans-Medium); font-weight: 500; font-style: normal; line-height: var(--line-height-xxs); letter-spacing: var(--letter-spacing-tracking-wide-sm); text-decoration: none; text-transform: none; } .amount-2xs-demibold { font-size: var(--font-size-text-xxs); font-family: var(--font-family-IDT-Sans-Demibold); font-weight: 600; font-style: normal; line-height: var(--line-height-xxs); letter-spacing: var(--letter-spacing-tracking-wide-sm); text-decoration: none; text-transform: none; } .amount-2xs-bold { font-size: var(--font-size-text-xxs); font-family: var(--font-family-IDT-Sans-Bold); font-weight: 700; font-style: normal; line-height: var(--line-height-xxs); letter-spacing: var(--letter-spacing-tracking-wide-sm); text-decoration: none; text-transform: none; } .subheading-subheading-1-normal { font-size: var(--font-size-text-xl); font-family: var(--font-family-IDT-Sans-Normal); font-weight: 400; font-style: normal; line-height: var(--line-height-xl); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: uppercase; } .subheading-subheading-1-medium { font-size: var(--font-size-text-xl); font-family: var(--font-family-IDT-Sans-Medium); font-weight: 500; font-style: normal; line-height: var(--line-height-xl); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: uppercase; } .subheading-subheading-1-demibold { font-size: var(--font-size-text-xl); font-family: var(--font-family-IDT-Sans-Demibold); font-weight: 600; font-style: normal; line-height: var(--line-height-xl); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: uppercase; } .subheading-subheading-1-bold { font-size: var(--font-size-text-xl); font-family: var(--font-family-IDT-Sans-Bold); font-weight: 700; font-style: normal; line-height: var(--line-height-xl); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: uppercase; } .subheading-subheading-2-normal { font-size: var(--font-size-text-lg); font-family: var(--font-family-IDT-Sans-Normal); font-weight: 400; font-style: normal; line-height: var(--line-height-lg); letter-spacing: var(--letter-spacing-tracking-tight-xs); text-decoration: none; text-transform: uppercase; } .subheading-subheading-2-medium { font-size: var(--font-size-text-lg); font-family: var(--font-family-IDT-Sans-Medium); font-weight: 500; font-style: normal; line-height: var(--line-height-lg); letter-spacing: var(--letter-spacing-tracking-tight-xs); text-decoration: none; text-transform: uppercase; } .subheading-subheading-2-demibold { font-size: var(--font-size-text-lg); font-family: var(--font-family-IDT-Sans-Demibold); font-weight: 600; font-style: normal; line-height: var(--line-height-lg); letter-spacing: var(--letter-spacing-tracking-tight-xs); text-decoration: none; text-transform: uppercase; } .subheading-subheading-2-bold { font-size: var(--font-size-text-lg); font-family: var(--font-family-IDT-Sans-Bold); font-weight: 700; font-style: normal; line-height: var(--line-height-lg); letter-spacing: var(--letter-spacing-tracking-tight-xs); text-decoration: none; text-transform: uppercase; } .subheading-subheading-3-normal { font-size: var(--font-size-text-base); font-family: var(--font-family-IDT-Sans-Normal); font-weight: 400; font-style: normal; line-height: var(--line-height-base); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: uppercase; } .subheading-subheading-3-medium { font-size: var(--font-size-text-base); font-family: var(--font-family-IDT-Sans-Medium); font-weight: 500; font-style: normal; line-height: var(--line-height-base); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: uppercase; } .subheading-subheading-3-demibold { font-size: var(--font-size-text-base); font-family: var(--font-family-IDT-Sans-Demibold); font-weight: 600; font-style: normal; line-height: var(--line-height-base); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: uppercase; } .subheading-subheading-3-bold { font-size: var(--font-size-text-base); font-family: var(--font-family-IDT-Sans-Bold); font-weight: 700; font-style: normal; line-height: var(--line-height-base); letter-spacing: var(--letter-spacing-tracking-tight-sm); text-decoration: none; text-transform: uppercase; } .subheading-subheading-4-normal { font-size: var(--font-size-text-sm); font-family: var(--font-family-IDT-Sans-Normal); font-weight: 400; font-style: normal; line-height: var(--line-height-sm); text-decoration: none; text-transform: uppercase; } .subheading-subheading-4-medium { font-size: var(--font-size-text-sm); font-family: var(--font-family-IDT-Sans-Medium); font-weight: 500; font-style: normal; line-height: var(--line-height-sm); text-decoration: none; text-transform: uppercase; } .subheading-subheading-4-demibold { font-size: var(--font-size-text-sm); font-family: var(--font-family-IDT-Sans-Demibold); font-weight: 600; font-style: normal; line-height: var(--line-height-sm); text-decoration: none; text-transform: uppercase; } .subheading-subheading-4-bold { font-size: var(--font-size-text-sm); font-family: var(--font-family-IDT-Sans-Bold); font-weight: 700; font-style: normal; line-height: var(--line-height-sm); text-decoration: none; text-transform: uppercase; } .subheading-subheading-5-normal { font-size: var(--font-size-text-xs); font-family: var(--font-family-IDT-Sans-Normal); font-weight: 400; font-style: normal; line-height: var(--line-height-xs); letter-spacing: var(--letter-spacing-tracking-wide-sm); text-decoration: none; text-transform: uppercase; } .subheading-subheading-5-medium { font-size: var(--font-size-text-xs); font-family: var(--font-family-IDT-Sans-Medium); font-weight: 500; font-style: normal; line-height: var(--line-height-xs); letter-spacing: var(--letter-spacing-tracking-wide-sm); text-decoration: none; text-transform: uppercase; } .subheading-subheading-5-demibold { font-size: var(--font-size-text-xs); font-family: var(--font-family-IDT-Sans-Demibold); font-weight: 600; font-style: normal; line-height: var(--line-height-xs); letter-spacing: var(--letter-spacing-tracking-wide-sm); text-decoration: none; text-transform: uppercase; } .subheading-subheading-5-bold { font-size: var(--font-size-text-xs); font-family: var(--font-family-IDT-Sans-Bold); font-weight: 700; font-style: normal; line-height: var(--line-height-xs); letter-spacing: var(--letter-spacing-tracking-wide-sm); text-decoration: none; text-transform: uppercase; } /*!***************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./assets/src/css/idtTheme/shadows/shadows.css ***! \***************************************************************************************************************************/ :root { /* Effect styles */ --shadow---cupertino---light: 0px 1px 2px rgba(0, 0, 0, 0.01), 0px 3px 3px rgba(0, 0, 0, 0.01), 0px 5px 4px rgba(0, 0, 0, 0.02); --shadow---cupertino---dark: 0px 1px 2px rgba(0, 0, 0, 0.1), 0px 3px 3px rgba(0, 0, 0, 0.02), 0px 5px 4px rgba(0, 0, 0, 0.03); --shadow---superficial---light: 0px 1px 3px rgba(0, 0, 0, 0.01), 0px 5px 5px rgba(0, 0, 0, 0.01), 0px 11px 7px rgba(0, 0, 0, 0.02); --shadow---superficial---dark: 0px 1px 3px rgba(0, 0, 0, 0.02), 0px 5px 5px rgba(0, 0, 0, 0.02), 0px 11px 7px rgba(0, 0, 0, 0.03); --shadow---shallow---light: 0px 1px 3px rgba(0, 0, 0, 0.03), 0px 5px 5px rgba(0, 0, 0, 0.03), 0px 11px 7px rgba(0, 0, 0, 0.02); --shadow---shallow---dark: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 5px 5px rgba(0, 0, 0, 0.09), 0px 11px 7px rgba(0, 0, 0, 0.05), 0px 19px 8px rgba(0, 0, 0, 0.01); --shadow---deep---light: 0px 3px 7px rgba(0, 0, 0, 0.03), 0px 13px 13px rgba(0, 0, 0, 0.03), 0px 28px 17px rgba(0, 0, 0, 0.02); --shadow---deep---dark: 0px 3px 7px rgba(0, 0, 0, 0.1), 0px 13px 13px rgba(0, 0, 0, 0.09), 0px 28px 17px rgba(0, 0, 0, 0.05); --shadow---deep---darker: 0px 3px 7px rgba(0, 0, 0, 0.2), 0px 13px 13px rgba(0, 0, 0, 0.1), 0px 28px 17px rgba(0, 0, 0, 0.09); --shadow--white--line: 0px 1px 0px var(--white-fixed-alpha-90); } /*!*************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./assets/src/css/idtTheme/spaces/spaces.css ***! \*************************************************************************************************************************/ /* ↔️ Spaces - Value */ :root { --space-0: 0rem; --space-2: 0.125rem; --space-4: 0.25rem; --space-6: 0.375rem; --space-8: 0.5rem; --space-10: 0.625rem; --space-12: 0.75rem; --space-14: 0.875rem; --space-inside-main-16: 1rem; --space-18: 1.125rem; --space-20: 1.25rem; --space-22: 1.375rem; --space-outside-main-24: 1.5rem; --space-26: 1.625rem; --space-28: 1.75rem; --space-30: 1.875rem; --space-32: 2rem; --space-34: 2.125rem; --space-36: 2.25rem; --space-38: 2.375rem; --space-40: 2.5rem; --space-42: 2.625rem; --space-44: 2.75rem; --space-46: 2.875rem; --space-48: 3rem; --space-56: 3.5rem; --space-64: 4rem; --space-72: 4.5rem; --space-80: 5rem; --space-88: 5.5rem; --space-96: 6rem; --space-104: 6.5rem; --space-112: 7rem; --space-120: 7.5rem; --space-128: 8rem; --space-9999: 624.9375rem; --radius-0: 0rem; --radius-2: 0.125rem; --radius-4: 0.25rem; --radius-6: 0.375rem; --radius-8: 0.5rem; --radius-10: 0.625rem; --radius-12: 0.75rem; --radius-14: 0.875rem; --radius-16: 1rem; --radius-main-16: 1rem; --radius-18: 1.125rem; --radius-20: 1.25rem; --radius-22: 1.375rem; --radius-24: 1.5rem; --radius-26: 1.625rem; --radius-28: 1.75rem; --radius-30: 1.875rem; --radius-32: 2rem; --radius-34: 2.125rem; --radius-36: 2.25rem; --radius-38: 2.375rem; --radius-40: 2.5rem; --radius-42: 2.625rem; --radius-44: 2.75rem; --radius-46: 2.875rem; --radius-48: 3rem; --radius-64: 4rem; --radius-128: 8rem; --radius-9999: 624.9375rem; } /*!****************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./assets/src/css/idtTheme/text.css ***! \****************************************************************************************************************/ /** * IDT Theme - Text Color Utilities * * Text color utility classes using CSS variables that adapt to the current theme mode. * Usage: .text-neutral-darkest, .text-error-main, .text-info-main, etc. */ /* ============================================ NEUTRALS ============================================ */ .text-neutral-darkest { color: var(--neutral-darkest); } .text-neutral-title, .wp-block-heading { color: var(--neutral-title); } .text-neutral-body, p { color: var(--neutral-body); } .text-neutral-secondary { color: var(--neutral-secondary); } .text-neutral-tertiary { color: var(--neutral-tertiary); } .text-neutral-disabled { color: var(--neutral-disabled); } .text-neutral-separator { color: var(--neutral-separator); } .text-neutral-border { color: var(--neutral-border); } .text-neutral-subtle { color: var(--neutral-subtle); } .text-neutral-extrasubtle { color: var(--neutral-extrasubtle); } .text-neutral-bgColor { color: var(--neutral-bgColor); } .text-neutral-cardColor { color: var(--neutral-cardColor); } .text-neutral-lightest { color: var(--neutral-lightest); } /* Hover states for neutral text colors */ .hover\:text-neutral-darkest:hover { color: var(--neutral-darkest); } .hover\:text-neutral-title:hover { color: var(--neutral-title); } .hover\:text-neutral-body:hover { color: var(--neutral-body); } .hover\:text-neutral-secondary:hover { color: var(--neutral-secondary); } .hover\:text-neutral-tertiary:hover { color: var(--neutral-tertiary); } .hover\:text-neutral-disabled:hover { color: var(--neutral-disabled); } .hover\:text-neutral-separator:hover { color: var(--neutral-separator); } .hover\:text-neutral-border:hover { color: var(--neutral-border); } .hover\:text-neutral-subtle:hover { color: var(--neutral-subtle); } .hover\:text-neutral-extrasubtle:hover { color: var(--neutral-extrasubtle); } .hover\:text-neutral-bgColor:hover { color: var(--neutral-bgColor); } .hover\:text-neutral-cardColor:hover { color: var(--neutral-cardColor); } .hover\:text-neutral-lightest:hover { color: var(--neutral-lightest); } /* ============================================ ERROR ============================================ */ .text-error-main { color: var(--error-error-main); } .text-error-text { color: var(--error-error-text); } .text-on-error { color: var(--error-on-error); } .text-error-variant { color: var(--error-variant-error-variant); } .text-error-variant-text { color: var(--error-variant-error-text-variant); } .text-on-error-variant { color: var(--error-variant-on-error-variant); } /* Hover states for error text colors */ .hover\:text-error-main:hover { color: var(--error-error-main); } .hover\:text-error-text:hover { color: var(--error-error-text); } .hover\:text-on-error:hover { color: var(--error-on-error); } .hover\:text-error-variant:hover { color: var(--error-variant-error-variant); } .hover\:text-error-variant-text:hover { color: var(--error-variant-error-text-variant); } .hover\:text-on-error-variant:hover { color: var(--error-variant-on-error-variant); } /* ============================================ INFO ============================================ */ .text-info-main { color: var(--info-info-main); } .text-info-text { color: var(--info-info-text); } .text-on-info { color: var(--info-on-info); } .text-info-variant { color: var(--info-variant-info-variant); } .text-info-variant-text { color: var(--info-variant-info-text-variant); } .text-on-info-variant { color: var(--info-variant-on-info-variant); } /* Hover states for info text colors */ .hover\:text-info-main:hover { color: var(--info-info-main); } .hover\:text-info-text:hover { color: var(--info-info-text); } .hover\:text-on-info:hover { color: var(--info-on-info); } .hover\:text-info-variant:hover { color: var(--info-variant-info-variant); } .hover\:text-info-variant-text:hover { color: var(--info-variant-info-text-variant); } .hover\:text-on-info-variant:hover { color: var(--info-variant-on-info-variant); } /* ============================================ SUCCESS ============================================ */ .text-success-main { color: var(--success-success-main); } .text-success-text { color: var(--success-success-text); } .text-on-success { color: var(--success-on-success-main); } .text-success-variant { color: var(--success-variant-success-variant); } .text-success-variant-text { color: var(--success-variant-success-text-variant); } .text-on-success-variant { color: var(--success-variant-on-success-variant); } /* Hover states for success text colors */ .hover\:text-success-main:hover { color: var(--success-success-main); } .hover\:text-success-text:hover { color: var(--success-success-text); } .hover\:text-on-success:hover { color: var(--success-on-success-main); } .hover\:text-success-variant:hover { color: var(--success-variant-success-variant); } .hover\:text-success-variant-text:hover { color: var(--success-variant-success-text-variant); } .hover\:text-on-success-variant:hover { color: var(--success-variant-on-success-variant); } /* ============================================ WARNING ============================================ */ .text-warning-main { color: var(--warning-warning-main); } .text-warning-text { color: var(--warning-warning-text); } .text-on-warning { color: var(--warning-on-warning); } .text-warning-variant { color: var(--warning-variant-warning-variant); } .text-warning-variant-text { color: var(--warning-variant-warning-text-variant); } .text-on-warning-variant { color: var(--warning-variant-on-warning-variant); } /* Hover states for warning text colors */ .hover\:text-warning-main:hover { color: var(--warning-warning-main); } .hover\:text-warning-text:hover { color: var(--warning-warning-text); } .hover\:text-on-warning:hover { color: var(--warning-on-warning); } .hover\:text-warning-variant:hover { color: var(--warning-variant-warning-variant); } .hover\:text-warning-variant-text:hover { color: var(--warning-variant-warning-text-variant); } .hover\:text-on-warning-variant:hover { color: var(--warning-variant-on-warning-variant); } /* ============================================ ATTENTION ============================================ */ .text-attention-main { color: var(--attention-attention-main); } .text-attention-text { color: var(--attention-attention-text); } .text-on-attention { color: var(--attention-on-attention); } .text-attention-variant { color: var(--attention-variant-attention-variant); } .text-attention-variant-text { color: var(--attention-variant-attention-text-variant); } .text-on-attention-variant { color: var(--attention-variant-on-attention-variant); } /* Hover states for attention text colors */ .hover\:text-attention-main:hover { color: var(--attention-attention-main); } .hover\:text-attention-text:hover { color: var(--attention-attention-text); } .hover\:text-on-attention:hover { color: var(--attention-on-attention); } .hover\:text-attention-variant:hover { color: var(--attention-variant-attention-variant); } .hover\:text-attention-variant-text:hover { color: var(--attention-variant-attention-text-variant); } .hover\:text-on-attention-variant:hover { color: var(--attention-variant-on-attention-variant); } /* ============================================ PROMOTION ============================================ */ .text-promotion-main { color: var(--promotion-promotion-main); } .text-promotion-text { color: var(--promotion-promotion-text); } .text-on-promotion { color: var(--promotion-on-promotion); } .text-promotion-variant { color: var(--promotion-variant-promotion-variant); } .text-promotion-variant-text { color: var(--promotion-variant-promotion-text-variant); } .text-on-promotion-variant { color: var(--promotion-variant-on-promotion-variant); } /* Hover states for promotion text colors */ .hover\:text-promotion-main:hover { color: var(--promotion-promotion-main); } .hover\:text-promotion-text:hover { color: var(--promotion-promotion-text); } .hover\:text-on-promotion:hover { color: var(--promotion-on-promotion); } .hover\:text-promotion-variant:hover { color: var(--promotion-variant-promotion-variant); } .hover\:text-promotion-variant-text:hover { color: var(--promotion-variant-promotion-text-variant); } .hover\:text-on-promotion-variant:hover { color: var(--promotion-variant-on-promotion-variant); } /* ============================================ FIXED COLORS ============================================ */ .text-white { color: var(--white); } .text-black { color: var(--black); } .text-fixed-white { color: var(--fixed-white-fixed); } .text-fixed-black { color: var(--fixed-black-fixed); } .text-fixed-neutral { color: var(--fixed-neutral-fixed); } /* Hover states for fixed colors */ .hover\:text-white:hover { color: var(--white); } .hover\:text-black:hover { color: var(--black); } .hover\:text-fixed-white:hover { color: var(--fixed-white-fixed); } .hover\:text-fixed-black:hover { color: var(--fixed-black-fixed); } .hover\:text-fixed-neutral:hover { color: var(--fixed-neutral-fixed); } /* ============================================ ALPHA TRANSPARENCY COLORS ============================================ */ /* White Alpha */ .text-white-alpha-fixed-0 { color: var(--white-fixed-alpha-0); } .text-white-alpha-fixed-5 { color: var(--white-fixed-alpha-5); } .text-white-alpha-fixed-10 { color: var(--white-fixed-alpha-10); } .text-white-alpha-fixed-20 { color: var(--white-fixed-alpha-20); } .text-white-alpha-fixed-30 { color: var(--white-fixed-alpha-30); } .text-white-alpha-fixed-40 { color: var(--white-fixed-alpha-40); } .text-white-alpha-fixed-50 { color: var(--white-fixed-alpha-50); } .text-white-alpha-fixed-60 { color: var(--white-fixed-alpha-60); } .text-white-alpha-fixed-70 { color: var(--white-fixed-alpha-70); } .text-white-alpha-fixed-80 { color: var(--white-fixed-alpha-80); } .text-white-alpha-fixed-90 { color: var(--white-fixed-alpha-90); } /* Hover states for white alpha */ .hover\:text-white-alpha-fixed-0:hover { color: var(--white-fixed-alpha-0); } .hover\:text-white-alpha-fixed-5:hover { color: var(--white-fixed-alpha-5); } .hover\:text-white-alpha-fixed-10:hover { color: var(--white-fixed-alpha-10); } .hover\:text-white-alpha-fixed-20:hover { color: var(--white-fixed-alpha-20); } .hover\:text-white-alpha-fixed-30:hover { color: var(--white-fixed-alpha-30); } .hover\:text-white-alpha-fixed-40:hover { color: var(--white-fixed-alpha-40); } .hover\:text-white-alpha-fixed-50:hover { color: var(--white-fixed-alpha-50); } .hover\:text-white-alpha-fixed-60:hover { color: var(--white-fixed-alpha-60); } .hover\:text-white-alpha-fixed-70:hover { color: var(--white-fixed-alpha-70); } .hover\:text-white-alpha-fixed-80:hover { color: var(--white-fixed-alpha-80); } .hover\:text-white-alpha-fixed-90:hover { color: var(--white-fixed-alpha-90); } /* Black Alpha */ .text-black-alpha-fixed-0 { color: var(--black-fixed-alpha-0); } .text-black-alpha-fixed-5 { color: var(--black-fixed-alpha-5); } .text-black-alpha-fixed-10 { color: var(--black-fixed-alpha-10); } .text-black-alpha-fixed-20 { color: var(--black-fixed-alpha-20); } .text-black-alpha-fixed-30 { color: var(--black-fixed-alpha-30); } .text-black-alpha-fixed-40 { color: var(--black-fixed-alpha-40); } .text-black-alpha-fixed-50 { color: var(--black-fixed-alpha-50); } .text-black-alpha-fixed-60 { color: var(--black-fixed-alpha-60); } .text-black-alpha-fixed-70 { color: var(--black-fixed-alpha-70); } .text-black-alpha-fixed-80 { color: var(--black-fixed-alpha-80); } .text-black-alpha-fixed-90 { color: var(--black-fixed-alpha-90); } /* Hover states for black alpha */ .hover\:text-black-alpha-fixed-0:hover { color: var(--black-fixed-alpha-0); } .hover\:text-black-alpha-fixed-5:hover { color: var(--black-fixed-alpha-5); } .hover\:text-black-alpha-fixed-10:hover { color: var(--black-fixed-alpha-10); } .hover\:text-black-alpha-fixed-20:hover { color: var(--black-fixed-alpha-20); } .hover\:text-black-alpha-fixed-30:hover { color: var(--black-fixed-alpha-30); } .hover\:text-black-alpha-fixed-40:hover { color: var(--black-fixed-alpha-40); } .hover\:text-black-alpha-fixed-50:hover { color: var(--black-fixed-alpha-50); } .hover\:text-black-alpha-fixed-60:hover { color: var(--black-fixed-alpha-60); } .hover\:text-black-alpha-fixed-70:hover { color: var(--black-fixed-alpha-70); } .hover\:text-black-alpha-fixed-80:hover { color: var(--black-fixed-alpha-80); } .hover\:text-black-alpha-fixed-90:hover { color: var(--black-fixed-alpha-90); } /* Color prefix aliases (for backward compatibility) */ .color-black-alpha-fixed-0 { color: var(--black-fixed-alpha-0); } .color-black-alpha-fixed-5 { color: var(--black-fixed-alpha-5); } .color-black-alpha-fixed-10 { color: var(--black-fixed-alpha-10); } .color-black-alpha-fixed-20 { color: var(--black-fixed-alpha-20); } .color-black-alpha-fixed-30 { color: var(--black-fixed-alpha-30); } .color-black-alpha-fixed-40 { color: var(--black-fixed-alpha-40); } .color-black-alpha-fixed-50 { color: var(--black-fixed-alpha-50); } .color-black-alpha-fixed-60 { color: var(--black-fixed-alpha-60); } .color-black-alpha-fixed-70 { color: var(--black-fixed-alpha-70); } .color-black-alpha-fixed-80 { color: var(--black-fixed-alpha-80); } .color-black-alpha-fixed-90 { color: var(--black-fixed-alpha-90); } .color-white-alpha-fixed-0 { color: var(--white-fixed-alpha-0); } .color-white-alpha-fixed-5 { color: var(--white-fixed-alpha-5); } .color-white-alpha-fixed-10 { color: var(--white-fixed-alpha-10); } .color-white-alpha-fixed-20 { color: var(--white-fixed-alpha-20); } .color-white-alpha-fixed-30 { color: var(--white-fixed-alpha-30); } .color-white-alpha-fixed-40 { color: var(--white-fixed-alpha-40); } .color-white-alpha-fixed-50 { color: var(--white-fixed-alpha-50); } .color-white-alpha-fixed-60 { color: var(--white-fixed-alpha-60); } .color-white-alpha-fixed-70 { color: var(--white-fixed-alpha-70); } .color-white-alpha-fixed-80 { color: var(--white-fixed-alpha-80); } .color-white-alpha-fixed-90 { color: var(--white-fixed-alpha-90); } /* Neutral Variant Alpha */ .text-neutral-variant-alpha-fixed-0 { color: var(--neutral-variant-fixed-alpha-0); } .text-neutral-variant-alpha-fixed-10 { color: var(--neutral-variant-fixed-alpha-10); } .text-neutral-variant-alpha-fixed-20 { color: var(--neutral-variant-fixed-alpha-20); } .text-neutral-variant-alpha-fixed-30 { color: var(--neutral-variant-fixed-alpha-30); } .text-neutral-variant-alpha-fixed-40 { color: var(--neutral-variant-fixed-alpha-40); } .text-neutral-variant-alpha-fixed-50 { color: var(--neutral-variant-fixed-alpha-50); } .text-neutral-variant-alpha-fixed-60 { color: var(--neutral-variant-fixed-alpha-60); } .text-neutral-variant-alpha-fixed-70 { color: var(--neutral-variant-fixed-alpha-70); } .text-neutral-variant-alpha-fixed-80 { color: var(--neutral-variant-fixed-alpha-80); } .text-neutral-variant-alpha-fixed-90 { color: var(--neutral-variant-fixed-alpha-90); } /* Hover states for neutral variant alpha */ .hover\:text-neutral-variant-alpha-fixed-0:hover { color: var(--neutral-variant-fixed-alpha-0); } .hover\:text-neutral-variant-alpha-fixed-10:hover { color: var(--neutral-variant-fixed-alpha-10); } .hover\:text-neutral-variant-alpha-fixed-20:hover { color: var(--neutral-variant-fixed-alpha-20); } .hover\:text-neutral-variant-alpha-fixed-30:hover { color: var(--neutral-variant-fixed-alpha-30); } .hover\:text-neutral-variant-alpha-fixed-40:hover { color: var(--neutral-variant-fixed-alpha-40); } .hover\:text-neutral-variant-alpha-fixed-50:hover { color: var(--neutral-variant-fixed-alpha-50); } .hover\:text-neutral-variant-alpha-fixed-60:hover { color: var(--neutral-variant-fixed-alpha-60); } .hover\:text-neutral-variant-alpha-fixed-70:hover { color: var(--neutral-variant-fixed-alpha-70); } .hover\:text-neutral-variant-alpha-fixed-80:hover { color: var(--neutral-variant-fixed-alpha-80); } .hover\:text-neutral-variant-alpha-fixed-90:hover { color: var(--neutral-variant-fixed-alpha-90); } /* ============================================ BRAND COLORS ============================================ */ /* BOSS Revolution */ .text-boss-revolution-50 { color: var(--BOSS-Revolution-br-primary-50); } .text-boss-revolution-100 { color: var(--BOSS-Revolution-br-primary-100); } .text-boss-revolution-200 { color: var(--BOSS-Revolution-br-primary-200); } .text-boss-revolution-300 { color: var(--BOSS-Revolution-br-primary-300); } .text-boss-revolution-400 { color: var(--BOSS-Revolution-br-primary-400); } .text-boss-revolution-500 { color: var(--BOSS-Revolution-br-primary-500); } .text-boss-revolution-600 { color: var(--BOSS-Revolution-br-primary-600); } .text-boss-revolution-700 { color: var(--BOSS-Revolution-br-primary-700); } .text-boss-revolution-800 { color: var(--BOSS-Revolution-br-primary-main-800); } .text-boss-revolution-900 { color: var(--BOSS-Revolution-br-primary-900); } .text-boss-revolution-950 { color: var(--BOSS-Revolution-br-primary-950); } /* Hover states for BOSS Revolution */ .hover\:text-boss-revolution-50:hover { color: var(--BOSS-Revolution-br-primary-50); } .hover\:text-boss-revolution-100:hover { color: var(--BOSS-Revolution-br-primary-100); } .hover\:text-boss-revolution-200:hover { color: var(--BOSS-Revolution-br-primary-200); } .hover\:text-boss-revolution-300:hover { color: var(--BOSS-Revolution-br-primary-300); } .hover\:text-boss-revolution-400:hover { color: var(--BOSS-Revolution-br-primary-400); } .hover\:text-boss-revolution-500:hover { color: var(--BOSS-Revolution-br-primary-500); } .hover\:text-boss-revolution-600:hover { color: var(--BOSS-Revolution-br-primary-600); } .hover\:text-boss-revolution-700:hover { color: var(--BOSS-Revolution-br-primary-700); } .hover\:text-boss-revolution-800:hover { color: var(--BOSS-Revolution-br-primary-main-800); } .hover\:text-boss-revolution-900:hover { color: var(--BOSS-Revolution-br-primary-900); } .hover\:text-boss-revolution-950:hover { color: var(--BOSS-Revolution-br-primary-950); } /* BOSS Money */ .text-boss-money-50 { color: var(--BOSS-Money-bm-primary-50); } .text-boss-money-100 { color: var(--BOSS-Money-bm-primary-100); } .text-boss-money-200 { color: var(--BOSS-Money-bm-primary-200); } .text-boss-money-300 { color: var(--BOSS-Money-bm-primary-300); } .text-boss-money-400 { color: var(--BOSS-Money-bm-primary-400); } .text-boss-money-500 { color: var(--BOSS-Money-bm-primary-main-500); } .text-boss-money-600 { color: var(--BOSS-Money-bm-primary-600); } .text-boss-money-700 { color: var(--BOSS-Money-bm-primary-700); } .text-boss-money-800 { color: var(--BOSS-Money-bm-primary-800); } .text-boss-money-900 { color: var(--BOSS-Money-bm-primary-900); } .text-boss-money-950 { color: var(--BOSS-Money-bm-primary-950); } /* Hover states for BOSS Money */ .hover\:text-boss-money-50:hover { color: var(--BOSS-Money-bm-primary-50); } .hover\:text-boss-money-100:hover { color: var(--BOSS-Money-bm-primary-100); } .hover\:text-boss-money-200:hover { color: var(--BOSS-Money-bm-primary-200); } .hover\:text-boss-money-300:hover { color: var(--BOSS-Money-bm-primary-300); } .hover\:text-boss-money-400:hover { color: var(--BOSS-Money-bm-primary-400); } .hover\:text-boss-money-500:hover { color: var(--BOSS-Money-bm-primary-main-500); } .hover\:text-boss-money-600:hover { color: var(--BOSS-Money-bm-primary-600); } .hover\:text-boss-money-700:hover { color: var(--BOSS-Money-bm-primary-700); } .hover\:text-boss-money-800:hover { color: var(--BOSS-Money-bm-primary-800); } .hover\:text-boss-money-900:hover { color: var(--BOSS-Money-bm-primary-900); } .hover\:text-boss-money-950:hover { color: var(--BOSS-Money-bm-primary-950); } /* BOSS REDolution */ .text-boss-redolution-50 { color: var(--BOSS-REDolution-bred-primary-50); } .text-boss-redolution-100 { color: var(--BOSS-REDolution-bred-primary-100); } .text-boss-redolution-200 { color: var(--BOSS-REDolution-bred-primary-200); } .text-boss-redolution-300 { color: var(--BOSS-REDolution-bred-primary-300); } .text-boss-redolution-400 { color: var(--BOSS-REDolution-bred-primary-400); } .text-boss-redolution-500 { color: var(--BOSS-REDolution-bred-primary-500); } .text-boss-redolution-600 { color: var(--BOSS-REDolution-bred-primary-main-600); } .text-boss-redolution-700 { color: var(--BOSS-REDolution-bred-primary-700); } .text-boss-redolution-800 { color: var(--BOSS-REDolution-bred-primary-800); } .text-boss-redolution-900 { color: var(--BOSS-REDolution-bred-primary-900); } .text-boss-redolution-950 { color: var(--BOSS-REDolution-bred-primary-950); } /* Hover states for BOSS REDolution */ .hover\:text-boss-redolution-50:hover { color: var(--BOSS-REDolution-bred-primary-50); } .hover\:text-boss-redolution-100:hover { color: var(--BOSS-REDolution-bred-primary-100); } .hover\:text-boss-redolution-200:hover { color: var(--BOSS-REDolution-bred-primary-200); } .hover\:text-boss-redolution-300:hover { color: var(--BOSS-REDolution-bred-primary-300); } .hover\:text-boss-redolution-400:hover { color: var(--BOSS-REDolution-bred-primary-400); } .hover\:text-boss-redolution-500:hover { color: var(--BOSS-REDolution-bred-primary-500); } .hover\:text-boss-redolution-600:hover { color: var(--BOSS-REDolution-bred-primary-main-600); } .hover\:text-boss-redolution-700:hover { color: var(--BOSS-REDolution-bred-primary-700); } .hover\:text-boss-redolution-800:hover { color: var(--BOSS-REDolution-bred-primary-800); } .hover\:text-boss-redolution-900:hover { color: var(--BOSS-REDolution-bred-primary-900); } .hover\:text-boss-redolution-950:hover { color: var(--BOSS-REDolution-bred-primary-950); } /*!**************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./assets/src/css/idtTheme/bg.css ***! \**************************************************************************************************************/ /** * IDT Theme - Background Color Utilities * * Background color utility classes using CSS variables that adapt to the current theme mode. * Usage: .bg-neutral-bg, .bg-error-main, .bg-info-main, etc. */ /* ============================================ NEUTRALS ============================================ */ .bg-neutral-bg { background-color: var(--neutral-bgColor); } .bg-neutral-card { background-color: var(--neutral-cardColor); } .bg-neutral-subtle { background-color: var(--neutral-subtle); } .bg-neutral-extrasubtle { background-color: var(--neutral-extrasubtle); } .bg-neutral-lightest { background-color: var(--neutral-lightest); } .bg-neutral-darkest { background-color: var(--neutral-darkest); } .bg-neutral-title { background-color: var(--neutral-title); } .bg-neutral-body { background-color: var(--neutral-body); } .bg-neutral-secondary { background-color: var(--neutral-secondary); } .bg-neutral-tertiary { background-color: var(--neutral-tertiary); } .bg-neutral-disabled { background-color: var(--neutral-disabled); } .bg-neutral-separator { background-color: var(--neutral-separator); } .bg-neutral-border { background-color: var(--neutral-border); } /* Hover states for neutral background colors */ .hover\:bg-neutral-bg:hover { background-color: var(--neutral-bgColor); } .hover\:bg-neutral-card:hover { background-color: var(--neutral-cardColor); } .hover\:bg-neutral-subtle:hover { background-color: var(--neutral-subtle); } .hover\:bg-neutral-extrasubtle:hover { background-color: var(--neutral-extrasubtle); } .hover\:bg-neutral-lightest:hover { background-color: var(--neutral-lightest); } .hover\:bg-neutral-darkest:hover { background-color: var(--neutral-darkest); } .hover\:bg-neutral-title:hover { background-color: var(--neutral-title); } .hover\:bg-neutral-body:hover { background-color: var(--neutral-body); } .hover\:bg-neutral-secondary:hover { background-color: var(--neutral-secondary); } .hover\:bg-neutral-tertiary:hover { background-color: var(--neutral-tertiary); } .hover\:bg-neutral-disabled:hover { background-color: var(--neutral-disabled); } .hover\:bg-neutral-separator:hover { background-color: var(--neutral-separator); } .hover\:bg-neutral-border:hover { background-color: var(--neutral-border); } /* ============================================ ERROR ============================================ */ .bg-error-main { background-color: var(--error-error-bg); } .bg-error-main-color { background-color: var(--error-error-main); } .bg-error-darker { background-color: var(--error-error-bg-darker); } .bg-error-darkest { background-color: var(--error-error-bg-darkest); } .bg-error-on-error { background-color: var(--error-on-error); } .bg-error-on-error-bg { background-color: var(--error-on-error-bg); } .bg-error-text { background-color: var(--error-error-text); } .bg-error-variant { background-color: var(--error-variant-error-variant-bg); } .bg-error-variant-color { background-color: var(--error-variant-error-variant); } .bg-error-variant-darker { background-color: var(--error-variant-error-variant-bg-darker); } .bg-error-variant-darkest { background-color: var(--error-variant-error-variant-bg-darkes); } .bg-error-variant-on-error-variant { background-color: var(--error-variant-on-error-variant); } .bg-error-variant-on-error-variant-bg { background-color: var(--error-variant-on-error-variant-bg); } .bg-error-variant-text { background-color: var(--error-variant-error-text-variant); } /* Hover states for error background colors */ .hover\:bg-error-main:hover { background-color: var(--error-error-bg); } .hover\:bg-error-main-color:hover { background-color: var(--error-error-main); } .hover\:bg-error-darker:hover { background-color: var(--error-error-bg-darker); } .hover\:bg-error-darkest:hover { background-color: var(--error-error-bg-darkest); } .hover\:bg-error-on-error:hover { background-color: var(--error-on-error); } .hover\:bg-error-on-error-bg:hover { background-color: var(--error-on-error-bg); } .hover\:bg-error-text:hover { background-color: var(--error-error-text); } .hover\:bg-error-variant:hover { background-color: var(--error-variant-error-variant-bg); } .hover\:bg-error-variant-color:hover { background-color: var(--error-variant-error-variant); } .hover\:bg-error-variant-darker:hover { background-color: var(--error-variant-error-variant-bg-darker); } .hover\:bg-error-variant-darkest:hover { background-color: var(--error-variant-error-variant-bg-darkes); } .hover\:bg-error-variant-on-error-variant:hover { background-color: var(--error-variant-on-error-variant); } .hover\:bg-error-variant-on-error-variant-bg:hover { background-color: var(--error-variant-on-error-variant-bg); } .hover\:bg-error-variant-text:hover { background-color: var(--error-variant-error-text-variant); } /* Gradients */ .bg-gradient-error-fixed { background: var(--color-gradients-error-error-fixed); } .bg-gradient-error-hard { background: var(--color-gradients-error-error-hard); } .bg-gradient-error-soft { background: var(--color-gradients-error-error-soft); } .bg-gradient-error-corner-hard { background: var(--color-gradients-error-error-corner-hard); } .bg-gradient-error-corner-soft { background: var(--color-gradients-error-error-corner-soft); } /* ============================================ INFO ============================================ */ .bg-info-main { background-color: var(--info-info-bg); } .bg-info-main-color { background-color: var(--info-info-main); } .bg-info-darker { background-color: var(--info-info-bg-darker); } .bg-info-darkest { background-color: var(--info-info-bg-darkest); } .bg-info-on-info { background-color: var(--info-on-info); } .bg-info-on-info-bg { background-color: var(--info-on-info-bg); } .bg-info-text { background-color: var(--info-info-text); } .bg-info-variant { background-color: var(--info-variant-info-variant-bg); } .bg-info-variant-color { background-color: var(--info-variant-info-variant); } .bg-info-variant-darker { background-color: var(--info-variant-info-variant-bg-darker); } .bg-info-variant-darkest { background-color: var(--info-variant-info-variant-bg-darkest); } .bg-info-variant-on-info-variant { background-color: var(--info-variant-on-info-variant); } .bg-info-variant-on-info-variant-bg { background-color: var(--info-variant-on-info-variant-bg); } .bg-info-variant-text { background-color: var(--info-variant-info-text-variant); } /* Hover states for info background colors */ .hover\:bg-info-main:hover { background-color: var(--info-info-bg); } .hover\:bg-info-main-color:hover { background-color: var(--info-info-main); } .hover\:bg-info-darker:hover { background-color: var(--info-info-bg-darker); } .hover\:bg-info-darkest:hover { background-color: var(--info-info-bg-darkest); } .hover\:bg-info-on-info:hover { background-color: var(--info-on-info); } .hover\:bg-info-on-info-bg:hover { background-color: var(--info-on-info-bg); } .hover\:bg-info-text:hover { background-color: var(--info-info-text); } .hover\:bg-info-variant:hover { background-color: var(--info-variant-info-variant-bg); } .hover\:bg-info-variant-color:hover { background-color: var(--info-variant-info-variant); } .hover\:bg-info-variant-darker:hover { background-color: var(--info-variant-info-variant-bg-darker); } .hover\:bg-info-variant-darkest:hover { background-color: var(--info-variant-info-variant-bg-darkest); } .hover\:bg-info-variant-on-info-variant:hover { background-color: var(--info-variant-on-info-variant); } .hover\:bg-info-variant-on-info-variant-bg:hover { background-color: var(--info-variant-on-info-variant-bg); } .hover\:bg-info-variant-text:hover { background-color: var(--info-variant-info-text-variant); } /* Gradients */ .bg-gradient-info-fixed { background: var(--color-gradients-info-info-fixed); } .bg-gradient-info-hard { background: var(--color-gradients-info-info-hard); } .bg-gradient-info-soft { background: var(--color-gradients-info-info-soft); } .bg-gradient-info-corner-hard { background: var(--color-gradients-info-info-corner-hard); } .bg-gradient-info-corner-soft { background: var(--color-gradients-info-info-corner-soft); } /* ============================================ SUCCESS ============================================ */ .bg-success-main { background-color: var(--success-success-bg); } .bg-success-main-color { background-color: var(--success-success-main); } .bg-success-darker { background-color: var(--success-success-bg-darker); } .bg-success-darkest { background-color: var(--success-success-bg-darkest); } .bg-success-on-success-main { background-color: var(--success-on-success-main); } .bg-success-on-success-bg { background-color: var(--success-on-success-bg); } .bg-success-text { background-color: var(--success-success-text); } .bg-success-variant { background-color: var(--success-variant-success-bg-variant); } .bg-success-variant-color { background-color: var(--success-variant-success-variant); } .bg-success-variant-darker { background-color: var(--success-variant-success-bg-variant-darker); } .bg-success-variant-darkest { background-color: var(--success-variant-success-bg-variant-darkest); } .bg-success-variant-on-success-variant { background-color: var(--success-variant-on-success-variant); } .bg-success-variant-on-success-variant-bg { background-color: var(--success-variant-on-success-variant-bg); } .bg-success-variant-text { background-color: var(--success-variant-success-text-variant); } /* Hover states for success background colors */ .hover\:bg-success-main:hover { background-color: var(--success-success-bg); } .hover\:bg-success-main-color:hover { background-color: var(--success-success-main); } .hover\:bg-success-darker:hover { background-color: var(--success-success-bg-darker); } .hover\:bg-success-darkest:hover { background-color: var(--success-success-bg-darkest); } .hover\:bg-success-on-success-main:hover { background-color: var(--success-on-success-main); } .hover\:bg-success-on-success-bg:hover { background-color: var(--success-on-success-bg); } .hover\:bg-success-text:hover { background-color: var(--success-success-text); } .hover\:bg-success-variant:hover { background-color: var(--success-variant-success-bg-variant); } .hover\:bg-success-variant-color:hover { background-color: var(--success-variant-success-variant); } .hover\:bg-success-variant-darker:hover { background-color: var(--success-variant-success-bg-variant-darker); } .hover\:bg-success-variant-darkest:hover { background-color: var(--success-variant-success-bg-variant-darkest); } .hover\:bg-success-variant-on-success-variant:hover { background-color: var(--success-variant-on-success-variant); } .hover\:bg-success-variant-on-success-variant-bg:hover { background-color: var(--success-variant-on-success-variant-bg); } .hover\:bg-success-variant-text:hover { background-color: var(--success-variant-success-text-variant); } /* Gradients */ .bg-gradient-success-fixed { background: var(--color-gradients-success-success-fixed); } .bg-gradient-success-hard { background: var(--color-gradients-success-success-hard); } .bg-gradient-success-soft { background: var(--color-gradients-success-success-soft); } .bg-gradient-success-corner-hard { background: var(--color-gradients-success-success-corner-hard); } .bg-gradient-success-corner-soft { background: var(--color-gradients-success-success-corner-soft); } /* ============================================ WARNING ============================================ */ .bg-warning-main { background-color: var(--warning-warning-bg); } .bg-warning-main-color { background-color: var(--warning-warning-main); } .bg-warning-darker { background-color: var(--warning-warning-bg-darker); } .bg-warning-darkest { background-color: var(--warning-warning-bg-darkest); } .bg-warning-on-warning { background-color: var(--warning-on-warning); } .bg-warning-on-warning-bg { background-color: var(--warning-on-warning-bg); } .bg-warning-text { background-color: var(--warning-warning-text); } .bg-warning-variant { background-color: var(--warning-variant-warning-variant-bg); } .bg-warning-variant-color { background-color: var(--warning-variant-warning-variant); } .bg-warning-variant-darker { background-color: var(--warning-variant-warning-variant-bg-darker); } .bg-warning-variant-darkest { background-color: var(--warning-variant-warning-variant-bg-darkest); } .bg-warning-variant-on-warning-variant { background-color: var(--warning-variant-on-warning-variant); } .bg-warning-variant-on-warning-variant-bg { background-color: var(--warning-variant-on-warning-variant-bg); } .bg-warning-variant-text { background-color: var(--warning-variant-warning-text-variant); } /* Hover states for warning background colors */ .hover\:bg-warning-main:hover { background-color: var(--warning-warning-bg); } .hover\:bg-warning-main-color:hover { background-color: var(--warning-warning-main); } .hover\:bg-warning-darker:hover { background-color: var(--warning-warning-bg-darker); } .hover\:bg-warning-darkest:hover { background-color: var(--warning-warning-bg-darkest); } .hover\:bg-warning-on-warning:hover { background-color: var(--warning-on-warning); } .hover\:bg-warning-on-warning-bg:hover { background-color: var(--warning-on-warning-bg); } .hover\:bg-warning-text:hover { background-color: var(--warning-warning-text); } .hover\:bg-warning-variant:hover { background-color: var(--warning-variant-warning-variant-bg); } .hover\:bg-warning-variant-color:hover { background-color: var(--warning-variant-warning-variant); } .hover\:bg-warning-variant-darker:hover { background-color: var(--warning-variant-warning-variant-bg-darker); } .hover\:bg-warning-variant-darkest:hover { background-color: var(--warning-variant-warning-variant-bg-darkest); } .hover\:bg-warning-variant-on-warning-variant:hover { background-color: var(--warning-variant-on-warning-variant); } .hover\:bg-warning-variant-on-warning-variant-bg:hover { background-color: var(--warning-variant-on-warning-variant-bg); } .hover\:bg-warning-variant-text:hover { background-color: var(--warning-variant-warning-text-variant); } /* Gradients */ .bg-gradient-warning-fixed { background: var(--color-gradients-warning-warning-fixed); } .bg-gradient-warning-hard { background: var(--color-gradients-warning-warning-hard); } .bg-gradient-warning-soft { background: var(--color-gradients-warning-warning-soft); } .bg-gradient-warning-corner-hard { background: var(--color-gradients-warning-warning-corner-hard); } .bg-gradient-warning-corner-soft { background: var(--color-gradients-warning-warning-corner-soft); } /* ============================================ ATTENTION ============================================ */ .bg-attention-main { background-color: var(--attention-attention-bg); } .bg-attention-main-color { background-color: var(--attention-attention-main); } .bg-attention-darker { background-color: var(--attention-attention-bg-darker); } .bg-attention-darkest { background-color: var(--attention-attention-bg-darkest); } .bg-attention-on-attention { background-color: var(--attention-on-attention); } .bg-attention-on-attention-bg { background-color: var(--attention-on-attention-bg); } .bg-attention-text { background-color: var(--attention-attention-text); } .bg-attention-variant { background-color: var(--attention-variant-attention-variant-bg); } .bg-attention-variant-color { background-color: var(--attention-variant-attention-variant); } .bg-attention-variant-darker { background-color: var(--attention-variant-attention-variant-bg-darker); } .bg-attention-variant-darkest { background-color: var(--attention-variant-attention-variant-bg-darkest); } .bg-attention-variant-on-attention-variant { background-color: var(--attention-variant-on-attention-variant); } .bg-attention-variant-on-attention-variant-bg { background-color: var(--attention-variant-on-attention-variant-bg); } .bg-attention-variant-text { background-color: var(--attention-variant-attention-text-variant); } /* Hover states for attention background colors */ .hover\:bg-attention-main:hover { background-color: var(--attention-attention-bg); } .hover\:bg-attention-main-color:hover { background-color: var(--attention-attention-main); } .hover\:bg-attention-darker:hover { background-color: var(--attention-attention-bg-darker); } .hover\:bg-attention-darkest:hover { background-color: var(--attention-attention-bg-darkest); } .hover\:bg-attention-on-attention:hover { background-color: var(--attention-on-attention); } .hover\:bg-attention-on-attention-bg:hover { background-color: var(--attention-on-attention-bg); } .hover\:bg-attention-text:hover { background-color: var(--attention-attention-text); } .hover\:bg-attention-variant:hover { background-color: var(--attention-variant-attention-variant-bg); } .hover\:bg-attention-variant-color:hover { background-color: var(--attention-variant-attention-variant); } .hover\:bg-attention-variant-darker:hover { background-color: var(--attention-variant-attention-variant-bg-darker); } .hover\:bg-attention-variant-darkest:hover { background-color: var(--attention-variant-attention-variant-bg-darkest); } .hover\:bg-attention-variant-on-attention-variant:hover { background-color: var(--attention-variant-on-attention-variant); } .hover\:bg-attention-variant-on-attention-variant-bg:hover { background-color: var(--attention-variant-on-attention-variant-bg); } .hover\:bg-attention-variant-text:hover { background-color: var(--attention-variant-attention-text-variant); } /* Gradients */ .bg-gradient-attention-fixed { background: var(--color-gradients-attention-attention-fixed); } .bg-gradient-attention-hard { background: var(--color-gradients-attention-attention-hard); } .bg-gradient-attention-soft { background: var(--color-gradients-attention-attention-soft); } .bg-gradient-attention-corner-hard { background: var(--color-gradients-attention-attention-corner-hard); } .bg-gradient-attention-corner-soft { background: var(--color-gradients-attention-attention-corner-soft); } /* ============================================ PROMOTION ============================================ */ .bg-promotion-main { background-color: var(--promotion-promotion-bg); } .bg-promotion-main-color { background-color: var(--promotion-promotion-main); } .bg-promotion-darker { background-color: var(--promotion-promotion-bg-darker); } .bg-promotion-darkest { background-color: var(--promotion-promotion-bg-darkest); } .bg-promotion-on-promotion { background-color: var(--promotion-on-promotion); } .bg-promotion-on-promotion-bg { background-color: var(--promotion-on-promotion-bg); } .bg-promotion-text { background-color: var(--promotion-promotion-text); } .bg-promotion-variant { background-color: var(--promotion-variant-promotion-variant-bg); } .bg-promotion-variant-color { background-color: var(--promotion-variant-promotion-variant); } .bg-promotion-variant-darker { background-color: var(--promotion-variant-promotion-variant-bg-darker); } .bg-promotion-variant-darkest { background-color: var(--promotion-variant-promotion-variant-bg-darkest); } .bg-promotion-variant-on-promotion-variant { background-color: var(--promotion-variant-on-promotion-variant); } .bg-promotion-variant-on-promotion-variant-bg { background-color: var(--promotion-variant-on-promotion-variant-bg); } .bg-promotion-variant-text { background-color: var(--promotion-variant-promotion-text-variant); } /* Hover states for promotion background colors */ .hover\:bg-promotion-main:hover { background-color: var(--promotion-promotion-bg); } .hover\:bg-promotion-main-color:hover { background-color: var(--promotion-promotion-main); } .hover\:bg-promotion-darker:hover { background-color: var(--promotion-promotion-bg-darker); } .hover\:bg-promotion-darkest:hover { background-color: var(--promotion-promotion-bg-darkest); } .hover\:bg-promotion-on-promotion:hover { background-color: var(--promotion-on-promotion); } .hover\:bg-promotion-on-promotion-bg:hover { background-color: var(--promotion-on-promotion-bg); } .hover\:bg-promotion-text:hover { background-color: var(--promotion-promotion-text); } .hover\:bg-promotion-variant:hover { background-color: var(--promotion-variant-promotion-variant-bg); } .hover\:bg-promotion-variant-color:hover { background-color: var(--promotion-variant-promotion-variant); } .hover\:bg-promotion-variant-darker:hover { background-color: var(--promotion-variant-promotion-variant-bg-darker); } .hover\:bg-promotion-variant-darkest:hover { background-color: var(--promotion-variant-promotion-variant-bg-darkest); } .hover\:bg-promotion-variant-on-promotion-variant:hover { background-color: var(--promotion-variant-on-promotion-variant); } .hover\:bg-promotion-variant-on-promotion-variant-bg:hover { background-color: var(--promotion-variant-on-promotion-variant-bg); } .hover\:bg-promotion-variant-text:hover { background-color: var(--promotion-variant-promotion-text-variant); } /* Gradients */ .bg-gradient-promotion-fixed { background: var(--color-gradients-promotion-promotion-fixed); } .bg-gradient-promotion-hard { background: var(--color-gradients-promotion-promotion-hard); } .bg-gradient-promotion-soft { background: var(--color-gradients-promotion-promotion-soft); } .bg-gradient-promotion-corner-hard { background: var(--color-gradients-promotion-promotion-corner-hard); } .bg-gradient-promotion-corner-soft { background: var(--color-gradients-promotion-promotion-corner-soft); } /* ============================================ FIXED COLORS ============================================ */ .bg-white { background-color: var(--white); } .bg-black { background-color: var(--black); } .bg-fixed-white { background-color: var(--fixed-white-fixed); } .bg-fixed-black { background-color: var(--fixed-black-fixed); } .bg-fixed-neutral { background-color: var(--fixed-neutral-fixed); } /* Hover states for fixed colors */ .hover\:bg-white:hover { background-color: var(--white); } .hover\:bg-black:hover { background-color: var(--black); } .hover\:bg-fixed-white:hover { background-color: var(--fixed-white-fixed); } .hover\:bg-fixed-black:hover { background-color: var(--fixed-black-fixed); } .hover\:bg-fixed-neutral:hover { background-color: var(--fixed-neutral-fixed); } /* ============================================ GREY GRADIENTS ============================================ */ .bg-gradient-grey-50 { background: var(--grey-gradients-grey-gradient-50); } .bg-gradient-grey-100 { background: var(--grey-gradients-grey-gradient-100); } .bg-gradient-grey-200 { background: var(--grey-gradients-grey-gradient-200); } .bg-gradient-grey-300 { background: var(--grey-gradients-grey-gradient-300); } .bg-gradient-grey-400 { background: var(--grey-gradients-grey-gradient-400); } .bg-gradient-grey-500 { background: var(--grey-gradients-grey-gradient-500); } .bg-gradient-grey-600 { background: var(--grey-gradients-grey-gradient-600); } .bg-gradient-grey-700 { background: var(--grey-gradients-grey-gradient-700); } .bg-gradient-grey-800 { background: var(--grey-gradients-grey-gradient-800); } .bg-gradient-grey-900 { background: var(--grey-gradients-grey-gradient-900); } .bg-gradient-grey-950 { background: var(--grey-gradients-grey-gradient-950); } /* ============================================ BRAND COLORS ============================================ */ /* BOSS Revolution */ .bg-boss-revolution-50 { background-color: var(--BOSS-Revolution-br-primary-50); } .bg-boss-revolution-100 { background-color: var(--BOSS-Revolution-br-primary-100); } .bg-boss-revolution-200 { background-color: var(--BOSS-Revolution-br-primary-200); } .bg-boss-revolution-300 { background-color: var(--BOSS-Revolution-br-primary-300); } .bg-boss-revolution-400 { background-color: var(--BOSS-Revolution-br-primary-400); } .bg-boss-revolution-500 { background-color: var(--BOSS-Revolution-br-primary-500); } .bg-boss-revolution-600 { background-color: var(--BOSS-Revolution-br-primary-600); } .bg-boss-revolution-700 { background-color: var(--BOSS-Revolution-br-primary-700); } .bg-boss-revolution-800 { background-color: var(--BOSS-Revolution-br-primary-main-800); } .bg-boss-revolution-900 { background-color: var(--BOSS-Revolution-br-primary-900); } .bg-boss-revolution-950 { background-color: var(--BOSS-Revolution-br-primary-950); } /* Hover states for BOSS Revolution */ .hover\:bg-boss-revolution-50:hover { background-color: var(--BOSS-Revolution-br-primary-50); } .hover\:bg-boss-revolution-100:hover { background-color: var(--BOSS-Revolution-br-primary-100); } .hover\:bg-boss-revolution-200:hover { background-color: var(--BOSS-Revolution-br-primary-200); } .hover\:bg-boss-revolution-300:hover { background-color: var(--BOSS-Revolution-br-primary-300); } .hover\:bg-boss-revolution-400:hover { background-color: var(--BOSS-Revolution-br-primary-400); } .hover\:bg-boss-revolution-500:hover { background-color: var(--BOSS-Revolution-br-primary-500); } .hover\:bg-boss-revolution-600:hover { background-color: var(--BOSS-Revolution-br-primary-600); } .hover\:bg-boss-revolution-700:hover { background-color: var(--BOSS-Revolution-br-primary-700); } .hover\:bg-boss-revolution-800:hover { background-color: var(--BOSS-Revolution-br-primary-main-800); } .hover\:bg-boss-revolution-900:hover { background-color: var(--BOSS-Revolution-br-primary-900); } .hover\:bg-boss-revolution-950:hover { background-color: var(--BOSS-Revolution-br-primary-950); } /* BOSS Money */ .bg-boss-money-50 { background-color: var(--BOSS-Money-bm-primary-50); } .bg-boss-money-100 { background-color: var(--BOSS-Money-bm-primary-100); } .bg-boss-money-200 { background-color: var(--BOSS-Money-bm-primary-200); } .bg-boss-money-300 { background-color: var(--BOSS-Money-bm-primary-300); } .bg-boss-money-400 { background-color: var(--BOSS-Money-bm-primary-400); } .bg-boss-money-500 { background-color: var(--BOSS-Money-bm-primary-main-500); } .bg-boss-money-600 { background-color: var(--BOSS-Money-bm-primary-600); } .bg-boss-money-700 { background-color: var(--BOSS-Money-bm-primary-700); } .bg-boss-money-800 { background-color: var(--BOSS-Money-bm-primary-800); } .bg-boss-money-900 { background-color: var(--BOSS-Money-bm-primary-900); } .bg-boss-money-950 { background-color: var(--BOSS-Money-bm-primary-950); } /* Hover states for BOSS Money */ .hover\:bg-boss-money-50:hover { background-color: var(--BOSS-Money-bm-primary-50); } .hover\:bg-boss-money-100:hover { background-color: var(--BOSS-Money-bm-primary-100); } .hover\:bg-boss-money-200:hover { background-color: var(--BOSS-Money-bm-primary-200); } .hover\:bg-boss-money-300:hover { background-color: var(--BOSS-Money-bm-primary-300); } .hover\:bg-boss-money-400:hover { background-color: var(--BOSS-Money-bm-primary-400); } .hover\:bg-boss-money-500:hover { background-color: var(--BOSS-Money-bm-primary-main-500); } .hover\:bg-boss-money-600:hover { background-color: var(--BOSS-Money-bm-primary-600); } .hover\:bg-boss-money-700:hover { background-color: var(--BOSS-Money-bm-primary-700); } .hover\:bg-boss-money-800:hover { background-color: var(--BOSS-Money-bm-primary-800); } .hover\:bg-boss-money-900:hover { background-color: var(--BOSS-Money-bm-primary-900); } .hover\:bg-boss-money-950:hover { background-color: var(--BOSS-Money-bm-primary-950); } /* BOSS REDolution */ .bg-boss-redolution-50 { background-color: var(--BOSS-REDolution-bred-primary-50); } .bg-boss-redolution-100 { background-color: var(--BOSS-REDolution-bred-primary-100); } .bg-boss-redolution-200 { background-color: var(--BOSS-REDolution-bred-primary-200); } .bg-boss-redolution-300 { background-color: var(--BOSS-REDolution-bred-primary-300); } .bg-boss-redolution-400 { background-color: var(--BOSS-REDolution-bred-primary-400); } .bg-boss-redolution-500 { background-color: var(--BOSS-REDolution-bred-primary-500); } .bg-boss-redolution-600 { background-color: var(--BOSS-REDolution-bred-primary-main-600); } .bg-boss-redolution-700 { background-color: var(--BOSS-REDolution-bred-primary-700); } .bg-boss-redolution-800 { background-color: var(--BOSS-REDolution-bred-primary-800); } .bg-boss-redolution-900 { background-color: var(--BOSS-REDolution-bred-primary-900); } .bg-boss-redolution-950 { background-color: var(--BOSS-REDolution-bred-primary-950); } /* Hover states for BOSS REDolution */ .hover\:bg-boss-redolution-50:hover { background-color: var(--BOSS-REDolution-bred-primary-50); } .hover\:bg-boss-redolution-100:hover { background-color: var(--BOSS-REDolution-bred-primary-100); } .hover\:bg-boss-redolution-200:hover { background-color: var(--BOSS-REDolution-bred-primary-200); } .hover\:bg-boss-redolution-300:hover { background-color: var(--BOSS-REDolution-bred-primary-300); } .hover\:bg-boss-redolution-400:hover { background-color: var(--BOSS-REDolution-bred-primary-400); } .hover\:bg-boss-redolution-500:hover { background-color: var(--BOSS-REDolution-bred-primary-500); } .hover\:bg-boss-redolution-600:hover { background-color: var(--BOSS-REDolution-bred-primary-main-600); } .hover\:bg-boss-redolution-700:hover { background-color: var(--BOSS-REDolution-bred-primary-700); } .hover\:bg-boss-redolution-800:hover { background-color: var(--BOSS-REDolution-bred-primary-800); } .hover\:bg-boss-redolution-900:hover { background-color: var(--BOSS-REDolution-bred-primary-900); } .hover\:bg-boss-redolution-950:hover { background-color: var(--BOSS-REDolution-bred-primary-950); } /* ============================================ ICON COLORS ============================================ */ .bg-icon-primary { background-color: var(--icon-primary); } .bg-icon-secondary { background-color: var(--icon-secondary); } .bg-icon-tertiary { background-color: var(--icon-tertiary); } .bg-icon-disabled { background-color: var(--icon-disabled); } .bg-icon-error { background-color: var(--icon-error); } .bg-icon-success { background-color: var(--icon-success); } .bg-icon-warning { background-color: var(--icon-warning); } .bg-icon-info { background-color: var(--icon-info); } .bg-icon-attention { background-color: var(--icon-attention); } .bg-icon-promotion { background-color: var(--icon-promotion); } .bg-icon-bg { background-color: var(--icon-bg); } .bg-icon-bg-hover { background-color: var(--icon-bg-hover); } /* Hover states for icon colors */ .hover\:bg-icon-primary:hover { background-color: var(--icon-primary); } .hover\:bg-icon-secondary:hover { background-color: var(--icon-secondary); } .hover\:bg-icon-tertiary:hover { background-color: var(--icon-tertiary); } .hover\:bg-icon-disabled:hover { background-color: var(--icon-disabled); } .hover\:bg-icon-error:hover { background-color: var(--icon-error); } .hover\:bg-icon-success:hover { background-color: var(--icon-success); } .hover\:bg-icon-warning:hover { background-color: var(--icon-warning); } .hover\:bg-icon-info:hover { background-color: var(--icon-info); } .hover\:bg-icon-attention:hover { background-color: var(--icon-attention); } .hover\:bg-icon-promotion:hover { background-color: var(--icon-promotion); } .hover\:bg-icon-bg:hover { background-color: var(--icon-bg); } .hover\:bg-icon-bg-hover:hover { background-color: var(--icon-bg-hover); } /* ============================================ ALPHA/TRANSPARENCY COLORS ============================================ */ /* White Fixed Alpha */ .bg-white-fixed-alpha-0 { background-color: var(--white-fixed-alpha-0); } .bg-white-fixed-alpha-5 { background-color: var(--white-fixed-alpha-5); } .bg-white-fixed-alpha-10 { background-color: var(--white-fixed-alpha-10); } .bg-white-fixed-alpha-20 { background-color: var(--white-fixed-alpha-20); } .bg-white-fixed-alpha-30 { background-color: var(--white-fixed-alpha-30); } .bg-white-fixed-alpha-40 { background-color: var(--white-fixed-alpha-40); } .bg-white-fixed-alpha-50 { background-color: var(--white-fixed-alpha-50); } .bg-white-fixed-alpha-60 { background-color: var(--white-fixed-alpha-60); } .bg-white-fixed-alpha-70 { background-color: var(--white-fixed-alpha-70); } .bg-white-fixed-alpha-80 { background-color: var(--white-fixed-alpha-80); } .bg-white-fixed-alpha-90 { background-color: var(--white-fixed-alpha-90); } /* Hover states for white fixed alpha */ .hover\:bg-white-fixed-alpha-0:hover { background-color: var(--white-fixed-alpha-0); } .hover\:bg-white-fixed-alpha-5:hover { background-color: var(--white-fixed-alpha-5); } .hover\:bg-white-fixed-alpha-10:hover { background-color: var(--white-fixed-alpha-10); } .hover\:bg-white-fixed-alpha-20:hover { background-color: var(--white-fixed-alpha-20); } .hover\:bg-white-fixed-alpha-30:hover { background-color: var(--white-fixed-alpha-30); } .hover\:bg-white-fixed-alpha-40:hover { background-color: var(--white-fixed-alpha-40); } .hover\:bg-white-fixed-alpha-50:hover { background-color: var(--white-fixed-alpha-50); } .hover\:bg-white-fixed-alpha-60:hover { background-color: var(--white-fixed-alpha-60); } .hover\:bg-white-fixed-alpha-70:hover { background-color: var(--white-fixed-alpha-70); } .hover\:bg-white-fixed-alpha-80:hover { background-color: var(--white-fixed-alpha-80); } .hover\:bg-white-fixed-alpha-90:hover { background-color: var(--white-fixed-alpha-90); } /* Black Fixed Alpha */ .bg-black-fixed-alpha-0 { background-color: var(--black-fixed-alpha-0); } .bg-black-fixed-alpha-5 { background-color: var(--black-fixed-alpha-5); } .bg-black-fixed-alpha-10 { background-color: var(--black-fixed-alpha-10); } .bg-black-fixed-alpha-20 { background-color: var(--black-fixed-alpha-20); } .bg-black-fixed-alpha-30 { background-color: var(--black-fixed-alpha-30); } .bg-black-fixed-alpha-40 { background-color: var(--black-fixed-alpha-40); } .bg-black-fixed-alpha-50 { background-color: var(--black-fixed-alpha-50); } .bg-black-fixed-alpha-60 { background-color: var(--black-fixed-alpha-60); } .bg-black-fixed-alpha-70 { background-color: var(--black-fixed-alpha-70); } .bg-black-fixed-alpha-80 { background-color: var(--black-fixed-alpha-80); } .bg-black-fixed-alpha-90 { background-color: var(--black-fixed-alpha-90); } /* Hover states for black fixed alpha */ .hover\:bg-black-fixed-alpha-0:hover { background-color: var(--black-fixed-alpha-0); } .hover\:bg-black-fixed-alpha-5:hover { background-color: var(--black-fixed-alpha-5); } .hover\:bg-black-fixed-alpha-10:hover { background-color: var(--black-fixed-alpha-10); } .hover\:bg-black-fixed-alpha-20:hover { background-color: var(--black-fixed-alpha-20); } .hover\:bg-black-fixed-alpha-30:hover { background-color: var(--black-fixed-alpha-30); } .hover\:bg-black-fixed-alpha-40:hover { background-color: var(--black-fixed-alpha-40); } .hover\:bg-black-fixed-alpha-50:hover { background-color: var(--black-fixed-alpha-50); } .hover\:bg-black-fixed-alpha-60:hover { background-color: var(--black-fixed-alpha-60); } .hover\:bg-black-fixed-alpha-70:hover { background-color: var(--black-fixed-alpha-70); } .hover\:bg-black-fixed-alpha-80:hover { background-color: var(--black-fixed-alpha-80); } .hover\:bg-black-fixed-alpha-90:hover { background-color: var(--black-fixed-alpha-90); } /* Neutral Variant Fixed Alpha */ .bg-neutral-variant-fixed-alpha-0 { background-color: var(--neutral-variant-fixed-alpha-0); } .bg-neutral-variant-fixed-alpha-10 { background-color: var(--neutral-variant-fixed-alpha-10); } .bg-neutral-variant-fixed-alpha-20 { background-color: var(--neutral-variant-fixed-alpha-20); } .bg-neutral-variant-fixed-alpha-30 { background-color: var(--neutral-variant-fixed-alpha-30); } .bg-neutral-variant-fixed-alpha-40 { background-color: var(--neutral-variant-fixed-alpha-40); } .bg-neutral-variant-fixed-alpha-50 { background-color: var(--neutral-variant-fixed-alpha-50); } .bg-neutral-variant-fixed-alpha-60 { background-color: var(--neutral-variant-fixed-alpha-60); } .bg-neutral-variant-fixed-alpha-70 { background-color: var(--neutral-variant-fixed-alpha-70); } .bg-neutral-variant-fixed-alpha-80 { background-color: var(--neutral-variant-fixed-alpha-80); } .bg-neutral-variant-fixed-alpha-90 { background-color: var(--neutral-variant-fixed-alpha-90); } /* Hover states for neutral variant fixed alpha */ .hover\:bg-neutral-variant-fixed-alpha-0:hover { background-color: var(--neutral-variant-fixed-alpha-0); } .hover\:bg-neutral-variant-fixed-alpha-10:hover { background-color: var(--neutral-variant-fixed-alpha-10); } .hover\:bg-neutral-variant-fixed-alpha-20:hover { background-color: var(--neutral-variant-fixed-alpha-20); } .hover\:bg-neutral-variant-fixed-alpha-30:hover { background-color: var(--neutral-variant-fixed-alpha-30); } .hover\:bg-neutral-variant-fixed-alpha-40:hover { background-color: var(--neutral-variant-fixed-alpha-40); } .hover\:bg-neutral-variant-fixed-alpha-50:hover { background-color: var(--neutral-variant-fixed-alpha-50); } .hover\:bg-neutral-variant-fixed-alpha-60:hover { background-color: var(--neutral-variant-fixed-alpha-60); } .hover\:bg-neutral-variant-fixed-alpha-70:hover { background-color: var(--neutral-variant-fixed-alpha-70); } .hover\:bg-neutral-variant-fixed-alpha-80:hover { background-color: var(--neutral-variant-fixed-alpha-80); } .hover\:bg-neutral-variant-fixed-alpha-90:hover { background-color: var(--neutral-variant-fixed-alpha-90); } /* ============================================ PALETTE COLORS - ERROR ============================================ */ .bg-palette-error-50 { background-color: var(--palettes-error-50); } .bg-palette-error-100 { background-color: var(--palettes-error-100); } .bg-palette-error-200 { background-color: var(--palettes-error-200); } .bg-palette-error-300 { background-color: var(--palettes-error-300); } .bg-palette-error-400 { background-color: var(--palettes-error-400); } .bg-palette-error-500 { background-color: var(--palettes-error-500); } .bg-palette-error-600 { background-color: var(--palettes-error-main-600); } .bg-palette-error-700 { background-color: var(--palettes-error-700); } .bg-palette-error-800 { background-color: var(--palettes-error-800); } .bg-palette-error-900 { background-color: var(--palettes-error-900); } .bg-palette-error-950 { background-color: var(--palettes-error-950); } /* Hover states for palette error colors */ .hover\:bg-palette-error-50:hover { background-color: var(--palettes-error-50); } .hover\:bg-palette-error-100:hover { background-color: var(--palettes-error-100); } .hover\:bg-palette-error-200:hover { background-color: var(--palettes-error-200); } .hover\:bg-palette-error-300:hover { background-color: var(--palettes-error-300); } .hover\:bg-palette-error-400:hover { background-color: var(--palettes-error-400); } .hover\:bg-palette-error-500:hover { background-color: var(--palettes-error-500); } .hover\:bg-palette-error-600:hover { background-color: var(--palettes-error-main-600); } .hover\:bg-palette-error-700:hover { background-color: var(--palettes-error-700); } .hover\:bg-palette-error-800:hover { background-color: var(--palettes-error-800); } .hover\:bg-palette-error-900:hover { background-color: var(--palettes-error-900); } .hover\:bg-palette-error-950:hover { background-color: var(--palettes-error-950); } /* ============================================ PALETTE COLORS - INFO ============================================ */ .bg-palette-info-50 { background-color: var(--palettes-info-50); } .bg-palette-info-100 { background-color: var(--palettes-info-100); } .bg-palette-info-200 { background-color: var(--palettes-info-200); } .bg-palette-info-300 { background-color: var(--palettes-info-300); } .bg-palette-info-400 { background-color: var(--palettes-info-400); } .bg-palette-info-500 { background-color: var(--palettes-info-500); } .bg-palette-info-600 { background-color: var(--palettes-info-main-600); } .bg-palette-info-700 { background-color: var(--palettes-info-700); } .bg-palette-info-800 { background-color: var(--palettes-info-800); } .bg-palette-info-900 { background-color: var(--palettes-info-900); } .bg-palette-info-950 { background-color: var(--palettes-info-950); } /* Hover states for palette info colors */ .hover\:bg-palette-info-50:hover { background-color: var(--palettes-info-50); } .hover\:bg-palette-info-100:hover { background-color: var(--palettes-info-100); } .hover\:bg-palette-info-200:hover { background-color: var(--palettes-info-200); } .hover\:bg-palette-info-300:hover { background-color: var(--palettes-info-300); } .hover\:bg-palette-info-400:hover { background-color: var(--palettes-info-400); } .hover\:bg-palette-info-500:hover { background-color: var(--palettes-info-500); } .hover\:bg-palette-info-600:hover { background-color: var(--palettes-info-main-600); } .hover\:bg-palette-info-700:hover { background-color: var(--palettes-info-700); } .hover\:bg-palette-info-800:hover { background-color: var(--palettes-info-800); } .hover\:bg-palette-info-900:hover { background-color: var(--palettes-info-900); } .hover\:bg-palette-info-950:hover { background-color: var(--palettes-info-950); } /* ============================================ PALETTE COLORS - WARNING ============================================ */ .bg-palette-warning-50 { background-color: var(--palettes-warning-50); } .bg-palette-warning-100 { background-color: var(--palettes-warning-100); } .bg-palette-warning-200 { background-color: var(--palettes-warning-200); } .bg-palette-warning-300 { background-color: var(--palettes-warning-300); } .bg-palette-warning-400 { background-color: var(--palettes-warning-400); } .bg-palette-warning-500 { background-color: var(--palettes-warning-main-500); } .bg-palette-warning-600 { background-color: var(--palettes-warning-600); } .bg-palette-warning-700 { background-color: var(--palettes-warning-700); } .bg-palette-warning-800 { background-color: var(--palettes-warning-800); } .bg-palette-warning-900 { background-color: var(--palettes-warning-900); } .bg-palette-warning-950 { background-color: var(--palettes-warning-950); } /* Hover states for palette warning colors */ .hover\:bg-palette-warning-50:hover { background-color: var(--palettes-warning-50); } .hover\:bg-palette-warning-100:hover { background-color: var(--palettes-warning-100); } .hover\:bg-palette-warning-200:hover { background-color: var(--palettes-warning-200); } .hover\:bg-palette-warning-300:hover { background-color: var(--palettes-warning-300); } .hover\:bg-palette-warning-400:hover { background-color: var(--palettes-warning-400); } .hover\:bg-palette-warning-500:hover { background-color: var(--palettes-warning-main-500); } .hover\:bg-palette-warning-600:hover { background-color: var(--palettes-warning-600); } .hover\:bg-palette-warning-700:hover { background-color: var(--palettes-warning-700); } .hover\:bg-palette-warning-800:hover { background-color: var(--palettes-warning-800); } .hover\:bg-palette-warning-900:hover { background-color: var(--palettes-warning-900); } .hover\:bg-palette-warning-950:hover { background-color: var(--palettes-warning-950); } /* ============================================ PALETTE COLORS - SUCCESS ============================================ */ .bg-palette-success-50 { background-color: var(--palettes-success-50); } .bg-palette-success-100 { background-color: var(--palettes-success-100); } .bg-palette-success-200 { background-color: var(--palettes-success-200); } .bg-palette-success-300 { background-color: var(--palettes-success-300); } .bg-palette-success-400 { background-color: var(--palettes-success-main-400); } .bg-palette-success-500 { background-color: var(--palettes-success-500); } .bg-palette-success-600 { background-color: var(--palettes-success-600); } .bg-palette-success-700 { background-color: var(--palettes-success-700); } .bg-palette-success-800 { background-color: var(--palettes-success-800); } .bg-palette-success-900 { background-color: var(--palettes-success-900); } .bg-palette-success-950 { background-color: var(--palettes-success-950); } /* Hover states for palette success colors */ .hover\:bg-palette-success-50:hover { background-color: var(--palettes-success-50); } .hover\:bg-palette-success-100:hover { background-color: var(--palettes-success-100); } .hover\:bg-palette-success-200:hover { background-color: var(--palettes-success-200); } .hover\:bg-palette-success-300:hover { background-color: var(--palettes-success-300); } .hover\:bg-palette-success-400:hover { background-color: var(--palettes-success-main-400); } .hover\:bg-palette-success-500:hover { background-color: var(--palettes-success-500); } .hover\:bg-palette-success-600:hover { background-color: var(--palettes-success-600); } .hover\:bg-palette-success-700:hover { background-color: var(--palettes-success-700); } .hover\:bg-palette-success-800:hover { background-color: var(--palettes-success-800); } .hover\:bg-palette-success-900:hover { background-color: var(--palettes-success-900); } .hover\:bg-palette-success-950:hover { background-color: var(--palettes-success-950); } /* ============================================ PALETTE COLORS - PROMOTION ============================================ */ .bg-palette-promotion-50 { background-color: var(--palettes-promotion-50); } .bg-palette-promotion-100 { background-color: var(--palettes-promotion-100); } .bg-palette-promotion-200 { background-color: var(--palettes-promotion-200); } .bg-palette-promotion-300 { background-color: var(--palettes-promotion-300); } .bg-palette-promotion-400 { background-color: var(--palettes-promotion-400); } .bg-palette-promotion-500 { background-color: var(--palettes-promotion-main-500); } .bg-palette-promotion-600 { background-color: var(--palettes-promotion-600); } .bg-palette-promotion-700 { background-color: var(--palettes-promotion-700); } .bg-palette-promotion-800 { background-color: var(--palettes-promotion-800); } .bg-palette-promotion-900 { background-color: var(--palettes-promotion-900); } .bg-palette-promotion-950 { background-color: var(--palettes-promotion-950); } /* Hover states for palette promotion colors */ .hover\:bg-palette-promotion-50:hover { background-color: var(--palettes-promotion-50); } .hover\:bg-palette-promotion-100:hover { background-color: var(--palettes-promotion-100); } .hover\:bg-palette-promotion-200:hover { background-color: var(--palettes-promotion-200); } .hover\:bg-palette-promotion-300:hover { background-color: var(--palettes-promotion-300); } .hover\:bg-palette-promotion-400:hover { background-color: var(--palettes-promotion-400); } .hover\:bg-palette-promotion-500:hover { background-color: var(--palettes-promotion-main-500); } .hover\:bg-palette-promotion-600:hover { background-color: var(--palettes-promotion-600); } .hover\:bg-palette-promotion-700:hover { background-color: var(--palettes-promotion-700); } .hover\:bg-palette-promotion-800:hover { background-color: var(--palettes-promotion-800); } .hover\:bg-palette-promotion-900:hover { background-color: var(--palettes-promotion-900); } .hover\:bg-palette-promotion-950:hover { background-color: var(--palettes-promotion-950); } /* ============================================ PALETTE COLORS - ATTENTION ============================================ */ .bg-palette-attention-50 { background-color: var(--palettes-attention-50); } .bg-palette-attention-100 { background-color: var(--palettes-attention-100); } .bg-palette-attention-200 { background-color: var(--palettes-attention-200); } .bg-palette-attention-300 { background-color: var(--palettes-attention-300); } .bg-palette-attention-400 { background-color: var(--palettes-attention-400); } .bg-palette-attention-500 { background-color: var(--palettes-attention-main-500); } .bg-palette-attention-600 { background-color: var(--palettes-attention-600); } .bg-palette-attention-700 { background-color: var(--palettes-attention-700); } .bg-palette-attention-800 { background-color: var(--palettes-attention-800); } .bg-palette-attention-900 { background-color: var(--palettes-attention-900); } .bg-palette-attention-950 { background-color: var(--palettes-attention-950); } /* Hover states for palette attention colors */ .hover\:bg-palette-attention-50:hover { background-color: var(--palettes-attention-50); } .hover\:bg-palette-attention-100:hover { background-color: var(--palettes-attention-100); } .hover\:bg-palette-attention-200:hover { background-color: var(--palettes-attention-200); } .hover\:bg-palette-attention-300:hover { background-color: var(--palettes-attention-300); } .hover\:bg-palette-attention-400:hover { background-color: var(--palettes-attention-400); } .hover\:bg-palette-attention-500:hover { background-color: var(--palettes-attention-main-500); } .hover\:bg-palette-attention-600:hover { background-color: var(--palettes-attention-600); } .hover\:bg-palette-attention-700:hover { background-color: var(--palettes-attention-700); } .hover\:bg-palette-attention-800:hover { background-color: var(--palettes-attention-800); } .hover\:bg-palette-attention-900:hover { background-color: var(--palettes-attention-900); } .hover\:bg-palette-attention-950:hover { background-color: var(--palettes-attention-950); } /* ============================================ PALETTE COLORS - NEUTRAL ============================================ */ .bg-palette-neutral-50 { background-color: var(--palettes-neutral-50); } .bg-palette-neutral-100 { background-color: var(--palettes-neutral-100); } .bg-palette-neutral-200 { background-color: var(--palettes-neutral-200); } .bg-palette-neutral-300 { background-color: var(--palettes-neutral-300); } .bg-palette-neutral-400 { background-color: var(--palettes-neutral-400); } .bg-palette-neutral-500 { background-color: var(--palettes-neutral-500); } .bg-palette-neutral-600 { background-color: var(--palettes-neutral-600); } .bg-palette-neutral-700 { background-color: var(--palettes-neutral-700); } .bg-palette-neutral-800 { background-color: var(--palettes-neutral-main-800); } .bg-palette-neutral-900 { background-color: var(--palettes-neutral-900); } .bg-palette-neutral-950 { background-color: var(--palettes-neutral-950); } /* Hover states for palette neutral colors */ .hover\:bg-palette-neutral-50:hover { background-color: var(--palettes-neutral-50); } .hover\:bg-palette-neutral-100:hover { background-color: var(--palettes-neutral-100); } .hover\:bg-palette-neutral-200:hover { background-color: var(--palettes-neutral-200); } .hover\:bg-palette-neutral-300:hover { background-color: var(--palettes-neutral-300); } .hover\:bg-palette-neutral-400:hover { background-color: var(--palettes-neutral-400); } .hover\:bg-palette-neutral-500:hover { background-color: var(--palettes-neutral-500); } .hover\:bg-palette-neutral-600:hover { background-color: var(--palettes-neutral-600); } .hover\:bg-palette-neutral-700:hover { background-color: var(--palettes-neutral-700); } .hover\:bg-palette-neutral-800:hover { background-color: var(--palettes-neutral-main-800); } .hover\:bg-palette-neutral-900:hover { background-color: var(--palettes-neutral-900); } .hover\:bg-palette-neutral-950:hover { background-color: var(--palettes-neutral-950); } /* ============================================ GRADIENT UTILITIES ============================================ */ .bg-gradient-alpha-40{ background: linear-gradient(0deg, var(--white-fixed-alpha-0) 0%, var(--white-fixed-alpha-40) 100%); } .bg-gradient-lighest-to-border{ background: linear-gradient(180deg, var(--neutral-lightest) 0%, var(--neutral-border) 100%); } .bg-gradient-lighest-to-subtle{ background: linear-gradient(180deg, var(--neutral-lightest) 0%, var(--neutral-subtle) 100%); } .bg-gradient-subtle-to-lightest{ background: linear-gradient(180deg, var(--neutral-subtle) 0%, var(--neutral-lightest) 100%); } /*!******************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./assets/src/css/idtTheme/border.css ***! \******************************************************************************************************************/ /** * IDT Theme - Border Color Utilities * * Border color utility classes using CSS variables that adapt to the current theme mode. * Usage: .border-neutral-darkest, .border-error-main, .border-info-main, etc. */ /* ============================================ NEUTRALS ============================================ */ .border-neutral-darkest { border-color: var(--neutral-darkest); } .border-neutral-title { border-color: var(--neutral-title); } .border-neutral-body { border-color: var(--neutral-body); } .border-neutral-secondary { border-color: var(--neutral-secondary); } .border-neutral-tertiary { border-color: var(--neutral-tertiary); } .border-neutral-disabled { border-color: var(--neutral-disabled); } .border-neutral-bg { border-color: var(--neutral-bgColor); } .border-neutral-card { border-color: var(--neutral-cardColor); } .border-neutral-subtle { border-color: var(--neutral-subtle); } .border-neutral-extrasubtle { border-color: var(--neutral-extrasubtle); } .border-neutral-lightest { border-color: var(--neutral-lightest); } /* Hover states for neutral border colors */ .hover\:border-neutral-darkest:hover { border-color: var(--neutral-darkest); } .hover\:border-neutral-title:hover { border-color: var(--neutral-title); } .hover\:border-neutral-body:hover { border-color: var(--neutral-body); } .hover\:border-neutral-secondary:hover { border-color: var(--neutral-secondary); } .hover\:border-neutral-tertiary:hover { border-color: var(--neutral-tertiary); } .hover\:border-neutral-disabled:hover { border-color: var(--neutral-disabled); } .hover\:border-neutral-bg:hover { border-color: var(--neutral-bgColor); } .hover\:border-neutral-card:hover { border-color: var(--neutral-cardColor); } .hover\:border-neutral-subtle:hover { border-color: var(--neutral-subtle); } .hover\:border-neutral-extrasubtle:hover { border-color: var(--neutral-extrasubtle); } .hover\:border-neutral-lightest:hover { border-color: var(--neutral-lightest); } /* ============================================ ERROR ============================================ */ .border-error-main { border-color: var(--error-error-main); } .border-error-text { border-color: var(--error-error-text); } .border-on-error { border-color: var(--error-on-error); } .border-error-variant { border-color: var(--error-variant-error-variant); } .border-error-variant-text { border-color: var(--error-variant-error-text-variant); } .border-on-error-variant { border-color: var(--error-variant-on-error-variant); } .border-error-bg { border-color: var(--error-error-bg); } .border-error-darker { border-color: var(--error-error-bg-darker); } .border-error-darkest { border-color: var(--error-error-bg-darkest); } .border-error-variant-bg { border-color: var(--error-variant-error-variant-bg); } .border-error-variant-darker { border-color: var(--error-variant-error-variant-bg-darker); } .border-error-variant-darkest { border-color: var(--error-variant-error-variant-bg-darkest); } /* Hover states for error border colors */ .hover\:border-error-main:hover { border-color: var(--error-error-main); } .hover\:border-error-text:hover { border-color: var(--error-error-text); } .hover\:border-on-error:hover { border-color: var(--error-on-error); } .hover\:border-error-variant:hover { border-color: var(--error-variant-error-variant); } .hover\:border-error-variant-text:hover { border-color: var(--error-variant-error-text-variant); } .hover\:border-on-error-variant:hover { border-color: var(--error-variant-on-error-variant); } .hover\:border-error-bg:hover { border-color: var(--error-error-bg); } .hover\:border-error-darker:hover { border-color: var(--error-error-bg-darker); } .hover\:border-error-darkest:hover { border-color: var(--error-error-bg-darkest); } .hover\:border-error-variant-bg:hover { border-color: var(--error-variant-error-variant-bg); } .hover\:border-error-variant-darker:hover { border-color: var(--error-variant-error-variant-bg-darker); } .hover\:border-error-variant-darkest:hover { border-color: var(--error-variant-error-variant-bg-darkest); } /* ============================================ INFO ============================================ */ .border-info-main { border-color: var(--info-info-main); } .border-info-text { border-color: var(--info-info-text); } .border-on-info { border-color: var(--info-on-info); } .border-info-variant { border-color: var(--info-variant-info-variant); } .border-info-variant-text { border-color: var(--info-variant-info-text-variant); } .border-on-info-variant { border-color: var(--info-variant-on-info-variant); } .border-info-bg { border-color: var(--info-info-bg); } .border-info-darker { border-color: var(--info-info-bg-darker); } .border-info-darkest { border-color: var(--info-info-bg-darkest); } .border-info-variant-bg { border-color: var(--info-variant-info-variant-bg); } .border-info-variant-darker { border-color: var(--info-variant-info-variant-bg-darker); } .border-info-variant-darkest { border-color: var(--info-variant-info-variant-bg-darkest); } /* Hover states for info border colors */ .hover\:border-info-main:hover { border-color: var(--info-info-main); } .hover\:border-info-text:hover { border-color: var(--info-info-text); } .hover\:border-on-info:hover { border-color: var(--info-on-info); } .hover\:border-info-variant:hover { border-color: var(--info-variant-info-variant); } .hover\:border-info-variant-text:hover { border-color: var(--info-variant-info-text-variant); } .hover\:border-on-info-variant:hover { border-color: var(--info-variant-on-info-variant); } .hover\:border-info-bg:hover { border-color: var(--info-info-bg); } .hover\:border-info-darker:hover { border-color: var(--info-info-bg-darker); } .hover\:border-info-darkest:hover { border-color: var(--info-info-bg-darkest); } .hover\:border-info-variant-bg:hover { border-color: var(--info-variant-info-variant-bg); } .hover\:border-info-variant-darker:hover { border-color: var(--info-variant-info-variant-bg-darker); } .hover\:border-info-variant-darkest:hover { border-color: var(--info-variant-info-variant-bg-darkest); } /* ============================================ SUCCESS ============================================ */ .border-success-main { border-color: var(--success-success-main); } .border-success-text { border-color: var(--success-success-text); } .border-on-success { border-color: var(--success-on-success-main); } .border-success-variant { border-color: var(--success-variant-success-variant); } .border-success-variant-text { border-color: var(--success-variant-success-text-variant); } .border-on-success-variant { border-color: var(--success-variant-on-success-variant); } .border-success-bg { border-color: var(--success-success-bg); } .border-success-darker { border-color: var(--success-success-bg-darker); } .border-success-darkest { border-color: var(--success-success-bg-darkest); } .border-success-variant-bg { border-color: var(--success-variant-success-bg-variant); } .border-success-variant-darker { border-color: var(--success-variant-success-bg-variant-darker); } .border-success-variant-darkest { border-color: var(--success-variant-success-bg-variant-darkest); } /* Hover states for success border colors */ .hover\:border-success-main:hover { border-color: var(--success-success-main); } .hover\:border-success-text:hover { border-color: var(--success-success-text); } .hover\:border-on-success:hover { border-color: var(--success-on-success-main); } .hover\:border-success-variant:hover { border-color: var(--success-variant-success-variant); } .hover\:border-success-variant-text:hover { border-color: var(--success-variant-success-text-variant); } .hover\:border-on-success-variant:hover { border-color: var(--success-variant-on-success-variant); } .hover\:border-success-bg:hover { border-color: var(--success-success-bg); } .hover\:border-success-darker:hover { border-color: var(--success-success-bg-darker); } .hover\:border-success-darkest:hover { border-color: var(--success-success-bg-darkest); } .hover\:border-success-variant-bg:hover { border-color: var(--success-variant-success-bg-variant); } .hover\:border-success-variant-darker:hover { border-color: var(--success-variant-success-bg-variant-darker); } .hover\:border-success-variant-darkest:hover { border-color: var(--success-variant-success-bg-variant-darkest); } /* ============================================ WARNING ============================================ */ .border-warning-main { border-color: var(--warning-warning-main); } .border-warning-text { border-color: var(--warning-warning-text); } .border-on-warning { border-color: var(--warning-on-warning); } .border-warning-variant { border-color: var(--warning-variant-warning-variant); } .border-warning-variant-text { border-color: var(--warning-variant-warning-text-variant); } .border-on-warning-variant { border-color: var(--warning-variant-on-warning-variant); } .border-warning-bg { border-color: var(--warning-warning-bg); } .border-warning-darker { border-color: var(--warning-warning-bg-darker); } .border-warning-darkest { border-color: var(--warning-warning-bg-darkest); } .border-warning-variant-bg { border-color: var(--warning-variant-warning-variant-bg); } .border-warning-variant-darker { border-color: var(--warning-variant-warning-variant-bg-darker); } .border-warning-variant-darkest { border-color: var(--warning-variant-warning-variant-bg-darkest); } /* Hover states for warning border colors */ .hover\:border-warning-main:hover { border-color: var(--warning-warning-main); } .hover\:border-warning-text:hover { border-color: var(--warning-warning-text); } .hover\:border-on-warning:hover { border-color: var(--warning-on-warning); } .hover\:border-warning-variant:hover { border-color: var(--warning-variant-warning-variant); } .hover\:border-warning-variant-text:hover { border-color: var(--warning-variant-warning-text-variant); } .hover\:border-on-warning-variant:hover { border-color: var(--warning-variant-on-warning-variant); } .hover\:border-warning-bg:hover { border-color: var(--warning-warning-bg); } .hover\:border-warning-darker:hover { border-color: var(--warning-warning-bg-darker); } .hover\:border-warning-darkest:hover { border-color: var(--warning-warning-bg-darkest); } .hover\:border-warning-variant-bg:hover { border-color: var(--warning-variant-warning-variant-bg); } .hover\:border-warning-variant-darker:hover { border-color: var(--warning-variant-warning-variant-bg-darker); } .hover\:border-warning-variant-darkest:hover { border-color: var(--warning-variant-warning-variant-bg-darkest); } /* ============================================ ATTENTION ============================================ */ .border-attention-main { border-color: var(--attention-attention-main); } .border-attention-text { border-color: var(--attention-attention-text); } .border-on-attention { border-color: var(--attention-on-attention); } .border-attention-variant { border-color: var(--attention-variant-attention-variant); } .border-attention-variant-text { border-color: var(--attention-variant-attention-text-variant); } .border-on-attention-variant { border-color: var(--attention-variant-on-attention-variant); } .border-attention-bg { border-color: var(--attention-attention-bg); } .border-attention-darker { border-color: var(--attention-attention-bg-darker); } .border-attention-darkest { border-color: var(--attention-attention-bg-darkest); } .border-attention-variant-bg { border-color: var(--attention-variant-attention-variant-bg); } .border-attention-variant-darker { border-color: var(--attention-variant-attention-variant-bg-darker); } .border-attention-variant-darkest { border-color: var(--attention-variant-attention-variant-bg-darkest); } /* Hover states for attention border colors */ .hover\:border-attention-main:hover { border-color: var(--attention-attention-main); } .hover\:border-attention-text:hover { border-color: var(--attention-attention-text); } .hover\:border-on-attention:hover { border-color: var(--attention-on-attention); } .hover\:border-attention-variant:hover { border-color: var(--attention-variant-attention-variant); } .hover\:border-attention-variant-text:hover { border-color: var(--attention-variant-attention-text-variant); } .hover\:border-on-attention-variant:hover { border-color: var(--attention-variant-on-attention-variant); } .hover\:border-attention-bg:hover { border-color: var(--attention-attention-bg); } .hover\:border-attention-darker:hover { border-color: var(--attention-attention-bg-darker); } .hover\:border-attention-darkest:hover { border-color: var(--attention-attention-bg-darkest); } .hover\:border-attention-variant-bg:hover { border-color: var(--attention-variant-attention-variant-bg); } .hover\:border-attention-variant-darker:hover { border-color: var(--attention-variant-attention-variant-bg-darker); } .hover\:border-attention-variant-darkest:hover { border-color: var(--attention-variant-attention-variant-bg-darkest); } /* ============================================ PROMOTION ============================================ */ .border-promotion-main { border-color: var(--promotion-promotion-main); } .border-promotion-text { border-color: var(--promotion-promotion-text); } .border-on-promotion { border-color: var(--promotion-on-promotion); } .border-promotion-variant { border-color: var(--promotion-variant-promotion-variant); } .border-promotion-variant-text { border-color: var(--promotion-variant-promotion-text-variant); } .border-on-promotion-variant { border-color: var(--promotion-variant-on-promotion-variant); } .border-promotion-bg { border-color: var(--promotion-promotion-bg); } .border-promotion-darker { border-color: var(--promotion-promotion-bg-darker); } .border-promotion-darkest { border-color: var(--promotion-promotion-bg-darkest); } .border-promotion-variant-bg { border-color: var(--promotion-variant-promotion-variant-bg); } .border-promotion-variant-darker { border-color: var(--promotion-variant-promotion-variant-bg-darker); } .border-promotion-variant-darkest { border-color: var(--promotion-variant-promotion-variant-bg-darkest); } /* Hover states for promotion border colors */ .hover\:border-promotion-main:hover { border-color: var(--promotion-promotion-main); } .hover\:border-promotion-text:hover { border-color: var(--promotion-promotion-text); } .hover\:border-on-promotion:hover { border-color: var(--promotion-on-promotion); } .hover\:border-promotion-variant:hover { border-color: var(--promotion-variant-promotion-variant); } .hover\:border-promotion-variant-text:hover { border-color: var(--promotion-variant-promotion-text-variant); } .hover\:border-on-promotion-variant:hover { border-color: var(--promotion-variant-on-promotion-variant); } .hover\:border-promotion-bg:hover { border-color: var(--promotion-promotion-bg); } .hover\:border-promotion-darker:hover { border-color: var(--promotion-promotion-bg-darker); } .hover\:border-promotion-darkest:hover { border-color: var(--promotion-promotion-bg-darkest); } .hover\:border-promotion-variant-bg:hover { border-color: var(--promotion-variant-promotion-variant-bg); } .hover\:border-promotion-variant-darker:hover { border-color: var(--promotion-variant-promotion-variant-bg-darker); } .hover\:border-promotion-variant-darkest:hover { border-color: var(--promotion-variant-promotion-variant-bg-darkest); } /* ============================================ FIXED COLORS ============================================ */ .border-white { border-color: var(--white); } .border-black { border-color: var(--black); } .border-fixed-white { border-color: var(--fixed-white-fixed); } .border-fixed-black { border-color: var(--fixed-black-fixed); } .border-fixed-neutral { border-color: var(--fixed-neutral-fixed); } /* Hover states for fixed colors */ .hover\:border-white:hover { border-color: var(--white); } .hover\:border-black:hover { border-color: var(--black); } .hover\:border-fixed-white:hover { border-color: var(--fixed-white-fixed); } .hover\:border-fixed-black:hover { border-color: var(--fixed-black-fixed); } .hover\:border-fixed-neutral:hover { border-color: var(--fixed-neutral-fixed); } /* ============================================ BRAND COLORS ============================================ */ /* BOSS Revolution */ .border-boss-revolution-50 { border-color: var(--BOSS-Revolution-br-primary-50); } .border-boss-revolution-100 { border-color: var(--BOSS-Revolution-br-primary-100); } .border-boss-revolution-200 { border-color: var(--BOSS-Revolution-br-primary-200); } .border-boss-revolution-300 { border-color: var(--BOSS-Revolution-br-primary-300); } .border-boss-revolution-400 { border-color: var(--BOSS-Revolution-br-primary-400); } .border-boss-revolution-500 { border-color: var(--BOSS-Revolution-br-primary-500); } .border-boss-revolution-600 { border-color: var(--BOSS-Revolution-br-primary-600); } .border-boss-revolution-700 { border-color: var(--BOSS-Revolution-br-primary-700); } .border-boss-revolution-800 { border-color: var(--BOSS-Revolution-br-primary-main-800); } .border-boss-revolution-900 { border-color: var(--BOSS-Revolution-br-primary-900); } .border-boss-revolution-950 { border-color: var(--BOSS-Revolution-br-primary-950); } /* Hover states for BOSS Revolution */ .hover\:border-boss-revolution-50:hover { border-color: var(--BOSS-Revolution-br-primary-50); } .hover\:border-boss-revolution-100:hover { border-color: var(--BOSS-Revolution-br-primary-100); } .hover\:border-boss-revolution-200:hover { border-color: var(--BOSS-Revolution-br-primary-200); } .hover\:border-boss-revolution-300:hover { border-color: var(--BOSS-Revolution-br-primary-300); } .hover\:border-boss-revolution-400:hover { border-color: var(--BOSS-Revolution-br-primary-400); } .hover\:border-boss-revolution-500:hover { border-color: var(--BOSS-Revolution-br-primary-500); } .hover\:border-boss-revolution-600:hover { border-color: var(--BOSS-Revolution-br-primary-600); } .hover\:border-boss-revolution-700:hover { border-color: var(--BOSS-Revolution-br-primary-700); } .hover\:border-boss-revolution-800:hover { border-color: var(--BOSS-Revolution-br-primary-main-800); } .hover\:border-boss-revolution-900:hover { border-color: var(--BOSS-Revolution-br-primary-900); } .hover\:border-boss-revolution-950:hover { border-color: var(--BOSS-Revolution-br-primary-950); } /* BOSS Money */ .border-boss-money-50 { border-color: var(--BOSS-Money-bm-primary-50); } .border-boss-money-100 { border-color: var(--BOSS-Money-bm-primary-100); } .border-boss-money-200 { border-color: var(--BOSS-Money-bm-primary-200); } .border-boss-money-300 { border-color: var(--BOSS-Money-bm-primary-300); } .border-boss-money-400 { border-color: var(--BOSS-Money-bm-primary-400); } .border-boss-money-500 { border-color: var(--BOSS-Money-bm-primary-main-500); } .border-boss-money-600 { border-color: var(--BOSS-Money-bm-primary-600); } .border-boss-money-700 { border-color: var(--BOSS-Money-bm-primary-700); } .border-boss-money-800 { border-color: var(--BOSS-Money-bm-primary-800); } .border-boss-money-900 { border-color: var(--BOSS-Money-bm-primary-900); } .border-boss-money-950 { border-color: var(--BOSS-Money-bm-primary-950); } /* Hover states for BOSS Money */ .hover\:border-boss-money-50:hover { border-color: var(--BOSS-Money-bm-primary-50); } .hover\:border-boss-money-100:hover { border-color: var(--BOSS-Money-bm-primary-100); } .hover\:border-boss-money-200:hover { border-color: var(--BOSS-Money-bm-primary-200); } .hover\:border-boss-money-300:hover { border-color: var(--BOSS-Money-bm-primary-300); } .hover\:border-boss-money-400:hover { border-color: var(--BOSS-Money-bm-primary-400); } .hover\:border-boss-money-500:hover { border-color: var(--BOSS-Money-bm-primary-main-500); } .hover\:border-boss-money-600:hover { border-color: var(--BOSS-Money-bm-primary-600); } .hover\:border-boss-money-700:hover { border-color: var(--BOSS-Money-bm-primary-700); } .hover\:border-boss-money-800:hover { border-color: var(--BOSS-Money-bm-primary-800); } .hover\:border-boss-money-900:hover { border-color: var(--BOSS-Money-bm-primary-900); } .hover\:border-boss-money-950:hover { border-color: var(--BOSS-Money-bm-primary-950); } /* BOSS REDolution */ .border-boss-redolution-50 { border-color: var(--BOSS-REDolution-bred-primary-50); } .border-boss-redolution-100 { border-color: var(--BOSS-REDolution-bred-primary-100); } .border-boss-redolution-200 { border-color: var(--BOSS-REDolution-bred-primary-200); } .border-boss-redolution-300 { border-color: var(--BOSS-REDolution-bred-primary-300); } .border-boss-redolution-400 { border-color: var(--BOSS-REDolution-bred-primary-400); } .border-boss-redolution-500 { border-color: var(--BOSS-REDolution-bred-primary-500); } .border-boss-redolution-600 { border-color: var(--BOSS-REDolution-bred-primary-main-600); } .border-boss-redolution-700 { border-color: var(--BOSS-REDolution-bred-primary-700); } .border-boss-redolution-800 { border-color: var(--BOSS-REDolution-bred-primary-800); } .border-boss-redolution-900 { border-color: var(--BOSS-REDolution-bred-primary-900); } .border-boss-redolution-950 { border-color: var(--BOSS-REDolution-bred-primary-950); } /* Hover states for BOSS REDolution */ .hover\:border-boss-redolution-50:hover { border-color: var(--BOSS-REDolution-bred-primary-50); } .hover\:border-boss-redolution-100:hover { border-color: var(--BOSS-REDolution-bred-primary-100); } .hover\:border-boss-redolution-200:hover { border-color: var(--BOSS-REDolution-bred-primary-200); } .hover\:border-boss-redolution-300:hover { border-color: var(--BOSS-REDolution-bred-primary-300); } .hover\:border-boss-redolution-400:hover { border-color: var(--BOSS-REDolution-bred-primary-400); } .hover\:border-boss-redolution-500:hover { border-color: var(--BOSS-REDolution-bred-primary-500); } .hover\:border-boss-redolution-600:hover { border-color: var(--BOSS-REDolution-bred-primary-main-600); } .hover\:border-boss-redolution-700:hover { border-color: var(--BOSS-REDolution-bred-primary-700); } .hover\:border-boss-redolution-800:hover { border-color: var(--BOSS-REDolution-bred-primary-800); } .hover\:border-boss-redolution-900:hover { border-color: var(--BOSS-REDolution-bred-primary-900); } .hover\:border-boss-redolution-950:hover { border-color: var(--BOSS-REDolution-bred-primary-950); } /*!*******************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./assets/src/css/idtTheme/spacing.css ***! \*******************************************************************************************************************/ /** * IDT Theme - Spacing Utilities * * Margin, padding, and border-radius utility classes using CSS variables. * Usage: .m-8, .p-16, .my-4, .px-8, .mx-24, .py-12, .rounded-8, etc. */ /* ============================================ MARGIN - All Sides ============================================ */ .m-0 { margin: var(--space-0); } .m-2 { margin: var(--space-2); } .m-4 { margin: var(--space-4); } .m-6 { margin: var(--space-6); } .m-8 { margin: var(--space-8); } .m-10 { margin: var(--space-10); } .m-12 { margin: var(--space-12); } .m-14 { margin: var(--space-14); } .m-main-16 { margin: var(--space-inside-main-16); } .m-18 { margin: var(--space-18); } .m-20 { margin: var(--space-20); } .m-22 { margin: var(--space-22); } .m-24 { margin: var(--space-outside-main-24); } .m-main-24 { margin: var(--space-outside-main-24); } .m-26 { margin: var(--space-26); } .m-28 { margin: var(--space-28); } .m-30 { margin: var(--space-30); } .m-32 { margin: var(--space-32); } .m-34 { margin: var(--space-34); } .m-36 { margin: var(--space-36); } .m-38 { margin: var(--space-38); } .m-40 { margin: var(--space-40); } .m-42 { margin: var(--space-42); } .m-44 { margin: var(--space-44); } .m-46 { margin: var(--space-46); } .m-48 { margin: var(--space-48); } .m-56 { margin: var(--space-56); } .m-64 { margin: var(--space-64); } .m-72 { margin: var(--space-72); } .m-80 { margin: var(--space-80); } .m-88 { margin: var(--space-88); } .m-96 { margin: var(--space-96); } .m-104 { margin: var(--space-104); } .m-112 { margin: var(--space-112); } .m-120 { margin: var(--space-120); } .m-128 { margin: var(--space-128); } .m-9999 { margin: var(--space-9999); } /* ============================================ MARGIN - Vertical Only (my) ============================================ */ .my-0 { margin-top: var(--space-0); margin-bottom: var(--space-0); } .my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); } .my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); } .my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); } .my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); } .my-10 { margin-top: var(--space-10); margin-bottom: var(--space-10); } .my-12 { margin-top: var(--space-12); margin-bottom: var(--space-12); } .my-14 { margin-top: var(--space-14); margin-bottom: var(--space-14); } .my-main-16 { margin-top: var(--space-inside-main-16); margin-bottom: var(--space-inside-main-16); } .my-18 { margin-top: var(--space-18); margin-bottom: var(--space-18); } .my-20 { margin-top: var(--space-20); margin-bottom: var(--space-20); } .my-22 { margin-top: var(--space-22); margin-bottom: var(--space-22); } .my-24 { margin-top: var(--space-outside-main-24); margin-bottom: var(--space-outside-main-24); } .my-main-24 { margin-top: var(--space-outside-main-24); margin-bottom: var(--space-outside-main-24); } .my-26 { margin-top: var(--space-26); margin-bottom: var(--space-26); } .my-28 { margin-top: var(--space-28); margin-bottom: var(--space-28); } .my-30 { margin-top: var(--space-30); margin-bottom: var(--space-30); } .my-32 { margin-top: var(--space-32); margin-bottom: var(--space-32); } .my-34 { margin-top: var(--space-34); margin-bottom: var(--space-34); } .my-36 { margin-top: var(--space-36); margin-bottom: var(--space-36); } .my-38 { margin-top: var(--space-38); margin-bottom: var(--space-38); } .my-40 { margin-top: var(--space-40); margin-bottom: var(--space-40); } .my-42 { margin-top: var(--space-42); margin-bottom: var(--space-42); } .my-44 { margin-top: var(--space-44); margin-bottom: var(--space-44); } .my-46 { margin-top: var(--space-46); margin-bottom: var(--space-46); } .my-48 { margin-top: var(--space-48); margin-bottom: var(--space-48); } .my-56 { margin-top: var(--space-56); margin-bottom: var(--space-56); } .my-64 { margin-top: var(--space-64); margin-bottom: var(--space-64); } .my-72 { margin-top: var(--space-72); margin-bottom: var(--space-72); } .my-80 { margin-top: var(--space-80); margin-bottom: var(--space-80); } .my-88 { margin-top: var(--space-88); margin-bottom: var(--space-88); } .my-96 { margin-top: var(--space-96); margin-bottom: var(--space-96); } .my-104 { margin-top: var(--space-104); margin-bottom: var(--space-104); } .my-112 { margin-top: var(--space-112); margin-bottom: var(--space-112); } .my-120 { margin-top: var(--space-120); margin-bottom: var(--space-120); } .my-128 { margin-top: var(--space-128); margin-bottom: var(--space-128); } .my-9999 { margin-top: var(--space-9999); margin-bottom: var(--space-9999); } /* ============================================ MARGIN - Horizontal Only (mx) ============================================ */ .mx-0 { margin-left: var(--space-0); margin-right: var(--space-0); } .mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); } .mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); } .mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); } .mx-8 { margin-left: var(--space-8); margin-right: var(--space-8); } .mx-10 { margin-left: var(--space-10); margin-right: var(--space-10); } .mx-12 { margin-left: var(--space-12); margin-right: var(--space-12); } .mx-14 { margin-left: var(--space-14); margin-right: var(--space-14); } .mx-main-16 { margin-left: var(--space-inside-main-16); margin-right: var(--space-inside-main-16); } .mx-18 { margin-left: var(--space-18); margin-right: var(--space-18); } .mx-20 { margin-left: var(--space-20); margin-right: var(--space-20); } .mx-22 { margin-left: var(--space-22); margin-right: var(--space-22); } .mx-24 { margin-left: var(--space-outside-main-24); margin-right: var(--space-outside-main-24); } .mx-main-24 { margin-left: var(--space-outside-main-24); margin-right: var(--space-outside-main-24); } .mx-26 { margin-left: var(--space-26); margin-right: var(--space-26); } .mx-28 { margin-left: var(--space-28); margin-right: var(--space-28); } .mx-30 { margin-left: var(--space-30); margin-right: var(--space-30); } .mx-32 { margin-left: var(--space-32); margin-right: var(--space-32); } .mx-34 { margin-left: var(--space-34); margin-right: var(--space-34); } .mx-36 { margin-left: var(--space-36); margin-right: var(--space-36); } .mx-38 { margin-left: var(--space-38); margin-right: var(--space-38); } .mx-40 { margin-left: var(--space-40); margin-right: var(--space-40); } .mx-42 { margin-left: var(--space-42); margin-right: var(--space-42); } .mx-44 { margin-left: var(--space-44); margin-right: var(--space-44); } .mx-46 { margin-left: var(--space-46); margin-right: var(--space-46); } .mx-48 { margin-left: var(--space-48); margin-right: var(--space-48); } .mx-56 { margin-left: var(--space-56); margin-right: var(--space-56); } .mx-64 { margin-left: var(--space-64); margin-right: var(--space-64); } .mx-72 { margin-left: var(--space-72); margin-right: var(--space-72); } .mx-80 { margin-left: var(--space-80); margin-right: var(--space-80); } .mx-88 { margin-left: var(--space-88); margin-right: var(--space-88); } .mx-96 { margin-left: var(--space-96); margin-right: var(--space-96); } .mx-104 { margin-left: var(--space-104); margin-right: var(--space-104); } .mx-112 { margin-left: var(--space-112); margin-right: var(--space-112); } .mx-120 { margin-left: var(--space-120); margin-right: var(--space-120); } .mx-128 { margin-left: var(--space-128); margin-right: var(--space-128); } .mx-9999 { margin-left: var(--space-9999); margin-right: var(--space-9999); } /* ============================================ MARGIN - Individual Directions ============================================ */ /* Margin Top */ .mt-0 { margin-top: var(--space-0); } .mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); } .mt-10 { margin-top: var(--space-10); } .mt-12 { margin-top: var(--space-12); } .mt-14 { margin-top: var(--space-14); } .mt-main-16 { margin-top: var(--space-inside-main-16); } .mt-18 { margin-top: var(--space-18); } .mt-20 { margin-top: var(--space-20); } .mt-22 { margin-top: var(--space-22); } .mt-24 { margin-top: var(--space-outside-main-24); } .mt-main-24 { margin-top: var(--space-outside-main-24); } .mt-26 { margin-top: var(--space-26); } .mt-28 { margin-top: var(--space-28); } .mt-30 { margin-top: var(--space-30); } .mt-32 { margin-top: var(--space-32); } .mt-34 { margin-top: var(--space-34); } .mt-36 { margin-top: var(--space-36); } .mt-38 { margin-top: var(--space-38); } .mt-40 { margin-top: var(--space-40); } .mt-42 { margin-top: var(--space-42); } .mt-44 { margin-top: var(--space-44); } .mt-46 { margin-top: var(--space-46); } .mt-48 { margin-top: var(--space-48); } .mt-56 { margin-top: var(--space-56); } .mt-64 { margin-top: var(--space-64); } .mt-72 { margin-top: var(--space-72); } .mt-80 { margin-top: var(--space-80); } .mt-88 { margin-top: var(--space-88); } .mt-96 { margin-top: var(--space-96); } .mt-104 { margin-top: var(--space-104); } .mt-112 { margin-top: var(--space-112); } .mt-120 { margin-top: var(--space-120); } .mt-128 { margin-top: var(--space-128); } .mt-9999 { margin-top: var(--space-9999); } /* Margin Bottom */ .mb-0 { margin-bottom: var(--space-0); } .mb-2 { margin-bottom: var(--space-2); } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); } .mb-10 { margin-bottom: var(--space-10); } .mb-12 { margin-bottom: var(--space-12); } .mb-14 { margin-bottom: var(--space-14); } .mb-16 { margin-bottom: var(--space-inside-main-16); } .mb-main-16 { margin-bottom: var(--space-inside-main-16); } .mb-18 { margin-bottom: var(--space-18); } .mb-20 { margin-bottom: var(--space-20); } .mb-22 { margin-bottom: var(--space-22); } .mb-24 { margin-bottom: var(--space-outside-main-24); } .mb-main-24 { margin-bottom: var(--space-outside-main-24); } .mb-26 { margin-bottom: var(--space-26); } .mb-28 { margin-bottom: var(--space-28); } .mb-30 { margin-bottom: var(--space-30); } .mb-32 { margin-bottom: var(--space-32); } .mb-34 { margin-bottom: var(--space-34); } .mb-36 { margin-bottom: var(--space-36); } .mb-38 { margin-bottom: var(--space-38); } .mb-40 { margin-bottom: var(--space-40); } .mb-42 { margin-bottom: var(--space-42); } .mb-44 { margin-bottom: var(--space-44); } .mb-46 { margin-bottom: var(--space-46); } .mb-48 { margin-bottom: var(--space-48); } .mb-56 { margin-bottom: var(--space-56); } .mb-64 { margin-bottom: var(--space-64); } .mb-72 { margin-bottom: var(--space-72); } .mb-80 { margin-bottom: var(--space-80); } .mb-88 { margin-bottom: var(--space-88); } .mb-96 { margin-bottom: var(--space-96); } .mb-104 { margin-bottom: var(--space-104); } .mb-112 { margin-bottom: var(--space-112); } .mb-120 { margin-bottom: var(--space-120); } .mb-128 { margin-bottom: var(--space-128); } .mb-9999 { margin-bottom: var(--space-9999); } /* Margin Left */ .ml-0 { margin-left: var(--space-0); } .ml-2 { margin-left: var(--space-2); } .ml-4 { margin-left: var(--space-4); } .ml-6 { margin-left: var(--space-6); } .ml-8 { margin-left: var(--space-8); } .ml-10 { margin-left: var(--space-10); } .ml-12 { margin-left: var(--space-12); } .ml-14 { margin-left: var(--space-14); } .ml-main-16 { margin-left: var(--space-inside-main-16); } .ml-18 { margin-left: var(--space-18); } .ml-20 { margin-left: var(--space-20); } .ml-22 { margin-left: var(--space-22); } .ml-24 { margin-left: var(--space-outside-main-24); } .ml-main-24 { margin-left: var(--space-outside-main-24); } .ml-26 { margin-left: var(--space-26); } .ml-28 { margin-left: var(--space-28); } .ml-30 { margin-left: var(--space-30); } .ml-32 { margin-left: var(--space-32); } .ml-34 { margin-left: var(--space-34); } .ml-36 { margin-left: var(--space-36); } .ml-38 { margin-left: var(--space-38); } .ml-40 { margin-left: var(--space-40); } .ml-42 { margin-left: var(--space-42); } .ml-44 { margin-left: var(--space-44); } .ml-46 { margin-left: var(--space-46); } .ml-48 { margin-left: var(--space-48); } .ml-56 { margin-left: var(--space-56); } .ml-64 { margin-left: var(--space-64); } .ml-72 { margin-left: var(--space-72); } .ml-80 { margin-left: var(--space-80); } .ml-88 { margin-left: var(--space-88); } .ml-96 { margin-left: var(--space-96); } .ml-104 { margin-left: var(--space-104); } .ml-112 { margin-left: var(--space-112); } .ml-120 { margin-left: var(--space-120); } .ml-128 { margin-left: var(--space-128); } .ml-9999 { margin-left: var(--space-9999); } /* Margin Right */ .mr-0 { margin-right: var(--space-0); } .mr-2 { margin-right: var(--space-2); } .mr-4 { margin-right: var(--space-4); } .mr-6 { margin-right: var(--space-6); } .mr-8 { margin-right: var(--space-8); } .mr-10 { margin-right: var(--space-10); } .mr-12 { margin-right: var(--space-12); } .mr-14 { margin-right: var(--space-14); } .mr-main-16 { margin-right: var(--space-inside-main-16); } .mr-18 { margin-right: var(--space-18); } .mr-20 { margin-right: var(--space-20); } .mr-22 { margin-right: var(--space-22); } .mr-24 { margin-right: var(--space-outside-main-24); } .mr-main-24 { margin-right: var(--space-outside-main-24); } .mr-26 { margin-right: var(--space-26); } .mr-28 { margin-right: var(--space-28); } .mr-30 { margin-right: var(--space-30); } .mr-32 { margin-right: var(--space-32); } .mr-34 { margin-right: var(--space-34); } .mr-36 { margin-right: var(--space-36); } .mr-38 { margin-right: var(--space-38); } .mr-40 { margin-right: var(--space-40); } .mr-42 { margin-right: var(--space-42); } .mr-44 { margin-right: var(--space-44); } .mr-46 { margin-right: var(--space-46); } .mr-48 { margin-right: var(--space-48); } .mr-56 { margin-right: var(--space-56); } .mr-64 { margin-right: var(--space-64); } .mr-72 { margin-right: var(--space-72); } .mr-80 { margin-right: var(--space-80); } .mr-88 { margin-right: var(--space-88); } .mr-96 { margin-right: var(--space-96); } .mr-104 { margin-right: var(--space-104); } .mr-112 { margin-right: var(--space-112); } .mr-120 { margin-right: var(--space-120); } .mr-128 { margin-right: var(--space-128); } .mr-9999 { margin-right: var(--space-9999); } /* ============================================ PADDING - All Sides ============================================ */ .p-mini{ padding: 1px;} .p-0 { padding: var(--space-0); } .p-2 { padding: var(--space-2); } .p-4 { padding: var(--space-4); } .p-6 { padding: var(--space-6); } .p-8 { padding: var(--space-8); } .p-10 { padding: var(--space-10); } .p-12 { padding: var(--space-12); } .p-14 { padding: var(--space-14); } .p-main-16 { padding: var(--space-inside-main-16); } .p-18 { padding: var(--space-18); } .p-20 { padding: var(--space-20); } .p-22 { padding: var(--space-22); } .p-24 { padding: var(--space-outside-main-24); } .p-main-24 { padding: var(--space-outside-main-24); } .p-26 { padding: var(--space-26); } .p-28 { padding: var(--space-28); } .p-30 { padding: var(--space-30); } .p-32 { padding: var(--space-32); } .p-34 { padding: var(--space-34); } .p-36 { padding: var(--space-36); } .p-38 { padding: var(--space-38); } .p-40 { padding: var(--space-40); } .p-42 { padding: var(--space-42); } .p-44 { padding: var(--space-44); } .p-46 { padding: var(--space-46); } .p-48 { padding: var(--space-48); } .p-56 { padding: var(--space-56); } .p-64 { padding: var(--space-64); } .p-72 { padding: var(--space-72); } .p-80 { padding: var(--space-80); } .p-88 { padding: var(--space-88); } .p-96 { padding: var(--space-96); } .p-104 { padding: var(--space-104); } .p-112 { padding: var(--space-112); } .p-120 { padding: var(--space-120); } .p-128 { padding: var(--space-128); } .p-9999 { padding: var(--space-9999); } /* ============================================ PADDING - Vertical Only (py) ============================================ */ .py-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); } .py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); } .py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); } .py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); } .py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); } .py-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); } .py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); } .py-14 { padding-top: var(--space-14); padding-bottom: var(--space-14); } .py-main-16 { padding-top: var(--space-inside-main-16); padding-bottom: var(--space-inside-main-16); } .py-18 { padding-top: var(--space-18); padding-bottom: var(--space-18); } .py-20 { padding-top: var(--space-20); padding-bottom: var(--space-20); } .py-22 { padding-top: var(--space-22); padding-bottom: var(--space-22); } .py-24 { padding-top: var(--space-outside-main-24); padding-bottom: var(--space-outside-main-24); } .py-main-24 { padding-top: var(--space-outside-main-24); padding-bottom: var(--space-outside-main-24); } .py-26 { padding-top: var(--space-26); padding-bottom: var(--space-26); } .py-28 { padding-top: var(--space-28); padding-bottom: var(--space-28); } .py-30 { padding-top: var(--space-30); padding-bottom: var(--space-30); } .py-32 { padding-top: var(--space-32); padding-bottom: var(--space-32); } .py-34 { padding-top: var(--space-34); padding-bottom: var(--space-34); } .py-36 { padding-top: var(--space-36); padding-bottom: var(--space-36); } .py-38 { padding-top: var(--space-38); padding-bottom: var(--space-38); } .py-40 { padding-top: var(--space-40); padding-bottom: var(--space-40); } .py-42 { padding-top: var(--space-42); padding-bottom: var(--space-42); } .py-44 { padding-top: var(--space-44); padding-bottom: var(--space-44); } .py-46 { padding-top: var(--space-46); padding-bottom: var(--space-46); } .py-48 { padding-top: var(--space-48); padding-bottom: var(--space-48); } .py-56 { padding-top: var(--space-56); padding-bottom: var(--space-56); } .py-64 { padding-top: var(--space-64); padding-bottom: var(--space-64); } .py-72 { padding-top: var(--space-72); padding-bottom: var(--space-72); } .py-80 { padding-top: var(--space-80); padding-bottom: var(--space-80); } .py-88 { padding-top: var(--space-88); padding-bottom: var(--space-88); } .py-96 { padding-top: var(--space-96); padding-bottom: var(--space-96); } .py-104 { padding-top: var(--space-104); padding-bottom: var(--space-104); } .py-112 { padding-top: var(--space-112); padding-bottom: var(--space-112); } .py-120 { padding-top: var(--space-120); padding-bottom: var(--space-120); } .py-128 { padding-top: var(--space-128); padding-bottom: var(--space-128); } .py-9999 { padding-top: var(--space-9999); padding-bottom: var(--space-9999); } /* ============================================ PADDING - Horizontal Only (px) ============================================ */ .px-0 { padding-left: var(--space-0); padding-right: var(--space-0); } .px-2 { padding-left: var(--space-2); padding-right: var(--space-2); } .px-4 { padding-left: var(--space-4); padding-right: var(--space-4); } .px-6 { padding-left: var(--space-6); padding-right: var(--space-6); } .px-8 { padding-left: var(--space-8); padding-right: var(--space-8); } .px-10 { padding-left: var(--space-10); padding-right: var(--space-10); } .px-12 { padding-left: var(--space-12); padding-right: var(--space-12); } .px-14 { padding-left: var(--space-14); padding-right: var(--space-14); } .px-main-16 { padding-left: var(--space-inside-main-16); padding-right: var(--space-inside-main-16); } .px-18 { padding-left: var(--space-18); padding-right: var(--space-18); } .px-20 { padding-left: var(--space-20); padding-right: var(--space-20); } .px-22 { padding-left: var(--space-22); padding-right: var(--space-22); } .px-24 { padding-left: var(--space-outside-main-24); padding-right: var(--space-outside-main-24); } .px-main-24 { padding-left: var(--space-outside-main-24); padding-right: var(--space-outside-main-24); } .px-26 { padding-left: var(--space-26); padding-right: var(--space-26); } .px-28 { padding-left: var(--space-28); padding-right: var(--space-28); } .px-30 { padding-left: var(--space-30); padding-right: var(--space-30); } .px-32 { padding-left: var(--space-32); padding-right: var(--space-32); } .px-34 { padding-left: var(--space-34); padding-right: var(--space-34); } .px-36 { padding-left: var(--space-36); padding-right: var(--space-36); } .px-38 { padding-left: var(--space-38); padding-right: var(--space-38); } .px-40 { padding-left: var(--space-40); padding-right: var(--space-40); } .px-42 { padding-left: var(--space-42); padding-right: var(--space-42); } .px-44 { padding-left: var(--space-44); padding-right: var(--space-44); } .px-46 { padding-left: var(--space-46); padding-right: var(--space-46); } .px-48 { padding-left: var(--space-48); padding-right: var(--space-48); } .px-56 { padding-left: var(--space-56); padding-right: var(--space-56); } .px-64 { padding-left: var(--space-64); padding-right: var(--space-64); } .px-72 { padding-left: var(--space-72); padding-right: var(--space-72); } .px-80 { padding-left: var(--space-80); padding-right: var(--space-80); } .px-88 { padding-left: var(--space-88); padding-right: var(--space-88); } .px-96 { padding-left: var(--space-96); padding-right: var(--space-96); } .px-104 { padding-left: var(--space-104); padding-right: var(--space-104); } .px-112 { padding-left: var(--space-112); padding-right: var(--space-112); } .px-120 { padding-left: var(--space-120); padding-right: var(--space-120); } .px-128 { padding-left: var(--space-128); padding-right: var(--space-128); } .px-9999 { padding-left: var(--space-9999); padding-right: var(--space-9999); } /* ============================================ BORDER RADIUS ============================================ */ .rounded-0 { border-radius: var(--radius-0); } .rounded-2 { border-radius: var(--radius-2); } .rounded-4 { border-radius: var(--radius-4); } .rounded-6 { border-radius: var(--radius-6); } .rounded-8 { border-radius: var(--radius-8); } .rounded-10 { border-radius: var(--radius-10); } .rounded-12 { border-radius: var(--radius-12); } .rounded-14 { border-radius: var(--radius-14); } .rounded-main-16 { border-radius: var(--radius-main-16); } .rounded-18 { border-radius: var(--radius-18); } .rounded-20 { border-radius: var(--radius-20); } .rounded-22 { border-radius: var(--radius-22); } .rounded-24 { border-radius: var(--radius-24); } .rounded-26 { border-radius: var(--radius-26); } .rounded-28 { border-radius: var(--radius-28); } .rounded-30 { border-radius: var(--radius-30); } .rounded-32 { border-radius: var(--radius-32); } .rounded-34 { border-radius: var(--radius-34); } .rounded-36 { border-radius: var(--radius-36); } .rounded-38 { border-radius: var(--radius-38); } .rounded-40 { border-radius: var(--radius-40); } .rounded-42 { border-radius: var(--radius-42); } .rounded-44 { border-radius: var(--radius-44); } .rounded-46 { border-radius: var(--radius-46); } .rounded-48 { border-radius: var(--radius-48); } .rounded-64 { border-radius: var(--radius-64); } .rounded-128 { border-radius: var(--radius-128); } .rounded-9999 { border-radius: var(--radius-9999); } /* ============================================ RESPONSIVE SPACING UTILITIES ============================================ */ /* SM Breakpoint (640px) */ @media (min-width: 640px) { .sm\:m-0 { margin: var(--space-0); } .sm\:m-2 { margin: var(--space-2); } .sm\:m-4 { margin: var(--space-4); } .sm\:m-6 { margin: var(--space-6); } .sm\:m-8 { margin: var(--space-8); } .sm\:m-10 { margin: var(--space-10); } .sm\:m-12 { margin: var(--space-12); } .sm\:m-14 { margin: var(--space-14); } .sm\:m-main-16 { margin: var(--space-inside-main-16); } .sm\:m-18 { margin: var(--space-18); } .sm\:m-20 { margin: var(--space-20); } .sm\:m-22 { margin: var(--space-22); } .sm\:m-24 { margin: var(--space-outside-main-24); } .sm\:m-main-24 { margin: var(--space-outside-main-24); } .sm\:m-26 { margin: var(--space-26); } .sm\:m-28 { margin: var(--space-28); } .sm\:m-30 { margin: var(--space-30); } .sm\:m-32 { margin: var(--space-32); } .sm\:m-34 { margin: var(--space-34); } .sm\:m-36 { margin: var(--space-36); } .sm\:m-38 { margin: var(--space-38); } .sm\:m-40 { margin: var(--space-40); } .sm\:m-42 { margin: var(--space-42); } .sm\:m-44 { margin: var(--space-44); } .sm\:m-46 { margin: var(--space-46); } .sm\:m-48 { margin: var(--space-48); } .sm\:m-56 { margin: var(--space-56); } .sm\:m-64 { margin: var(--space-64); } .sm\:m-72 { margin: var(--space-72); } .sm\:m-80 { margin: var(--space-80); } .sm\:m-88 { margin: var(--space-88); } .sm\:m-96 { margin: var(--space-96); } .sm\:m-104 { margin: var(--space-104); } .sm\:m-112 { margin: var(--space-112); } .sm\:m-120 { margin: var(--space-120); } .sm\:m-128 { margin: var(--space-128); } .sm\:m-9999 { margin: var(--space-9999); } .sm\:my-0 { margin-top: var(--space-0); margin-bottom: var(--space-0); } .sm\:my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); } .sm\:my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); } .sm\:my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); } .sm\:my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); } .sm\:my-10 { margin-top: var(--space-10); margin-bottom: var(--space-10); } .sm\:my-12 { margin-top: var(--space-12); margin-bottom: var(--space-12); } .sm\:my-14 { margin-top: var(--space-14); margin-bottom: var(--space-14); } .sm\:my-main-16 { margin-top: var(--space-inside-main-16); margin-bottom: var(--space-inside-main-16); } .sm\:my-18 { margin-top: var(--space-18); margin-bottom: var(--space-18); } .sm\:my-20 { margin-top: var(--space-20); margin-bottom: var(--space-20); } .sm\:my-22 { margin-top: var(--space-22); margin-bottom: var(--space-22); } .sm\:my-main-24 { margin-top: var(--space-outside-main-24); margin-bottom: var(--space-outside-main-24); } .sm\:my-26 { margin-top: var(--space-26); margin-bottom: var(--space-26); } .sm\:my-28 { margin-top: var(--space-28); margin-bottom: var(--space-28); } .sm\:my-30 { margin-top: var(--space-30); margin-bottom: var(--space-30); } .sm\:my-32 { margin-top: var(--space-32); margin-bottom: var(--space-32); } .sm\:my-34 { margin-top: var(--space-34); margin-bottom: var(--space-34); } .sm\:my-36 { margin-top: var(--space-36); margin-bottom: var(--space-36); } .sm\:my-38 { margin-top: var(--space-38); margin-bottom: var(--space-38); } .sm\:my-40 { margin-top: var(--space-40); margin-bottom: var(--space-40); } .sm\:my-42 { margin-top: var(--space-42); margin-bottom: var(--space-42); } .sm\:my-44 { margin-top: var(--space-44); margin-bottom: var(--space-44); } .sm\:my-46 { margin-top: var(--space-46); margin-bottom: var(--space-46); } .sm\:my-48 { margin-top: var(--space-48); margin-bottom: var(--space-48); } .sm\:my-56 { margin-top: var(--space-56); margin-bottom: var(--space-56); } .sm\:my-64 { margin-top: var(--space-64); margin-bottom: var(--space-64); } .sm\:my-72 { margin-top: var(--space-72); margin-bottom: var(--space-72); } .sm\:my-80 { margin-top: var(--space-80); margin-bottom: var(--space-80); } .sm\:my-88 { margin-top: var(--space-88); margin-bottom: var(--space-88); } .sm\:my-96 { margin-top: var(--space-96); margin-bottom: var(--space-96); } .sm\:my-104 { margin-top: var(--space-104); margin-bottom: var(--space-104); } .sm\:my-112 { margin-top: var(--space-112); margin-bottom: var(--space-112); } .sm\:my-120 { margin-top: var(--space-120); margin-bottom: var(--space-120); } .sm\:my-128 { margin-top: var(--space-128); margin-bottom: var(--space-128); } .sm\:my-9999 { margin-top: var(--space-9999); margin-bottom: var(--space-9999); } .sm\:mx-0 { margin-left: var(--space-0); margin-right: var(--space-0); } .sm\:mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); } .sm\:mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); } .sm\:mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); } .sm\:mx-8 { margin-left: var(--space-8); margin-right: var(--space-8); } .sm\:mx-10 { margin-left: var(--space-10); margin-right: var(--space-10); } .sm\:mx-12 { margin-left: var(--space-12); margin-right: var(--space-12); } .sm\:mx-14 { margin-left: var(--space-14); margin-right: var(--space-14); } .sm\:mx-main-16 { margin-left: var(--space-inside-main-16); margin-right: var(--space-inside-main-16); } .sm\:mx-18 { margin-left: var(--space-18); margin-right: var(--space-18); } .sm\:mx-20 { margin-left: var(--space-20); margin-right: var(--space-20); } .sm\:mx-22 { margin-left: var(--space-22); margin-right: var(--space-22); } .sm\:mx-main-24 { margin-left: var(--space-outside-main-24); margin-right: var(--space-outside-main-24); } .sm\:mx-26 { margin-left: var(--space-26); margin-right: var(--space-26); } .sm\:mx-28 { margin-left: var(--space-28); margin-right: var(--space-28); } .sm\:mx-30 { margin-left: var(--space-30); margin-right: var(--space-30); } .sm\:mx-32 { margin-left: var(--space-32); margin-right: var(--space-32); } .sm\:mx-34 { margin-left: var(--space-34); margin-right: var(--space-34); } .sm\:mx-36 { margin-left: var(--space-36); margin-right: var(--space-36); } .sm\:mx-38 { margin-left: var(--space-38); margin-right: var(--space-38); } .sm\:mx-40 { margin-left: var(--space-40); margin-right: var(--space-40); } .sm\:mx-42 { margin-left: var(--space-42); margin-right: var(--space-42); } .sm\:mx-44 { margin-left: var(--space-44); margin-right: var(--space-44); } .sm\:mx-46 { margin-left: var(--space-46); margin-right: var(--space-46); } .sm\:mx-48 { margin-left: var(--space-48); margin-right: var(--space-48); } .sm\:mx-56 { margin-left: var(--space-56); margin-right: var(--space-56); } .sm\:mx-64 { margin-left: var(--space-64); margin-right: var(--space-64); } .sm\:mx-72 { margin-left: var(--space-72); margin-right: var(--space-72); } .sm\:mx-80 { margin-left: var(--space-80); margin-right: var(--space-80); } .sm\:mx-88 { margin-left: var(--space-88); margin-right: var(--space-88); } .sm\:mx-96 { margin-left: var(--space-96); margin-right: var(--space-96); } .sm\:mx-104 { margin-left: var(--space-104); margin-right: var(--space-104); } .sm\:mx-112 { margin-left: var(--space-112); margin-right: var(--space-112); } .sm\:mx-120 { margin-left: var(--space-120); margin-right: var(--space-120); } .sm\:mx-128 { margin-left: var(--space-128); margin-right: var(--space-128); } .sm\:mx-9999 { margin-left: var(--space-9999); margin-right: var(--space-9999); } .sm\:p-0 { padding: var(--space-0); } .sm\:p-2 { padding: var(--space-2); } .sm\:p-4 { padding: var(--space-4); } .sm\:p-6 { padding: var(--space-6); } .sm\:p-8 { padding: var(--space-8); } .sm\:p-10 { padding: var(--space-10); } .sm\:p-12 { padding: var(--space-12); } .sm\:p-14 { padding: var(--space-14); } .sm\:p-main-16 { padding: var(--space-inside-main-16); } .sm\:p-18 { padding: var(--space-18); } .sm\:p-20 { padding: var(--space-20); } .sm\:p-22 { padding: var(--space-22); } .sm\:p-main-24 { padding: var(--space-outside-main-24); } .sm\:p-26 { padding: var(--space-26); } .sm\:p-28 { padding: var(--space-28); } .sm\:p-30 { padding: var(--space-30); } .sm\:p-32 { padding: var(--space-32); } .sm\:p-34 { padding: var(--space-34); } .sm\:p-36 { padding: var(--space-36); } .sm\:p-38 { padding: var(--space-38); } .sm\:p-40 { padding: var(--space-40); } .sm\:p-42 { padding: var(--space-42); } .sm\:p-44 { padding: var(--space-44); } .sm\:p-46 { padding: var(--space-46); } .sm\:p-48 { padding: var(--space-48); } .sm\:p-56 { padding: var(--space-56); } .sm\:p-64 { padding: var(--space-64); } .sm\:p-72 { padding: var(--space-72); } .sm\:p-80 { padding: var(--space-80); } .sm\:p-88 { padding: var(--space-88); } .sm\:p-96 { padding: var(--space-96); } .sm\:p-104 { padding: var(--space-104); } .sm\:p-112 { padding: var(--space-112); } .sm\:p-120 { padding: var(--space-120); } .sm\:p-128 { padding: var(--space-128); } .sm\:p-9999 { padding: var(--space-9999); } .sm\:py-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); } .sm\:py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); } .sm\:py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); } .sm\:py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); } .sm\:py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); } .sm\:py-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); } .sm\:py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); } .sm\:py-14 { padding-top: var(--space-14); padding-bottom: var(--space-14); } .sm\:py-main-16 { padding-top: var(--space-inside-main-16); padding-bottom: var(--space-inside-main-16); } .sm\:py-18 { padding-top: var(--space-18); padding-bottom: var(--space-18); } .sm\:py-20 { padding-top: var(--space-20); padding-bottom: var(--space-20); } .sm\:py-22 { padding-top: var(--space-22); padding-bottom: var(--space-22); } .sm\:py-main-24 { padding-top: var(--space-outside-main-24); padding-bottom: var(--space-outside-main-24); } .sm\:py-26 { padding-top: var(--space-26); padding-bottom: var(--space-26); } .sm\:py-28 { padding-top: var(--space-28); padding-bottom: var(--space-28); } .sm\:py-30 { padding-top: var(--space-30); padding-bottom: var(--space-30); } .sm\:py-32 { padding-top: var(--space-32); padding-bottom: var(--space-32); } .sm\:py-34 { padding-top: var(--space-34); padding-bottom: var(--space-34); } .sm\:py-36 { padding-top: var(--space-36); padding-bottom: var(--space-36); } .sm\:py-38 { padding-top: var(--space-38); padding-bottom: var(--space-38); } .sm\:py-40 { padding-top: var(--space-40); padding-bottom: var(--space-40); } .sm\:py-42 { padding-top: var(--space-42); padding-bottom: var(--space-42); } .sm\:py-44 { padding-top: var(--space-44); padding-bottom: var(--space-44); } .sm\:py-46 { padding-top: var(--space-46); padding-bottom: var(--space-46); } .sm\:py-48 { padding-top: var(--space-48); padding-bottom: var(--space-48); } .sm\:py-56 { padding-top: var(--space-56); padding-bottom: var(--space-56); } .sm\:py-64 { padding-top: var(--space-64); padding-bottom: var(--space-64); } .sm\:py-72 { padding-top: var(--space-72); padding-bottom: var(--space-72); } .sm\:py-80 { padding-top: var(--space-80); padding-bottom: var(--space-80); } .sm\:py-88 { padding-top: var(--space-88); padding-bottom: var(--space-88); } .sm\:py-96 { padding-top: var(--space-96); padding-bottom: var(--space-96); } .sm\:py-104 { padding-top: var(--space-104); padding-bottom: var(--space-104); } .sm\:py-112 { padding-top: var(--space-112); padding-bottom: var(--space-112); } .sm\:py-120 { padding-top: var(--space-120); padding-bottom: var(--space-120); } .sm\:py-128 { padding-top: var(--space-128); padding-bottom: var(--space-128); } .sm\:py-9999 { padding-top: var(--space-9999); padding-bottom: var(--space-9999); } .sm\:px-0 { padding-left: var(--space-0); padding-right: var(--space-0); } .sm\:px-2 { padding-left: var(--space-2); padding-right: var(--space-2); } .sm\:px-4 { padding-left: var(--space-4); padding-right: var(--space-4); } .sm\:px-6 { padding-left: var(--space-6); padding-right: var(--space-6); } .sm\:px-8 { padding-left: var(--space-8); padding-right: var(--space-8); } .sm\:px-10 { padding-left: var(--space-10); padding-right: var(--space-10); } .sm\:px-12 { padding-left: var(--space-12); padding-right: var(--space-12); } .sm\:px-14 { padding-left: var(--space-14); padding-right: var(--space-14); } .sm\:px-main-16 { padding-left: var(--space-inside-main-16); padding-right: var(--space-inside-main-16); } .sm\:px-18 { padding-left: var(--space-18); padding-right: var(--space-18); } .sm\:px-20 { padding-left: var(--space-20); padding-right: var(--space-20); } .sm\:px-22 { padding-left: var(--space-22); padding-right: var(--space-22); } .sm\:px-main-24 { padding-left: var(--space-outside-main-24); padding-right: var(--space-outside-main-24); } .sm\:px-26 { padding-left: var(--space-26); padding-right: var(--space-26); } .sm\:px-28 { padding-left: var(--space-28); padding-right: var(--space-28); } .sm\:px-30 { padding-left: var(--space-30); padding-right: var(--space-30); } .sm\:px-32 { padding-left: var(--space-32); padding-right: var(--space-32); } .sm\:px-34 { padding-left: var(--space-34); padding-right: var(--space-34); } .sm\:px-36 { padding-left: var(--space-36); padding-right: var(--space-36); } .sm\:px-38 { padding-left: var(--space-38); padding-right: var(--space-38); } .sm\:px-40 { padding-left: var(--space-40); padding-right: var(--space-40); } .sm\:px-42 { padding-left: var(--space-42); padding-right: var(--space-42); } .sm\:px-44 { padding-left: var(--space-44); padding-right: var(--space-44); } .sm\:px-46 { padding-left: var(--space-46); padding-right: var(--space-46); } .sm\:px-48 { padding-left: var(--space-48); padding-right: var(--space-48); } .sm\:px-56 { padding-left: var(--space-56); padding-right: var(--space-56); } .sm\:px-64 { padding-left: var(--space-64); padding-right: var(--space-64); } .sm\:px-72 { padding-left: var(--space-72); padding-right: var(--space-72); } .sm\:px-80 { padding-left: var(--space-80); padding-right: var(--space-80); } .sm\:px-88 { padding-left: var(--space-88); padding-right: var(--space-88); } .sm\:px-96 { padding-left: var(--space-96); padding-right: var(--space-96); } .sm\:px-104 { padding-left: var(--space-104); padding-right: var(--space-104); } .sm\:px-112 { padding-left: var(--space-112); padding-right: var(--space-112); } .sm\:px-120 { padding-left: var(--space-120); padding-right: var(--space-120); } .sm\:px-128 { padding-left: var(--space-128); padding-right: var(--space-128); } .sm\:px-9999 { padding-left: var(--space-9999); padding-right: var(--space-9999); } } /* MD Breakpoint (768px) */ @media (min-width: 768px) { .md\:m-0 { margin: var(--space-0); } .md\:m-2 { margin: var(--space-2); } .md\:m-4 { margin: var(--space-4); } .md\:m-6 { margin: var(--space-6); } .md\:m-8 { margin: var(--space-8); } .md\:m-10 { margin: var(--space-10); } .md\:m-12 { margin: var(--space-12); } .md\:m-14 { margin: var(--space-14); } .md\:m-main-16 { margin: var(--space-inside-main-16); } .md\:m-18 { margin: var(--space-18); } .md\:m-20 { margin: var(--space-20); } .md\:m-22 { margin: var(--space-22); } .md\:m-24 { margin: var(--space-outside-main-24); } .md\:m-main-24 { margin: var(--space-outside-main-24); } .md\:m-26 { margin: var(--space-26); } .md\:m-28 { margin: var(--space-28); } .md\:m-30 { margin: var(--space-30); } .md\:m-32 { margin: var(--space-32); } .md\:m-34 { margin: var(--space-34); } .md\:m-36 { margin: var(--space-36); } .md\:m-38 { margin: var(--space-38); } .md\:m-40 { margin: var(--space-40); } .md\:m-42 { margin: var(--space-42); } .md\:m-44 { margin: var(--space-44); } .md\:m-46 { margin: var(--space-46); } .md\:m-48 { margin: var(--space-48); } .md\:m-56 { margin: var(--space-56); } .md\:m-64 { margin: var(--space-64); } .md\:m-72 { margin: var(--space-72); } .md\:m-80 { margin: var(--space-80); } .md\:m-88 { margin: var(--space-88); } .md\:m-96 { margin: var(--space-96); } .md\:m-104 { margin: var(--space-104); } .md\:m-112 { margin: var(--space-112); } .md\:m-120 { margin: var(--space-120); } .md\:m-128 { margin: var(--space-128); } .md\:m-9999 { margin: var(--space-9999); } .md\:my-0 { margin-top: var(--space-0); margin-bottom: var(--space-0); } .md\:my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); } .md\:my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); } .md\:my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); } .md\:my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); } .md\:my-10 { margin-top: var(--space-10); margin-bottom: var(--space-10); } .md\:my-12 { margin-top: var(--space-12); margin-bottom: var(--space-12); } .md\:my-14 { margin-top: var(--space-14); margin-bottom: var(--space-14); } .md\:my-main-16 { margin-top: var(--space-inside-main-16); margin-bottom: var(--space-inside-main-16); } .md\:my-18 { margin-top: var(--space-18); margin-bottom: var(--space-18); } .md\:my-20 { margin-top: var(--space-20); margin-bottom: var(--space-20); } .md\:my-22 { margin-top: var(--space-22); margin-bottom: var(--space-22); } .md\:my-main-24 { margin-top: var(--space-outside-main-24); margin-bottom: var(--space-outside-main-24); } .md\:my-26 { margin-top: var(--space-26); margin-bottom: var(--space-26); } .md\:my-28 { margin-top: var(--space-28); margin-bottom: var(--space-28); } .md\:my-30 { margin-top: var(--space-30); margin-bottom: var(--space-30); } .md\:my-32 { margin-top: var(--space-32); margin-bottom: var(--space-32); } .md\:my-34 { margin-top: var(--space-34); margin-bottom: var(--space-34); } .md\:my-36 { margin-top: var(--space-36); margin-bottom: var(--space-36); } .md\:my-38 { margin-top: var(--space-38); margin-bottom: var(--space-38); } .md\:my-40 { margin-top: var(--space-40); margin-bottom: var(--space-40); } .md\:my-42 { margin-top: var(--space-42); margin-bottom: var(--space-42); } .md\:my-44 { margin-top: var(--space-44); margin-bottom: var(--space-44); } .md\:my-46 { margin-top: var(--space-46); margin-bottom: var(--space-46); } .md\:my-48 { margin-top: var(--space-48); margin-bottom: var(--space-48); } .md\:my-56 { margin-top: var(--space-56); margin-bottom: var(--space-56); } .md\:my-64 { margin-top: var(--space-64); margin-bottom: var(--space-64); } .md\:my-72 { margin-top: var(--space-72); margin-bottom: var(--space-72); } .md\:my-80 { margin-top: var(--space-80); margin-bottom: var(--space-80); } .md\:my-88 { margin-top: var(--space-88); margin-bottom: var(--space-88); } .md\:my-96 { margin-top: var(--space-96); margin-bottom: var(--space-96); } .md\:my-104 { margin-top: var(--space-104); margin-bottom: var(--space-104); } .md\:my-112 { margin-top: var(--space-112); margin-bottom: var(--space-112); } .md\:my-120 { margin-top: var(--space-120); margin-bottom: var(--space-120); } .md\:my-128 { margin-top: var(--space-128); margin-bottom: var(--space-128); } .md\:my-9999 { margin-top: var(--space-9999); margin-bottom: var(--space-9999); } .md\:mx-0 { margin-left: var(--space-0); margin-right: var(--space-0); } .md\:mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); } .md\:mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); } .md\:mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); } .md\:mx-8 { margin-left: var(--space-8); margin-right: var(--space-8); } .md\:mx-10 { margin-left: var(--space-10); margin-right: var(--space-10); } .md\:mx-12 { margin-left: var(--space-12); margin-right: var(--space-12); } .md\:mx-14 { margin-left: var(--space-14); margin-right: var(--space-14); } .md\:mx-main-16 { margin-left: var(--space-inside-main-16); margin-right: var(--space-inside-main-16); } .md\:mx-18 { margin-left: var(--space-18); margin-right: var(--space-18); } .md\:mx-20 { margin-left: var(--space-20); margin-right: var(--space-20); } .md\:mx-22 { margin-left: var(--space-22); margin-right: var(--space-22); } .md\:mx-main-24 { margin-left: var(--space-outside-main-24); margin-right: var(--space-outside-main-24); } .md\:mx-26 { margin-left: var(--space-26); margin-right: var(--space-26); } .md\:mx-28 { margin-left: var(--space-28); margin-right: var(--space-28); } .md\:mx-30 { margin-left: var(--space-30); margin-right: var(--space-30); } .md\:mx-32 { margin-left: var(--space-32); margin-right: var(--space-32); } .md\:mx-34 { margin-left: var(--space-34); margin-right: var(--space-34); } .md\:mx-36 { margin-left: var(--space-36); margin-right: var(--space-36); } .md\:mx-38 { margin-left: var(--space-38); margin-right: var(--space-38); } .md\:mx-40 { margin-left: var(--space-40); margin-right: var(--space-40); } .md\:mx-42 { margin-left: var(--space-42); margin-right: var(--space-42); } .md\:mx-44 { margin-left: var(--space-44); margin-right: var(--space-44); } .md\:mx-46 { margin-left: var(--space-46); margin-right: var(--space-46); } .md\:mx-48 { margin-left: var(--space-48); margin-right: var(--space-48); } .md\:mx-56 { margin-left: var(--space-56); margin-right: var(--space-56); } .md\:mx-64 { margin-left: var(--space-64); margin-right: var(--space-64); } .md\:mx-72 { margin-left: var(--space-72); margin-right: var(--space-72); } .md\:mx-80 { margin-left: var(--space-80); margin-right: var(--space-80); } .md\:mx-88 { margin-left: var(--space-88); margin-right: var(--space-88); } .md\:mx-96 { margin-left: var(--space-96); margin-right: var(--space-96); } .md\:mx-104 { margin-left: var(--space-104); margin-right: var(--space-104); } .md\:mx-112 { margin-left: var(--space-112); margin-right: var(--space-112); } .md\:mx-120 { margin-left: var(--space-120); margin-right: var(--space-120); } .md\:mx-128 { margin-left: var(--space-128); margin-right: var(--space-128); } .md\:mx-9999 { margin-left: var(--space-9999); margin-right: var(--space-9999); } /* MD - Individual Direction Margins */ .md\:mt-0 { margin-top: var(--space-0); } .md\:mt-2 { margin-top: var(--space-2); } .md\:mt-4 { margin-top: var(--space-4); } .md\:mt-6 { margin-top: var(--space-6); } .md\:mt-8 { margin-top: var(--space-8); } .md\:mt-10 { margin-top: var(--space-10); } .md\:mt-12 { margin-top: var(--space-12); } .md\:mt-14 { margin-top: var(--space-14); } .md\:mt-main-16 { margin-top: var(--space-inside-main-16); } .md\:mt-18 { margin-top: var(--space-18); } .md\:mt-20 { margin-top: var(--space-20); } .md\:mt-22 { margin-top: var(--space-22); } .md\:mt-24 { margin-top: var(--space-outside-main-24); } .md\:mt-main-24 { margin-top: var(--space-outside-main-24); } .md\:mt-26 { margin-top: var(--space-26); } .md\:mt-28 { margin-top: var(--space-28); } .md\:mt-30 { margin-top: var(--space-30); } .md\:mt-32 { margin-top: var(--space-32); } .md\:mt-34 { margin-top: var(--space-34); } .md\:mt-36 { margin-top: var(--space-36); } .md\:mt-38 { margin-top: var(--space-38); } .md\:mt-40 { margin-top: var(--space-40); } .md\:mt-42 { margin-top: var(--space-42); } .md\:mt-44 { margin-top: var(--space-44); } .md\:mt-46 { margin-top: var(--space-46); } .md\:mt-48 { margin-top: var(--space-48); } .md\:mt-56 { margin-top: var(--space-56); } .md\:mt-64 { margin-top: var(--space-64); } .md\:mt-72 { margin-top: var(--space-72); } .md\:mt-80 { margin-top: var(--space-80); } .md\:mt-88 { margin-top: var(--space-88); } .md\:mt-96 { margin-top: var(--space-96); } .md\:mt-104 { margin-top: var(--space-104); } .md\:mt-112 { margin-top: var(--space-112); } .md\:mt-120 { margin-top: var(--space-120); } .md\:mt-128 { margin-top: var(--space-128); } .md\:mt-9999 { margin-top: var(--space-9999); } .md\:mb-0 { margin-bottom: var(--space-0); } .md\:mb-2 { margin-bottom: var(--space-2); } .md\:mb-4 { margin-bottom: var(--space-4); } .md\:mb-6 { margin-bottom: var(--space-6); } .md\:mb-8 { margin-bottom: var(--space-8); } .md\:mb-10 { margin-bottom: var(--space-10); } .md\:mb-12 { margin-bottom: var(--space-12); } .md\:mb-14 { margin-bottom: var(--space-14); } .md\:mb-16 { margin-bottom: var(--space-inside-main-16); } .md\:mb-main-16 { margin-bottom: var(--space-inside-main-16); } .md\:mb-18 { margin-bottom: var(--space-18); } .md\:mb-20 { margin-bottom: var(--space-20); } .md\:mb-22 { margin-bottom: var(--space-22); } .md\:mb-main-24 { margin-bottom: var(--space-outside-main-24); } .md\:mb-26 { margin-bottom: var(--space-26); } .md\:mb-28 { margin-bottom: var(--space-28); } .md\:mb-30 { margin-bottom: var(--space-30); } .md\:mb-32 { margin-bottom: var(--space-32); } .md\:mb-34 { margin-bottom: var(--space-34); } .md\:mb-36 { margin-bottom: var(--space-36); } .md\:mb-38 { margin-bottom: var(--space-38); } .md\:mb-40 { margin-bottom: var(--space-40); } .md\:mb-42 { margin-bottom: var(--space-42); } .md\:mb-44 { margin-bottom: var(--space-44); } .md\:mb-46 { margin-bottom: var(--space-46); } .md\:mb-48 { margin-bottom: var(--space-48); } .md\:mb-56 { margin-bottom: var(--space-56); } .md\:mb-64 { margin-bottom: var(--space-64); } .md\:mb-72 { margin-bottom: var(--space-72); } .md\:mb-80 { margin-bottom: var(--space-80); } .md\:mb-88 { margin-bottom: var(--space-88); } .md\:mb-96 { margin-bottom: var(--space-96); } .md\:mb-104 { margin-bottom: var(--space-104); } .md\:mb-112 { margin-bottom: var(--space-112); } .md\:mb-120 { margin-bottom: var(--space-120); } .md\:mb-128 { margin-bottom: var(--space-128); } .md\:mb-9999 { margin-bottom: var(--space-9999); } .md\:ml-0 { margin-left: var(--space-0); } .md\:ml-2 { margin-left: var(--space-2); } .md\:ml-4 { margin-left: var(--space-4); } .md\:ml-6 { margin-left: var(--space-6); } .md\:ml-8 { margin-left: var(--space-8); } .md\:ml-10 { margin-left: var(--space-10); } .md\:ml-12 { margin-left: var(--space-12); } .md\:ml-14 { margin-left: var(--space-14); } .md\:ml-main-16 { margin-left: var(--space-inside-main-16); } .md\:ml-18 { margin-left: var(--space-18); } .md\:ml-20 { margin-left: var(--space-20); } .md\:ml-22 { margin-left: var(--space-22); } .md\:ml-main-24 { margin-left: var(--space-outside-main-24); } .md\:ml-26 { margin-left: var(--space-26); } .md\:ml-28 { margin-left: var(--space-28); } .md\:ml-30 { margin-left: var(--space-30); } .md\:ml-32 { margin-left: var(--space-32); } .md\:ml-34 { margin-left: var(--space-34); } .md\:ml-36 { margin-left: var(--space-36); } .md\:ml-38 { margin-left: var(--space-38); } .md\:ml-40 { margin-left: var(--space-40); } .md\:ml-42 { margin-left: var(--space-42); } .md\:ml-44 { margin-left: var(--space-44); } .md\:ml-46 { margin-left: var(--space-46); } .md\:ml-48 { margin-left: var(--space-48); } .md\:ml-56 { margin-left: var(--space-56); } .md\:ml-64 { margin-left: var(--space-64); } .md\:ml-72 { margin-left: var(--space-72); } .md\:ml-80 { margin-left: var(--space-80); } .md\:ml-88 { margin-left: var(--space-88); } .md\:ml-96 { margin-left: var(--space-96); } .md\:ml-104 { margin-left: var(--space-104); } .md\:ml-112 { margin-left: var(--space-112); } .md\:ml-120 { margin-left: var(--space-120); } .md\:ml-128 { margin-left: var(--space-128); } .md\:ml-9999 { margin-left: var(--space-9999); } .md\:mr-0 { margin-right: var(--space-0); } .md\:mr-2 { margin-right: var(--space-2); } .md\:mr-4 { margin-right: var(--space-4); } .md\:mr-6 { margin-right: var(--space-6); } .md\:mr-8 { margin-right: var(--space-8); } .md\:mr-10 { margin-right: var(--space-10); } .md\:mr-12 { margin-right: var(--space-12); } .md\:mr-14 { margin-right: var(--space-14); } .md\:mr-main-16 { margin-right: var(--space-inside-main-16); } .md\:mr-18 { margin-right: var(--space-18); } .md\:mr-20 { margin-right: var(--space-20); } .md\:mr-22 { margin-right: var(--space-22); } .md\:mr-main-24 { margin-right: var(--space-outside-main-24); } .md\:mr-26 { margin-right: var(--space-26); } .md\:mr-28 { margin-right: var(--space-28); } .md\:mr-30 { margin-right: var(--space-30); } .md\:mr-32 { margin-right: var(--space-32); } .md\:mr-34 { margin-right: var(--space-34); } .md\:mr-36 { margin-right: var(--space-36); } .md\:mr-38 { margin-right: var(--space-38); } .md\:mr-40 { margin-right: var(--space-40); } .md\:mr-42 { margin-right: var(--space-42); } .md\:mr-44 { margin-right: var(--space-44); } .md\:mr-46 { margin-right: var(--space-46); } .md\:mr-48 { margin-right: var(--space-48); } .md\:mr-56 { margin-right: var(--space-56); } .md\:mr-64 { margin-right: var(--space-64); } .md\:mr-72 { margin-right: var(--space-72); } .md\:mr-80 { margin-right: var(--space-80); } .md\:mr-88 { margin-right: var(--space-88); } .md\:mr-96 { margin-right: var(--space-96); } .md\:mr-104 { margin-right: var(--space-104); } .md\:mr-112 { margin-right: var(--space-112); } .md\:mr-120 { margin-right: var(--space-120); } .md\:mr-128 { margin-right: var(--space-128); } .md\:mr-9999 { margin-right: var(--space-9999); } .md\:p-0 { padding: var(--space-0); } .md\:p-2 { padding: var(--space-2); } .md\:p-4 { padding: var(--space-4); } .md\:p-6 { padding: var(--space-6); } .md\:p-8 { padding: var(--space-8); } .md\:p-10 { padding: var(--space-10); } .md\:p-12 { padding: var(--space-12); } .md\:p-14 { padding: var(--space-14); } .md\:p-main-16 { padding: var(--space-inside-main-16); } .md\:p-18 { padding: var(--space-18); } .md\:p-20 { padding: var(--space-20); } .md\:p-22 { padding: var(--space-22); } .md\:p-main-24 { padding: var(--space-outside-main-24); } .md\:p-26 { padding: var(--space-26); } .md\:p-28 { padding: var(--space-28); } .md\:p-30 { padding: var(--space-30); } .md\:p-32 { padding: var(--space-32); } .md\:p-34 { padding: var(--space-34); } .md\:p-36 { padding: var(--space-36); } .md\:p-38 { padding: var(--space-38); } .md\:p-40 { padding: var(--space-40); } .md\:p-42 { padding: var(--space-42); } .md\:p-44 { padding: var(--space-44); } .md\:p-46 { padding: var(--space-46); } .md\:p-48 { padding: var(--space-48); } .md\:p-56 { padding: var(--space-56); } .md\:p-64 { padding: var(--space-64); } .md\:p-72 { padding: var(--space-72); } .md\:p-80 { padding: var(--space-80); } .md\:p-88 { padding: var(--space-88); } .md\:p-96 { padding: var(--space-96); } .md\:p-104 { padding: var(--space-104); } .md\:p-112 { padding: var(--space-112); } .md\:p-120 { padding: var(--space-120); } .md\:p-128 { padding: var(--space-128); } .md\:p-9999 { padding: var(--space-9999); } .md\:py-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); } .md\:py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); } .md\:py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); } .md\:py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); } .md\:py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); } .md\:py-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); } .md\:py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); } .md\:py-14 { padding-top: var(--space-14); padding-bottom: var(--space-14); } .md\:py-main-16 { padding-top: var(--space-inside-main-16); padding-bottom: var(--space-inside-main-16); } .md\:py-18 { padding-top: var(--space-18); padding-bottom: var(--space-18); } .md\:py-20 { padding-top: var(--space-20); padding-bottom: var(--space-20); } .md\:py-22 { padding-top: var(--space-22); padding-bottom: var(--space-22); } .md\:py-main-24 { padding-top: var(--space-outside-main-24); padding-bottom: var(--space-outside-main-24); } .md\:py-26 { padding-top: var(--space-26); padding-bottom: var(--space-26); } .md\:py-28 { padding-top: var(--space-28); padding-bottom: var(--space-28); } .md\:py-30 { padding-top: var(--space-30); padding-bottom: var(--space-30); } .md\:py-32 { padding-top: var(--space-32); padding-bottom: var(--space-32); } .md\:py-34 { padding-top: var(--space-34); padding-bottom: var(--space-34); } .md\:py-36 { padding-top: var(--space-36); padding-bottom: var(--space-36); } .md\:py-38 { padding-top: var(--space-38); padding-bottom: var(--space-38); } .md\:py-40 { padding-top: var(--space-40); padding-bottom: var(--space-40); } .md\:py-42 { padding-top: var(--space-42); padding-bottom: var(--space-42); } .md\:py-44 { padding-top: var(--space-44); padding-bottom: var(--space-44); } .md\:py-46 { padding-top: var(--space-46); padding-bottom: var(--space-46); } .md\:py-48 { padding-top: var(--space-48); padding-bottom: var(--space-48); } .md\:py-56 { padding-top: var(--space-56); padding-bottom: var(--space-56); } .md\:py-64 { padding-top: var(--space-64); padding-bottom: var(--space-64); } .md\:py-72 { padding-top: var(--space-72); padding-bottom: var(--space-72); } .md\:py-80 { padding-top: var(--space-80); padding-bottom: var(--space-80); } .md\:py-88 { padding-top: var(--space-88); padding-bottom: var(--space-88); } .md\:py-96 { padding-top: var(--space-96); padding-bottom: var(--space-96); } .md\:py-104 { padding-top: var(--space-104); padding-bottom: var(--space-104); } .md\:py-112 { padding-top: var(--space-112); padding-bottom: var(--space-112); } .md\:py-120 { padding-top: var(--space-120); padding-bottom: var(--space-120); } .md\:py-128 { padding-top: var(--space-128); padding-bottom: var(--space-128); } .md\:py-9999 { padding-top: var(--space-9999); padding-bottom: var(--space-9999); } .md\:px-0 { padding-left: var(--space-0); padding-right: var(--space-0); } .md\:px-2 { padding-left: var(--space-2); padding-right: var(--space-2); } .md\:px-4 { padding-left: var(--space-4); padding-right: var(--space-4); } .md\:px-6 { padding-left: var(--space-6); padding-right: var(--space-6); } .md\:px-8 { padding-left: var(--space-8); padding-right: var(--space-8); } .md\:px-10 { padding-left: var(--space-10); padding-right: var(--space-10); } .md\:px-12 { padding-left: var(--space-12); padding-right: var(--space-12); } .md\:px-14 { padding-left: var(--space-14); padding-right: var(--space-14); } .md\:px-main-16 { padding-left: var(--space-inside-main-16); padding-right: var(--space-inside-main-16); } .md\:px-18 { padding-left: var(--space-18); padding-right: var(--space-18); } .md\:px-20 { padding-left: var(--space-20); padding-right: var(--space-20); } .md\:px-22 { padding-left: var(--space-22); padding-right: var(--space-22); } .md\:px-main-24 { padding-left: var(--space-outside-main-24); padding-right: var(--space-outside-main-24); } .md\:px-26 { padding-left: var(--space-26); padding-right: var(--space-26); } .md\:px-28 { padding-left: var(--space-28); padding-right: var(--space-28); } .md\:px-30 { padding-left: var(--space-30); padding-right: var(--space-30); } .md\:px-32 { padding-left: var(--space-32); padding-right: var(--space-32); } .md\:px-34 { padding-left: var(--space-34); padding-right: var(--space-34); } .md\:px-36 { padding-left: var(--space-36); padding-right: var(--space-36); } .md\:px-38 { padding-left: var(--space-38); padding-right: var(--space-38); } .md\:px-40 { padding-left: var(--space-40); padding-right: var(--space-40); } .md\:px-42 { padding-left: var(--space-42); padding-right: var(--space-42); } .md\:px-44 { padding-left: var(--space-44); padding-right: var(--space-44); } .md\:px-46 { padding-left: var(--space-46); padding-right: var(--space-46); } .md\:px-48 { padding-left: var(--space-48); padding-right: var(--space-48); } .md\:px-56 { padding-left: var(--space-56); padding-right: var(--space-56); } .md\:px-64 { padding-left: var(--space-64); padding-right: var(--space-64); } .md\:px-72 { padding-left: var(--space-72); padding-right: var(--space-72); } .md\:px-80 { padding-left: var(--space-80); padding-right: var(--space-80); } .md\:px-88 { padding-left: var(--space-88); padding-right: var(--space-88); } .md\:px-96 { padding-left: var(--space-96); padding-right: var(--space-96); } .md\:px-104 { padding-left: var(--space-104); padding-right: var(--space-104); } .md\:px-112 { padding-left: var(--space-112); padding-right: var(--space-112); } .md\:px-120 { padding-left: var(--space-120); padding-right: var(--space-120); } .md\:px-128 { padding-left: var(--space-128); padding-right: var(--space-128); } .md\:px-9999 { padding-left: var(--space-9999); padding-right: var(--space-9999); } } /* LG Breakpoint (1024px) */ @media (min-width: 1024px) { .lg\:m-0 { margin: var(--space-0); } .lg\:m-2 { margin: var(--space-2); } .lg\:m-4 { margin: var(--space-4); } .lg\:m-6 { margin: var(--space-6); } .lg\:m-8 { margin: var(--space-8); } .lg\:m-10 { margin: var(--space-10); } .lg\:m-12 { margin: var(--space-12); } .lg\:m-14 { margin: var(--space-14); } .lg\:m-main-16 { margin: var(--space-inside-main-16); } .lg\:m-18 { margin: var(--space-18); } .lg\:m-20 { margin: var(--space-20); } .lg\:m-22 { margin: var(--space-22); } .lg\:m-24 { margin: var(--space-outside-main-24); } .lg\:m-main-24 { margin: var(--space-outside-main-24); } .lg\:m-26 { margin: var(--space-26); } .lg\:m-28 { margin: var(--space-28); } .lg\:m-30 { margin: var(--space-30); } .lg\:m-32 { margin: var(--space-32); } .lg\:m-34 { margin: var(--space-34); } .lg\:m-36 { margin: var(--space-36); } .lg\:m-38 { margin: var(--space-38); } .lg\:m-40 { margin: var(--space-40); } .lg\:m-42 { margin: var(--space-42); } .lg\:m-44 { margin: var(--space-44); } .lg\:m-46 { margin: var(--space-46); } .lg\:m-48 { margin: var(--space-48); } .lg\:m-56 { margin: var(--space-56); } .lg\:m-64 { margin: var(--space-64); } .lg\:m-72 { margin: var(--space-72); } .lg\:m-80 { margin: var(--space-80); } .lg\:m-88 { margin: var(--space-88); } .lg\:m-96 { margin: var(--space-96); } .lg\:m-104 { margin: var(--space-104); } .lg\:m-112 { margin: var(--space-112); } .lg\:m-120 { margin: var(--space-120); } .lg\:m-128 { margin: var(--space-128); } .lg\:m-9999 { margin: var(--space-9999); } .lg\:my-0 { margin-top: var(--space-0); margin-bottom: var(--space-0); } .lg\:my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); } .lg\:my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); } .lg\:my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); } .lg\:my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); } .lg\:my-10 { margin-top: var(--space-10); margin-bottom: var(--space-10); } .lg\:my-12 { margin-top: var(--space-12); margin-bottom: var(--space-12); } .lg\:my-14 { margin-top: var(--space-14); margin-bottom: var(--space-14); } .lg\:my-main-16 { margin-top: var(--space-inside-main-16); margin-bottom: var(--space-inside-main-16); } .lg\:my-18 { margin-top: var(--space-18); margin-bottom: var(--space-18); } .lg\:my-20 { margin-top: var(--space-20); margin-bottom: var(--space-20); } .lg\:my-22 { margin-top: var(--space-22); margin-bottom: var(--space-22); } .lg\:my-main-24 { margin-top: var(--space-outside-main-24); margin-bottom: var(--space-outside-main-24); } .lg\:my-26 { margin-top: var(--space-26); margin-bottom: var(--space-26); } .lg\:my-28 { margin-top: var(--space-28); margin-bottom: var(--space-28); } .lg\:my-30 { margin-top: var(--space-30); margin-bottom: var(--space-30); } .lg\:my-32 { margin-top: var(--space-32); margin-bottom: var(--space-32); } .lg\:my-34 { margin-top: var(--space-34); margin-bottom: var(--space-34); } .lg\:my-36 { margin-top: var(--space-36); margin-bottom: var(--space-36); } .lg\:my-38 { margin-top: var(--space-38); margin-bottom: var(--space-38); } .lg\:my-40 { margin-top: var(--space-40); margin-bottom: var(--space-40); } .lg\:my-42 { margin-top: var(--space-42); margin-bottom: var(--space-42); } .lg\:my-44 { margin-top: var(--space-44); margin-bottom: var(--space-44); } .lg\:my-46 { margin-top: var(--space-46); margin-bottom: var(--space-46); } .lg\:my-48 { margin-top: var(--space-48); margin-bottom: var(--space-48); } .lg\:my-56 { margin-top: var(--space-56); margin-bottom: var(--space-56); } .lg\:my-64 { margin-top: var(--space-64); margin-bottom: var(--space-64); } .lg\:my-72 { margin-top: var(--space-72); margin-bottom: var(--space-72); } .lg\:my-80 { margin-top: var(--space-80); margin-bottom: var(--space-80); } .lg\:my-88 { margin-top: var(--space-88); margin-bottom: var(--space-88); } .lg\:my-96 { margin-top: var(--space-96); margin-bottom: var(--space-96); } .lg\:my-104 { margin-top: var(--space-104); margin-bottom: var(--space-104); } .lg\:my-112 { margin-top: var(--space-112); margin-bottom: var(--space-112); } .lg\:my-120 { margin-top: var(--space-120); margin-bottom: var(--space-120); } .lg\:my-128 { margin-top: var(--space-128); margin-bottom: var(--space-128); } .lg\:my-9999 { margin-top: var(--space-9999); margin-bottom: var(--space-9999); } .lg\:mx-0 { margin-left: var(--space-0); margin-right: var(--space-0); } .lg\:mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); } .lg\:mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); } .lg\:mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); } .lg\:mx-8 { margin-left: var(--space-8); margin-right: var(--space-8); } .lg\:mx-10 { margin-left: var(--space-10); margin-right: var(--space-10); } .lg\:mx-12 { margin-left: var(--space-12); margin-right: var(--space-12); } .lg\:mx-14 { margin-left: var(--space-14); margin-right: var(--space-14); } .lg\:mx-main-16 { margin-left: var(--space-inside-main-16); margin-right: var(--space-inside-main-16); } .lg\:mx-18 { margin-left: var(--space-18); margin-right: var(--space-18); } .lg\:mx-20 { margin-left: var(--space-20); margin-right: var(--space-20); } .lg\:mx-22 { margin-left: var(--space-22); margin-right: var(--space-22); } .lg\:mx-main-24 { margin-left: var(--space-outside-main-24); margin-right: var(--space-outside-main-24); } .lg\:mx-26 { margin-left: var(--space-26); margin-right: var(--space-26); } .lg\:mx-28 { margin-left: var(--space-28); margin-right: var(--space-28); } .lg\:mx-30 { margin-left: var(--space-30); margin-right: var(--space-30); } .lg\:mx-32 { margin-left: var(--space-32); margin-right: var(--space-32); } .lg\:mx-34 { margin-left: var(--space-34); margin-right: var(--space-34); } .lg\:mx-36 { margin-left: var(--space-36); margin-right: var(--space-36); } .lg\:mx-38 { margin-left: var(--space-38); margin-right: var(--space-38); } .lg\:mx-40 { margin-left: var(--space-40); margin-right: var(--space-40); } .lg\:mx-42 { margin-left: var(--space-42); margin-right: var(--space-42); } .lg\:mx-44 { margin-left: var(--space-44); margin-right: var(--space-44); } .lg\:mx-46 { margin-left: var(--space-46); margin-right: var(--space-46); } .lg\:mx-48 { margin-left: var(--space-48); margin-right: var(--space-48); } .lg\:mx-56 { margin-left: var(--space-56); margin-right: var(--space-56); } .lg\:mx-64 { margin-left: var(--space-64); margin-right: var(--space-64); } .lg\:mx-72 { margin-left: var(--space-72); margin-right: var(--space-72); } .lg\:mx-80 { margin-left: var(--space-80); margin-right: var(--space-80); } .lg\:mx-88 { margin-left: var(--space-88); margin-right: var(--space-88); } .lg\:mx-96 { margin-left: var(--space-96); margin-right: var(--space-96); } .lg\:mx-104 { margin-left: var(--space-104); margin-right: var(--space-104); } .lg\:mx-112 { margin-left: var(--space-112); margin-right: var(--space-112); } .lg\:mx-120 { margin-left: var(--space-120); margin-right: var(--space-120); } .lg\:mx-128 { margin-left: var(--space-128); margin-right: var(--space-128); } .lg\:mx-9999 { margin-left: var(--space-9999); margin-right: var(--space-9999); } /* LG - Individual Direction Margins */ .lg\:mt-0 { margin-top: var(--space-0); } .lg\:mt-2 { margin-top: var(--space-2); } .lg\:mt-4 { margin-top: var(--space-4); } .lg\:mt-6 { margin-top: var(--space-6); } .lg\:mt-8 { margin-top: var(--space-8); } .lg\:mt-10 { margin-top: var(--space-10); } .lg\:mt-12 { margin-top: var(--space-12); } .lg\:mt-14 { margin-top: var(--space-14); } .lg\:mt-main-16 { margin-top: var(--space-inside-main-16); } .lg\:mt-18 { margin-top: var(--space-18); } .lg\:mt-20 { margin-top: var(--space-20); } .lg\:mt-22 { margin-top: var(--space-22); } .lg\:mt-24 { margin-top: var(--space-outside-main-24); } .lg\:mt-main-24 { margin-top: var(--space-outside-main-24); } .lg\:mt-26 { margin-top: var(--space-26); } .lg\:mt-28 { margin-top: var(--space-28); } .lg\:mt-30 { margin-top: var(--space-30); } .lg\:mt-32 { margin-top: var(--space-32); } .lg\:mt-34 { margin-top: var(--space-34); } .lg\:mt-36 { margin-top: var(--space-36); } .lg\:mt-38 { margin-top: var(--space-38); } .lg\:mt-40 { margin-top: var(--space-40); } .lg\:mt-42 { margin-top: var(--space-42); } .lg\:mt-44 { margin-top: var(--space-44); } .lg\:mt-46 { margin-top: var(--space-46); } .lg\:mt-48 { margin-top: var(--space-48); } .lg\:mt-56 { margin-top: var(--space-56); } .lg\:mt-64 { margin-top: var(--space-64); } .lg\:mt-72 { margin-top: var(--space-72); } .lg\:mt-80 { margin-top: var(--space-80); } .lg\:mt-88 { margin-top: var(--space-88); } .lg\:mt-96 { margin-top: var(--space-96); } .lg\:mt-104 { margin-top: var(--space-104); } .lg\:mt-112 { margin-top: var(--space-112); } .lg\:mt-120 { margin-top: var(--space-120); } .lg\:mt-128 { margin-top: var(--space-128); } .lg\:mt-9999 { margin-top: var(--space-9999); } .lg\:mb-0 { margin-bottom: var(--space-0); } .lg\:mb-2 { margin-bottom: var(--space-2); } .lg\:mb-4 { margin-bottom: var(--space-4); } .lg\:mb-6 { margin-bottom: var(--space-6); } .lg\:mb-8 { margin-bottom: var(--space-8); } .lg\:mb-10 { margin-bottom: var(--space-10); } .lg\:mb-12 { margin-bottom: var(--space-12); } .lg\:mb-14 { margin-bottom: var(--space-14); } .lg\:mb-main-16 { margin-bottom: var(--space-inside-main-16); } .lg\:mb-18 { margin-bottom: var(--space-18); } .lg\:mb-20 { margin-bottom: var(--space-20); } .lg\:mb-22 { margin-bottom: var(--space-22); } .lg\:mb-main-24 { margin-bottom: var(--space-outside-main-24); } .lg\:mb-26 { margin-bottom: var(--space-26); } .lg\:mb-28 { margin-bottom: var(--space-28); } .lg\:mb-30 { margin-bottom: var(--space-30); } .lg\:mb-32 { margin-bottom: var(--space-32); } .lg\:mb-34 { margin-bottom: var(--space-34); } .lg\:mb-36 { margin-bottom: var(--space-36); } .lg\:mb-38 { margin-bottom: var(--space-38); } .lg\:mb-40 { margin-bottom: var(--space-40); } .lg\:mb-42 { margin-bottom: var(--space-42); } .lg\:mb-44 { margin-bottom: var(--space-44); } .lg\:mb-46 { margin-bottom: var(--space-46); } .lg\:mb-48 { margin-bottom: var(--space-48); } .lg\:mb-56 { margin-bottom: var(--space-56); } .lg\:mb-64 { margin-bottom: var(--space-64); } .lg\:mb-72 { margin-bottom: var(--space-72); } .lg\:mb-80 { margin-bottom: var(--space-80); } .lg\:mb-88 { margin-bottom: var(--space-88); } .lg\:mb-96 { margin-bottom: var(--space-96); } .lg\:mb-104 { margin-bottom: var(--space-104); } .lg\:mb-112 { margin-bottom: var(--space-112); } .lg\:mb-120 { margin-bottom: var(--space-120); } .lg\:mb-128 { margin-bottom: var(--space-128); } .lg\:mb-9999 { margin-bottom: var(--space-9999); } .lg\:ml-0 { margin-left: var(--space-0); } .lg\:ml-2 { margin-left: var(--space-2); } .lg\:ml-4 { margin-left: var(--space-4); } .lg\:ml-6 { margin-left: var(--space-6); } .lg\:ml-8 { margin-left: var(--space-8); } .lg\:ml-10 { margin-left: var(--space-10); } .lg\:ml-12 { margin-left: var(--space-12); } .lg\:ml-14 { margin-left: var(--space-14); } .lg\:ml-main-16 { margin-left: var(--space-inside-main-16); } .lg\:ml-18 { margin-left: var(--space-18); } .lg\:ml-20 { margin-left: var(--space-20); } .lg\:ml-22 { margin-left: var(--space-22); } .lg\:ml-main-24 { margin-left: var(--space-outside-main-24); } .lg\:ml-26 { margin-left: var(--space-26); } .lg\:ml-28 { margin-left: var(--space-28); } .lg\:ml-30 { margin-left: var(--space-30); } .lg\:ml-32 { margin-left: var(--space-32); } .lg\:ml-34 { margin-left: var(--space-34); } .lg\:ml-36 { margin-left: var(--space-36); } .lg\:ml-38 { margin-left: var(--space-38); } .lg\:ml-40 { margin-left: var(--space-40); } .lg\:ml-42 { margin-left: var(--space-42); } .lg\:ml-44 { margin-left: var(--space-44); } .lg\:ml-46 { margin-left: var(--space-46); } .lg\:ml-48 { margin-left: var(--space-48); } .lg\:ml-56 { margin-left: var(--space-56); } .lg\:ml-64 { margin-left: var(--space-64); } .lg\:ml-72 { margin-left: var(--space-72); } .lg\:ml-80 { margin-left: var(--space-80); } .lg\:ml-88 { margin-left: var(--space-88); } .lg\:ml-96 { margin-left: var(--space-96); } .lg\:ml-104 { margin-left: var(--space-104); } .lg\:ml-112 { margin-left: var(--space-112); } .lg\:ml-120 { margin-left: var(--space-120); } .lg\:ml-128 { margin-left: var(--space-128); } .lg\:ml-9999 { margin-left: var(--space-9999); } .lg\:mr-0 { margin-right: var(--space-0); } .lg\:mr-2 { margin-right: var(--space-2); } .lg\:mr-4 { margin-right: var(--space-4); } .lg\:mr-6 { margin-right: var(--space-6); } .lg\:mr-8 { margin-right: var(--space-8); } .lg\:mr-10 { margin-right: var(--space-10); } .lg\:mr-12 { margin-right: var(--space-12); } .lg\:mr-14 { margin-right: var(--space-14); } .lg\:mr-main-16 { margin-right: var(--space-inside-main-16); } .lg\:mr-18 { margin-right: var(--space-18); } .lg\:mr-20 { margin-right: var(--space-20); } .lg\:mr-22 { margin-right: var(--space-22); } .lg\:mr-main-24 { margin-right: var(--space-outside-main-24); } .lg\:mr-26 { margin-right: var(--space-26); } .lg\:mr-28 { margin-right: var(--space-28); } .lg\:mr-30 { margin-right: var(--space-30); } .lg\:mr-32 { margin-right: var(--space-32); } .lg\:mr-34 { margin-right: var(--space-34); } .lg\:mr-36 { margin-right: var(--space-36); } .lg\:mr-38 { margin-right: var(--space-38); } .lg\:mr-40 { margin-right: var(--space-40); } .lg\:mr-42 { margin-right: var(--space-42); } .lg\:mr-44 { margin-right: var(--space-44); } .lg\:mr-46 { margin-right: var(--space-46); } .lg\:mr-48 { margin-right: var(--space-48); } .lg\:mr-56 { margin-right: var(--space-56); } .lg\:mr-64 { margin-right: var(--space-64); } .lg\:mr-72 { margin-right: var(--space-72); } .lg\:mr-80 { margin-right: var(--space-80); } .lg\:mr-88 { margin-right: var(--space-88); } .lg\:mr-96 { margin-right: var(--space-96); } .lg\:mr-104 { margin-right: var(--space-104); } .lg\:mr-112 { margin-right: var(--space-112); } .lg\:mr-120 { margin-right: var(--space-120); } .lg\:mr-128 { margin-right: var(--space-128); } .lg\:mr-9999 { margin-right: var(--space-9999); } .lg\:p-0 { padding: var(--space-0); } .lg\:p-2 { padding: var(--space-2); } .lg\:p-4 { padding: var(--space-4); } .lg\:p-6 { padding: var(--space-6); } .lg\:p-8 { padding: var(--space-8); } .lg\:p-10 { padding: var(--space-10); } .lg\:p-12 { padding: var(--space-12); } .lg\:p-14 { padding: var(--space-14); } .lg\:p-main-16 { padding: var(--space-inside-main-16); } .lg\:p-18 { padding: var(--space-18); } .lg\:p-20 { padding: var(--space-20); } .lg\:p-22 { padding: var(--space-22); } .lg\:p-main-24 { padding: var(--space-outside-main-24); } .lg\:p-26 { padding: var(--space-26); } .lg\:p-28 { padding: var(--space-28); } .lg\:p-30 { padding: var(--space-30); } .lg\:p-32 { padding: var(--space-32); } .lg\:p-34 { padding: var(--space-34); } .lg\:p-36 { padding: var(--space-36); } .lg\:p-38 { padding: var(--space-38); } .lg\:p-40 { padding: var(--space-40); } .lg\:p-42 { padding: var(--space-42); } .lg\:p-44 { padding: var(--space-44); } .lg\:p-46 { padding: var(--space-46); } .lg\:p-48 { padding: var(--space-48); } .lg\:p-56 { padding: var(--space-56); } .lg\:p-64 { padding: var(--space-64); } .lg\:p-72 { padding: var(--space-72); } .lg\:p-80 { padding: var(--space-80); } .lg\:p-88 { padding: var(--space-88); } .lg\:p-96 { padding: var(--space-96); } .lg\:p-104 { padding: var(--space-104); } .lg\:p-112 { padding: var(--space-112); } .lg\:p-120 { padding: var(--space-120); } .lg\:p-128 { padding: var(--space-128); } .lg\:p-9999 { padding: var(--space-9999); } .lg\:py-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); } .lg\:py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); } .lg\:py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); } .lg\:py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); } .lg\:py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); } .lg\:py-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); } .lg\:py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); } .lg\:py-14 { padding-top: var(--space-14); padding-bottom: var(--space-14); } .lg\:py-main-16 { padding-top: var(--space-inside-main-16); padding-bottom: var(--space-inside-main-16); } .lg\:py-18 { padding-top: var(--space-18); padding-bottom: var(--space-18); } .lg\:py-20 { padding-top: var(--space-20); padding-bottom: var(--space-20); } .lg\:py-22 { padding-top: var(--space-22); padding-bottom: var(--space-22); } .lg\:py-main-24 { padding-top: var(--space-outside-main-24); padding-bottom: var(--space-outside-main-24); } .lg\:py-26 { padding-top: var(--space-26); padding-bottom: var(--space-26); } .lg\:py-28 { padding-top: var(--space-28); padding-bottom: var(--space-28); } .lg\:py-30 { padding-top: var(--space-30); padding-bottom: var(--space-30); } .lg\:py-32 { padding-top: var(--space-32); padding-bottom: var(--space-32); } .lg\:py-34 { padding-top: var(--space-34); padding-bottom: var(--space-34); } .lg\:py-36 { padding-top: var(--space-36); padding-bottom: var(--space-36); } .lg\:py-38 { padding-top: var(--space-38); padding-bottom: var(--space-38); } .lg\:py-40 { padding-top: var(--space-40); padding-bottom: var(--space-40); } .lg\:py-42 { padding-top: var(--space-42); padding-bottom: var(--space-42); } .lg\:py-44 { padding-top: var(--space-44); padding-bottom: var(--space-44); } .lg\:py-46 { padding-top: var(--space-46); padding-bottom: var(--space-46); } .lg\:py-48 { padding-top: var(--space-48); padding-bottom: var(--space-48); } .lg\:py-56 { padding-top: var(--space-56); padding-bottom: var(--space-56); } .lg\:py-64 { padding-top: var(--space-64); padding-bottom: var(--space-64); } .lg\:py-72 { padding-top: var(--space-72); padding-bottom: var(--space-72); } .lg\:py-80 { padding-top: var(--space-80); padding-bottom: var(--space-80); } .lg\:py-88 { padding-top: var(--space-88); padding-bottom: var(--space-88); } .lg\:py-96 { padding-top: var(--space-96); padding-bottom: var(--space-96); } .lg\:py-104 { padding-top: var(--space-104); padding-bottom: var(--space-104); } .lg\:py-112 { padding-top: var(--space-112); padding-bottom: var(--space-112); } .lg\:py-120 { padding-top: var(--space-120); padding-bottom: var(--space-120); } .lg\:py-128 { padding-top: var(--space-128); padding-bottom: var(--space-128); } .lg\:py-9999 { padding-top: var(--space-9999); padding-bottom: var(--space-9999); } .lg\:px-0 { padding-left: var(--space-0); padding-right: var(--space-0); } .lg\:px-2 { padding-left: var(--space-2); padding-right: var(--space-2); } .lg\:px-4 { padding-left: var(--space-4); padding-right: var(--space-4); } .lg\:px-6 { padding-left: var(--space-6); padding-right: var(--space-6); } .lg\:px-8 { padding-left: var(--space-8); padding-right: var(--space-8); } .lg\:px-10 { padding-left: var(--space-10); padding-right: var(--space-10); } .lg\:px-12 { padding-left: var(--space-12); padding-right: var(--space-12); } .lg\:px-14 { padding-left: var(--space-14); padding-right: var(--space-14); } .lg\:px-main-16 { padding-left: var(--space-inside-main-16); padding-right: var(--space-inside-main-16); } .lg\:px-18 { padding-left: var(--space-18); padding-right: var(--space-18); } .lg\:px-20 { padding-left: var(--space-20); padding-right: var(--space-20); } .lg\:px-22 { padding-left: var(--space-22); padding-right: var(--space-22); } .lg\:px-main-24 { padding-left: var(--space-outside-main-24); padding-right: var(--space-outside-main-24); } .lg\:px-26 { padding-left: var(--space-26); padding-right: var(--space-26); } .lg\:px-28 { padding-left: var(--space-28); padding-right: var(--space-28); } .lg\:px-30 { padding-left: var(--space-30); padding-right: var(--space-30); } .lg\:px-32 { padding-left: var(--space-32); padding-right: var(--space-32); } .lg\:px-34 { padding-left: var(--space-34); padding-right: var(--space-34); } .lg\:px-36 { padding-left: var(--space-36); padding-right: var(--space-36); } .lg\:px-38 { padding-left: var(--space-38); padding-right: var(--space-38); } .lg\:px-40 { padding-left: var(--space-40); padding-right: var(--space-40); } .lg\:px-42 { padding-left: var(--space-42); padding-right: var(--space-42); } .lg\:px-44 { padding-left: var(--space-44); padding-right: var(--space-44); } .lg\:px-46 { padding-left: var(--space-46); padding-right: var(--space-46); } .lg\:px-48 { padding-left: var(--space-48); padding-right: var(--space-48); } .lg\:px-56 { padding-left: var(--space-56); padding-right: var(--space-56); } .lg\:px-64 { padding-left: var(--space-64); padding-right: var(--space-64); } .lg\:px-72 { padding-left: var(--space-72); padding-right: var(--space-72); } .lg\:px-80 { padding-left: var(--space-80); padding-right: var(--space-80); } .lg\:px-88 { padding-left: var(--space-88); padding-right: var(--space-88); } .lg\:px-96 { padding-left: var(--space-96); padding-right: var(--space-96); } .lg\:px-104 { padding-left: var(--space-104); padding-right: var(--space-104); } .lg\:px-112 { padding-left: var(--space-112); padding-right: var(--space-112); } .lg\:px-120 { padding-left: var(--space-120); padding-right: var(--space-120); } .lg\:px-128 { padding-left: var(--space-128); padding-right: var(--space-128); } .lg\:px-9999 { padding-left: var(--space-9999); padding-right: var(--space-9999); } } /* XL Breakpoint (1280px) */ @media (min-width: 1280px) { .xl\:m-0 { margin: var(--space-0); } .xl\:m-2 { margin: var(--space-2); } .xl\:m-4 { margin: var(--space-4); } .xl\:m-6 { margin: var(--space-6); } .xl\:m-8 { margin: var(--space-8); } .xl\:m-10 { margin: var(--space-10); } .xl\:m-12 { margin: var(--space-12); } .xl\:m-14 { margin: var(--space-14); } .xl\:m-main-16 { margin: var(--space-inside-main-16); } .xl\:m-18 { margin: var(--space-18); } .xl\:m-20 { margin: var(--space-20); } .xl\:m-22 { margin: var(--space-22); } .xl\:m-24 { margin: var(--space-outside-main-24); } .xl\:m-main-24 { margin: var(--space-outside-main-24); } .xl\:m-26 { margin: var(--space-26); } .xl\:m-28 { margin: var(--space-28); } .xl\:m-30 { margin: var(--space-30); } .xl\:m-32 { margin: var(--space-32); } .xl\:m-34 { margin: var(--space-34); } .xl\:m-36 { margin: var(--space-36); } .xl\:m-38 { margin: var(--space-38); } .xl\:m-40 { margin: var(--space-40); } .xl\:m-42 { margin: var(--space-42); } .xl\:m-44 { margin: var(--space-44); } .xl\:m-46 { margin: var(--space-46); } .xl\:m-48 { margin: var(--space-48); } .xl\:m-56 { margin: var(--space-56); } .xl\:m-64 { margin: var(--space-64); } .xl\:m-72 { margin: var(--space-72); } .xl\:m-80 { margin: var(--space-80); } .xl\:m-88 { margin: var(--space-88); } .xl\:m-96 { margin: var(--space-96); } .xl\:m-104 { margin: var(--space-104); } .xl\:m-112 { margin: var(--space-112); } .xl\:m-120 { margin: var(--space-120); } .xl\:m-128 { margin: var(--space-128); } .xl\:m-9999 { margin: var(--space-9999); } .xl\:my-0 { margin-top: var(--space-0); margin-bottom: var(--space-0); } .xl\:my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); } .xl\:my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); } .xl\:my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); } .xl\:my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); } .xl\:my-10 { margin-top: var(--space-10); margin-bottom: var(--space-10); } .xl\:my-12 { margin-top: var(--space-12); margin-bottom: var(--space-12); } .xl\:my-14 { margin-top: var(--space-14); margin-bottom: var(--space-14); } .xl\:my-main-16 { margin-top: var(--space-inside-main-16); margin-bottom: var(--space-inside-main-16); } .xl\:my-18 { margin-top: var(--space-18); margin-bottom: var(--space-18); } .xl\:my-20 { margin-top: var(--space-20); margin-bottom: var(--space-20); } .xl\:my-22 { margin-top: var(--space-22); margin-bottom: var(--space-22); } .xl\:my-main-24 { margin-top: var(--space-outside-main-24); margin-bottom: var(--space-outside-main-24); } .xl\:my-26 { margin-top: var(--space-26); margin-bottom: var(--space-26); } .xl\:my-28 { margin-top: var(--space-28); margin-bottom: var(--space-28); } .xl\:my-30 { margin-top: var(--space-30); margin-bottom: var(--space-30); } .xl\:my-32 { margin-top: var(--space-32); margin-bottom: var(--space-32); } .xl\:my-34 { margin-top: var(--space-34); margin-bottom: var(--space-34); } .xl\:my-36 { margin-top: var(--space-36); margin-bottom: var(--space-36); } .xl\:my-38 { margin-top: var(--space-38); margin-bottom: var(--space-38); } .xl\:my-40 { margin-top: var(--space-40); margin-bottom: var(--space-40); } .xl\:my-42 { margin-top: var(--space-42); margin-bottom: var(--space-42); } .xl\:my-44 { margin-top: var(--space-44); margin-bottom: var(--space-44); } .xl\:my-46 { margin-top: var(--space-46); margin-bottom: var(--space-46); } .xl\:my-48 { margin-top: var(--space-48); margin-bottom: var(--space-48); } .xl\:my-56 { margin-top: var(--space-56); margin-bottom: var(--space-56); } .xl\:my-64 { margin-top: var(--space-64); margin-bottom: var(--space-64); } .xl\:my-72 { margin-top: var(--space-72); margin-bottom: var(--space-72); } .xl\:my-80 { margin-top: var(--space-80); margin-bottom: var(--space-80); } .xl\:my-88 { margin-top: var(--space-88); margin-bottom: var(--space-88); } .xl\:my-96 { margin-top: var(--space-96); margin-bottom: var(--space-96); } .xl\:my-104 { margin-top: var(--space-104); margin-bottom: var(--space-104); } .xl\:my-112 { margin-top: var(--space-112); margin-bottom: var(--space-112); } .xl\:my-120 { margin-top: var(--space-120); margin-bottom: var(--space-120); } .xl\:my-128 { margin-top: var(--space-128); margin-bottom: var(--space-128); } .xl\:my-9999 { margin-top: var(--space-9999); margin-bottom: var(--space-9999); } .xl\:mx-0 { margin-left: var(--space-0); margin-right: var(--space-0); } .xl\:mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); } .xl\:mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); } .xl\:mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); } .xl\:mx-8 { margin-left: var(--space-8); margin-right: var(--space-8); } .xl\:mx-10 { margin-left: var(--space-10); margin-right: var(--space-10); } .xl\:mx-12 { margin-left: var(--space-12); margin-right: var(--space-12); } .xl\:mx-14 { margin-left: var(--space-14); margin-right: var(--space-14); } .xl\:mx-main-16 { margin-left: var(--space-inside-main-16); margin-right: var(--space-inside-main-16); } .xl\:mx-18 { margin-left: var(--space-18); margin-right: var(--space-18); } .xl\:mx-20 { margin-left: var(--space-20); margin-right: var(--space-20); } .xl\:mx-22 { margin-left: var(--space-22); margin-right: var(--space-22); } .xl\:mx-main-24 { margin-left: var(--space-outside-main-24); margin-right: var(--space-outside-main-24); } .xl\:mx-26 { margin-left: var(--space-26); margin-right: var(--space-26); } .xl\:mx-28 { margin-left: var(--space-28); margin-right: var(--space-28); } .xl\:mx-30 { margin-left: var(--space-30); margin-right: var(--space-30); } .xl\:mx-32 { margin-left: var(--space-32); margin-right: var(--space-32); } .xl\:mx-34 { margin-left: var(--space-34); margin-right: var(--space-34); } .xl\:mx-36 { margin-left: var(--space-36); margin-right: var(--space-36); } .xl\:mx-38 { margin-left: var(--space-38); margin-right: var(--space-38); } .xl\:mx-40 { margin-left: var(--space-40); margin-right: var(--space-40); } .xl\:mx-42 { margin-left: var(--space-42); margin-right: var(--space-42); } .xl\:mx-44 { margin-left: var(--space-44); margin-right: var(--space-44); } .xl\:mx-46 { margin-left: var(--space-46); margin-right: var(--space-46); } .xl\:mx-48 { margin-left: var(--space-48); margin-right: var(--space-48); } .xl\:mx-56 { margin-left: var(--space-56); margin-right: var(--space-56); } .xl\:mx-64 { margin-left: var(--space-64); margin-right: var(--space-64); } .xl\:mx-72 { margin-left: var(--space-72); margin-right: var(--space-72); } .xl\:mx-80 { margin-left: var(--space-80); margin-right: var(--space-80); } .xl\:mx-88 { margin-left: var(--space-88); margin-right: var(--space-88); } .xl\:mx-96 { margin-left: var(--space-96); margin-right: var(--space-96); } .xl\:mx-104 { margin-left: var(--space-104); margin-right: var(--space-104); } .xl\:mx-112 { margin-left: var(--space-112); margin-right: var(--space-112); } .xl\:mx-120 { margin-left: var(--space-120); margin-right: var(--space-120); } .xl\:mx-128 { margin-left: var(--space-128); margin-right: var(--space-128); } .xl\:mx-9999 { margin-left: var(--space-9999); margin-right: var(--space-9999); } .xl\:p-0 { padding: var(--space-0); } .xl\:p-2 { padding: var(--space-2); } .xl\:p-4 { padding: var(--space-4); } .xl\:p-6 { padding: var(--space-6); } .xl\:p-8 { padding: var(--space-8); } .xl\:p-10 { padding: var(--space-10); } .xl\:p-12 { padding: var(--space-12); } .xl\:p-14 { padding: var(--space-14); } .xl\:p-main-16 { padding: var(--space-inside-main-16); } .xl\:p-18 { padding: var(--space-18); } .xl\:p-20 { padding: var(--space-20); } .xl\:p-22 { padding: var(--space-22); } .xl\:p-main-24 { padding: var(--space-outside-main-24); } .xl\:p-26 { padding: var(--space-26); } .xl\:p-28 { padding: var(--space-28); } .xl\:p-30 { padding: var(--space-30); } .xl\:p-32 { padding: var(--space-32); } .xl\:p-34 { padding: var(--space-34); } .xl\:p-36 { padding: var(--space-36); } .xl\:p-38 { padding: var(--space-38); } .xl\:p-40 { padding: var(--space-40); } .xl\:p-42 { padding: var(--space-42); } .xl\:p-44 { padding: var(--space-44); } .xl\:p-46 { padding: var(--space-46); } .xl\:p-48 { padding: var(--space-48); } .xl\:p-56 { padding: var(--space-56); } .xl\:p-64 { padding: var(--space-64); } .xl\:p-72 { padding: var(--space-72); } .xl\:p-80 { padding: var(--space-80); } .xl\:p-88 { padding: var(--space-88); } .xl\:p-96 { padding: var(--space-96); } .xl\:p-104 { padding: var(--space-104); } .xl\:p-112 { padding: var(--space-112); } .xl\:p-120 { padding: var(--space-120); } .xl\:p-128 { padding: var(--space-128); } .xl\:p-9999 { padding: var(--space-9999); } .xl\:py-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); } .xl\:py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); } .xl\:py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); } .xl\:py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); } .xl\:py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); } .xl\:py-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); } .xl\:py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); } .xl\:py-14 { padding-top: var(--space-14); padding-bottom: var(--space-14); } .xl\:py-main-16 { padding-top: var(--space-inside-main-16); padding-bottom: var(--space-inside-main-16); } .xl\:py-18 { padding-top: var(--space-18); padding-bottom: var(--space-18); } .xl\:py-20 { padding-top: var(--space-20); padding-bottom: var(--space-20); } .xl\:py-22 { padding-top: var(--space-22); padding-bottom: var(--space-22); } .xl\:py-main-24 { padding-top: var(--space-outside-main-24); padding-bottom: var(--space-outside-main-24); } .xl\:py-26 { padding-top: var(--space-26); padding-bottom: var(--space-26); } .xl\:py-28 { padding-top: var(--space-28); padding-bottom: var(--space-28); } .xl\:py-30 { padding-top: var(--space-30); padding-bottom: var(--space-30); } .xl\:py-32 { padding-top: var(--space-32); padding-bottom: var(--space-32); } .xl\:py-34 { padding-top: var(--space-34); padding-bottom: var(--space-34); } .xl\:py-36 { padding-top: var(--space-36); padding-bottom: var(--space-36); } .xl\:py-38 { padding-top: var(--space-38); padding-bottom: var(--space-38); } .xl\:py-40 { padding-top: var(--space-40); padding-bottom: var(--space-40); } .xl\:py-42 { padding-top: var(--space-42); padding-bottom: var(--space-42); } .xl\:py-44 { padding-top: var(--space-44); padding-bottom: var(--space-44); } .xl\:py-46 { padding-top: var(--space-46); padding-bottom: var(--space-46); } .xl\:py-48 { padding-top: var(--space-48); padding-bottom: var(--space-48); } .xl\:py-56 { padding-top: var(--space-56); padding-bottom: var(--space-56); } .xl\:py-64 { padding-top: var(--space-64); padding-bottom: var(--space-64); } .xl\:py-72 { padding-top: var(--space-72); padding-bottom: var(--space-72); } .xl\:py-80 { padding-top: var(--space-80); padding-bottom: var(--space-80); } .xl\:py-88 { padding-top: var(--space-88); padding-bottom: var(--space-88); } .xl\:py-96 { padding-top: var(--space-96); padding-bottom: var(--space-96); } .xl\:py-104 { padding-top: var(--space-104); padding-bottom: var(--space-104); } .xl\:py-112 { padding-top: var(--space-112); padding-bottom: var(--space-112); } .xl\:py-120 { padding-top: var(--space-120); padding-bottom: var(--space-120); } .xl\:py-128 { padding-top: var(--space-128); padding-bottom: var(--space-128); } .xl\:py-9999 { padding-top: var(--space-9999); padding-bottom: var(--space-9999); } .xl\:px-0 { padding-left: var(--space-0); padding-right: var(--space-0); } .xl\:px-2 { padding-left: var(--space-2); padding-right: var(--space-2); } .xl\:px-4 { padding-left: var(--space-4); padding-right: var(--space-4); } .xl\:px-6 { padding-left: var(--space-6); padding-right: var(--space-6); } .xl\:px-8 { padding-left: var(--space-8); padding-right: var(--space-8); } .xl\:px-10 { padding-left: var(--space-10); padding-right: var(--space-10); } .xl\:px-12 { padding-left: var(--space-12); padding-right: var(--space-12); } .xl\:px-14 { padding-left: var(--space-14); padding-right: var(--space-14); } .xl\:px-main-16 { padding-left: var(--space-inside-main-16); padding-right: var(--space-inside-main-16); } .xl\:px-18 { padding-left: var(--space-18); padding-right: var(--space-18); } .xl\:px-20 { padding-left: var(--space-20); padding-right: var(--space-20); } .xl\:px-22 { padding-left: var(--space-22); padding-right: var(--space-22); } .xl\:px-main-24 { padding-left: var(--space-outside-main-24); padding-right: var(--space-outside-main-24); } .xl\:px-26 { padding-left: var(--space-26); padding-right: var(--space-26); } .xl\:px-28 { padding-left: var(--space-28); padding-right: var(--space-28); } .xl\:px-30 { padding-left: var(--space-30); padding-right: var(--space-30); } .xl\:px-32 { padding-left: var(--space-32); padding-right: var(--space-32); } .xl\:px-34 { padding-left: var(--space-34); padding-right: var(--space-34); } .xl\:px-36 { padding-left: var(--space-36); padding-right: var(--space-36); } .xl\:px-38 { padding-left: var(--space-38); padding-right: var(--space-38); } .xl\:px-40 { padding-left: var(--space-40); padding-right: var(--space-40); } .xl\:px-42 { padding-left: var(--space-42); padding-right: var(--space-42); } .xl\:px-44 { padding-left: var(--space-44); padding-right: var(--space-44); } .xl\:px-46 { padding-left: var(--space-46); padding-right: var(--space-46); } .xl\:px-48 { padding-left: var(--space-48); padding-right: var(--space-48); } .xl\:px-56 { padding-left: var(--space-56); padding-right: var(--space-56); } .xl\:px-64 { padding-left: var(--space-64); padding-right: var(--space-64); } .xl\:px-72 { padding-left: var(--space-72); padding-right: var(--space-72); } .xl\:px-80 { padding-left: var(--space-80); padding-right: var(--space-80); } .xl\:px-88 { padding-left: var(--space-88); padding-right: var(--space-88); } .xl\:px-96 { padding-left: var(--space-96); padding-right: var(--space-96); } .xl\:px-104 { padding-left: var(--space-104); padding-right: var(--space-104); } .xl\:px-112 { padding-left: var(--space-112); padding-right: var(--space-112); } .xl\:px-120 { padding-left: var(--space-120); padding-right: var(--space-120); } .xl\:px-128 { padding-left: var(--space-128); padding-right: var(--space-128); } .xl\:px-9999 { padding-left: var(--space-9999); padding-right: var(--space-9999); } } /* 2XL Breakpoint (1536px) */ @media (min-width: 1536px) { .2xl\:m-0 { margin: var(--space-0); } .2xl\:m-2 { margin: var(--space-2); } .2xl\:m-4 { margin: var(--space-4); } .2xl\:m-6 { margin: var(--space-6); } .2xl\:m-8 { margin: var(--space-8); } .2xl\:m-10 { margin: var(--space-10); } .2xl\:m-12 { margin: var(--space-12); } .2xl\:m-14 { margin: var(--space-14); } .2xl\:m-main-16 { margin: var(--space-inside-main-16); } .2xl\:m-18 { margin: var(--space-18); } .2xl\:m-20 { margin: var(--space-20); } .2xl\:m-22 { margin: var(--space-22); } .2xl\:m-24 { margin: var(--space-outside-main-24); } .2xl\:m-main-24 { margin: var(--space-outside-main-24); } .2xl\:m-26 { margin: var(--space-26); } .2xl\:m-28 { margin: var(--space-28); } .2xl\:m-30 { margin: var(--space-30); } .2xl\:m-32 { margin: var(--space-32); } .2xl\:m-34 { margin: var(--space-34); } .2xl\:m-36 { margin: var(--space-36); } .2xl\:m-38 { margin: var(--space-38); } .2xl\:m-40 { margin: var(--space-40); } .2xl\:m-42 { margin: var(--space-42); } .2xl\:m-44 { margin: var(--space-44); } .2xl\:m-46 { margin: var(--space-46); } .2xl\:m-48 { margin: var(--space-48); } .2xl\:m-56 { margin: var(--space-56); } .2xl\:m-64 { margin: var(--space-64); } .2xl\:m-72 { margin: var(--space-72); } .2xl\:m-80 { margin: var(--space-80); } .2xl\:m-88 { margin: var(--space-88); } .2xl\:m-96 { margin: var(--space-96); } .2xl\:m-104 { margin: var(--space-104); } .2xl\:m-112 { margin: var(--space-112); } .2xl\:m-120 { margin: var(--space-120); } .2xl\:m-128 { margin: var(--space-128); } .2xl\:m-9999 { margin: var(--space-9999); } .2xl\:my-0 { margin-top: var(--space-0); margin-bottom: var(--space-0); } .2xl\:my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); } .2xl\:my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); } .2xl\:my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); } .2xl\:my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); } .2xl\:my-10 { margin-top: var(--space-10); margin-bottom: var(--space-10); } .2xl\:my-12 { margin-top: var(--space-12); margin-bottom: var(--space-12); } .2xl\:my-14 { margin-top: var(--space-14); margin-bottom: var(--space-14); } .2xl\:my-main-16 { margin-top: var(--space-inside-main-16); margin-bottom: var(--space-inside-main-16); } .2xl\:my-18 { margin-top: var(--space-18); margin-bottom: var(--space-18); } .2xl\:my-20 { margin-top: var(--space-20); margin-bottom: var(--space-20); } .2xl\:my-22 { margin-top: var(--space-22); margin-bottom: var(--space-22); } .2xl\:my-main-24 { margin-top: var(--space-outside-main-24); margin-bottom: var(--space-outside-main-24); } .2xl\:my-26 { margin-top: var(--space-26); margin-bottom: var(--space-26); } .2xl\:my-28 { margin-top: var(--space-28); margin-bottom: var(--space-28); } .2xl\:my-30 { margin-top: var(--space-30); margin-bottom: var(--space-30); } .2xl\:my-32 { margin-top: var(--space-32); margin-bottom: var(--space-32); } .2xl\:my-34 { margin-top: var(--space-34); margin-bottom: var(--space-34); } .2xl\:my-36 { margin-top: var(--space-36); margin-bottom: var(--space-36); } .2xl\:my-38 { margin-top: var(--space-38); margin-bottom: var(--space-38); } .2xl\:my-40 { margin-top: var(--space-40); margin-bottom: var(--space-40); } .2xl\:my-42 { margin-top: var(--space-42); margin-bottom: var(--space-42); } .2xl\:my-44 { margin-top: var(--space-44); margin-bottom: var(--space-44); } .2xl\:my-46 { margin-top: var(--space-46); margin-bottom: var(--space-46); } .2xl\:my-48 { margin-top: var(--space-48); margin-bottom: var(--space-48); } .2xl\:my-56 { margin-top: var(--space-56); margin-bottom: var(--space-56); } .2xl\:my-64 { margin-top: var(--space-64); margin-bottom: var(--space-64); } .2xl\:my-72 { margin-top: var(--space-72); margin-bottom: var(--space-72); } .2xl\:my-80 { margin-top: var(--space-80); margin-bottom: var(--space-80); } .2xl\:my-88 { margin-top: var(--space-88); margin-bottom: var(--space-88); } .2xl\:my-96 { margin-top: var(--space-96); margin-bottom: var(--space-96); } .2xl\:my-104 { margin-top: var(--space-104); margin-bottom: var(--space-104); } .2xl\:my-112 { margin-top: var(--space-112); margin-bottom: var(--space-112); } .2xl\:my-120 { margin-top: var(--space-120); margin-bottom: var(--space-120); } .2xl\:my-128 { margin-top: var(--space-128); margin-bottom: var(--space-128); } .2xl\:my-9999 { margin-top: var(--space-9999); margin-bottom: var(--space-9999); } .2xl\:mx-0 { margin-left: var(--space-0); margin-right: var(--space-0); } .2xl\:mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); } .2xl\:mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); } .2xl\:mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); } .2xl\:mx-8 { margin-left: var(--space-8); margin-right: var(--space-8); } .2xl\:mx-10 { margin-left: var(--space-10); margin-right: var(--space-10); } .2xl\:mx-12 { margin-left: var(--space-12); margin-right: var(--space-12); } .2xl\:mx-14 { margin-left: var(--space-14); margin-right: var(--space-14); } .2xl\:mx-main-16 { margin-left: var(--space-inside-main-16); margin-right: var(--space-inside-main-16); } .2xl\:mx-18 { margin-left: var(--space-18); margin-right: var(--space-18); } .2xl\:mx-20 { margin-left: var(--space-20); margin-right: var(--space-20); } .2xl\:mx-22 { margin-left: var(--space-22); margin-right: var(--space-22); } .2xl\:mx-main-24 { margin-left: var(--space-outside-main-24); margin-right: var(--space-outside-main-24); } .2xl\:mx-26 { margin-left: var(--space-26); margin-right: var(--space-26); } .2xl\:mx-28 { margin-left: var(--space-28); margin-right: var(--space-28); } .2xl\:mx-30 { margin-left: var(--space-30); margin-right: var(--space-30); } .2xl\:mx-32 { margin-left: var(--space-32); margin-right: var(--space-32); } .2xl\:mx-34 { margin-left: var(--space-34); margin-right: var(--space-34); } .2xl\:mx-36 { margin-left: var(--space-36); margin-right: var(--space-36); } .2xl\:mx-38 { margin-left: var(--space-38); margin-right: var(--space-38); } .2xl\:mx-40 { margin-left: var(--space-40); margin-right: var(--space-40); } .2xl\:mx-42 { margin-left: var(--space-42); margin-right: var(--space-42); } .2xl\:mx-44 { margin-left: var(--space-44); margin-right: var(--space-44); } .2xl\:mx-46 { margin-left: var(--space-46); margin-right: var(--space-46); } .2xl\:mx-48 { margin-left: var(--space-48); margin-right: var(--space-48); } .2xl\:mx-56 { margin-left: var(--space-56); margin-right: var(--space-56); } .2xl\:mx-64 { margin-left: var(--space-64); margin-right: var(--space-64); } .2xl\:mx-72 { margin-left: var(--space-72); margin-right: var(--space-72); } .2xl\:mx-80 { margin-left: var(--space-80); margin-right: var(--space-80); } .2xl\:mx-88 { margin-left: var(--space-88); margin-right: var(--space-88); } .2xl\:mx-96 { margin-left: var(--space-96); margin-right: var(--space-96); } .2xl\:mx-104 { margin-left: var(--space-104); margin-right: var(--space-104); } .2xl\:mx-112 { margin-left: var(--space-112); margin-right: var(--space-112); } .2xl\:mx-120 { margin-left: var(--space-120); margin-right: var(--space-120); } .2xl\:mx-128 { margin-left: var(--space-128); margin-right: var(--space-128); } .2xl\:mx-9999 { margin-left: var(--space-9999); margin-right: var(--space-9999); } .2xl\:p-0 { padding: var(--space-0); } .2xl\:p-2 { padding: var(--space-2); } .2xl\:p-4 { padding: var(--space-4); } .2xl\:p-6 { padding: var(--space-6); } .2xl\:p-8 { padding: var(--space-8); } .2xl\:p-10 { padding: var(--space-10); } .2xl\:p-12 { padding: var(--space-12); } .2xl\:p-14 { padding: var(--space-14); } .2xl\:p-main-16 { padding: var(--space-inside-main-16); } .2xl\:p-18 { padding: var(--space-18); } .2xl\:p-20 { padding: var(--space-20); } .2xl\:p-22 { padding: var(--space-22); } .2xl\:p-main-24 { padding: var(--space-outside-main-24); } .2xl\:p-26 { padding: var(--space-26); } .2xl\:p-28 { padding: var(--space-28); } .2xl\:p-30 { padding: var(--space-30); } .2xl\:p-32 { padding: var(--space-32); } .2xl\:p-34 { padding: var(--space-34); } .2xl\:p-36 { padding: var(--space-36); } .2xl\:p-38 { padding: var(--space-38); } .2xl\:p-40 { padding: var(--space-40); } .2xl\:p-42 { padding: var(--space-42); } .2xl\:p-44 { padding: var(--space-44); } .2xl\:p-46 { padding: var(--space-46); } .2xl\:p-48 { padding: var(--space-48); } .2xl\:p-56 { padding: var(--space-56); } .2xl\:p-64 { padding: var(--space-64); } .2xl\:p-72 { padding: var(--space-72); } .2xl\:p-80 { padding: var(--space-80); } .2xl\:p-88 { padding: var(--space-88); } .2xl\:p-96 { padding: var(--space-96); } .2xl\:p-104 { padding: var(--space-104); } .2xl\:p-112 { padding: var(--space-112); } .2xl\:p-120 { padding: var(--space-120); } .2xl\:p-128 { padding: var(--space-128); } .2xl\:p-9999 { padding: var(--space-9999); } .2xl\:py-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); } .2xl\:py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); } .2xl\:py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); } .2xl\:py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); } .2xl\:py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); } .2xl\:py-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); } .2xl\:py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); } .2xl\:py-14 { padding-top: var(--space-14); padding-bottom: var(--space-14); } .2xl\:py-main-16 { padding-top: var(--space-inside-main-16); padding-bottom: var(--space-inside-main-16); } .2xl\:py-18 { padding-top: var(--space-18); padding-bottom: var(--space-18); } .2xl\:py-20 { padding-top: var(--space-20); padding-bottom: var(--space-20); } .2xl\:py-22 { padding-top: var(--space-22); padding-bottom: var(--space-22); } .2xl\:py-main-24 { padding-top: var(--space-outside-main-24); padding-bottom: var(--space-outside-main-24); } .2xl\:py-26 { padding-top: var(--space-26); padding-bottom: var(--space-26); } .2xl\:py-28 { padding-top: var(--space-28); padding-bottom: var(--space-28); } .2xl\:py-30 { padding-top: var(--space-30); padding-bottom: var(--space-30); } .2xl\:py-32 { padding-top: var(--space-32); padding-bottom: var(--space-32); } .2xl\:py-34 { padding-top: var(--space-34); padding-bottom: var(--space-34); } .2xl\:py-36 { padding-top: var(--space-36); padding-bottom: var(--space-36); } .2xl\:py-38 { padding-top: var(--space-38); padding-bottom: var(--space-38); } .2xl\:py-40 { padding-top: var(--space-40); padding-bottom: var(--space-40); } .2xl\:py-42 { padding-top: var(--space-42); padding-bottom: var(--space-42); } .2xl\:py-44 { padding-top: var(--space-44); padding-bottom: var(--space-44); } .2xl\:py-46 { padding-top: var(--space-46); padding-bottom: var(--space-46); } .2xl\:py-48 { padding-top: var(--space-48); padding-bottom: var(--space-48); } .2xl\:py-56 { padding-top: var(--space-56); padding-bottom: var(--space-56); } .2xl\:py-64 { padding-top: var(--space-64); padding-bottom: var(--space-64); } .2xl\:py-72 { padding-top: var(--space-72); padding-bottom: var(--space-72); } .2xl\:py-80 { padding-top: var(--space-80); padding-bottom: var(--space-80); } .2xl\:py-88 { padding-top: var(--space-88); padding-bottom: var(--space-88); } .2xl\:py-96 { padding-top: var(--space-96); padding-bottom: var(--space-96); } .2xl\:py-104 { padding-top: var(--space-104); padding-bottom: var(--space-104); } .2xl\:py-112 { padding-top: var(--space-112); padding-bottom: var(--space-112); } .2xl\:py-120 { padding-top: var(--space-120); padding-bottom: var(--space-120); } .2xl\:py-128 { padding-top: var(--space-128); padding-bottom: var(--space-128); } .2xl\:py-9999 { padding-top: var(--space-9999); padding-bottom: var(--space-9999); } .2xl\:px-0 { padding-left: var(--space-0); padding-right: var(--space-0); } .2xl\:px-2 { padding-left: var(--space-2); padding-right: var(--space-2); } .2xl\:px-4 { padding-left: var(--space-4); padding-right: var(--space-4); } .2xl\:px-6 { padding-left: var(--space-6); padding-right: var(--space-6); } .2xl\:px-8 { padding-left: var(--space-8); padding-right: var(--space-8); } .2xl\:px-10 { padding-left: var(--space-10); padding-right: var(--space-10); } .2xl\:px-12 { padding-left: var(--space-12); padding-right: var(--space-12); } .2xl\:px-14 { padding-left: var(--space-14); padding-right: var(--space-14); } .2xl\:px-main-16 { padding-left: var(--space-inside-main-16); padding-right: var(--space-inside-main-16); } .2xl\:px-18 { padding-left: var(--space-18); padding-right: var(--space-18); } .2xl\:px-20 { padding-left: var(--space-20); padding-right: var(--space-20); } .2xl\:px-22 { padding-left: var(--space-22); padding-right: var(--space-22); } .2xl\:px-main-24 { padding-left: var(--space-outside-main-24); padding-right: var(--space-outside-main-24); } .2xl\:px-26 { padding-left: var(--space-26); padding-right: var(--space-26); } .2xl\:px-28 { padding-left: var(--space-28); padding-right: var(--space-28); } .2xl\:px-30 { padding-left: var(--space-30); padding-right: var(--space-30); } .2xl\:px-32 { padding-left: var(--space-32); padding-right: var(--space-32); } .2xl\:px-34 { padding-left: var(--space-34); padding-right: var(--space-34); } .2xl\:px-36 { padding-left: var(--space-36); padding-right: var(--space-36); } .2xl\:px-38 { padding-left: var(--space-38); padding-right: var(--space-38); } .2xl\:px-40 { padding-left: var(--space-40); padding-right: var(--space-40); } .2xl\:px-42 { padding-left: var(--space-42); padding-right: var(--space-42); } .2xl\:px-44 { padding-left: var(--space-44); padding-right: var(--space-44); } .2xl\:px-46 { padding-left: var(--space-46); padding-right: var(--space-46); } .2xl\:px-48 { padding-left: var(--space-48); padding-right: var(--space-48); } .2xl\:px-56 { padding-left: var(--space-56); padding-right: var(--space-56); } .2xl\:px-64 { padding-left: var(--space-64); padding-right: var(--space-64); } .2xl\:px-72 { padding-left: var(--space-72); padding-right: var(--space-72); } .2xl\:px-80 { padding-left: var(--space-80); padding-right: var(--space-80); } .2xl\:px-88 { padding-left: var(--space-88); padding-right: var(--space-88); } .2xl\:px-96 { padding-left: var(--space-96); padding-right: var(--space-96); } .2xl\:px-104 { padding-left: var(--space-104); padding-right: var(--space-104); } .2xl\:px-112 { padding-left: var(--space-112); padding-right: var(--space-112); } .2xl\:px-120 { padding-left: var(--space-120); padding-right: var(--space-120); } .2xl\:px-128 { padding-left: var(--space-128); padding-right: var(--space-128); } .2xl\:px-9999 { padding-left: var(--space-9999); padding-right: var(--space-9999); } } /*!*******************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./assets/src/css/idtTheme/rounded.css ***! \*******************************************************************************************************************/ /** * IDT Theme - Border Radius Utilities * * Border radius utility classes using CSS variables from spaces.css. * Usage: .rounded-0, .rounded-2, .rounded-4, .rounded-6, .rounded-8, etc. */ /* ============================================ BORDER RADIUS ============================================ */ .rounded-0 { border-radius: var(--radius-0); } .rounded-2 { border-radius: var(--radius-2); } .rounded-4 { border-radius: var(--radius-4); } .rounded-6 { border-radius: var(--radius-6); } .rounded-8 { border-radius: var(--radius-8); } .rounded-10 { border-radius: var(--radius-10); } .rounded-12 { border-radius: var(--radius-12); } .rounded-14 { border-radius: var(--radius-14); } .rounded-16 { border-radius: var(--radius-16); } .rounded-main-16 { border-radius: var(--radius-main-16); } .rounded-18 { border-radius: var(--radius-18); } .rounded-20 { border-radius: var(--radius-20); } .rounded-22 { border-radius: var(--radius-22); } .rounded-24 { border-radius: var(--radius-24); } .rounded-26 { border-radius: var(--radius-26); } .rounded-28 { border-radius: var(--radius-28); } .rounded-29{border-radius:29px} .rounded-30 { border-radius: var(--radius-30); } .rounded-32 { border-radius: var(--radius-32); } .rounded-34 { border-radius: var(--radius-34); } .rounded-36 { border-radius: var(--radius-36); } .rounded-38 { border-radius: var(--radius-38); } .rounded-40 { border-radius: var(--radius-40); } .rounded-42 { border-radius: var(--radius-42); } .rounded-44 { border-radius: var(--radius-44); } .rounded-46 { border-radius: var(--radius-46); } .rounded-48 { border-radius: var(--radius-48); } .rounded-64 { border-radius: var(--radius-64); } .rounded-128 { border-radius: var(--radius-128); } .rounded-9999 { border-radius: var(--radius-9999); } /*!*******************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./assets/src/css/idtTheme/shadows.css ***! \*******************************************************************************************************************/ /** * IDT Theme - Utility Classes * * General utility classes (shadows, etc.) * For color utilities, see text.css, bg.css, and border.css */ /* ============================================ SHADOWS ============================================ */ .shadow-cupertino-light { box-shadow: var(--shadow---cupertino---light); } .shadow-cupertino-dark { box-shadow: var(--shadow---cupertino---dark); } .shadow-superficial-light { box-shadow: var(--shadow---superficial---light); } .shadow-superficial-dark { box-shadow: var(--shadow---superficial---dark); } .shadow-shallow-light { box-shadow: var(--shadow---shallow---light); } .shadow-shallow-dark { box-shadow: var(--shadow---shallow---dark); } .shadow-deep-light { box-shadow: var(--shadow---deep---light); } .shadow-deep-dark { box-shadow: var(--shadow---deep---dark); } .shadow-deep-darker { box-shadow: var(--shadow---deep---darker); } .shadow-white-line{box-shadow: var(--shadow--white--line);} /* Hover states for shadows */ .hover\:shadow-cupertino-light:hover { box-shadow: var(--shadow---cupertino---light); } .hover\:shadow-cupertino-dark:hover { box-shadow: var(--shadow---cupertino---dark); } .hover\:shadow-superficial-light:hover { box-shadow: var(--shadow---superficial---light); } .hover\:shadow-superficial-dark:hover { box-shadow: var(--shadow---superficial---dark); } .hover\:shadow-shallow-light:hover { box-shadow: var(--shadow---shallow---light); } .hover\:shadow-shallow-dark:hover { box-shadow: var(--shadow---shallow---dark); } .hover\:shadow-deep-light:hover { box-shadow: var(--shadow---deep---light); } .hover\:shadow-deep-dark:hover { box-shadow: var(--shadow---deep---dark); } .hover\:shadow-deep-darker:hover { box-shadow: var(--shadow---deep---darker); } .hover\:shadow-white-line:hover { box-shadow: var(--shadow--white--line); } /*!*****************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./assets/src/css/idtTheme/icons.css ***! \*****************************************************************************************************************/ /** * Icon Utilities * * Utility classes for styling SVG icons */ /* Base icon styles */ .icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } /* Icon sizes */ .icon-xs { width: 12px; height: 12px; } .icon-sm { width: 16px; height: 16px; } .icon-md { width: 24px; height: 24px; } .icon-lg { width: 32px; height: 32px; } .icon-xl { width: 48px; height: 48px; } /* Icon colors using CSS variables */ .icon-primary { color: var(--icon-primary); } .icon-secondary { color: var(--icon-secondary); } .icon-tertiary { color: var(--icon-tertiary); } .icon-disabled { color: var(--icon-disabled); opacity: 0.5; } /* Semantic icon colors */ .icon-error { color: var(--icon-error); } .icon-success { color: var(--icon-success); } .icon-warning { color: var(--icon-warning); } .icon-info { color: var(--icon-info); } .icon-attention { color: var(--icon-attention); } .icon-promotion { color: var(--icon-promotion); } /* Icon as background with mask (for single-color icons) */ .icon-bg { background-color: var(--icon-primary); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } .icon-bg-primary { background-color: var(--icon-primary); } .icon-bg-secondary { background-color: var(--icon-secondary); } .icon-bg-error { background-color: var(--icon-error); } .icon-bg-success { background-color: var(--icon-success); } /* Hover states */ .icon-hover:hover { color: var(--icon-secondary); transition: color 200ms ease; } .icon-bg-hover:hover { background-color: var(--icon-bg-hover); transition: background-color 200ms ease; } /*!*******************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./assets/src/css/idtTheme/flexbox.css ***! \*******************************************************************************************************************/ /** * IDT Theme - Flexbox Alignment Utilities * * Align-self utilities for flexbox layouts. * Usage: .self-auto, .self-start, .self-end, .self-center, .self-stretch, .self-baseline */ /* Align Self - Auto (default) */ .self-auto { align-self: auto; } /* Align Self - Start */ .self-start { align-self: flex-start; } /* Align Self - End */ .self-end { align-self: flex-end; } /* Align Self - Center */ .self-center { align-self: center; } /* Align Self - Stretch */ .self-stretch { align-self: stretch; } /* Align Self - Baseline */ .self-baseline { align-self: baseline; } /*!********************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./assets/src/css/idtTheme/idtTheme.css ***! \********************************************************************************************************************/ /** * IDT Theme - Main Stylesheet * * This file imports all theme components in the correct order: * 1. Base colors and brand colors * 2. Breakpoints * 3. Fonts * 4. Theme modes (light/dark/high contrast) * 5. Gradients (which depend on theme colors) * 6. Typography and text styles * 7. Shadows and spaces */ /* 1. Base colors and brand colors */ /* 2. Breakpoints */ /* 3. Fonts */ /* 4. Theme modes - Light mode is default */ /* @import url('./colors/lightMode.css'); */ /* 5. Gradients (depend on theme colors) */ /* 6. Typography and text styles */ /* 7. Shadows and spaces */ /* 8. Utility classes */ /* Apply font family globally */ body { font-family: var(--font-family-IDT-Sans, 'IDT Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif); } /* Prevent layout shift during font loading */ /* Ensure text is visible immediately with fallback fonts */ * { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Theme mode and font size stylesheets are loaded dynamically via JavaScript */ /*!**************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./assets/src/css/siteSpecific/designLogo.css ***! \**************************************************************************************************************************/ .animatedLogo{ position: relative; isolation: isolate; &:before{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 0px; background:radial-gradient(299% 82.75% at 34% 32.52%, rgba(255, 204, 0, 0) 0%, rgba(255, 204, 0, 0.3) 100%); border-radius: 12px; transition: height 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275); } &:after{ content: ''; position: absolute; bottom: 24px; left: -46px; width: 158px; height: 70px; background: url(../images/icons.svg) no-repeat; background-size: contain; transform:scale(0); transform-origin: center bottom; transition: transform 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: -1; } &:hover{ &:before{ height: 38px; } &:after{ transform: scale(1); } } } /*!*********************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./assets/src/css/siteSpecific/lines.css ***! \*********************************************************************************************************************/ /* .bgLines styles removed - replaced by ripple-effect.css */ /*!*****************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./assets/src/css/siteSpecific/ripple-effect.css ***! \*****************************************************************************************************************************/ /* Background Ripple Effect - Vanilla JS Implementation */ /* Based on Aceternity UI, adapted for idtDesign theme system */ /* Keyframe animation for cell ripple effect */ @keyframes cell-ripple { 0% { opacity: 0.4; } 50% { opacity: 0.8; } 100% { opacity: 0.4; } } /* Main ripple effect container */ .bg-ripple-effect { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; overflow: hidden; } /* Inner wrapper for grid positioning */ .bg-ripple-effect__wrapper { position: relative; width: 100%; height: 100%; overflow: hidden; display: flex; align-items: flex-start; justify-content: flex-start; } /* Grid container */ .bg-ripple-effect__grid { position: relative; pointer-events: auto; min-width: 100vw; min-height: 100vh; } /* Individual grid cells */ .bg-ripple-effect__cell { position: relative; border-width: 1px; border-style: solid; opacity: 0.3; transition: opacity 150ms; will-change: transform; cursor: pointer; /* Use theme color variables - adapts to light/dark/high-contrast modes */ background-color: transparent; border-color: var(--neutral-subtle); } /* Hover state for cells */ .bg-ripple-effect__cell:hover { opacity: 0.5; background-color: var(--neutral-subtle); } /* Ripple animation class */ .bg-ripple-effect__cell--ripple { animation: cell-ripple var(--duration, 50ms) ease-out var(--delay, 0ms); animation-fill-mode: none; background-color: var(--neutral-subtle); } /* Grid is now fully responsive and calculates dimensions based on viewport */ /*!**************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./assets/src/css/siteSpecific/homeBlocks.css ***! \**************************************************************************************************************************/ /* Home blocks container - mobile horizontal scroll */ .homeBlocks { /* Hide scrollbar for webkit browsers */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE and Edge */ } .homeBlocks::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } /* Home blocks container */ .homeBlocks__item { box-shadow: 0px 28px 17px rgba(0, 0, 0, 0.02), 0px 13px 34px rgba(0, 0, 0, 0.05); position: relative; transition: all 200ms ease; transform: translateY(0); cursor: pointer; &:hover{ transform: translateY(-.5rem); box-shadow: 0px 35px 24px rgba(0, 0, 0, 0.03), 0px 13px 34px rgba(0, 0, 0, 0.07); } &:active{ transform: translateY(-.1rem); box-shadow: 0px 28px 17px rgba(0, 0, 0, 0.02), 0px 13px 34px rgba(0, 0, 0, 0.05); } } .homeBlocks__itemTitle { border-top: 1px solid var(--transparency-white-alpha-50); backdrop-filter: saturate(180%) blur(7px); box-shadow: 0px -8px 28.8px rgba(0, 0, 0, 0.07); } /* Light mode specific styles (default) */ .theme-light .homeBlocks__itemTitle { border-top: 1px solid var(--transparency-white-alpha-80); } /* Dark mode specific styles */ .theme-dark .homeBlocks__itemTitle { /* Add your dark mode specific styles here */ border-top: 1px solid var(--transparency-white-alpha-10); } /* High contrast mode specific styles */ .theme-high-contrast .homeBlocks__itemTitle { /* Add your high contrast mode specific styles here */ border-top: 1px solid var(--white); } .homeBlocks__boxes { position: absolute; bottom: 4.45rem; left: 2rem; width: calc(100% - 4rem); display: flex; justify-content: center; } .homeBlocks__box { height: 100%; border-radius: 24px; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: bottom; } /* Piano keys animation on hover */ @keyframes pianoKeys { 0%, 100% { transform: translateY(0) scaleY(1); } 25% { transform: translateY(-0.45rem) scaleY(0.95); } 50% { transform: translateY(0) scaleY(1); } 75% { transform: translateY(0.2rem) scaleY(1.05); } } .homeBlocks__item:hover .homeBlocks__box { animation: pianoKeys 1.2s ease-in-out; } /* Staggered delays for wave effect - each box starts slightly after the previous */ .homeBlocks__item:hover .homeBlocks__box:nth-child(1) { animation-delay: 0s; } .homeBlocks__item:hover .homeBlocks__box:nth-child(2) { animation-delay: 0.1s; } .homeBlocks__item:hover .homeBlocks__box:nth-child(3) { animation-delay: 0.2s; } .homeBlocks__item:hover .homeBlocks__box:nth-child(4) { animation-delay: 0.3s; } .homeBlocks__item:hover .homeBlocks__box:nth-child(5) { animation-delay: 0.4s; } .homeBlocks__item:hover .homeBlocks__box:nth-child(6) { animation-delay: 0.5s; } .homeBlocks__item:hover .homeBlocks__box:nth-child(7) { animation-delay: 0.6s; } .homeBlocks__item:hover .homeBlocks__box:nth-child(8) { animation-delay: 0.7s; } .homeBlocks__item:hover .homeBlocks__box:nth-child(9) { animation-delay: 0.8s; } /*!***********************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./assets/src/css/siteSpecific/tooltip.css ***! \***********************************************************************************************************************/ /** * Tooltip Component - shadcn UI Style * * Usage: *
* Hover me *
* * Arrow positions: tooltip-top, tooltip-bottom, tooltip-left, tooltip-right, tooltip-no-arrow */ /* ============================================ BASE TOOLTIP STYLES ============================================ */ .tooltip { position: relative; } .tooltip::before, .tooltip::after { position: absolute; opacity: 0; pointer-events: none; transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out; z-index: 9999; } .tooltip::before { content: attr(data-tooltip); background-color: var(--neutral-body); color: var(--neutral-lightest); padding: var(--space-8) var(--space-12); border-radius: var(--radius-16); font-size: var(--font-size-text-sm); line-height: var(--line-height-sm); white-space: pre; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); max-width: 20rem; word-wrap: pre; text-align: center; } .tooltip::after { content: ''; width: 0; height: 0; border-style: solid; } /* ============================================ TOOLTIP TOP (Arrow pointing down) ============================================ */ .tooltip-top::before { bottom: calc(100% + var(--space-8)); left: 50%; transform: translateX(-50%) translateY(var(--space-4)); } .tooltip-top::after { bottom: calc(100% + var(--space-4)); left: 50%; transform: translateX(-50%); border-width: var(--space-6) var(--space-6) 0 var(--space-6); border-color: var(--neutral-body) transparent transparent transparent; } .tooltip-top:hover::before, .tooltip-top:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); } /* ============================================ TOOLTIP BOTTOM (Arrow pointing up) ============================================ */ .tooltip-bottom::before { top: calc(100% + var(--space-8)); left: 50%; transform: translateX(-50%) translateY(calc(var(--space-4) * -1)); } .tooltip-bottom::after { top: calc(100% + var(--space-4)); left: 50%; transform: translateX(-50%); border-width: 0 var(--space-6) var(--space-6) var(--space-6); border-color: transparent transparent var(--neutral-darkest) transparent; } .tooltip-bottom:hover::before, .tooltip-bottom:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); } /* ============================================ TOOLTIP LEFT (Arrow pointing right) ============================================ */ .tooltip-left::before { right: calc(100% + var(--space-8)); top: 50%; transform: translateY(-50%) translateX(var(--space-4)); } .tooltip-left::after { right: calc(100% + var(--space-4)); top: 50%; transform: translateY(-50%); border-width: var(--space-6) 0 var(--space-6) var(--space-6); border-color: transparent transparent transparent var(--neutral-darkest); } .tooltip-left:hover::before, .tooltip-left:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); } /* ============================================ TOOLTIP RIGHT (Arrow pointing left) ============================================ */ .tooltip-right::before { left: calc(100% + var(--space-8)); top: 50%; transform: translateY(-50%) translateX(calc(var(--space-4) * -1)); } .tooltip-right::after { left: calc(100% + var(--space-4)); top: 50%; transform: translateY(-50%); border-width: var(--space-6) var(--space-6) var(--space-6) 0; border-color: transparent var(--neutral-darkest) transparent transparent; } .tooltip-right:hover::before, .tooltip-right:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); } /* ============================================ TOOLTIP NO ARROW ============================================ */ .tooltip-no-arrow::before { bottom: calc(100% + var(--space-8)); left: 50%; transform: translateX(-50%) translateY(var(--space-4)); } .tooltip-no-arrow::after { display: none; } .tooltip-no-arrow:hover::before { opacity: 1; transform: translateX(-50%) translateY(0); } /* ============================================ CENTERED VARIATIONS (No arrow, centered) ============================================ */ .tooltip-no-arrow-center::before { bottom: calc(100% + var(--space-8)); left: 50%; transform: translateX(-50%) translateY(var(--space-4)); } .tooltip-no-arrow-center::after { display: none; } .tooltip-no-arrow-center:hover::before { opacity: 1; transform: translateX(-50%) translateY(0); } /* ============================================ HOVER STATES ============================================ */ .tooltip:hover::before, .tooltip:hover::after { opacity: 1; pointer-events: auto; } /* Prevent hover from showing tooltip when recently clicked */ .tooltip-clicked:hover::before, .tooltip-clicked:hover::after { opacity: 0 !important; pointer-events: none !important; } /* ============================================ FOCUS STATES (For accessibility) ============================================ */ .tooltip:focus::before, .tooltip:focus::after, .tooltip:focus-visible::before, .tooltip:focus-visible::after { opacity: 1; pointer-events: auto; } /* ============================================ CLICKED STATE (Hide tooltip after click) ============================================ */ .tooltip-clicked::before, .tooltip-clicked::after { opacity: 0 !important; pointer-events: none !important; } /* Hide tooltip on clickable elements after click */ .tooltip.theme-btn:focus::before, .tooltip.theme-btn:focus::after, .tooltip.font-size-btn:focus::before, .tooltip.font-size-btn:focus::after, .tooltip[data-theme]:focus::before, .tooltip[data-theme]:focus::after, .tooltip[data-size]:focus::before, .tooltip[data-size]:focus::after { opacity: 0; pointer-events: none; } /* ============================================ RESPONSIVE ADJUSTMENTS ============================================ */ @media (max-width: 640px) { .tooltip::before { max-width: 16rem; font-size: var(--font-size-text-xs); padding: var(--space-6) var(--space-8); } .tooltip-left::before, .tooltip-right::before { max-width: 12rem; } } /* ============================================ MULTILINE TOOLTIP SUPPORT ============================================ */ .tooltip-multiline::before { white-space: normal; max-width: 20rem; text-align: left; } .tooltip-multiline.tooltip-top::before, .tooltip-multiline.tooltip-bottom::before { text-align: center; } /* ============================================ ANIMATION VARIATIONS ============================================ */ .tooltip-fade::before, .tooltip-fade::after { transition: opacity 0.15s ease-in-out; } .tooltip-scale::before, .tooltip-scale::after { transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out; } .tooltip-scale.tooltip-top::before { transform: translateX(-50%) translateY(var(--space-4)) scale(0.95); } .tooltip-scale.tooltip-top:hover::before { transform: translateX(-50%) translateY(0) scale(1); } .tooltip-scale.tooltip-bottom::before { transform: translateX(-50%) translateY(calc(var(--space-4) * -1)) scale(0.95); } .tooltip-scale.tooltip-bottom:hover::before { transform: translateX(-50%) translateY(0) scale(1); } .tooltip-scale.tooltip-left::before { transform: translateY(-50%) translateX(var(--space-4)) scale(0.95); } .tooltip-scale.tooltip-left:hover::before { transform: translateY(-50%) translateX(0) scale(1); } .tooltip-scale.tooltip-right::before { transform: translateY(-50%) translateX(calc(var(--space-4) * -1)) scale(0.95); } .tooltip-scale.tooltip-right:hover::before { transform: translateY(-50%) translateX(0) scale(1); } /*!*********************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./assets/src/css/siteSpecific/toast.css ***! \*********************************************************************************************************************/ /** * Sonner Toast Component - Exact implementation from emilkowalski/sonner * Using CSS variables for stacking like the original * * @package IDTDesign */ /* Toast container */ .sonner-toaster { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 9999; pointer-events: none; --lift-amount: 10px; /* Vertical gap between stacked toasts */ } /* Individual toast - stacked with depth effect using CSS variables */ .sonner-toast { position: absolute; top: 0; left: 50%; display: flex; align-items: center; justify-content: space-between; min-width: 300px; max-width: 400px; padding: 0.75rem 1rem; background: #fff; color: #1f2937; border-radius: 0.5rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); pointer-events: auto; transform-origin: top center; /* Initial state - hidden, above, scaled down */ opacity: 0; transform: translateX(-50%) translateY(-20px) scale(0.8); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease; will-change: transform, opacity; } /* Visible state - uses CSS variables set by JS */ .sonner-toast[data-visible="true"] { opacity: 1; /* Transform calculated using --index variable */ --y-offset: calc(var(--lift-amount) * var(--index, 0)); --scale: calc(1 - 0.05 * var(--index, 0)); transform: translateX(-50%) translateY(var(--y-offset)) scale(var(--scale)); } /* Removing/hidden state */ .sonner-toast[data-visible="false"] { opacity: 0; transform: translateX(-50%) translateY(-100%) scale(0.85); } .sonner-toast-content { display: flex; align-items: center; gap: 0.75rem; flex: 1; } .sonner-toast-icon { display: flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; font-size: 0.875rem; font-weight: 600; } .sonner-toast-message { flex: 1; font-size: 0.875rem; line-height: 1.5; } .sonner-toast-success { border-left: 3px solid #10b981; } .sonner-toast-success .sonner-toast-icon { color: #10b981; } .sonner-toast-error { border-left: 3px solid #ef4444; } .sonner-toast-error .sonner-toast-icon { color: #ef4444; } /*!*************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./assets/src/css/siteSpecific/accordion.css ***! \*************************************************************************************************************************/ /** * Accordion (shadcn-inspired) using native
/ * * Usage: * -
* - * - Title * - * - * -
...
* -
*/ .idt-accordion { border: 1px solid var(--neutral-border); border-radius: 0.75rem; background: var(--neutral-lightest); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); overflow: hidden; } .idt-accordion + .idt-accordion { margin-top: 0.75rem; } .idt-accordion-trigger { list-style: none; /* Firefox */ display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; cursor: pointer; user-select: none; padding: 0.875rem 1rem; color: var(--neutral-darkest); background: var(--neutral-lightest); transition: background-color 0.15s ease; } .idt-accordion-trigger:hover { background: var(--neutral-extrasubtle); } /* Remove default marker */ .idt-accordion-trigger::-webkit-details-marker { display: none; } .idt-accordion-trigger::marker { content: ''; } .idt-accordion-title { font-weight: 600; font-size: 0.95rem; } .idt-accordion-icon { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; border-radius: 0.5rem; display: inline-flex; align-items: center; justify-content: center; color: var(--neutral-tertiary); transition: transform 0.2s ease, color 0.2s ease, background-color 0.2s ease; } .idt-accordion-icon::before { content: "▾"; line-height: 1; font-size: 0.9rem; transform: translateY(-1px); } .idt-accordion[open] .idt-accordion-icon { transform: rotate(180deg); color: var(--neutral-body); } .idt-accordion-content { border-top: 1px solid var(--neutral-border); padding: 1rem; background: var(--neutral-lightest); } /* Nice focus ring */ .idt-accordion-trigger:focus { outline: none; } .idt-accordion-trigger:focus-visible { outline: 2px solid var(--info-info-main); outline-offset: 2px; border-radius: 0.5rem; } /*!**************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./assets/src/css/siteSpecific/codeBlocks.css ***! \**************************************************************************************************************************/ /** * Code / Pre styles (nice readable “code card”) * * Applies site-wide to 
 and inline .
 * Designed to blend with IDT theme neutrals.
 */

/* Inline code */
code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 0.875em;
	background: var(--neutral-extrasubtle);
	color: var(--neutral-darkest);
	padding: 0.15em 0.35em;
	border-radius: 0.375rem;
	border: 1px solid var(--neutral-border);
}

/* Prevent double styling for code inside pre */
pre code {
	background: transparent;
	border: 0;
	padding: 0;
	font-size: inherit;
	color: inherit;
}

/* Block code */
pre {
	margin: 1rem 0;
	padding: 1rem 1.25rem;
	border-radius: 0.75rem;
	border: 1px solid var(--neutral-border);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%),
		var(--neutral-extrasubtle);
	color: var(--neutral-darkest);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 0.875rem;
	line-height: 1.6;
	overflow: auto;
	white-space: pre;
	tab-size: 2;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Optional: slightly nicer scrollbars where supported */
pre::-webkit-scrollbar {
	height: 10px;
	width: 10px;
}
pre::-webkit-scrollbar-thumb {
	background: var(--neutral-border);
	border-radius: 999px;
}
pre::-webkit-scrollbar-track {
	background: transparent;
}



/*!****************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./assets/src/css/siteSpecific/defaultStuff.css ***!
  \****************************************************************************************************************************/
.inner-content a:not([class*="idt-btn-"]):not(.idt-button-main){
    color: var(--info-info-main);
    &:hover{
        color: var(--info-info-bg-darkest);
        text-decoration: underline;
    }
}

.inner-content a[target="_blank"]:not([class*="idt-btn-"]):not(.idt-button-main)::after {
    content: "\ed73";
    font-family: 'Mingcute';
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    margin-left: 4px;
    margin-top: -.25rem;
    vertical-align: middle;
    color: inherit;
}

p, p.body-base-medium{
    margin: 1rem 0;
}

/* to make images full size in wordpress */
figure.wp-block-image.w-full img,
.wp-block-image.w-full img{
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
}
/*!***********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./assets/src/css/siteSpecific/sidebar.css ***!
  \***********************************************************************************************************************/
/* Mobile Menu Drawer Animation */
#mobile-menu-drawer {
    transition: max-height 0.3s ease-in-out !important;
    will-change: max-height;
    max-height: 0;
}

.main-navigation {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    ul{
        position: relative;
        
        .menu-sliding-background {
            position: absolute;
            left: 0;
            width: 100%;
            background: var(--neutral-extrasubtle);
            border-radius: var(--radius-12);
            opacity: 0;
            visibility: hidden;
            transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                        height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        opacity 0.2s ease,
                        visibility 0.2s ease;
            pointer-events: none;
            z-index: 0;
            will-change: top, height;
        }
        
        li{
            margin-bottom: var(--space-inside-main-16);
            padding: var(--space-6) var(--space-6);
            background-color: transparent;
            width: 100%;
            border-radius: var(--radius-14);
            position: relative;
            a{
                position: relative;
                z-index: 1;
                gap: var(--space-12);
                display: flex;
                align-items: center;
                text-decoration: none;
                color: var(--neutral-body);
                .menu-item-icon{
                    width: 2.25rem;
                    height: 2.25rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 1.5rem;
                    background-color: var(--neutral-lightest);
                    border-radius: 0.5rem;
                    box-shadow: var(--shadow-deep-light);
                    flex-shrink: 0;
                }

                .menu-item-content {
                    display: flex;
                    flex-direction: column;
                    flex: 1;
                    min-width: 0;
                }

                .menu-item-title {
                    display: block;
                }

                .menu-item-description {
                    display: block;
                }
            }
            &.current-menu-item{
                background-color: var(--neutral-title);
                box-shadow: var(--shadow-deep-dark);
                z-index: 2;
                a{.menu-item-title{color: var(--neutral-lightest);}}
            }
        }
    }
}
/*!***********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./assets/src/css/siteSpecific/wpTexts.css ***!
  \***********************************************************************************************************************/
h1, h2, h3, h4, h5, h6 {
    &.wp-block-heading{
        margin-top: var(--space-26);
        margin-bottom: var(--space-14);
    }
}

/* Override WordPress default gap for layout blocks when Tailwind gap utilities are used */
/* WordPress uses :where(.is-layout-flex) { gap: 0.5em; } which has 0 specificity */
/* These rules have higher specificity (0,2,0) and use !important to ensure they override WordPress */
/* Ensure Tailwind gap utilities work on layout blocks with higher specificity */
.is-layout-flex.gap-0 { gap: 0 !important; }
.is-layout-flex.gap-1 { gap: 0.25rem !important; }
.is-layout-flex.gap-2 { gap: 0.5rem !important; }
.is-layout-flex.gap-3 { gap: 0.75rem !important; }
.is-layout-flex.gap-4 { gap: 1rem !important; }
.is-layout-flex.gap-5 { gap: 1.25rem !important; }
.is-layout-flex.gap-6 { gap: 1.5rem !important; }
.is-layout-flex.gap-8 { gap: 2rem !important; }
.is-layout-flex.gap-10 { gap: 2.5rem !important; }
.is-layout-flex.gap-12 { gap: 3rem !important; }
.is-layout-flex.gap-16 { gap: 4rem !important; }
.is-layout-flex.gap-20 { gap: 5rem !important; }
.is-layout-flex.gap-24 { gap: 6rem !important; }

.is-layout-grid.gap-0 { gap: 0 !important; }
.is-layout-grid.gap-1 { gap: 0.25rem !important; }
.is-layout-grid.gap-2 { gap: 0.5rem !important; }
.is-layout-grid.gap-3 { gap: 0.75rem !important; }
.is-layout-grid.gap-4 { gap: 1rem !important; }
.is-layout-grid.gap-5 { gap: 1.25rem !important; }
.is-layout-grid.gap-6 { gap: 1.5rem !important; }
.is-layout-grid.gap-8 { gap: 2rem !important; }
.is-layout-grid.gap-10 { gap: 2.5rem !important; }
.is-layout-grid.gap-12 { gap: 3rem !important; }
.is-layout-grid.gap-16 { gap: 4rem !important; }
.is-layout-grid.gap-20 { gap: 5rem !important; }
.is-layout-grid.gap-24 { gap: 6rem !important; }
/*!******************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./assets/src/css/style.css ***!
  \******************************************************************************************************************************************************************************/
/* 
 * Main Stylesheet
 * 
 * This file imports the IDT Theme and adds custom styles
 */

/* Import IDT Theme */

/* Import Site Specific Styles */

/* Custom styles */
html, body {
    background: radial-gradient(55.58% 50% at 50% 50%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.03) 100%), var(--neutral-bgColor);
    background-size: cover;
    min-height: 100vh;
    isolation: isolate;
}

/* MingCute icon font styling - ensure icons inherit text color */
[class^='mgc_']::before,
[class*=' mgc_']::before {
    color: inherit !important;
}

/*# sourceMappingURL=style.min.css.map*/