/* vendor.css */ /* stylelint-disable */ :root { --oc-white: #fff; --oc-black: #000; --oc-gray-0: #f8f9fa; --oc-gray-1: #f1f3f5; --oc-gray-2: #e9ecef; --oc-gray-3: #dee2e6; --oc-gray-4: #ced4da; --oc-gray-5: #adb5bd; --oc-gray-6: #868e96; --oc-gray-7: #495057; --oc-gray-8: #343a40; --oc-gray-9: #212529; --oc-red-0: #fff5f5; --oc-red-1: #ffe3e3; --oc-red-2: #ffc9c9; --oc-red-3: #ffa8a8; --oc-red-4: #ff8787; --oc-red-5: #ff6b6b; --oc-red-6: #fa5252; --oc-red-7: #f03e3e; --oc-red-8: #e03131; --oc-red-9: #c92a2a; --oc-pink-0: #fff0f6; --oc-pink-1: #ffdeeb; --oc-pink-2: #fcc2d7; --oc-pink-3: #faa2c1; --oc-pink-4: #f783ac; --oc-pink-5: #f06595; --oc-pink-6: #e64980; --oc-pink-7: #d6336c; --oc-pink-8: #c2255c; --oc-pink-9: #a61e4d; --oc-grape-0: #f8f0fc; --oc-grape-1: #f3d9fa; --oc-grape-2: #eebefa; --oc-grape-3: #e599f7; --oc-grape-4: #da77f2; --oc-grape-5: #cc5de8; --oc-grape-6: #be4bdb; --oc-grape-7: #ae3ec9; --oc-grape-8: #9c36b5; --oc-grape-9: #862e9c; --oc-violet-0: #f3f0ff; --oc-violet-1: #e5dbff; --oc-violet-2: #d0bfff; --oc-violet-3: #b197fc; --oc-violet-4: #9775fa; --oc-violet-5: #845ef7; --oc-violet-6: #7950f2; --oc-violet-7: #7048e8; --oc-violet-8: #6741d9; --oc-violet-9: #5f3dc4; --oc-indigo-0: #edf2ff; --oc-indigo-1: #dbe4ff; --oc-indigo-2: #bac8ff; --oc-indigo-3: #91a7ff; --oc-indigo-4: #748ffc; --oc-indigo-5: #5c7cfa; --oc-indigo-6: #4c6ef5; --oc-indigo-7: #4263eb; --oc-indigo-8: #3b5bdb; --oc-indigo-9: #364fc7; --oc-blue-0: #e7f5ff; --oc-blue-1: #d0ebff; --oc-blue-2: #a5d8ff; --oc-blue-3: #74c0fc; --oc-blue-4: #4dabf7; --oc-blue-5: #339af0; --oc-blue-6: #228be6; --oc-blue-7: #1c7ed6; --oc-blue-8: #1971c2; --oc-blue-9: #1864ab; --oc-cyan-0: #e3fafc; --oc-cyan-1: #c5f6fa; --oc-cyan-2: #99e9f2; --oc-cyan-3: #66d9e8; --oc-cyan-4: #3bc9db; --oc-cyan-5: #22b8cf; --oc-cyan-6: #15aabf; --oc-cyan-7: #1098ad; --oc-cyan-8: #0c8599; --oc-cyan-9: #0b7285; --oc-teal-0: #e6fcf5; --oc-teal-1: #c3fae8; --oc-teal-2: #96f2d7; --oc-teal-3: #63e6be; --oc-teal-4: #38d9a9; --oc-teal-5: #20c997; --oc-teal-6: #12b886; --oc-teal-7: #0ca678; --oc-teal-8: #099268; --oc-teal-9: #087f5b; --oc-green-0: #ebfbee; --oc-green-1: #d3f9d8; --oc-green-2: #b2f2bb; --oc-green-3: #8ce99a; --oc-green-4: #69db7c; --oc-green-5: #51cf66; --oc-green-6: #40c057; --oc-green-7: #37b24d; --oc-green-8: #2f9e44; --oc-green-9: #2b8a3e; --oc-lime-0: #f4fce3; --oc-lime-1: #e9fac8; --oc-lime-2: #d8f5a2; --oc-lime-3: #c0eb75; --oc-lime-4: #a9e34b; --oc-lime-5: #94d82d; --oc-lime-6: #82c91e; --oc-lime-7: #74b816; --oc-lime-8: #66a80f; --oc-lime-9: #5c940d; --oc-yellow-0: #fff9db; --oc-yellow-1: #fff3bf; --oc-yellow-2: #ffec99; --oc-yellow-3: #ffe066; --oc-yellow-4: #ffd43b; --oc-yellow-5: #fcc419; --oc-yellow-6: #fab005; --oc-yellow-7: #f59f00; --oc-yellow-8: #f08c00; --oc-yellow-9: #e67700; --oc-orange-0: #fff4e6; --oc-orange-1: #ffe8cc; --oc-orange-2: #ffd8a8; --oc-orange-3: #ffc078; --oc-orange-4: #ffa94d; --oc-orange-5: #ff922b; --oc-orange-6: #fd7e14; --oc-orange-7: #f76707; --oc-orange-8: #e8590c; --oc-orange-9: #d9480f; } /* stylelint-enable */ /* Box sizing rules */ *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Remove default margin */ body, h1, h2, h3, h4, p, li, figure, figcaption, blockquote, dl, dd { margin: 0; } /* Set core body defaults */ body { min-height: 100vh; scroll-behavior: smooth; text-rendering: optimizeSpeed; line-height: 1.5; } /* A elements that don't have a class get default styles */ a:not([class]) { -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; } /* Make images easier to work with */ img { display: block; max-width: 100%; } /* Inherit fonts for inputs and buttons */ input, button, textarea, select { font: inherit; } /* Remove all animations and transitions for people that prefer not to see them */ @media (prefers-reduced-motion: reduce) { * { -webkit-transition-duration: 0.0001s !important; transition-duration: 0.0001s !important; -webkit-animation-duration: 0.0001s !important; animation-duration: 0.0001s !important; -webkit-animation-iteration-count: 1 !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } /* setting.css */ :root { /* viewports */ --viewport-tablet: 48rem; /* 768px */ --viewport-laptop: 72rem; /* 1152px */ --viewport-desktop: 96rem; /* 1536px */ /* colors */ --white: var(--oc-white); --black: var(--oc-black); /* colors: Brand Grays */ --gray-50: #f0f1f3; --gray-100: #e0e2e8; --gray-200: #c3c6d1; --gray-300: #a5abbb; --gray-400: #8991a5; --gray-500: #6d7790; --gray-600: #515e7b; --gray-700: #364767; --gray-800: #183153; --gray-900: #001c40; /* colors: red */ --red0: var(--oc-red-0); --red1: var(--oc-red-1); --red2: var(--oc-red-2); --red3: var(--oc-red-3); --red4: var(--oc-red-4); --red5: var(--oc-red-5); --red6: var(--oc-red-6); --red7: var(--oc-red-7); --red8: var(--oc-red-8); --red9: var(--oc-red-9); /* colors: pink */ --pink0: var(--oc-pink-0); --pink1: var(--oc-pink-1); --pink2: var(--oc-pink-2); --pink3: var(--oc-pink-3); --pink4: var(--oc-pink-4); --pink5: var(--oc-pink-5); --pink6: var(--oc-pink-6); --pink7: var(--oc-pink-7); --pink8: var(--oc-pink-8); --pink9: var(--oc-pink-9); /* colors: grape */ --grape0: var(--oc-grape-0); --grape1: var(--oc-grape-1); --grape2: var(--oc-grape-2); --grape3: var(--oc-grape-3); --grape4: var(--oc-grape-4); --grape5: var(--oc-grape-5); --grape6: var(--oc-grape-6); --grape7: var(--oc-grape-7); --grape8: var(--oc-grape-8); --grape9: var(--oc-grape-9); /* colors: violet */ --violet0: var(--oc-violet-0); --violet1: var(--oc-violet-1); --violet2: var(--oc-violet-2); --violet3: var(--oc-violet-3); --violet4: var(--oc-violet-4); --violet5: var(--oc-violet-5); --violet6: var(--oc-violet-6); --violet7: var(--oc-violet-7); --violet8: var(--oc-violet-8); --violet9: var(--oc-violet-9); /* colors: indigo */ --indigo0: var(--oc-indigo-0); --indigo1: var(--oc-indigo-1); --indigo2: var(--oc-indigo-2); --indigo3: var(--oc-indigo-3); --indigo4: var(--oc-indigo-4); --indigo5: var(--oc-indigo-5); --indigo6: var(--oc-indigo-6); --indigo7: var(--oc-indigo-7); --indigo8: var(--oc-indigo-8); --indigo9: var(--oc-indigo-9); /* colors: blue */ --blue0: var(--oc-blue-0); --blue1: var(--oc-blue-1); --blue2: var(--oc-blue-2); --blue3: var(--oc-blue-3); --blue4: var(--oc-blue-4); --blue5: var(--oc-blue-5); --blue6: var(--oc-blue-6); --blue7: var(--oc-blue-7); --blue8: var(--oc-blue-8); --blue9: var(--oc-blue-9); /* colors: cyan */ --cyan0: var(--oc-cyan-0); --cyan1: var(--oc-cyan-1); --cyan2: var(--oc-cyan-2); --cyan3: var(--oc-cyan-3); --cyan4: var(--oc-cyan-4); --cyan5: var(--oc-cyan-5); --cyan6: var(--oc-cyan-6); --cyan7: var(--oc-cyan-7); --cyan8: var(--oc-cyan-8); --cyan9: var(--oc-cyan-9); /* colors: teal */ --teal0: var(--oc-teal-0); --teal1: var(--oc-teal-1); --teal2: var(--oc-teal-2); --teal3: var(--oc-teal-3); --teal4: var(--oc-teal-4); --teal5: var(--oc-teal-5); --teal6: var(--oc-teal-6); --teal7: var(--oc-teal-7); --teal8: var(--oc-teal-8); --teal9: var(--oc-teal-9); /* colors: green */ --green0: var(--oc-green-0); --green1: var(--oc-green-1); --green2: var(--oc-green-2); --green3: var(--oc-green-3); --green4: var(--oc-green-4); --green5: var(--oc-green-5); --green6: var(--oc-green-6); --green7: var(--oc-green-7); --green8: var(--oc-green-8); --green9: var(--oc-green-9); /* colors: lime */ --lime0: var(--oc-lime-0); --lime1: var(--oc-lime-1); --lime2: var(--oc-lime-2); --lime3: var(--oc-lime-3); --lime4: var(--oc-lime-4); --lime5: var(--oc-lime-5); --lime6: var(--oc-lime-6); --lime7: var(--oc-lime-7); --lime8: var(--oc-lime-8); --lime9: var(--oc-lime-9); /* colors: yellow */ --yellow0: var(--oc-yellow-0); --yellow1: var(--oc-yellow-1); --yellow2: var(--oc-yellow-2); --yellow3: var(--oc-yellow-3); --yellow4: var(--oc-yellow-4); --yellow5: var(--oc-yellow-5); --yellow6: var(--oc-yellow-6); --yellow7: var(--oc-yellow-7); --yellow8: var(--oc-yellow-8); --yellow9: var(--oc-yellow-9); /* colors: orange */ --orange0: var(--oc-orange-0); --orange1: var(--oc-orange-1); --orange2: var(--oc-orange-2); --orange3: var(--oc-orange-3); --orange4: var(--oc-orange-4); --orange5: var(--oc-orange-5); --orange6: var(--oc-orange-6); --orange7: var(--oc-orange-7); --orange8: var(--oc-orange-8); --orange9: var(--oc-orange-9); /* Brand Colors Brand Gravy */ --fa-dk-navy: var(--gray-900); --fa-navy: var(--gray-800); --fa-dk-gravy: var(--gray-600); --fa-md-gravy: var(--gray-400); --fa-gravy: var(--gray-200); --fa-lt-gravy: var(--gray-50); /* Brand Yellow */ --fa-yellow: var(--oc-yellow-4); --fa-dk-yellow: var(--oc-yellow-6); /* Brand Blue */ --fa-blue: var(--oc-blue-3); --fa-dk-blue: var(--oc-blue-7); /* Brand Teal */ --fa-teal: var(--oc-teal-3); --fa-dk-teal: var(--oc-teal-7); /* Brand Red */ --fa-red: var(--oc-red-4); --fa-dk-red: var(--oc-red-8); /* Brand Purple */ --fa-purple: var(--oc-grape-3); --fa-dk-purple: var(--oc-grape-8); /* Brand Violet */ --fa-violet: var(--oc-violet-3); --fa-dk-violet: var(--oc-violet-8); /* focus */ --focus-outline-style: solid; --focus-outline-width: var(--spacing-5xs); --focus-outline-color: var(--blue3); --focus-outline-offset: var(--spacing-7xs); --focus-outline: var(--focus-outline-style) var(--focus-outline-width) var(--focus-outline-color); /* 3px outline width. Solid outline style must be set for consistent browser rendering. */ /* timing */ --timing-base: 1s; --timing-glacial: calc(var(--timing-base) * 200); /* 200s */ --timing-3xslow: calc(var(--timing-base) * 10); /* 10s */ --timing-2xslow: calc(var(--timing-base) * 4); /* 4s */ --timing-xslow: calc(var(--timing-base) * 2); /* 2s */ --timing-slow: calc(var(--timing-base) * 1.5); /* 1.5s */ --timing-md: var(--timing-base); --timing-fast: calc(var(--timing-base) * 0.5); /* 0.5s */ --timing-xfast: calc(var(--timing-base) * 0.25); /* 0.25s */ --timing-2xfast: calc(var(--timing-base) * 0.1); /* 0.1s */ /* typography */ --font-family-sans-serif: cera-round-pro, "Helvetica Neue", "Helvetica", "Arial", sans-serif; /* Available typefaces in the Fort Awesome kit for WA: "cera-pro" & "cera-round-pro" */ --font-family-serif: fa-livory, "Georgia", "Times New Roman", "Times", serif; --font-family-monospace: "Menlo", "Monaco", "Consolas", "Courier New", monospace; --font-family-base: var(--font-family-sans-serif); /* viewport scaling */ --font-size-root: 14px; --font-size-root-tablet: 16px; /* sizes */ --size-base: 1em; --size-6xs: calc(var(--size-base) * 0.25); /* 4px */ --size-5xs: calc(var(--size-base) * 0.3125); /* 5px */ --size-4xs: calc(var(--size-base) * 0.375); /* 6px */ --size-3xs: calc(var(--size-base) * 0.5); /* 8px */ --size-2xs: calc(var(--size-base) * 0.625); /* 10px */ --size-xs: calc(var(--size-base) * 0.75); /* 12px */ --size-sm: calc(var(--size-base) * 0.875); /* 14px */ --size-md: var(--size-base); /* 16px */ --size-lg: calc(var(--size-base) * 1.25); /* 20px */ --size-xl: calc(var(--size-base) * 1.5); /* 24px */ --size-2xl: calc(var(--size-base) * 2); /* 32px */ --size-3xl: calc(var(--size-base) * 2.5); /* 40px */ --size-4xl: calc(var(--size-base) * 3); /* 48px */ --size-5xl: calc(var(--size-base) * 3.75); /* 60px */ --size-6xl: calc(var(--size-base) * 4.5); /* 72px */ /* font-sizes */ --font-size-base: 1em; --font-size-6xs: calc(var(--font-size-base) * 0.25); /* 4px */ --font-size-5xs: calc(var(--font-size-base) * 0.3125); /* 5px */ --font-size-4xs: calc(var(--font-size-base) * 0.375); /* 6px */ --font-size-3xs: calc(var(--font-size-base) * 0.5); /* 8px */ --font-size-2xs: calc(var(--font-size-base) * 0.625); /* 10px */ --font-size-xs: calc(var(--font-size-base) * 0.75); /* 12px */ --font-size-sm: calc(var(--font-size-base) * 0.875); /* 14px */ --font-size-md: var(--font-size-base); /* 16px */ --font-size-lg: calc(var(--font-size-base) * 1.25); /* 20px */ --font-size-xl: calc(var(--font-size-base) * 1.5); /* 24px */ --font-size-2xl: calc(var(--font-size-base) * 2); /* 32px */ --font-size-3xl: calc(var(--font-size-base) * 2.5); /* 40px */ --font-size-4xl: calc(var(--font-size-base) * 3); /* 48px */ --font-size-5xl: calc(var(--font-size-base) * 3.75); /* 60px */ --font-size-6xl: calc(var(--font-size-base) * 4.5); /* 72px */ /* size resets */ --size-reset-base: 1rem; --size-reset-6xs: calc(var(--size-reset-base) * 0.25); /* 4px */ --size-reset-5xs: calc(var(--size-reset-base) * 0.3125); /* 5px */ --size-reset-4xs: calc(var(--size-reset-base) * 0.375); /* 6px */ --size-reset-3xs: calc(var(--size-reset-base) * 0.5); /* 8px */ --size-reset-2xs: calc(var(--size-reset-base) * 0.625); /* 10px */ --size-reset-xs: calc(var(--size-reset-base) * 0.75); /* 12px */ --size-reset-sm: calc(var(--size-reset-base) * 0.875); /* 14px */ --size-reset-md: var(--size-reset-base); /* 16px */ --size-reset-lg: calc(var(--size-reset-base) * 1.25); /* 20px */ --size-reset-xl: calc(var(--size-reset-base) * 1.5); /* 24px */ --size-reset-2xl: calc(var(--size-reset-base) * 2); /* 32px */ --size-reset-3xl: calc(var(--size-reset-base) * 2.5); /* 40px */ --size-reset-4xl: calc(var(--size-reset-base) * 3); /* 48px */ --size-reset-5xl: calc(var(--size-reset-base) * 3.75); /* 60px */ --size-reset-6xl: calc(var(--size-reset-base) * 4.5); /* 72px */ /* spacing */ --spacing-base: 1em; /* ~16px */ --spacing-0: 0; --spacing-1: calc(var(--spacing-base) * 1 / 16); /* 1px */ --spacing-1px: 1px; --spacing-7xs: calc(var(--spacing-base) * 1 / 16); /* 1px */ --spacing-6xs: calc(var(--spacing-base) * 2 / 16); /* 2px */ --spacing-5xs: calc(var(--spacing-base) * 3 / 16); /* 3px */ --spacing-4xs: calc(var(--spacing-base) * 4 / 16); /* 4px */ --spacing-3xs: calc(var(--spacing-base) * 6 / 16); /* 6px */ --spacing-2xs: calc(var(--spacing-base) * 8 / 16); /* 8px */ --spacing-xs: calc(var(--spacing-base) * 10 / 16); /* 10px */ --spacing-sm: calc(var(--spacing-base) * 12 / 16); /* 12px */ --spacing-md: calc(var(--spacing-base) * 1); /* 16px */ --spacing-lg: calc(var(--spacing-base) * 1.25); /* 20px */ --spacing-xl: calc(var(--spacing-base) * 1.5); /* 24px */ --spacing-2xl: calc(var(--spacing-base) * 2); /* 32px */ --spacing-3xl: calc(var(--spacing-base) * 2.5); /* 40px */ --spacing-4xl: calc(var(--spacing-base) * 3); /* 48px */ --spacing-5xl: calc(var(--spacing-base) * 4); /* 64px */ --spacing-6xl: calc(var(--spacing-base) * 5); /* 80px */ --spacing-7xl: calc(var(--spacing-base) * 6); /* 96px */ --spacing-8xl: calc(var(--spacing-base) * 8); /* 128px */ --spacing-9xl: calc(var(--spacing-base) * 10); /* 160px */ --spacing-10xl: calc(var(--spacing-base) * 12); /* 192px */ --spacing-11xl: calc(var(--spacing-base) * 16); /* 256px */ --spacing-12xl: calc(var(--spacing-base) * 20); /* 320px */ /* headings */ --headings-font-weight: var(--font-weight-semibold); --headings-font-family: var(--font-family-base); --headings-margin-top: 2em; --h1-font-size: var(--font-size-3xl); /* 40px */ --h2-font-size: var(--font-size-2xl); /* 32px */ --h3-font-size: var(--font-size-xl); /* 24px */ --h4-font-size: var(--font-size-lg); /* 20px */ --h5-font-size: var(--font-size-md); /* 16px */ --h6-font-size: var(--font-size-xs); /* 12px */ --h1-line-height: calc((40 + 6) / 40); --h2-line-height: calc((32 + 6) / 32); --h3-line-height: calc((24 + 6) / 24); --h4-line-height: calc((20 + 6) / 20); --h5-line-height: calc((16 + 6) / 16); --h6-line-height: calc((12 + 6) / 12); --h1-margin-bottom: calc(8em / 40); --h2-margin-bottom: calc(8em / 32); --h3-margin-bottom: calc(8em / 24); --h4-margin-bottom: calc(8em / 20); --h5-margin-bottom: calc(8em / 16); --h6-margin-bottom: calc(8em / 12); /* font-weights */ --font-weight-light: 300; --font-weight-normal: 400; --font-weight-semibold: 600; --font-weight-bold: 700; /* line heights */ --line-height-0: 0; --line-height-base: 1.5; --line-height-sm: 1.25; --line-height-xs: 1.125; --line-height-1: 1; --line-height-md: var(--line-height-base); --line-height-lg: 1.6; --line-height-heading: var(--line-height-xs); --line-height-code: var(--line-height-md); --line-height-copy: var(--line-height-md); /* letter-spacing */ --letter-spacing-0: 0; --letter-spacing-base: var(--letter-spacing-base); --letter-spacing-lg: 0.025em; --letter-spacing-xl: 0.05em; --letter-spacing-2xl: 0.1em; --letter-spacing-3xl: 0.25em; /* depth */ --depth--1: -1; --depth-0: 0; --depth-1: 10; --depth-2: 20; --depth-3: 30; --depth-4: 40; --depth-5: 50; --depth-background: var(--depth--1); --depth-foreground: var(--depth-5); /* borders */ --border-radius-none: 0; --border-radius-sm: 0.5em; --border-radius-md: 0.75em; --border-radius-lg: 1em; --border-radius-circle: 100%; --border-radius-pill: 9999px; --border-width-none: 0; --border-width-sm: 0.125em; --border-width-md: 0.25em; --border-width-lg: 0.5em; --border-style: solid; --border-width: var(--border-width-sm); --border-color: var(--fa-gravy); --border-radius: var(--border-radius-md); /* shadows */ --with-shadow-box-shadow-color: var(--border-color); --with-shadow-box-shadow-width: 0.25em; --with-shadow-box-shadow: 0 var(--with-shadow-box-shadow-width) 0 var(--with-shadow-box-shadow-color); /* line-length */ --line-length-2xs: 15ch; --line-length-xs: 30ch; --line-length-sm: 45ch; --line-length-md: 66ch; --line-length-lg: 77ch; --line-length-xl: 90ch; /* links */ --link-display: inline; --link-transition-duration: var(--timing-2xfast); --link-decoration-line: underline; --link-decoration-style: dotted; --link-decoration-color: currentColor; --link-decoration-thickness: 0.0625em; --link-color: var(--fa-dk-blue); --link-font-weight: var(--font-weight-base); --link-hover-color: var(--fa-blue); --link-active-color: var(--fa-navy); --link-hover-decoration-line: underline; --link-hover-decoration-style: solid; --link-hover-decoration-color: currentColor; /* code */ --code-background: transparent; --code-color: var(--orange5); --code-font-size: var(--font-size-sm); /* paragraphs */ --paragraph-margin-top: 0; --paragraph-margin-bottom: var(--spacing-md); /* blockquotes */ --blockquote-font-family: var(--font-family-serif); --blockquote-font-size: inherit; --blockquote-margin-bottom: var(--spacing-lg); --blockquote-quote-indent: var(--spacing-xl); --blockquote-quote-border-color: var(--gray-300); --blockquote-quote-border-style: solid; --blockquote-quote-border-width: var(--spacing-4xs); --blockquote-footer-color: var(--gray-500); --blockquote-footer-font-family: var(--font-family-base); --blockquote-footer-font-size: var(--font-size-sm); --blockquote-footer-margin-top: calc(var(--paragraph-margin-bottom) * -1); --blockquote-footer-padding-top: var(--spacing-lg); /* lists */ --list-margin-top: var(--spacing-md); --list-margin-bottom: var(--spacing-md); --list-nested-margin-bottom: var(--spacing-4xs); --list-line-height: calc((16 + 8) / 16); --list-padding-left: var(--spacing-xl); --list-unordered-style-type: disc; --list-ordered-style-type: decimal; /* buttons */ /* --button-transition-timing: var(--timing-2xfast); */ --button-min-height: 4em; /* padding based on this value */ --button-border-width: var(--border-width-sm); --button-border-radius: var(--border-radius-sm); --button-border-color: currentColor; --button-box-shadow-width: 0.375em; --button-box-shadow: 0 var(--button-box-shadow-width) 0 currentColor; --button-padding-vertical: calc((var(--button-min-height) - (var(--font-size-base) * var(--line-height-base)) - (var(--button-border-width) * 2) - var(--button-box-shadow-width)) / 2); --button-padding-horizontal: var(--spacing-xl); --button-padding: var(--button-padding-vertical) var(--button-padding-horizontal); --button-transition-duration: 0; --button-margin-bottom: 0.875em; --button-font-weight: 600; --button-background: var(--white); --button-decoration: none; --button-decoration-color: unset; --button-color: var(--fa-navy); --button-hover-background: var(--fa-gravy); --button-hover-decoration: none; --button-hover-decoration-color: unset; --button-hover-color: var(--button-color); --button-hover-border-color: currentColor; --button-active-border-width: var(--border-width-sm); --button-active-border-color: var(--fa-navy); --button-active-box-shadow: none; --button-active-background: var(--fa-navy); --button-active-color: var(--button-background); --button-disabled-opacity: 0.5; --button-disabled-background: var(--button-background); --button-padding-roomy: calc(var(--button-padding-vertical) + 0.5em) calc(var(--button-padding-horizontal) + 0.5em); --button-padding-compact: calc(var(--button-padding-vertical) - 0.5em) calc(var(--button-padding-horizontal) - 0.5em); /* tables */ --table-layout: initial; --table-margin-bottom: var(--spacing-xl); --table-width: 100%; --table-background: inherit; --table-hover-background-color: transparent; --table-head-background: transparent; --table-th-background: transparent; --table-th-border-width: 2px; --table-th-border-style: solid; --table-th-border-color: var(--gray-200); --table-th-font-weight: var(--font-weight-semibold); --table-body-background: transparent; --table-row-background: transparent; --table-striped-row-background: var(--gray-100); --table-cell-border-collapse: collapse; --table-cell-border-spacing: none; --table-cell-text-align: left; --table-cell-vertical-align: initial; --table-cell-spacing-top: 0.5em; --table-cell-spacing-right: 0.75em; --table-cell-spacing-bottom: 0.5em; --table-cell-spacing-left: 0.75em; --table-cell-spacing-compact: calc(var(--table-cell-spacing-top) * 0.5) calc(var(--table-cell-spacing-right) * 0.5) calc(var(--table-cell-spacing-bottom) * 0.5) calc(var(--table-cell-spacing-left) * 0.5); --table-cell-spacing-roomy: calc(var(--table-cell-spacing-top) * 2) calc(var(--table-cell-spacing-right) * 2) calc(var(--table-cell-spacing-bottom) * 2) calc(var(--table-cell-spacing-left) * 2); --table-cell-border-width: 1px; --table-cell-border-style: solid; --table-cell-border-color: var(--gray-100); --table-cell-background: transparent; --table-foot-background: transparent; --table-caption-color: var(--gray-600); --table-caption-side: bottom; --table-caption-text-align: left; --table-caption-text-size: var(--size-sm); /* hrs */ --hr-border-style: solid; --hr-border-width: var(--border-width-sm); --hr-border-color: var(--fa-gravy); --hr-padding-bottom: 0.25em; /* 8px */ /* triangles */ --triangle-color: var(--white); --triangle-size: 1em; /* tags */ --tag-border: 0; --tag-border-radius: var(--border-radius-md); --tag-background: var(--fa-gravy); --tag-padding: 0.5em 1em; /* ~6px ~12px */ --tag-vertical-align: calc(100% / 12); /* ~1px */ --tag-text-transform: uppercase; --tag-letter-spacing: 0.0625em; /* ~0.5px */ --tag-color: var(--fa-navy); --tag-font-size: var(--font-size-xs); /* ~12px */ --tag-font-weight: bold; --tag-link-hover-color: var(--fa-dk-blue); --top-tag-top: -1em; /* 12px, half of tag height */ --top-tag-indent: calc(32em / 12); --top-tag-margin-top: 0.75em; /* 12px, half of tag height */ /* grid */ --grid-gutter-x-width: 0.5rem; --grid-gutter-y-width: 1rem; --grid-outer-gutter-width: 1rem; --grid-min-width: none; --grid-max-width: 100%; --grid-fluid-max-width: 100%; --grid-row-direction: row; --grid-wrap: wrap; --grid-column-direction: column; --tablet-grid-outer-gutter-width: 1rem; --laptop-grid-outer-gutter-width: 2rem; --desktop-grid-outer-gutter-width: 2rem; --tablet-grid-max-width: var(--viewport-tablet); --laptop-grid-max-width: var(--viewport-laptop); --desktop-grid-max-width: var(--viewport-desktop); /* default text and background color */ --text-color: var(--fa-navy); --text-align: left; --background-color: var(--fa-lt-gravy); /* body/page */ --body-background: var(--background-color); --body-color: var(--text-color); /* messages */ --message-min-height: 4em; /* 64px min height for messages. Change this and padding automatically adjusts. */ --message-border-width: var(--border-width-sm); --message-border-style: solid; --message-border-color: var(--white); --message-vertical-padding: calc((var(--message-min-height) - (var(--font-size-base) * var(--line-height-base)) - (var(--message-border-width) * 2)) / 2); --message-horizontal-padding: var(--spacing-xl); --message-background: var(--white); --message-color: var(--fa-navy); --message-padding: var(--message-vertical-padding) var(--message-horizontal-padding); --message-border-radius: var(--border-radius-md); --message-margin: 0 0 1em; --message-with-icon-decorative-top: calc((var(--message-vertical-padding) + (var(--line-height-base) - var(--message-with-icon-decorative-scale))/2) / var(--message-with-icon-decorative-scale) * 1em); --message-with-icon-decorative-color: var(--fa-md-gravy); --message-with-icon-decorative-scale: 1.5; /* Scales icon size. Basically like unit-less ems. */ --message-roomy-with-icon-decorative-scale: 1.75; /* Scales icon size. Basically like unit-less ems. */ --message-roomy-with-icon-decorative-top: calc((1.625 + (var(--line-height-base) - var(--message-roomy-with-icon-decorative-scale))/2) / var(--message-roomy-with-icon-decorative-scale) * 1em); --message-roomy-padding: calc(var(--message-vertical-padding) + 0.5em) calc(var(--message-horizontal-padding) + 0.5em); --message-roomy-min-height: 5em; --message-compact-with-icon-decorative-scale: 1.25; /* Scales icon size. Basically like unit-less ems. */ --message-compact-with-icon-decorative-top: calc((0.625 + (var(--line-height-base) - var(--message-compact-with-icon-decorative-scale))/2) / var(--message-compact-with-icon-decorative-scale) * 1em); --message-compact-padding: calc(var(--message-vertical-padding) - 0.5em) calc(var(--message-horizontal-padding) - 0.5em); --message-compact-min-height: 3em; /* forms */ --fieldset-border-width: var(--border-width-sm) 0; --fieldset-border-style: solid; --fieldset-border-color: var(--fa-md-gravy); --fieldset-background: none; --fieldset-padding: 0 0 var(--spacing-sm) 0; --legend-background: transparent; --legend-padding: 0 var(--spacing-sm) 0 0; --legend-font-weight: bold; --legend-color: var(--fa-dk-gravy); --label-font-weight: bold; --label-font-size: var(--font-size-md); --label-color: var(--text-color); --label-required-color: var(--label-color); --label-disabled-color: var(--fa-dk-gravy); --input-font-size: var(--font-size-md); --input-font-weight: bold; --input-background: var(--white); --input-min-height: 4em; /* 64px min height for input, textarea, & select */ --input-padding-vertical: calc((var(--input-min-height) - (var(--input-font-size) * var(--line-height-base)) - (var(--input-border-width) * 2)) / 2); --input-padding-horizontal: var(--spacing-xl); --input-padding: var(--input-padding-vertical) var(--input-padding-horizontal); --input-border-width: var(--border-width-sm); --input-border-style: solid; --input-border-radius: var(--border-radius-md); --input-border-color: var(--fa-md-gravy); --input-box-shadow: inset 0 0.25em 0 0 var(--fa-lt-gravy); --input-with-icon-scale: 1.25; --input-with-icon-color: var(--fa-gravy); --input-affix-background: var(--input-border-color); --input-affix-color: var(--white); --help-font-size: var(--font-size-sm); --help-color: var(--fa-dk-gravy); --input-disabled-box-shadow: none; --input-disabled-background: var(--fa-gravy); --input-disabled-color: var(--fa-dk-gravy); --input-disabled-border-color: var(--input-disabled-background); --input-disabled-opacity: 1; --input-placeholder-color: var(--fa-gravy); --input-placeholder-font-weight: normal; --form-button-margin: var(--spacing-sm) 0 0; /* cards */ --card-display: block; --card-vertical-padding: calc((var(--card-min-height) - (var(--font-size-base) * var(--line-height-base)) - (var(--card-border-width) * 2)) / 2); --card-horizontal-padding: var(--spacing-xl); --card-text-align: center; --card-border-width: 0em; /* I shit you not. CSS calc cannot add 0 to something with units without 0 having units on it too. */ --card-border-style: solid; --card-border-color: var(--white); --card-padding: var(--card-vertical-padding) var(--card-horizontal-padding); --card-border-radius: var(--border-radius-md); --card-margin-bottom: var(--spacing-xl); --card-vertical-align: top; --card-min-height: 4em; /* 64px min height for cards. A ton of math is based on this number, including vertical padding. */ --card-roomy-vertical-padding: calc((var(--card-roomy-min-height) - (var(--font-size-base) * var(--line-height-base)) - (var(--card-border-width) * 2)) / 2); --card-roomy-horizontal-padding: var(--spacing-2xl); --card-roomy-min-height: 5em; --card-compact-vertical-padding: calc((var(--card-compact-min-height) - (var(--font-size-base) * var(--line-height-base)) - (var(--card-border-width) * 2)) / 2); --card-compact-horizontal-padding: var(--spacing-lg); --card-compact-min-height: 3em; --card-link-text-decoration: none; --card-link-hover-border-width: 0.125em; --card-link-hover-border-style: solid; --card-link-hover-text-decoration: none; --card-color: var(--fa-navy); --card-background: var(--white); --card-link-box-shadow: var(--with-shadow-box-shadow); --card-link-background: var(--card-background); --card-link-color: var(--card-color); --card-link-hover-background: var(--white); --card-link-hover-color: var(--fa-dk-blue); --card-link-hover-border-color: var(--fa-blue); --card-header-border: 0.125em dotted var(--fa-dk-navy); --card-header-background: var(--fa-navy); --card-header-color: var(--white); --card-header-link-hover-background: var(--card-link-hover-color); --card-header-link-hover-color: var(--card-link-hover-background); --card-section-border: 0.125em dotted var(--fa-lt-gravy); --card-section-color: var(--card-color); /* with-close */ --with-close-close-font-size: var(--font-size-xl); --with-close-times-color: var(--white); --with-close-close-color: inherit; --with-close-close-hover-color: var(--fa-dk-red); /* modals */ --modal-max-width: 80vw; /* take up only 80% of the viewport width on smaller screens to leave room around */ --modal-min-height: var(--spacing-5xl); --modal-border-radius: var(--border-radius-md); --modal-margin-top: var(--spacing-2xl); --modal-margin-bottom: var(--spacing-2xl); --modal-margin-horizontal: auto; --modal-transition-duration: var(--timing-xfast); --modal-shadow: rgba(81, 94, 123, 0.5); --modal-opacity: 0; /* icons */ --icon-caret-down: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='caret-down' class='svg-inline--fa fa-caret-down fa-w-10' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='rgb(73, 80, 87)' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'%3E%3C/path%3E%3C/svg%3E"); } /* alias: misc states */ /* alias: system states */ /* alias: theme states */ /* alias: color states */ /* alias: state custom selector rollups */ /* Inverted States */ /* alias: buttons */ /* alias: add-ons */ /* alias: code */ /* alias: headings */ /* alias: lists */ /* alias: messages */ /* alias: modals */ /* alias: icons */ /* alias: forms */ /* alias: block-level elements */ /* viewports */ /* misc state variables */ .default { --button-background: var(--white); --button-hover-background: var(--fa-gravy); --button-active-color: var(--button-background); --button-disabled-background: var(--button-background); --message-background: var(--white); --message-border-color: var(--white); --message-with-icon-decorative-color: var(--fa-md-gravy); --with-close-close-color: var(--fa-navy); --border-color: var(--gray-400); --link-color: var(--fa-dk-blue); --link-hover-color: var(--fa-blue); --table-background: var(--gray-50); --table-th-background: var(--gray-100); --table-row-background: var(--gray-50); --table-striped-row-background: var(--gray-100); --table-cell-border-color: var(--gray-300); --table-cell-background: transparent; --table-hover-background-color: var(--gray-400); --table-th-border-color: var(--gray-300); --tag-background: var(--fa-gravy); --tag-color: var(--fa-navy); --tag-link-hover-color: var(--fa-dk-blue); --fieldset-border-color: var(--gray-200); --legend-color: var(--gray-400); --card-color: var(--fa-navy); --card-background: var(--white); --card-link-background: var(--card-background); --card-link-color: var(--card-color); --card-link-hover-background: var(--white); --card-link-hover-color: var(--fa-dk-blue); --card-link-hover-border-color: var(--fa-dk-blue); --card-header-background: var(--fa-navy); --card-header-color: var(--white); --card-header-link-hover-background: var(--card-link-hover-color); --card-header-link-hover-color: var(--card-link-hover-background); } .muted,.mute { --text-color: var(--fa-md-gravy); --hr-border-color: var(--gray-300); } /* theme state variables */ .primary { --button-background: var(--white); --button-hover-background: var(--fa-gravy); --button-active-color: var(--button-background); --button-disabled-background: var(--button-background); --message-background: var(--white); --message-border-color: var(--white); --message-with-icon-decorative-color: var(--fa-md-gravy); --with-close-close-color: var(--fa-navy); --border-color: var(--blue3); --link-color: var(--fa-dk-blue); --link-hover-color: var(--fa-blue); --table-background: var(--blue0); --table-th-background: var(--blue1); --table-row-background: var(--blue0); --table-striped-row-background: var(--blue1); --table-cell-background: transparent; --table-cell-border-color: var(--blue2); --table-hover-background-color: var(--blue1); --table-th-border-color: var(--blue2); --tag-background: var(--fa-navy); --tag-color: var(--white); --tag-link-hover-color: var(--fa-blue); --card-color: var(--fa-navy); --card-background: var(--white); --card-link-background: var(--card-background); --card-link-color: var(--card-color); --card-link-hover-background: var(--white); --card-link-hover-color: var(--fa-dk-blue); --card-link-hover-border-color: var(--fa-dk-blue); --card-header-background: var(--fa-navy); --card-header-color: var(--white); --card-header-link-hover-background: var(--card-link-hover-color); --card-header-link-hover-color: var(--card-link-hover-background); } .secondary { --button-background: var(--fa-lt-gravy); --button-hover-background: var(--fa-gravy); --button-active-color: var(--button-background); --button-disabled-background: var(--button-background); --message-background: var(--fa-lt-gravy); --message-border-color: var(--fa-gravy); --message-with-icon-decorative-color: var(--fa-md-gravy); --with-close-close-color: var(--fa-navy); --border-color: var(--gray-400); --link-color: var(--fa-md-gravy); --link-hover-color: var(--fa-dk-blue); --table-background: var(--gray-50); --table-th-background: var(--gray-100); --table-row-background: var(--gray-50); --table-striped-row-background: var(--gray-100); --table-cell-background: transparent; --table-cell-border-color: var(--gray-300); --table-hover-background-color: var(--gray-100); --table-th-border-color: var(--gray-300); --tag-background: var(--white); --tag-color: var(--fa-navy); --tag-link-hover-color: var(--fa-dk-blue); --card-border-width: 0.125em; --card-border-color: var(--fa-gravy); --card-color: var(--fa-navy); --card-background: var(--fa-lt-gravy); --card-link-background: var(--card-background); --card-link-color: var(--card-color); --card-link-hover-background: var(--fa-navy); --card-link-hover-color: var(--white); --card-link-hover-border-color: var(--fa-navy); --card-header-background: var(--fa-md-gravy); --card-header-color: var(--white); --card-header-link-hover-background: var(--fa-lt-gravy); --card-header-link-hover-color: var(--card-link-hover-background); --card-section-border: 0.125em solid var(--card-border-color); } .accent { --button-background: var(--fa-yellow); --button-hover-background: var(--fa-dk-yellow); --button-active-color: var(--button-background); --button-disabled-background: var(--button-background); --message-background: var(--white); --message-border-color: var(--fa-dk-yellow); --message-with-icon-decorative-color: var(--message-border-color); --with-close-close-color: var(--message-border-color); --border-color: var(--fa-yellow); --link-color: var(--fa-dk-yellow); --link-hover-color: var(--fa-yellow); --table-background: var(--teal0); --table-th-background: var(--teal1); --table-row-background: var(--teal0); --table-striped-row-background: var(--teal1); --table-cell-background: transparent; --table-cell-border-color: var(--teal2); --table-hover-background-color: var(--teal1); --table-th-border-color: var(--teal2); --tag-background: var(--fa-yellow); --tag-color: var(--fa-navy); --tag-link-hover-color: var(--fa-dk-blue); --fieldset-border-color: var(--fa-yellow); --legend-color: var(--fa-dk-yellow); --card-color: var(--fa-navy); --card-background: var(--white); --card-link-background: var(--card-background); --card-link-color: var(--card-color); --card-link-hover-background: var(--fa-yellow); --card-link-hover-color: var(--card-color); --card-link-hover-border-color: var(--card-link-hover-background); --card-header-background: var(--fa-navy); --card-header-color: var(--white); --card-header-link-hover-background: var(--card-link-hover-color); --card-header-link-hover-color: var(--card-link-hover-background); --card-section-color: var(--fa-navy); --card-section-border: 0.125em solid var(--fa-lt-gravy); } .light { --button-background: var(--fa-gravy); --button-hover-background: var(--fa-md-gravy); --button-active-color: var(--button-background); --button-disabled-background: var(--button-background); --message-background: var(--white); --message-border-color: var(--fa-md-gravy); --message-with-icon-decorative-color: var(--message-border-color); --with-close-close-color: var(--message-border-color); --border-color: var(--white); --link-color: var(--fa-md-gravy); --link-hover-color: var(--fa-gravy); --table-background: var(--white); --table-th-background: var(--white); --table-row-background: var(--white); --table-striped-row-background: var(--gray-50); --table-cell-background: transparent; --table-cell-border-color: var(--gray-200); --table-hover-background-color: var(--gray-100); --table-th-border-color: var(--gray-300); --tag-background: var(--fa-gravy); --tag-color: var(--fa-navy); --tag-link-hover-color: var(--fa-dk-blue); --card-background: var(--white); --card-color: var(--fa-md-gravy); --card-link-background: var(--card-background); --card-link-color: var(--card-color); --card-link-hover-background: var(--white); --card-link-hover-color: var(--card-color); --card-link-hover-border-color: var(--card-color); --card-header-background: var(--fa-gravy); --card-header-color: var(--fa-navy); --card-header-link-hover-background: var(--card-link-hover-color); --card-header-link-hover-color: var(--card-link-hover-background); } /* system state variables */ .success { --button-background: var(--fa-teal); --button-hover-background: var(--fa-dk-teal); --button-active-color: var(--button-background); --button-disabled-background: var(--button-background); --message-background: var(--white); --message-border-color: var(--fa-dk-teal); --message-with-icon-decorative-color: var(--message-border-color); --with-close-close-color: var(--message-border-color); --border-color: var(--teal3); --link-color: var(--fa-dk-teal); --link-hover-color: var(--fa-teal); --table-background: var(--teal0); --table-th-background: var(--teal2); --table-row-background: var(--teal1); --table-striped-row-background: var(--teal0); --table-cell-background: transparent; --table-cell-border-color: var(--teal2); --table-hover-background-color: var(--teal2); --table-th-border-color: var(--teal2); --tag-background: var(--fa-teal); --tag-color: var(--fa-navy); --tag-link-hover-color: var(--fa-dk-teal); --label-color: var(--fa-dk-teal); --label-required-color: var(--fa-dk-teal); --input-border-color: var(--fa-teal); --input-affix-background: var(--input-border-color); --card-background: var(--white); --card-color: var(--fa-dk-teal); --card-link-background: var(--card-background); --card-link-color: var(--card-color); --card-link-hover-background: var(--white); --card-link-hover-color: var(--card-color); --card-link-hover-border-color: var(--card-color); --card-header-background: var(--fa-teal); --card-header-color: var(--fa-navy); --card-header-link-hover-background: var(--card-link-hover-color); --card-header-link-hover-color: var(--card-link-hover-background); } .warning { --button-background: var(--fa-yellow); --button-hover-background: var(--fa-dk-yellow); --button-active-color: var(--button-background); --button-disabled-background: var(--button-background); --message-background: var(--white); --message-border-color: var(--fa-dk-yellow); --message-with-icon-decorative-color: var(--message-border-color); --with-close-close-color: var(--message-border-color); --border-color: var(--yellow3); --link-color: var(--fa-dk-yellow); --link-hover-color: var(--fa-yellow); --table-background: var(--yellow0); --table-th-background: var(--yellow2); --table-row-background: var(--yellow1); --table-striped-row-background: var(--yellow0); --table-cell-background: transparent; --table-cell-border-color: var(--yellow2); --table-hover-background-color: var(--yellow2); --table-th-border-color: var(--yellow2); --tag-background: var(--fa-yellow); --tag-color: var(--fa-navy); --tag-link-hover-color: var(--fa-md-gravy); --label-color: var(--fa-dk-yellow); --label-required-color: var(--fa-dk-yellow); --input-border-color: var(--fa-yellow); --input-affix-background: var(--input-border-color); --card-background: var(--white); --card-color: var(--fa-dk-yellow); --card-link-background: var(--card-background); --card-link-color: var(--card-color); --card-link-hover-background: var(--white); --card-link-hover-color: var(--card-color); --card-link-hover-border-color: var(--card-color); --card-header-background: var(--fa-yellow); --card-header-color: var(--fa-navy); --card-header-link-hover-background: var(--card-link-hover-color); --card-header-link-hover-color: var(--card-link-hover-background); } .danger { --button-background: var(--fa-red); --button-hover-background: var(--fa-dk-red); --button-active-color: var(--button-background); --button-disabled-background: var(--button-background); --message-background: var(--white); --message-border-color: var(--fa-dk-red); --message-with-icon-decorative-color: var(--message-border-color); --with-close-close-color: var(--message-border-color); --link-color: var(--fa-dk-red); --link-hover-color: var(--fa-red); --table-background: var(--red0); --table-th-background: var(--red2); --table-row-background: var(--red1); --table-striped-row-background: var(--red0); --table-cell-background: transparent; --table-cell-border-color: var(--red2); --table-hover-background-color: var(--red2); --table-th-border-color: var(--red2); --tag-background: var(--fa-red); --tag-color: var(--fa-navy); --tag-link-hover-color: var(--fa-dk-red); --label-color: var(--dk-red); --label-required-color: var(--fa-dk-red); --input-border-color: var(--fa-red); --input-affix-background: var(--input-border-color); --card-background: var(--white); --card-color: var(--fa-dk-red); --card-link-background: var(--card-background); --card-link-color: var(--card-color); --card-link-hover-background: var(--white); --card-link-hover-color: var(--card-color); --card-link-hover-border-color: var(--card-color); --card-header-background: var(--fa-red); --card-header-color: var(--fa-navy); --card-header-link-hover-background: var(--card-link-hover-color); --card-header-link-hover-color: var(--card-link-hover-background); } .info { --button-background: var(--fa-blue); --button-hover-background: var(--fa-dk-blue); --button-active-color: var(--button-background); --button-disabled-background: var(--button-background); --message-background: var(--white); --message-border-color: var(--fa-dk-blue); --message-with-icon-decorative-color: var(--message-border-color); --with-close-close-color: var(--message-border-color); --border-color: var(--blue3); --link-color: var(--fa-dk-blue); --link-hover-color: var(--fa-blue); --table-background: var(--blue0); --table-th-background: var(--blue2); --table-row-background: var(--blue1); --table-striped-row-background: var(--blue0); --table-cell-background: transparent; --table-cell-border-color: var(--blue2); --table-hover-background-color: var(--blue2); --table-th-border-color: var(--blue2); --tag-background: var(--fa-blue); --tag-color: var(--fa-navy); --tag-link-hover-color: var(--fa-dk-blue); --label-color: var(--fa-dk-blue); --label-required-color: var(--fa-dk-blue); --input-border-color: var(--fa-blue); --input-affix-background: var(--input-border-color); --card-background: var(--white); --card-color: var(--fa-dk-blue); --card-link-background: var(--card-background); --card-link-color: var(--card-color); --card-link-hover-background: var(--white); --card-link-hover-color: var(--card-color); --card-link-hover-border-color: var(--card-color); --card-header-background: var(--fa-blue); --card-header-color: var(--fa-navy); --card-header-link-hover-background: var(--card-link-hover-color); --card-header-link-hover-color: var(--card-link-hover-background); } /* color state variables */ .gray { --button-background: var(--fa-gravy); --button-hover-background: var(--fa-md-gravy); --button-active-color: var(--button-background); --button-disabled-background: var(--button-background); --message-background: var(--white); --message-border-color: var(--fa-md-gravy); --message-with-icon-decorative-color: var(--message-border-color); --with-close-close-color: var(--message-border-color); --link-color: var(--fa-md-gravy); --link-hover-color: var(--fa-gravy); --table-background: var(--gray-50); --table-th-background: var(--gray-100); --table-row-background: var(--gray-50); --table-striped-row-background: var(--gray-100); --table-cell-background: transparent; --table-cell-border-color: var(--gray-300); --table-hover-background-color: var(--gray-100); --table-th-border-color: var(--gray-300); --tag-background: var(--fa-gravy); --tag-color: var(--fa-navy); --tag-link-hover-color: var(--fa-dk-blue); --fieldset-border-color: var(--fa-gravy); --legend-color: var(--fa-md-gravy); --card-background: var(--white); --card-color: var(--fa-md-gravy); --card-link-background: var(--card-background); --card-link-color: var(--card-color); --card-link-hover-background: var(--white); --card-link-hover-color: var(--card-color); --card-link-hover-border-color: var(--card-color); --card-header-background: var(--fa-gravy); --card-header-color: var(--fa-navy); --card-header-link-hover-background: var(--card-link-hover-color); --card-header-link-hover-color: var(--card-link-hover-background); } .red { --button-background: var(--fa-red); --button-hover-background: var(--fa-dk-red); --button-active-color: var(--button-background); --button-disabled-background: var(--button-background); --message-background: var(--white); --message-border-color: var(--fa-dk-red); --message-with-icon-decorative-color: var(--message-border-color); --with-close-close-color: var(--message-border-color); --border-color: var(--red3); --link-color: var(--fa-dk-red); --link-hover-color: var(--fa-red); --table-background: var(--red0); --table-th-background: var(--red1); --table-row-background: var(--red0); --table-striped-row-background: var(--red1); --table-cell-background: transparent; --table-cell-border-color: var(--red2); --table-hover-background-color: var(--red1); --table-th-border-color: var(--red2); --tag-background: var(--fa-red); --tag-color: var(--fa-navy); --tag-link-hover-color: var(--fa-dk-red); --fieldset-border-color: var(--fa-red); --legend-color: var(--fa-dk-red); --card-background: var(--white); --card-color: var(--fa-dk-red); --card-link-background: var(--card-background); --card-link-color: var(--card-color); --card-link-hover-background: var(--white); --card-link-hover-color: var(--card-color); --card-link-hover-border-color: var(--card-color); --card-header-background: var(--fa-red); --card-header-color: var(--fa-navy); --card-header-link-hover-background: var(--card-link-hover-color); --card-header-link-hover-color: var(--card-link-hover-background); } .purple { --button-background: var(--fa-purple); --button-hover-background: var(--fa-dk-purple); --button-active-color: var(--button-background); --button-disabled-background: var(--button-background); --message-background: var(--white); --message-border-color: var(--fa-dk-purple); --message-with-icon-decorative-color: var(--message-border-color); --with-close-close-color: var(--message-border-color); --border-color: var(--grape3); --link-color: var(--fa-dk-purple); --link-hover-color: var(--fa-purple); --table-background: var(--grape0); --table-th-background: var(--grape1); --table-row-background: var(--grape0); --table-striped-row-background: var(--grape1); --table-cell-background: transparent; --table-cell-border-color: var(--grape2); --table-hover-background-color: var(--grape1); --table-th-border-color: var(--grape2); --tag-background: var(--fa-purple); --tag-color: var(--fa-navy); --tag-link-hover-color: var(--fa-dk-purple); --fieldset-border-color: var(--fa-purple); --legend-color: var(--fa-dk-purple); --card-background: var(--white); --card-color: var(--fa-dk-purple); --card-link-background: var(--card-background); --card-link-color: var(--card-color); --card-link-hover-background: var(--white); --card-link-hover-color: var(--card-color); --card-link-hover-border-color: var(--card-color); --card-header-background: var(--fa-purple); --card-header-color: var(--fa-navy); --card-header-link-hover-background: var(--card-link-hover-color); --card-header-link-hover-color: var(--card-link-hover-background); } .violet { --button-background: var(--fa-violet); --button-hover-background: var(--fa-dk-violet); --button-active-color: var(--button-background); --button-disabled-background: var(--button-background); --message-background: var(--white); --message-border-color: var(--fa-dk-violet); --message-with-icon-decorative-color: var(--message-border-color); --with-close-close-color: var(--message-border-color); --border-color: var(--violet3); --link-color: var(--fa-dk-violet); --link-hover-color: var(--fa-violet); --table-background: var(--violet0); --table-th-background: var(--violet1); --table-row-background: var(--violet0); --table-striped-row-background: var(--violet1); --table-cell-background: transparent; --table-cell-border-color: var(--violet2); --table-hover-background-color: var(--violet1); --table-th-border-color: var(--violet2); --tag-background: var(--fa-violet); --tag-color: var(--fa-navy); --tag-link-hover-color: var(--fa-dk-violet); --fieldset-border-color: var(--fa-violet); --legend-color: var(--fa-dk-violet); --card-background: var(--white); --card-color: var(--fa-dk-violet); --card-link-background: var(--card-background); --card-link-color: var(--card-color); --card-link-hover-background: var(--white); --card-link-hover-color: var(--card-color); --card-link-hover-border-color: var(--card-color); --card-header-background: var(--fa-violet); --card-header-color: var(--fa-navy); --card-header-link-hover-background: var(--card-link-hover-color); --card-header-link-hover-color: var(--card-link-hover-background); } .blue { --button-background: var(--fa-blue); --button-hover-background: var(--fa-dk-blue); --button-active-color: var(--button-background); --button-disabled-background: var(--button-background); --message-background: var(--white); --message-border-color: var(--fa-dk-blue); --message-with-icon-decorative-color: var(--message-border-color); --with-close-close-color: var(--message-border-color); --border-color: var(--blue3); --link-color: var(--fa-dk-blue); --link-hover-color: var(--fa-blue); --table-background: var(--blue0); --table-th-background: var(--blue1); --table-row-background: var(--blue0); --table-striped-row-background: var(--blue1); --table-cell-background: transparent; --table-cell-border-color: var(--blue2); --table-hover-background-color: var(--blue1); --table-th-border-color: var(--blue2); --tag-background: var(--fa-blue); --tag-color: var(--fa-navy); --tag-link-hover-color: var(--fa-dk-blue); --fieldset-border-color: var(--fa-blue); --legend-color: var(--fa-dk-blue); --card-background: var(--white); --card-color: var(--fa-dk-blue); --card-link-background: var(--card-background); --card-link-color: var(--card-color); --card-link-hover-background: var(--white); --card-link-hover-color: var(--card-color); --card-link-hover-border-color: var(--card-color); --card-header-background: var(--fa-blue); --card-header-color: var(--fa-navy); --card-header-link-hover-background: var(--card-link-hover-color); --card-header-link-hover-color: var(--card-link-hover-background); } .teal { --button-background: var(--fa-teal); --button-hover-background: var(--fa-dk-teal); --button-active-color: var(--button-background); --button-disabled-background: var(--button-background); --message-background: var(--white); --message-border-color: var(--fa-dk-teal); --message-with-icon-decorative-color: var(--message-border-color); --with-close-close-color: var(--message-border-color); --border-color: var(--teal3); --link-color: var(--fa-dk-teal); --link-hover-color: var(--fa-teal); --table-background: var(--teal0); --table-th-background: var(--teal1); --table-row-background: var(--teal0); --table-striped-row-background: var(--teal1); --table-cell-background: transparent; --table-cell-border-color: var(--teal2); --table-hover-background-color: var(--teal1); --table-th-border-color: var(--teal2); --tag-background: var(--fa-teal); --tag-color: var(--fa-navy); --tag-link-hover-color: var(--fa-dk-teal); --fieldset-border-color: var(--fa-teal); --legend-color: var(--fa-dk-teal); --card-background: var(--white); --card-color: var(--fa-dk-teal); --card-link-background: var(--card-background); --card-link-color: var(--card-color); --card-link-hover-background: var(--white); --card-link-hover-color: var(--card-color); --card-link-hover-border-color: var(--card-color); --card-header-background: var(--fa-teal); --card-header-color: var(--fa-navy); --card-header-link-hover-background: var(--card-link-hover-color); --card-header-link-hover-color: var(--card-link-hover-background); } .yellow { --button-background: var(--fa-yellow); --button-hover-background: var(--fa-dk-yellow); --button-active-color: var(--button-background); --button-disabled-background: var(--button-background); --message-background: var(--white); --message-border-color: var(--fa-dk-yellow); --message-with-icon-decorative-color: var(--message-border-color); --with-close-close-color: var(--message-border-color); --border-color: var(--yellow3); --link-color: var(--fa-dk-yellow); --link-hover-color: var(--fa-yellow); --table-background: var(--yellow0); --table-th-background: var(--yellow1); --table-row-background: var(--yellow0); --table-striped-row-background: var(--yellow1); --table-cell-background: transparent; --table-cell-border-color: var(--yellow2); --table-hover-background-color: var(--yellow1); --table-th-border-color: var(--yellow2); --tag-background: var(--fa-yellow); --tag-color: var(--fa-navy); --tag-link-hover-color: var(--fa-md-gravy); --fieldset-border-color: var(--fa-yellow); --legend-color: var(--fa-dk-yellow); --card-background: var(--white); --card-color: var(--fa-dk-yellow); --card-link-background: var(--card-background); --card-link-color: var(--card-color); --card-link-hover-background: var(--white); --card-link-hover-color: var(--card-color); --card-link-hover-border-color: var(--card-color); --card-header-background: var(--fa-yellow); --card-header-color: var(--fa-navy); --card-header-link-hover-background: var(--card-link-hover-color); --card-header-link-hover-color: var(--card-link-hover-background); } /* add-ons */ i[class*="fa-"],.svg-inline--fa { --spacing-inline: var(--spacing-6xs); } /* misc state variables */ .inverted { --body-background: var(--fa-navy); --body-color: var(--white); --button-border-color: var(--white); --button-active-border-color: var(--button-border-color); --button-color: var(--white); --button-hover-color: var(--button-color); --button-active-background: var(--button-color); --message-color: var(--body-color); --with-close-close-hover-color: var(--fa-red); --border-color: var(--fa-dk-gravy); --card-border-color: var(--white); --card-section-color: var(--card-color); --card-section-border: 0.125em solid var(--body-background); --card-link-box-shadow: 0 var(--with-shadow-box-shadow-width) 0 var(--fa-dk-gravy); background: #f0f1f3; background: var(--body-background); color: #183153; color: var(--body-color); } .inverted, .inverted .default, .inverted.default { --button-background: var(--fa-dk-navy); --button-hover-background: var(--fa-navy); --button-active-color: var(--button-background); --button-disabled-background: var(--button-background); --message-background: var(--fa-dk-navy); --message-border-color: var(--fa-dk-navy); --message-with-icon-decorative-color: var(--fa-md-gravy); --with-close-times-color: var(--fa-dk-navy); --with-close-close-color: var(--white); --link-color: var(--fa-blue); --link-hover-color: var(--fa-dk-blue); --tag-background: var(--fa-dk-gravy); --tag-color: var(--white); --tag-link-hover-color: var(--fa-blue); --card-background: var(--fa-dk-navy); --card-color: var(--white); --card-link-background: var(--card-background); --card-link-color: var(--card-color); --card-link-hover-background: var(--card-background); --card-link-hover-color: var(--fa-blue); --card-link-hover-border-color: var(--card-link-hover-color); --card-header-background: var(--white); --card-header-color: var(--fa-navy); --card-header-link-hover-background: var(--card-link-hover-color); --card-header-link-hover-color: var(--card-link-hover-background); --table-background: var(--gray-50); --table-th-background: var(--gray-100); --table-row-background: var(--gray-50); --table-striped-row-background: var(--gray-100); --table-cell-border-color: var(--gray-300); --table-cell-background: transparent; --table-hover-background-color: var(--gray-400); --table-th-border-color: var(--gray-300); --fieldset-border-color: var(--gray-200); --legend-color: var(--gray-400); } .inverted .primary, .inverted.primary { --button-background: var(--fa-dk-navy); --button-hover-background: var(--fa-navy); --button-active-color: var(--button-background); --button-disabled-background: var(--button-background); --message-background: var(--fa-dk-navy); --message-border-color: var(--fa-dk-navy); --message-with-icon-decorative-color: var(--fa-md-gravy); --with-close-times-color: var(--fa-dk-navy); --with-close-close-color: var(--white); --link-color: var(--fa-blue); --link-hover-color: var(--fa-dk-blue); --tag-background: var(--fa-gravy); --tag-color: var(--fa-navy); --tag-link-hover-color: var(--fa-dk-blue); --card-background: var(--fa-dk-navy); --card-color: var(--white); --card-link-background: var(--card-background); --card-link-color: var(--card-color); --card-link-hover-background: var(--card-background); --card-link-hover-color: var(--fa-blue); --card-link-hover-border-color: var(--card-link-hover-color); --card-header-background: var(--white); --card-header-color: var(--fa-navy); --card-header-link-hover-background: var(--card-link-hover-color); --card-header-link-hover-color: var(--card-link-hover-background); --table-background: var(--gray-50); --table-th-background: var(--gray-100); --table-row-background: var(--gray-50); --table-striped-row-background: var(--gray-100); --table-cell-border-color: var(--gray-300); --table-cell-background: transparent; --table-hover-background-color: var(--gray-400); --table-th-border-color: var(--gray-300); --fieldset-border-color: var(--gray-200); --legend-color: var(--gray-400); } .inverted .secondary, .inverted.secondary { --button-background: var(--fa-navy); --button-hover-background: var(--fa-dk-gravy); --button-active-color: var(--button-background); --button-disabled-background: var(--button-background); --message-background: var(--fa-navy); --message-border-color: var(--fa-dk-gravy); --message-with-icon-decorative-color: var(--fa-md-gravy); --with-close-close-color: var(--fa-gravy); --link-color: var(--fa-md-gravy); --link-hover-color: var(--fa-blue); --tag-background: var(--fa-dk-navy); --tag-color: var(--fa-lt-gravy); --tag-link-hover-color: var(--fa-blue); --card-border-width: 0.125em; --card-border-color: var(--fa-dk-gravy); --card-color: var(--white); --card-background: var(--fa-navy); --card-link-background: var(--card-background); --card-link-color: var(--card-color); --card-link-hover-background: var(--fa-lt-gravy); --card-link-hover-color: var(--fa-dk-navy); --card-link-hover-border-color: var(--fa-lt-gravy); --card-header-background: var(--fa-md-gravy); --card-header-color: var(--fa-navy); --card-header-link-hover-background: var(--fa-navy); --card-header-link-hover-color: var(--card-link-hover-background); --card-section-border: 0.125em solid var(--card-border-color); --border-color: var(--gray-400); --table-background: var(--gray-50); --table-th-background: var(--gray-100); --table-row-background: var(--gray-50); --table-striped-row-background: var(--gray-100); --table-cell-background: transparent; --table-cell-border-color: var(--gray-300); --table-hover-background-color: var(--gray-100); --table-th-border-color: var(--gray-300); } .inverted .accent, .inverted.accent { --button-background: var(--fa-dk-navy); --button-color: var(--fa-yellow); --button-border-color: var(--button-color); --button-hover-background: var(--button-background); --button-hover-color: var(--fa-dk-yellow); --button-active-background: var(--button-color); --button-active-color: var(--button-background); --button-active-border-color: var(--button-active-background); --button-disabled-background: var(--button-background); --message-background: var(--fa-dk-navy); --message-border-color: var(--fa-yellow); --message-with-icon-decorative-color: var(--message-border-color); --with-close-close-color: var(--message-border-color); --link-color: var(--fa-yellow); --link-hover-color: var(--fa-dk-yellow); --tag-background: var(--fa-dk-yellow); --tag-color: var(--fa-navy); --tag-link-hover-color: var(--fa-dk-gravy); --card-color: var(--white); --card-background: var(--fa-dk-navy); --card-link-background: var(--card-background); --card-link-color: var(--card-color); --card-link-hover-background: var(--fa-dk-yellow); --card-link-hover-color: var(--card-color); --card-link-hover-border-color: var(--card-link-hover-background); --card-header-background: var(--fa-lt-gravy); --card-header-color: var(--fa-dk-navy); --card-header-link-hover-background: var(--card-link-hover-color); --card-header-link-hover-color: var(--card-link-hover-background); --card-section-color: var(--white); --card-section-border: 0.125em solid var(--fa-navy); --border-color: var(--fa-dk-yellow); --table-background: var(--teal0); --table-th-background: var(--teal1); --table-row-background: var(--teal0); --table-striped-row-background: var(--teal1); --table-cell-background: transparent; --table-cell-border-color: var(--teal2); --table-hover-background-color: var(--teal1); --table-th-border-color: var(--teal2); --fieldset-border-color: var(--fa-yellow); --legend-color: var(--fa-dk-yellow); } .inverted .light, .inverted.light, .inverted .gray, .inverted.gray { --button-background: var(--body-background); --button-color: var(--fa-gravy); --button-border-color: var(--button-color); --button-hover-background: var(--button-background); --button-hover-color: var(--fa-md-gravy); --button-active-background: var(--button-color); --button-active-color: var(--button-background); --button-active-border-color: var(--button-active-background); --button-disabled-background: var(--button-background); --message-background: var(--fa-dk-navy); --message-border-color: var(--fa-md-gravy); --message-with-icon-decorative-color: var(--message-border-color); --with-close-close-color: var(--message-border-color); --link-color: var(--fa-md-gravy); --link-hover-color: var(--fa-dk-gravy); --tag-background: var(--fa-dk-gravy); --tag-color: var(--white); --tag-link-hover-color: var(--fa-blue); --card-background: var(--fa-dk-navy); --card-color: var(--fa-md-gravy); --card-link-background: var(--card-background); --card-link-color: var(--card-color); --card-link-hover-background: var(--fa-dk-navy); --card-link-hover-color: var(--card-color); --card-link-hover-border-color: var(--card-color); --card-header-background: var(--fa-dk-gravy); --card-header-color: var(--white); --card-header-link-hover-background: var(--card-link-hover-color); --card-header-link-hover-color: var(--card-link-hover-background); --table-background: var(--gray-50); --table-th-background: var(--gray-100); --table-row-background: var(--gray-50); --table-striped-row-background: var(--gray-100); --table-cell-background: transparent; --table-cell-border-color: var(--gray-300); --table-hover-background-color: var(--gray-100); --table-th-border-color: var(--gray-300); --fieldset-border-color: var(--fa-gravy); --legend-color: var(--fa-md-gravy); } .inverted .danger, .inverted.danger, .inverted .red, .inverted.red { --button-background: var(--body-background); --button-color: var(--fa-red); --button-border-color: var(--button-color); --button-hover-background: var(--button-background); --button-hover-color: var(--fa-dk-red); --button-active-background: var(--button-color); --button-active-color: var(--button-background); --button-active-border-color: var(--button-active-background); --button-disabled-background: var(--button-background); --message-background: var(--fa-dk-navy); --message-border-color: var(--fa-red); --message-with-icon-decorative-color: var(--message-border-color); --with-close-close-color: var(--message-border-color); --link-color: var(--fa-red); --link-hover-color: var(--fa-dk-red); --tag-background: var(--fa-dk-red); --tag-color: var(--white); --tag-link-hover-color: var(--fa-red); --card-background: var(--fa-dk-navy); --card-color: var(--fa-red); --card-link-background: var(--card-background); --card-link-color: var(--card-color); --card-link-hover-background: var(--fa-dk-navy); --card-link-hover-color: var(--card-color); --card-link-hover-border-color: var(--card-color); --card-header-background: var(--fa-dk-red); --card-header-color: var(--white); --card-header-link-hover-background: var(--card-link-hover-color); --card-header-link-hover-color: var(--card-link-hover-background); --border-color: var(--red3); --table-background: var(--red0); --table-th-background: var(--red1); --table-row-background: var(--red0); --table-striped-row-background: var(--red1); --table-cell-background: transparent; --table-cell-border-color: var(--red2); --table-hover-background-color: var(--red1); --table-th-border-color: var(--red2); --fieldset-border-color: var(--fa-red); --legend-color: var(--fa-dk-red); } .inverted .purple, .inverted.purple { --button-background: var(--body-background); --button-color: var(--fa-purple); --button-border-color: var(--button-color); --button-hover-background: var(--button-background); --button-hover-color: var(--fa-dk-purple); --button-active-background: var(--button-color); --button-active-color: var(--button-background); --button-active-border-color: var(--button-active-background); --button-disabled-background: var(--button-background); --message-background: var(--fa-dk-navy); --message-border-color: var(--fa-purple); --message-with-icon-decorative-color: var(--message-border-color); --with-close-close-color: var(--message-border-color); --link-color: var(--fa-purple); --link-hover-color: var(--fa-dk-purple); --tag-background: var(--fa-dk-purple); --tag-color: var(--white); --tag-link-hover-color: var(--fa-purple); --card-background: var(--fa-dk-navy); --card-color: var(--fa-purple); --card-link-background: var(--card-background); --card-link-color: var(--card-color); --card-link-hover-background: var(--fa-dk-navy); --card-link-hover-color: var(--card-color); --card-link-hover-border-color: var(--card-color); --card-header-background: var(--fa-dk-purple); --card-header-color: var(--white); --card-header-link-hover-background: var(--card-link-hover-color); --card-header-link-hover-color: var(--card-link-hover-background); --border-color: var(--grape3); --table-background: var(--grape0); --table-th-background: var(--grape1); --table-row-background: var(--grape0); --table-striped-row-background: var(--grape1); --table-cell-background: transparent; --table-cell-border-color: var(--grape2); --table-hover-background-color: var(--grape1); --table-th-border-color: var(--grape2); --fieldset-border-color: var(--fa-purple); --legend-color: var(--fa-dk-purple); } .inverted .violet, .inverted.violet { --button-background: var(--body-background); --button-color: var(--fa-violet); --button-border-color: var(--button-color); --button-hover-background: var(--button-background); --button-hover-color: var(--fa-dk-violet); --button-active-background: var(--button-color); --button-active-color: var(--button-background); --button-active-border-color: var(--button-active-background); --button-disabled-background: var(--button-background); --message-background: var(--fa-dk-navy); --message-border-color: var(--fa-violet); --message-with-icon-decorative-color: var(--message-border-color); --with-close-close-color: var(--message-border-color); --link-color: var(--fa-violet); --link-hover-color: var(--fa-dk-violet); --tag-background: var(--fa-dk-violet); --tag-color: var(--white); --tag-link-hover-color: var(--fa-violet); --card-background: var(--fa-dk-navy); --card-color: var(--fa-violet); --card-link-background: var(--card-background); --card-link-color: var(--card-color); --card-link-hover-background: var(--fa-dk-navy); --card-link-hover-color: var(--card-color); --card-link-hover-border-color: var(--card-color); --card-header-background: var(--fa-dk-violet); --card-header-color: var(--white); --card-header-link-hover-background: var(--card-link-hover-color); --card-header-link-hover-color: var(--card-link-hover-background); --border-color: var(--violet3); --table-background: var(--violet0); --table-th-background: var(--violet1); --table-row-background: var(--violet0); --table-striped-row-background: var(--violet1); --table-cell-background: transparent; --table-cell-border-color: var(--violet2); --table-hover-background-color: var(--violet1); --table-th-border-color: var(--violet2); --fieldset-border-color: var(--fa-violet); --legend-color: var(--fa-dk-violet); } .inverted .info, .inverted.info, .inverted .blue, .inverted.blue { --button-background: var(--body-background); --button-color: var(--fa-blue); --button-border-color: var(--button-color); --button-hover-background: var(--button-background); --button-hover-color: var(--fa-dk-blue); --button-active-background: var(--button-color); --button-active-color: var(--button-background); --button-active-border-color: var(--button-active-background); --button-disabled-background: var(--button-background); --message-background: var(--fa-dk-navy); --message-border-color: var(--fa-blue); --message-with-icon-decorative-color: var(--message-border-color); --with-close-close-color: var(--message-border-color); --link-color: var(--fa-blue); --link-hover-color: var(--fa-dk-blue); --tag-background: var(--fa-dk-blue); --tag-color: var(--white); --tag-link-hover-color: var(--fa-blue); --card-background: var(--fa-dk-navy); --card-color: var(--fa-blue); --card-link-background: var(--card-background); --card-link-color: var(--card-color); --card-link-hover-background: var(--fa-dk-navy); --card-link-hover-color: var(--card-color); --card-link-hover-border-color: var(--card-color); --card-header-background: var(--fa-dk-blue); --card-header-color: var(--white); --card-header-link-hover-background: var(--card-link-hover-color); --card-header-link-hover-color: var(--card-link-hover-background); --border-color: var(--blue3); --table-background: var(--blue0); --table-th-background: var(--blue1); --table-row-background: var(--blue0); --table-striped-row-background: var(--blue1); --table-cell-background: transparent; --table-cell-border-color: var(--blue2); --table-hover-background-color: var(--blue1); --table-th-border-color: var(--blue2); --fieldset-border-color: var(--fa-blue); --legend-color: var(--fa-dk-blue); } .inverted .success, .inverted.success, .inverted .teal, .inverted.teal { --button-background: var(--body-background); --button-color: var(--fa-teal); --button-border-color: var(--button-color); --button-hover-background: var(--button-background); --button-hover-color: var(--fa-dk-teal); --button-active-background: var(--button-color); --button-active-color: var(--button-background); --button-active-border-color: var(--button-active-background); --button-disabled-background: var(--button-background); --message-background: var(--fa-dk-navy); --message-border-color: var(--fa-teal); --message-with-icon-decorative-color: var(--message-border-color); --with-close-close-color: var(--message-border-color); --link-color: var(--fa-teal); --link-hover-color: var(--fa-dk-teal); --tag-background: var(--fa-dk-teal); --tag-color: var(--white); --tag-link-hover-color: var(--fa-teal); --card-background: var(--fa-dk-navy); --card-color: var(--fa-teal); --card-link-background: var(--card-background); --card-link-color: var(--card-color); --card-link-hover-background: var(--fa-dk-navy); --card-link-hover-color: var(--card-color); --card-link-hover-border-color: var(--card-color); --card-header-background: var(--fa-dk-teal); --card-header-color: var(--white); --card-header-link-hover-background: var(--card-link-hover-color); --card-header-link-hover-color: var(--card-link-hover-background); --border-color: var(--teal3); --table-background: var(--teal0); --table-th-background: var(--teal1); --table-row-background: var(--teal0); --table-striped-row-background: var(--teal1); --table-cell-background: transparent; --table-cell-border-color: var(--teal2); --table-hover-background-color: var(--teal1); --table-th-border-color: var(--teal2); --fieldset-border-color: var(--fa-teal); --legend-color: var(--fa-dk-teal); } .inverted .warning, .inverted.warning, .inverted .yellow, .inverted.yellow { --button-background: var(--body-background); --button-color: var(--fa-yellow); --button-border-color: var(--button-color); --button-hover-background: var(--button-background); --button-hover-color: var(--fa-dk-yellow); --button-active-background: var(--button-color); --button-active-color: var(--button-background); --button-active-border-color: var(--button-active-background); --button-disabled-background: var(--button-background); --message-background: var(--fa-dk-navy); --message-border-color: var(--fa-yellow); --message-with-icon-decorative-color: var(--message-border-color); --with-close-close-color: var(--message-border-color); --link-color: var(--fa-yellow); --link-hover-color: var(--fa-dk-yellow); --tag-background: var(--fa-dk-yellow); --tag-color: var(--fa-navy); --tag-link-hover-color: var(--fa-dk-gravy); --card-background: var(--fa-dk-navy); --card-color: var(--fa-yellow); --card-link-background: var(--card-background); --card-link-color: var(--card-color); --card-link-hover-background: var(--fa-dk-navy); --card-link-hover-color: var(--card-color); --card-link-hover-border-color: var(--card-color); --card-header-background: var(--fa-dk-yellow); --card-header-color: var(--white); --card-header-link-hover-background: var(--card-link-hover-color); --card-header-link-hover-color: var(--card-link-hover-background); --border-color: var(--yellow3); --table-background: var(--yellow0); --table-th-background: var(--yellow1); --table-row-background: var(--yellow0); --table-striped-row-background: var(--yellow1); --table-cell-background: transparent; --table-cell-border-color: var(--yellow2); --table-hover-background-color: var(--yellow1); --table-th-border-color: var(--yellow2); --fieldset-border-color: var(--fa-yellow); --legend-color: var(--fa-dk-yellow); } html { -ms-overflow-style: -ms-autohiding-scrollbar; /* make sure Edge/IE scrollbars are shown when needed but not otherwise */ -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; font-size: 14px; font-size: var(--font-size-root); } @media (min-width: 768px) { html { font-size: 16px; font-size: var(--font-size-root-tablet); } } body { margin: 0; padding: 0; min-height: 100vh; overflow-x: hidden; text-align: left; text-align: var(--text-align); } table { border-collapse: collapse; border-collapse: var(--table-cell-border-collapse); border-spacing: none; border-spacing: var(--table-cell-border-spacing); } th { font-weight: 600; font-weight: var(--table-th-font-weight); } abbr[title], abbr[data-original-title] { cursor: help; text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; } /* lists */ ol,ul,dl { margin: 0; padding: 0; } ol > *,ul > *,dl > * { margin: 0; padding: 0; } blockquote { display: block; margin: 0; } /* links */ a:not([href]), a:not([href]):hover { text-decoration: none; color: inherit; } /* code */ code,pre { background: var(--code-bg); word-wrap: break-word; color: #ff922b; color: var(--code-color); font-family: "Menlo", "Monaco", "Consolas", "Courier New", monospace; font-family: var(--font-family-monospace); font-size: calc(1em * 0.875); font-size: var(--code-font-size); a > & { color: inherit; } } /* horizontal rules */ hr, .hr { -webkit-box-sizing: content-box; box-sizing: content-box; margin: 0; border-width: 0.125em; border-width: var(--hr-border-width); border-style: solid; border-style: var(--hr-border-style); border-color: #c3c6d1; border-color: var(--hr-border-color); padding: 0; height: 0; overflow: visible; } /* default outline styling */ [tabindex="-1"]:focus:not(.focus-visible) { outline: 0 !important; } [tabindex="-1"]:focus:not(:focus-visible) { outline: 0 !important; } /* forms */ fieldset { border: 0; padding: 0; } legend { margin: 0; } select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; background-color: transparent; } /* buttons */ button, .button { cursor: pointer; font-family: inherit; } body { background-color: #f0f1f3; background-color: var(--body-background); text-align: var(--body-text-align); line-height: 1.5; line-height: var(--line-height-base); color: #183153; color: var(--body-color); font-family: cera-round-pro, "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-family: var(--font-family-base); font-size: 1em; font-size: var(--font-size-base); font-weight: var(--font-weight-base); -webkit-font-feature-settings: "ss01" on; font-feature-settings: "ss01" on; /* Turns on alternate 'a' character without the top arm */ } /* Sets global focus style. */ :focus,.focus,.focused { outline: solid calc(1em * 3 / 16) #74c0fc; outline: var(--focus-outline); outline-offset: calc(1em * 1 / 16); outline-offset: var(--focus-outline-offset); } /* lists */ /* stylelint-disable no-descending-specificity */ ol,ul,dl { --margin-top: var(--list-margin-top); --margin-bottom: var(--list-margin-bottom); --padding-left: var(--list-padding-left); --line-height: var(--list-line-height); --list-style-type: disc; margin-top: var(--margin-top); margin-bottom: var(--margin-bottom); padding-left: var(--padding-left); list-style-type: var(--list-style-type); line-height: var(--line-height) } ol:first-child,ul:first-child,dl:first-child { --margin-top: 0; } ol:last-child,ul:last-child,dl:last-child { --margin-bottom: 0; } /* stylelint-enable no-descending-specificity */ ol li,ul li,dl li { --display: list-item; display: var(--display); } ol { --list-style-type: decimal; } ul { --list-style-type: disc; } ol ul, ul ul { --list-style-type: circle; } ol ul, ul ol, ul ul, ol ol { --margin-top: 0; --margin-bottom: var(--list-nested-margin-bottom); } ol ol ul, ol ul ul, ul ol ul, ul ul ul { --list-style-type: square; } dl { --margin-bottom: var(--spacing-md); margin-top: 0; margin-bottom: var(--margin-bottom); } dt { --display: block; --margin-right: 0; --margin-bottom: var(--spacing-4xs); display: var(--display); margin-top: 0; margin-right: var(--margin-right); margin-bottom: var(--margin-bottom); font-weight: 600; font-weight: var(--font-weight-semibold); } dd { --display: block; --margin-bottom: var(--spacing-sm); --margin-left: 0; display: var(--display); margin-top: 0; margin-bottom: var(--margin-bottom); margin-left: var(--margin-left) } dd:last-child { --margin-bottom: 0; } dl.display-inline { --padding-left: 0; } dl.display-inline dt { --display: inline-block; --margin-right: var(--spacing-4xs); } dl.display-inline dd { --display: inline } dl.display-inline dd::after { white-space: pre; content: "\a"; } /* stylelint-disable no-descending-specificity */ h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { --margin-bottom: var(--spacing-sm); --line-height: var(--line-height-heading); margin-top: 2em; margin-top: var(--headings-margin-top); margin-bottom: var(--margin-bottom); line-height: var(--line-height); font-family: cera-round-pro, "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-family: var(--headings-font-family); font-weight: 600; font-weight: var(--headings-font-weight) } h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child,.h1:first-child,.h2:first-child,.h3:first-child,.h4:first-child,.h5:first-child,.h6:first-child { margin-top: 0; } h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child,h6:last-child,.h1:last-child,.h2:last-child,.h3:last-child,.h4:last-child,.h5:last-child,.h6:last-child { margin-bottom: 0; } /* stylelint-enable no-descending-specificity */ h1, .h1 { --margin-bottom: var(--h1-margin-bottom); --line-height: var(--h1-line-height); font-size: calc(1em * 2.5); font-size: var(--h1-font-size); } h2, .h2 { --margin-bottom: var(--h2-margin-bottom); --line-height: var(--h2-line-height); font-size: calc(1em * 2); font-size: var(--h2-font-size); } h3, .h3 { --margin-bottom: var(--h3-margin-bottom); --line-height: var(--h3-line-height); font-size: calc(1em * 1.5); font-size: var(--h3-font-size); } h4, .h4 { --margin-bottom: var(--h4-margin-bottom); --line-height: var(--h4-line-height); font-size: calc(1em * 1.25); font-size: var(--h4-font-size); } h5, .h5 { --margin-bottom: var(--h5-margin-bottom); --line-height: var(--h5-line-height); font-size: 1em; font-size: var(--h5-font-size); } h6, .h6 { --margin-bottom: var(--h6-margin-bottom); --line-height: var(--h6-line-height); font-size: calc(1em * 0.75); font-size: var(--h6-font-size); } p, .p { margin-top: 0; margin-top: var(--paragraph-margin-top); margin-bottom: calc(1em * 1); margin-bottom: var(--paragraph-margin-bottom); line-height: 1.5; line-height: var(--line-height-copy) } p:last-child, .p:last-child { --paragraph-margin-bottom: 0; } b, .b, strong, .strong { --font-weight: var(--font-weight-bold); font-weight: 700; font-weight: var(--font-weight-bold); } i, .i, em, .em { --font-style: italic; font-style: var(--font-style); } small, .small { --font-size: var(--font-size-xs); font-size: var(--font-size); } del, .del, s, .s, .strike { --text-decoration: line-through; -webkit-text-decoration: var(--text-decoration); text-decoration: var(--text-decoration); } sub, .sub, sup, .sup { position: relative; vertical-align: baseline; line-height: 0; line-height: var(--line-height-0); font-size: calc(1em * 0.75); font-size: var(--font-size-xs); } sub, .sub { bottom: -0.25em; } sup, .sup { top: -0.5em; } ::-webkit-input-placeholder { opacity: 0.3; color: inherit; } ::-moz-placeholder { opacity: 0.3; color: inherit; } :-ms-input-placeholder { opacity: 0.3; color: inherit; } ::-ms-input-placeholder { opacity: 0.3; color: inherit; } ::placeholder { opacity: 0.3; color: inherit; } /* blockquotes */ blockquote, .blockquote { margin-bottom: calc(1em * 1.25); margin-bottom: var(--blockquote-margin-bottom); border-left: calc(1em * 4 / 16) solid #a5abbb; border-left: var(--blockquote-quote-border-width) var(--blockquote-quote-border-style) var(--blockquote-quote-border-color); padding-left: calc(1em * 1.5); padding-left: var(--blockquote-quote-indent); font-family: fa-livory, "Georgia", "Times New Roman", "Times", serif; font-family: var(--blockquote-font-family); font-size: inherit; font-size: var(--blockquote-font-size) } blockquote:last-child, .blockquote:last-child { --blockquote-margin-bottom: 0; } blockquote footer, .blockquote-footer { margin-top: calc(calc(1em * 1) * -1); margin-top: var(--blockquote-footer-margin-top); padding-top: calc(1em * 1.25); padding-top: var(--blockquote-footer-padding-top); color: #6d7790; color: var(--blockquote-footer-color); font-family: cera-round-pro, "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-family: var(--blockquote-footer-font-family); font-size: calc(1em * 0.875); font-size: var(--blockquote-footer-font-size); } /* tables */ table { margin-bottom: calc(1em * 1.5); margin-bottom: var(--table-margin-bottom) } table:last-child { --table-margin-bottom: 0; } table caption { text-align: left; text-align: var(--table-caption-text-align); color: #515e7b; color: var(--table-caption-color); } td, th { padding: 0.5em 0.75em 0.5em 0.75em; padding: var(--table-cell-spacing-top) var(--table-cell-spacing-right) var(--table-cell-spacing-bottom) var(--table-cell-spacing-left); text-align: left; text-align: var(--table-cell-text-align); } .container { width: auto; width: var(--max-width, auto); } .container-fluid { max-width: 100%; max-width: var(--grid-fluid-max-width); } .container, .container-fluid { --outer-gutter-width: var(--grid-outer-gutter-width); --min-width: var(--grid-min-width); margin-right: auto; margin-left: auto; padding-right: var(--outer-gutter-width); padding-left: var(--outer-gutter-width); min-width: var(--min-width); } .row { --margin-left: calc(var(--grid-gutter-x-width) * -1); --margin-right: calc(var(--grid-gutter-x-width) * -1); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-preferred-size: auto; flex-basis: auto; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; flex-direction: var(--grid-row-direction); -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 1; flex-shrink: 1; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-wrap: var(--grid-wrap); flex-wrap: var(--grid-wrap); margin-right: var(--margin-right); margin-left: var(--margin-left) } .row.align-top { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .row.align-middle { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .row.align-bottom { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .row.align-stretch { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .row > div,.row > main,.row > aside,.row > header,.row > footer,.row > nav,.row > section,.row > article,.row > ol,.row > ul,.row > li,.row > p,.row > blockquote { --padding-left: var(--grid-gutter-x-width); --padding-right: var(--grid-gutter-x-width); padding-right: var(--padding-right); padding-left: var(--padding-left); } /* no gutters */ .row.flush { --margin-left: 0; --margin-right: 0 } .row.flush > div,.row.flush > main,.row.flush > aside,.row.flush > header,.row.flush > footer,.row.flush > nav,.row.flush > section,.row.flush > article,.row.flush > ol,.row.flush > ul,.row.flush > li,.row.flush > p,.row.flush > blockquote { --padding-left: 0; --padding-right: 0; } /* extra roomy gutters */ .row.roomy { --grid-gutter-x-width: 1rem; --grid-gutter-y-width: 2rem; --grid-outer-gutter-width: 2rem; } .row.reverse { --grid-row-direction: row-reverse; } .column, .column-1, .column-2, .column-3, .column-4, .column-5, .column-6, .column-7, .column-8, .column-9, .column-10, .column-11, .column-12, .offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-12 { --order: 0; -ms-flex-preferred-size: auto; flex-basis: auto; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-ordinal-group: var(--order); -ms-flex-order: var(--order); order: var(--order); } .column { -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .column-1 { -ms-flex-preferred-size: 8.33333333%; flex-basis: 8.33333333%; max-width: 8.33333333%; } .column-2 { -ms-flex-preferred-size: 16.66666667%; flex-basis: 16.66666667%; max-width: 16.66666667%; } .column-3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } .column-4 { -ms-flex-preferred-size: 33.33333333%; flex-basis: 33.33333333%; max-width: 33.33333333%; } .column-5 { -ms-flex-preferred-size: 41.66666667%; flex-basis: 41.66666667%; max-width: 41.66666667%; } .column-6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } .column-7 { -ms-flex-preferred-size: 58.33333333%; flex-basis: 58.33333333%; max-width: 58.33333333%; } .column-8 { -ms-flex-preferred-size: 66.66666667%; flex-basis: 66.66666667%; max-width: 66.66666667%; } .column-9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } .column-10 { -ms-flex-preferred-size: 83.33333333%; flex-basis: 83.33333333%; max-width: 83.33333333%; } .column-11 { -ms-flex-preferred-size: 91.66666667%; flex-basis: 91.66666667%; max-width: 91.66666667%; } .column-12 { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } .offset-0 { margin-left: 0; } .offset-1 { margin-left: 8.33333333%; } .offset-2 { margin-left: 16.66666667%; } .offset-3 { margin-left: 25%; } .offset-4 { margin-left: 33.33333333%; } .offset-5 { margin-left: 41.66666667%; } .offset-6 { margin-left: 50%; } .offset-7 { margin-left: 58.33333333%; } .offset-8 { margin-left: 66.66666667%; } .offset-9 { margin-left: 75%; } .offset-10 { margin-left: 83.33333333%; } .offset-11 { margin-left: 91.66666667%; } .order-first { --order: -1; } .order-last { --order: 1; } @media (min-width: 768px) { .row.tablet\:flush { --margin-left: 0; --margin-right: 0 } .row.tablet\:flush > div,.row.tablet\:flush > main,.row.tablet\:flush > aside,.row.tablet\:flush > header,.row.tablet\:flush > footer,.row.tablet\:flush > nav,.row.tablet\:flush > section,.row.tablet\:flush > article,.row.tablet\:flush > ol,.row.tablet\:flush > ul,.row.tablet\:flush > li,.row.tablet\:flush > p,.row.tablet\:flush > blockquote { --padding-left: 0; --padding-right: 0; } .row.tablet\:roomy { --grid-gutter-x-width: 1rem; --grid-gutter-y-width: 2rem; --grid-outer-gutter-width: 2rem; } .row.tablet\:reverse { --grid-row-direction: row-reverse; } .row.tablet\:align-top { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .row.tablet\:align-middle { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .row.tablet\:align-bottom { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .row.tablet\:align-stretch { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .tablet\:column, .tablet\:column-1, .tablet\:column-2, .tablet\:column-3, .tablet\:column-4, .tablet\:column-5, .tablet\:column-6, .tablet\:column-7, .tablet\:column-8, .tablet\:column-9, .tablet\:column-10, .tablet\:column-11, .tablet\:column-12, .tablet\:offset-0, .tablet\:offset-1, .tablet\:offset-2, .tablet\:offset-3, .tablet\:offset-4, .tablet\:offset-5, .tablet\:offset-6, .tablet\:offset-7, .tablet\:offset-8, .tablet\:offset-9, .tablet\:offset-10, .tablet\:offset-11, .tablet\:offset-12 { --order: 0; -ms-flex-preferred-size: auto; flex-basis: auto; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-ordinal-group: var(--order); -ms-flex-order: var(--order); order: var(--order); } .tablet\:column { -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .tablet\:column-1 { -ms-flex-preferred-size: 8.33333333%; flex-basis: 8.33333333%; max-width: 8.33333333%; } .tablet\:column-2 { -ms-flex-preferred-size: 16.66666667%; flex-basis: 16.66666667%; max-width: 16.66666667%; } .tablet\:column-3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } .tablet\:column-4 { -ms-flex-preferred-size: 33.33333333%; flex-basis: 33.33333333%; max-width: 33.33333333%; } .tablet\:column-5 { -ms-flex-preferred-size: 41.66666667%; flex-basis: 41.66666667%; max-width: 41.66666667%; } .tablet\:column-6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } .tablet\:column-7 { -ms-flex-preferred-size: 58.33333333%; flex-basis: 58.33333333%; max-width: 58.33333333%; } .tablet\:column-8 { -ms-flex-preferred-size: 66.66666667%; flex-basis: 66.66666667%; max-width: 66.66666667%; } .tablet\:column-9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } .tablet\:column-10 { -ms-flex-preferred-size: 83.33333333%; flex-basis: 83.33333333%; max-width: 83.33333333%; } .tablet\:column-11 { -ms-flex-preferred-size: 91.66666667%; flex-basis: 91.66666667%; max-width: 91.66666667%; } .tablet\:column-12 { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } .tablet\:offset-0 { margin-left: 0; } .tablet\:offset-1 { margin-left: 8.33333333%; } .tablet\:offset-2 { margin-left: 16.66666667%; } .tablet\:offset-3 { margin-left: 25%; } .tablet\:offset-4 { margin-left: 33.33333333%; } .tablet\:offset-5 { margin-left: 41.66666667%; } .tablet\:offset-6 { margin-left: 50%; } .tablet\:offset-7 { margin-left: 58.33333333%; } .tablet\:offset-8 { margin-left: 66.66666667%; } .tablet\:offset-9 { margin-left: 75%; } .tablet\:offset-10 { margin-left: 83.33333333%; } .tablet\:offset-11 { margin-left: 91.66666667%; } .tablet\:order-first { --order: -1; } .tablet\:order-last { --order: 1; } } @media (min-width: 1152px) { .row.laptop\:flush { --margin-left: 0; --margin-right: 0 } .row.laptop\:flush > div,.row.laptop\:flush > main,.row.laptop\:flush > aside,.row.laptop\:flush > header,.row.laptop\:flush > footer,.row.laptop\:flush > nav,.row.laptop\:flush > section,.row.laptop\:flush > article,.row.laptop\:flush > ol,.row.laptop\:flush > ul,.row.laptop\:flush > li,.row.laptop\:flush > p,.row.laptop\:flush > blockquote { --padding-left: 0; --padding-right: 0; } .row.laptop\:roomy { --grid-gutter-x-width: 1rem; --grid-gutter-y-width: 2rem; --grid-outer-gutter-width: 2rem; } .row.laptop\:reverse { --grid-row-direction: row-reverse; } .row.laptop\:align-top { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .row.laptop\:align-middle { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .row.laptop\:align-bottom { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .row.laptop\:align-stretch { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .laptop\:column, .laptop\:column-1, .laptop\:column-2, .laptop\:column-3, .laptop\:column-4, .laptop\:column-5, .laptop\:column-6, .laptop\:column-7, .laptop\:column-8, .laptop\:column-9, .laptop\:column-10, .laptop\:column-11, .laptop\:column-12, .laptop\:offset-0, .laptop\:offset-1, .laptop\:offset-2, .laptop\:offset-3, .laptop\:offset-4, .laptop\:offset-5, .laptop\:offset-6, .laptop\:offset-7, .laptop\:offset-8, .laptop\:offset-9, .laptop\:offset-10, .laptop\:offset-11, .laptop\:offset-12 { --order: 0; -ms-flex-preferred-size: auto; flex-basis: auto; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-ordinal-group: var(--order); -ms-flex-order: var(--order); order: var(--order); } .laptop\:column { -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .laptop\:column-1 { -ms-flex-preferred-size: 8.33333333%; flex-basis: 8.33333333%; max-width: 8.33333333%; } .laptop\:column-2 { -ms-flex-preferred-size: 16.66666667%; flex-basis: 16.66666667%; max-width: 16.66666667%; } .laptop\:column-3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } .laptop\:column-4 { -ms-flex-preferred-size: 33.33333333%; flex-basis: 33.33333333%; max-width: 33.33333333%; } .laptop\:column-5 { -ms-flex-preferred-size: 41.66666667%; flex-basis: 41.66666667%; max-width: 41.66666667%; } .laptop\:column-6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } .laptop\:column-7 { -ms-flex-preferred-size: 58.33333333%; flex-basis: 58.33333333%; max-width: 58.33333333%; } .laptop\:column-8 { -ms-flex-preferred-size: 66.66666667%; flex-basis: 66.66666667%; max-width: 66.66666667%; } .laptop\:column-9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } .laptop\:column-10 { -ms-flex-preferred-size: 83.33333333%; flex-basis: 83.33333333%; max-width: 83.33333333%; } .laptop\:column-11 { -ms-flex-preferred-size: 91.66666667%; flex-basis: 91.66666667%; max-width: 91.66666667%; } .laptop\:column-12 { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } .laptop\:offset-0 { margin-left: 0; } .laptop\:offset-1 { margin-left: 8.33333333%; } .laptop\:offset-2 { margin-left: 16.66666667%; } .laptop\:offset-3 { margin-left: 25%; } .laptop\:offset-4 { margin-left: 33.33333333%; } .laptop\:offset-5 { margin-left: 41.66666667%; } .laptop\:offset-6 { margin-left: 50%; } .laptop\:offset-7 { margin-left: 58.33333333%; } .laptop\:offset-8 { margin-left: 66.66666667%; } .laptop\:offset-9 { margin-left: 75%; } .laptop\:offset-10 { margin-left: 83.33333333%; } .laptop\:offset-11 { margin-left: 91.66666667%; } .laptop\:order-first { --order: -1; } .laptop\:order-last { --order: 1; } } @media (min-width: 1536px) { .row.desktop\:flush { --margin-left: 0; --margin-right: 0 } .row.desktop\:flush > div,.row.desktop\:flush > main,.row.desktop\:flush > aside,.row.desktop\:flush > header,.row.desktop\:flush > footer,.row.desktop\:flush > nav,.row.desktop\:flush > section,.row.desktop\:flush > article,.row.desktop\:flush > ol,.row.desktop\:flush > ul,.row.desktop\:flush > li,.row.desktop\:flush > p,.row.desktop\:flush > blockquote { --padding-left: 0; --padding-right: 0; } .row.desktop\:roomy { --grid-gutter-x-width: 1rem; --grid-gutter-y-width: 2rem; --grid-outer-gutter-width: 2rem; } .row.desktop\:reverse { --grid-row-direction: row-reverse; } .row.desktop\:align-top { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .row.desktop\:align-middle { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .row.desktop\:align-bottom { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .row.desktop\:align-stretch { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .desktop\:column, .desktop\:column-1, .desktop\:column-2, .desktop\:column-3, .desktop\:column-4, .desktop\:column-5, .desktop\:column-6, .desktop\:column-7, .desktop\:column-8, .desktop\:column-9, .desktop\:column-10, .desktop\:column-11, .desktop\:column-12, .desktop\:offset-0, .desktop\:offset-1, .desktop\:offset-2, .desktop\:offset-3, .desktop\:offset-4, .desktop\:offset-5, .desktop\:offset-6, .desktop\:offset-7, .desktop\:offset-8, .desktop\:offset-9, .desktop\:offset-10, .desktop\:offset-11, .desktop\:offset-12 { --order: 0; -ms-flex-preferred-size: auto; flex-basis: auto; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-ordinal-group: var(--order); -ms-flex-order: var(--order); order: var(--order); } .desktop\:column { -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .desktop\:column-1 { -ms-flex-preferred-size: 8.33333333%; flex-basis: 8.33333333%; max-width: 8.33333333%; } .desktop\:column-2 { -ms-flex-preferred-size: 16.66666667%; flex-basis: 16.66666667%; max-width: 16.66666667%; } .desktop\:column-3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } .desktop\:column-4 { -ms-flex-preferred-size: 33.33333333%; flex-basis: 33.33333333%; max-width: 33.33333333%; } .desktop\:column-5 { -ms-flex-preferred-size: 41.66666667%; flex-basis: 41.66666667%; max-width: 41.66666667%; } .desktop\:column-6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } .desktop\:column-7 { -ms-flex-preferred-size: 58.33333333%; flex-basis: 58.33333333%; max-width: 58.33333333%; } .desktop\:column-8 { -ms-flex-preferred-size: 66.66666667%; flex-basis: 66.66666667%; max-width: 66.66666667%; } .desktop\:column-9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } .desktop\:column-10 { -ms-flex-preferred-size: 83.33333333%; flex-basis: 83.33333333%; max-width: 83.33333333%; } .desktop\:column-11 { -ms-flex-preferred-size: 91.66666667%; flex-basis: 91.66666667%; max-width: 91.66666667%; } .desktop\:column-12 { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } .desktop\:offset-0 { margin-left: 0; } .desktop\:offset-1 { margin-left: 8.33333333%; } .desktop\:offset-2 { margin-left: 16.66666667%; } .desktop\:offset-3 { margin-left: 25%; } .desktop\:offset-4 { margin-left: 33.33333333%; } .desktop\:offset-5 { margin-left: 41.66666667%; } .desktop\:offset-6 { margin-left: 50%; } .desktop\:offset-7 { margin-left: 58.33333333%; } .desktop\:offset-8 { margin-left: 66.66666667%; } .desktop\:offset-9 { margin-left: 75%; } .desktop\:offset-10 { margin-left: 83.33333333%; } .desktop\:offset-11 { margin-left: 91.66666667%; } .desktop\:order-first { --order: -1; } .desktop\:order-last { --order: 1; } } @media (min-width: 768px) { .container, .container-fluid { --outer-gutter-width: var(--tablet-grid-outer-gutter-width); } .container { --max-width: var(--tablet-grid-max-width); } } @media (min-width: 1152px) { .container, .container-fluid { --outer-gutter-width: var(--laptop-grid-outer-gutter-width); } .container { --max-width: var(--laptop-grid-max-width); } } @media (min-width: 1536px) { .container, .container-fluid { --outer-gutter-width: var(--desktop-grid-outer-gutter-width); } .container { --max-width: var(--desktop-grid-max-width); } } /* components.css */ /* links */ a { display: inline; display: var(--link-display); -webkit-transition-duration: calc(1s * 0.1); transition-duration: calc(1s * 0.1); -webkit-transition-duration: var(--link-transition-duration); transition-duration: var(--link-transition-duration); -webkit-transition-property: color, background, -webkit-text-decoration; transition-property: color, background, -webkit-text-decoration; transition-property: color, text-decoration, background; transition-property: color, text-decoration, background, -webkit-text-decoration; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; -webkit-text-decoration-color: currentColor; text-decoration-color: currentColor; -webkit-text-decoration-color: var(--link-decoration-color); text-decoration-color: var(--link-decoration-color); -webkit-text-decoration-line: underline; text-decoration-line: underline; -webkit-text-decoration-line: var(--link-decoration-line); text-decoration-line: var(--link-decoration-line); -webkit-text-decoration-style: dotted; text-decoration-style: dotted; -webkit-text-decoration-style: var(--link-decoration-style); text-decoration-style: var(--link-decoration-style); text-decoration-thickness: 0.0625em; text-decoration-thickness: var(--link-decoration-thickness); color: #1c7ed6; color: var(--link-color); font-weight: var(--font-weight-base); font-weight: var(--link-font-weight) } a:hover, a.hover, a:active, a.active { -webkit-text-decoration-color: currentColor; text-decoration-color: currentColor; -webkit-text-decoration-color: var(--link-hover-decoration-color); text-decoration-color: var(--link-hover-decoration-color); -webkit-text-decoration-line: underline; text-decoration-line: underline; -webkit-text-decoration-line: var(--link-hover-decoration-line); text-decoration-line: var(--link-hover-decoration-line); -webkit-text-decoration-style: solid; text-decoration-style: solid; -webkit-text-decoration-style: var(--link-hover-decoration-style); text-decoration-style: var(--link-hover-decoration-style); color: #74c0fc; color: var(--link-hover-color); } .no-underline { text-decoration: none !important; } .nav-link { display: inline-block; padding: calc((4em - (1em * 1.5) - (0.125em * 2) - 0.375em) / 2) calc(1em * 1.5); padding: var(--button-padding); text-decoration: none; color: #1c7ed6; color: var(--link-color); font-weight: 600; font-weight: var(--font-weight-semibold) } .nav-link:active, .nav-link.active { text-decoration: none; color: #183153; color: var(--link-active-color); } .nav-link:hover, .nav-link.hover { text-decoration: none; color: #74c0fc; color: var(--link-hover-color); } .message,.msg,.alert { margin: 0 0 1em; margin: var(--message-margin); border-width: 0.125em; border-width: var(--message-border-width); border-style: solid; border-style: var(--message-border-style); border-radius: 0.75em; border-radius: var(--message-border-radius); border-color: #fff; border-color: var(--message-border-color); background-color: #fff; background-color: var(--message-background); padding: calc((4em - (1em * 1.5) - (0.125em * 2)) / 2) calc(1em * 1.5); padding: var(--message-padding); min-height: 4em; min-height: var(--message-min-height); color: #183153; color: var(--message-color) } .message.with-border,.msg.with-border,.alert.with-border { border-width: 0.125em; border-width: var(--message-border-width); border-style: solid; border-style: var(--message-border-style); border-color: #fff; border-color: var(--message-border-color); } .message.no-border,.msg.no-border,.alert.no-border { border-width: 0; } .message.with-icon,.msg.with-icon,.alert.with-icon { position: relative; padding-left: calc(calc(1em * 1.5) * 2 * 1.5); padding-left: calc(var(--message-horizontal-padding) * 2 * var(--message-with-icon-decorative-scale)) } .message.with-icon .decorative,.msg.with-icon .decorative,.alert.with-icon .decorative { position: absolute; top: calc((calc((4em - (1em * 1.5) - (0.125em * 2)) / 2) + (1.5 - 1.5)/2) / 1.5 * 1em); top: var(--message-with-icon-decorative-top); left: 0.25em; width: calc(calc(1em * 1.5) * 1.75); width: calc(var(--message-horizontal-padding) * 1.75); text-align: center; color: #8991a5; color: var(--message-with-icon-decorative-color); font-size: calc(1em * 1.5); font-size: calc(1em * var(--message-with-icon-decorative-scale)); } .message.with-icon h1,.message.with-icon h2,.message.with-icon h3,.message.with-icon h4,.message.with-icon h5,.message.with-icon h6,.message.with-icon .h1,.message.with-icon .h2,.message.with-icon .h3,.message.with-icon .h4,.message.with-icon .h5,.message.with-icon .h6,.msg.with-icon h1,.msg.with-icon h2,.msg.with-icon h3,.msg.with-icon h4,.msg.with-icon h5,.msg.with-icon h6,.msg.with-icon .h1,.msg.with-icon .h2,.msg.with-icon .h3,.msg.with-icon .h4,.msg.with-icon .h5,.msg.with-icon .h6,.alert.with-icon h1,.alert.with-icon h2,.alert.with-icon h3,.alert.with-icon h4,.alert.with-icon h5,.alert.with-icon h6,.alert.with-icon .h1,.alert.with-icon .h2,.alert.with-icon .h3,.alert.with-icon .h4,.alert.with-icon .h5,.alert.with-icon .h6 { /* Nasssty icons dom order makes us do this, precious. */ } .message.with-icon h1:nth-child(2),.message.with-icon h2:nth-child(2),.message.with-icon h3:nth-child(2),.message.with-icon h4:nth-child(2),.message.with-icon h5:nth-child(2),.message.with-icon h6:nth-child(2),.message.with-icon .h1:nth-child(2),.message.with-icon .h2:nth-child(2),.message.with-icon .h3:nth-child(2),.message.with-icon .h4:nth-child(2),.message.with-icon .h5:nth-child(2),.message.with-icon .h6:nth-child(2),.msg.with-icon h1:nth-child(2),.msg.with-icon h2:nth-child(2),.msg.with-icon h3:nth-child(2),.msg.with-icon h4:nth-child(2),.msg.with-icon h5:nth-child(2),.msg.with-icon h6:nth-child(2),.msg.with-icon .h1:nth-child(2),.msg.with-icon .h2:nth-child(2),.msg.with-icon .h3:nth-child(2),.msg.with-icon .h4:nth-child(2),.msg.with-icon .h5:nth-child(2),.msg.with-icon .h6:nth-child(2),.alert.with-icon h1:nth-child(2),.alert.with-icon h2:nth-child(2),.alert.with-icon h3:nth-child(2),.alert.with-icon h4:nth-child(2),.alert.with-icon h5:nth-child(2),.alert.with-icon h6:nth-child(2),.alert.with-icon .h1:nth-child(2),.alert.with-icon .h2:nth-child(2),.alert.with-icon .h3:nth-child(2),.alert.with-icon .h4:nth-child(2),.alert.with-icon .h5:nth-child(2),.alert.with-icon .h6:nth-child(2) { margin-top: 0; } .message.roomy,.msg.roomy,.alert.roomy { --message-with-icon-decorative-top: var(--message-roomy-with-icon-decorative-top); --message-padding: var(--message-roomy-padding); --message-with-icon-decorative-scale: var(--message-roomy-with-icon-decorative-scale); --message-min-height: var(--message-roomy-min-height); } .message.compact,.msg.compact,.alert.compact { --message-with-icon-decorative-top: var(--message-compact-with-icon-decorative-top); --message-padding: var(--message-compact-padding); --message-with-icon-decorative-scale: var(--message-compact-with-icon-decorative-scale); --message-min-height: var(--message-compact-min-height); } button.roomy,.button.roomy,.btn.roomy,[type=button].roomy,[type=reset].roomy,[type=submit].roomy, .buttons.roomy { --button-padding: var(--button-padding-roomy); } button.compact,.button.compact,.btn.compact,[type=button].compact,[type=reset].compact,[type=submit].compact, .buttons.compact { --button-padding: var(--button-padding-compact); } button,.button,.btn,[type=button],[type=reset],[type=submit] { display: inline-block; position: relative; -webkit-transition-duration: 0; transition-duration: 0; -webkit-transition-duration: var(--button-transition-duration); transition-duration: var(--button-transition-duration); -webkit-transition-property: color background border box-shadow; transition-property: color background border box-shadow; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; margin: 0 0 0.875em 0; margin: 0 0 var(--button-margin-bottom) 0; border-width: 0.125em; border-width: var(--button-border-width); border-style: solid; border-radius: 0.5em; border-radius: var(--button-border-radius); border-color: currentColor; border-color: var(--button-border-color); -webkit-box-shadow: 0 0.375em 0 currentColor; box-shadow: 0 0.375em 0 currentColor; -webkit-box-shadow: var(--button-box-shadow); box-shadow: var(--button-box-shadow); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background: #fff; background: var(--button-background); cursor: pointer; padding: calc((4em - (1em * 1.5) - (0.125em * 2) - 0.375em) / 2) calc(1em * 1.5); padding: var(--button-padding); vertical-align: middle; text-align: center; text-decoration: none; -webkit-text-decoration: var(--button-decoration); text-decoration: var(--button-decoration); -webkit-text-decoration-color: unset; text-decoration-color: unset; -webkit-text-decoration-color: var(--button-decoration-color); text-decoration-color: var(--button-decoration-color); color: #183153; color: var(--button-color); font-weight: 600; font-weight: var(--button-font-weight) } button:active,.button:active,.btn:active,[type=button]:active,[type=reset]:active,[type=submit]:active, button.active, .button.active, .btn.active, [type=button].active, [type=reset].active, [type=submit].active { top: 0.375em; top: var(--button-box-shadow-width); border-width: 0.125em; border-width: var(--button-active-border-width); border-color: #183153; border-color: var(--button-active-border-color); -webkit-box-shadow: none; box-shadow: none; -webkit-box-shadow: var(--button-active-box-shadow); box-shadow: var(--button-active-box-shadow); background: #183153; background: var(--button-active-background); text-decoration: none; -webkit-text-decoration: var(--button-hover-decoration); text-decoration: var(--button-hover-decoration); color: #fff; color: var(--button-active-color); } button:hover,.button:hover,.btn:hover,[type=button]:hover,[type=reset]:hover,[type=submit]:hover, button.hover, .button.hover, .btn.hover, [type=button].hover, [type=reset].hover, [type=submit].hover { border-color: currentColor; border-color: var(--button-hover-border-color); background: #c3c6d1; background: var(--button-hover-background); text-decoration: none; -webkit-text-decoration: var(--button-hover-decoration); text-decoration: var(--button-hover-decoration); -webkit-text-decoration-color: unset; text-decoration-color: unset; -webkit-text-decoration-color: var(--button-hover-decoration-color); text-decoration-color: var(--button-hover-decoration-color); color: #183153; color: var(--button-hover-color); } button:disabled,.button:disabled,.btn:disabled,[type=button]:disabled,[type=reset]:disabled,[type=submit]:disabled, button.disabled, .button.disabled, .btn.disabled, [type=button].disabled, [type=reset].disabled, [type=submit].disabled { opacity: 0.5; opacity: var(--button-disabled-opacity); background: #fff; background: var(--button-disabled-background); pointer-events: none; } button.block,.button.block,.btn.block,[type=button].block,[type=reset].block,[type=submit].block { display: block; width: 100%; } button.link,.button.link,.btn.link,[type=button].link,[type=reset].link,[type=submit].link { --button-border-width: 0; --button-box-shadow: none; --button-decoration: var(--link-decoration); --button-decoration-color: var(--link-decoration-color); --button-color: var(--link-color); --button-background: transparent; --button-hover-background: transparent; --button-hover-decoration: var(--link-hover-decoration); --button-hover-decoration-color: var(--link-hover-color); --button-hover-color: var(--link-hover-color); --button-active-border-width: 0; --button-active-background: transparent; --button-active-color: var(--link-hover-color); --button-font-weight: var(--link-font-weight); } button.subtle,.button.subtle,.btn.subtle,[type=button].subtle,[type=reset].subtle,[type=submit].subtle { --button-color: var(--link-color); --button-border-width: 0; --button-box-shadow: none; --button-background: transparent; --button-active-border-width: 0; --button-font-weight: var(--link-font-weight); -webkit-transition-duration: calc(1s * 0.1); transition-duration: calc(1s * 0.1); -webkit-transition-duration: var(--timing-2xfast); transition-duration: var(--timing-2xfast); -webkit-transition-property: color, background, -webkit-text-decoration; transition-property: color, background, -webkit-text-decoration; transition-property: color, text-decoration, background; transition-property: color, text-decoration, background, -webkit-text-decoration; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } .buttons { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; position: relative; vertical-align: middle } .buttons > button,.buttons > .button,.buttons > .btn,.buttons > [type=button],.buttons > [type=reset],.buttons > [type=submit] { position: relative; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; } .buttons > button:not(:first-child),.buttons > .button:not(:first-child),.buttons > .btn:not(:first-child),.buttons > [type=button]:not(:first-child),.buttons > [type=reset]:not(:first-child),.buttons > [type=submit]:not(:first-child) { margin-left: calc(-1 * 0.125em); margin-left: calc(-1 * var(--border-width-sm)); border-top-left-radius: 0; border-bottom-left-radius: 0; } .buttons > button:not(:last-child),.buttons > .button:not(:last-child),.buttons > .btn:not(:last-child),.buttons > [type=button]:not(:last-child),.buttons > [type=reset]:not(:last-child),.buttons > [type=submit]:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .btn-reset { margin: 0; border: none; background: var(--transparent); padding: 0; } table { margin-bottom: calc(1em * 1.5); margin-bottom: var(--table-margin-bottom); background: inherit; background: var(--table-background); width: 100%; width: var(--table-width); overflow: hidden; table-layout: initial; table-layout: var(--table-layout); border-collapse: collapse; border-collapse: var(--table-cell-border-collapse); } thead { background: transparent; background: var(--table-th-background); } tfoot { border-top: 2px solid #c3c6d1; border-top: var(--table-th-border-width) var(--table-th-border-style) var(--table-th-border-color); background: transparent; background: var(--table-th-background); } th { border-bottom: 2px solid #c3c6d1; border-bottom: var(--table-th-border-width) var(--table-th-border-style) var(--table-th-border-color); background: transparent; background: var(--table-th-background); } th[scope="row"] { border-right: 2px solid #c3c6d1; border-right: var(--table-th-border-width) var(--table-cell-border-style) var(--table-th-border-color); border-bottom: 1px solid #c3c6d1; border-bottom: var(--table-cell-border-width) var(--table-cell-border-style) var(--table-th-border-color); border-left: 0 solid #c3c6d1; border-left: 0 var(--table-cell-border-style) var(--table-th-border-color); } tbody { background: transparent; background: var(--table-body-background); } tr { -webkit-transition: background calc(1s * 0.1) ease-in; transition: background calc(1s * 0.1) ease-in; -webkit-transition: background var(--timing-2xfast) ease-in; transition: background var(--timing-2xfast) ease-in; background: transparent; background: var(--table-row-background); } td { border-bottom: 1px solid #e0e2e8; border-bottom: var(--table-cell-border-width) var(--table-cell-border-style) var(--table-cell-border-color); background: transparent; background: var(--table-cell-background); vertical-align: initial; vertical-align: var(--table-cell-vertical-align); text-align: left; text-align: var(--table-cell-text-align); } tr:hover td { background: transparent; background: var(--table-hover-background-color); } caption { padding: calc(1em * 8 / 16); padding: var(--spacing-2xs); caption-side: bottom; caption-side: var(--table-caption-side); font-size: calc(1em * 0.875); font-size: var(--table-caption-text-size); } /* table variations */ table.fixed-columns { --table-layout: fixed; } table.with-borders th { border-width: 1px 1px calc(1em * 2 / 16) 1px; border-width: var(--table-cell-border-width) var(--table-cell-border-width) var(--spacing-6xs) var(--table-cell-border-width); border-style: solid; border-style: var(--table-th-border-style); border-color: #c3c6d1; border-color: var(--table-th-border-color); } table.with-borders td { border: 1px solid #e0e2e8; border: var(--table-cell-border-width) var(--table-cell-border-style) var(--table-cell-border-color); } table.no-borders th, table.no-borders td { border: 0; } table.compact th, table.compact td { padding: calc(0.5em * 0.5) calc(0.75em * 0.5) calc(0.5em * 0.5) calc(0.75em * 0.5); padding: var(--table-cell-spacing-compact); } table.roomy th, table.roomy td { padding: calc(0.5em * 2) calc(0.75em * 2) calc(0.5em * 2) calc(0.75em * 2); padding: var(--table-cell-spacing-roomy); } table.stacked th, table.stacked td { display: block; } table.flush th:first-child, table.flush td:first-child { padding-left: 0; } table.flush th:last-child, table.flush td:last-child { padding-right: 0; } table.stacked.flush th, table.stacked.flush td { padding-right: 0; padding-left: 0; } th.flush-left, td.flush-left { --table-cell-spacing-left: 0; } th.flush-right, td.flush-right { --table-cell-spacing-right: 0; } td.success, td.warning, td.danger, td.info { background: transparent; background: var(--table-row-background); } table.natural { table-layout: auto; } table.stacked tr { border-bottom: 2px solid #e0e2e8; border-bottom: var(--table-th-border-width) var(--table-cell-border-style) var(--table-cell-border-color); } table.with-hover tr:hover td { --table-hover-background-color: var(--gray-200); background: transparent; background: var(--table-hover-background-color); } table.striped tr:nth-child(even) { background: #e0e2e8; background: var(--table-striped-row-background); } @media (min-width: 768px) { table.stacked tr { border-bottom: 0; } table.stacked th { display: table-cell; } table.stacked td { display: table-cell; } table.stacked.flush th, table.stacked.flush td { padding-right: 0.75em; padding-right: var(--table-cell-spacing-right); padding-left: 0.75em; padding-left: var(--table-cell-spacing-left); } table.stacked.flush th:first-child, table.stacked.flush td:first-child { --table-cell-spacing-left: 0; } table.stacked.flush th:last-child, table.stacked.flush td:last-child { --table-cell-spacing-right: 0; } } @media (min-width: 1152px) { table.stacked tr { border-bottom: 0; } table.stacked th { display: table-cell; } table.stacked td { display: table-cell; } table.stacked.flush th, table.stacked.flush td { padding-right: 0.75em; padding-right: var(--table-cell-spacing-right); padding-left: 0.75em; padding-left: var(--table-cell-spacing-left); } table.stacked.flush th:first-child, table.stacked.flush td:first-child { --table-cell-spacing-left: 0; } table.stacked.flush th:last-child, table.stacked.flush td:last-child { --table-cell-spacing-right: 0; } } @media (min-width: 1536px) { table.stacked tr { border-bottom: 0; } table.stacked th { display: table-cell; } table.stacked td { display: table-cell; } table.stacked.flush th, table.stacked.flush td { padding-right: 0.75em; padding-right: var(--table-cell-spacing-right); padding-left: 0.75em; padding-left: var(--table-cell-spacing-left); } table.stacked.flush th:first-child, table.stacked.flush td:first-child { --table-cell-spacing-left: 0; } table.stacked.flush th:last-child, table.stacked.flush td:last-child { --table-cell-spacing-right: 0; } } .with-top-tag { position: relative; margin-top: 0.75em; margin-top: var(--top-tag-margin-top) } .with-top-tag .tag { position: absolute; top: -1em; top: var(--top-tag-top); left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 1 } .with-top-tag .tag.right { right: calc(32em / 12); right: var(--top-tag-indent); left: auto; -webkit-transform: none; transform: none; } .with-top-tag .tag.left { left: calc(32em / 12); left: var(--top-tag-indent); -webkit-transform: none; transform: none; } .with-top-tag { /* When with-top-tag is present, shift automatic margins and border radiuses to the second element. */ } .with-top-tag.card > .header:nth-child(2), .with-top-tag.card > .section:nth-child(2) { margin-top: calc(-1 * calc((4em - (1em * 1.5) - (0em * 2)) / 2)); margin-top: calc(-1 * var(--card-vertical-padding)); border-top-left-radius: inherit; border-top-right-radius: inherit; } .with-top-tag h1,.with-top-tag h2,.with-top-tag h3,.with-top-tag h4,.with-top-tag h5,.with-top-tag h6,.with-top-tag .h1,.with-top-tag .h2,.with-top-tag .h3,.with-top-tag .h4,.with-top-tag .h5,.with-top-tag .h6 { /* Nasssty icons dom order makes us do this, precious. */ } .with-top-tag h1:nth-child(2),.with-top-tag h2:nth-child(2),.with-top-tag h3:nth-child(2),.with-top-tag h4:nth-child(2),.with-top-tag h5:nth-child(2),.with-top-tag h6:nth-child(2),.with-top-tag .h1:nth-child(2),.with-top-tag .h2:nth-child(2),.with-top-tag .h3:nth-child(2),.with-top-tag .h4:nth-child(2),.with-top-tag .h5:nth-child(2),.with-top-tag .h6:nth-child(2) { margin-top: 0; } label,.label { display: block; margin: calc(1em * 12 / 16) 0 calc(1em * 4 / 16) 0; margin: var(--spacing-sm) 0 var(--spacing-4xs) 0; color: #183153; color: var(--label-color); font-size: 1em; font-size: var(--label-font-size); font-weight: bold; font-weight: var(--label-font-weight); } input,textarea,.input { display: inline-block; width: 100%; font-size: 1em; font-size: var(--input-font-size); font-weight: bold; font-weight: var(--input-font-weight) } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder, .input::-webkit-input-placeholder { opacity: 1; color: #c3c6d1; color: var(--input-placeholder-color); font-weight: normal; font-weight: var(--input-placeholder-font-weight); } input::-moz-placeholder, textarea::-moz-placeholder, .input::-moz-placeholder { opacity: 1; color: #c3c6d1; color: var(--input-placeholder-color); font-weight: normal; font-weight: var(--input-placeholder-font-weight); } input:-ms-input-placeholder, textarea:-ms-input-placeholder, .input:-ms-input-placeholder { opacity: 1; color: #c3c6d1; color: var(--input-placeholder-color); font-weight: normal; font-weight: var(--input-placeholder-font-weight); } input::-ms-input-placeholder, textarea::-ms-input-placeholder, .input::-ms-input-placeholder { opacity: 1; color: #c3c6d1; color: var(--input-placeholder-color); font-weight: normal; font-weight: var(--input-placeholder-font-weight); } input::placeholder,textarea::placeholder,.input::placeholder { opacity: 1; color: #c3c6d1; color: var(--input-placeholder-color); font-weight: normal; font-weight: var(--input-placeholder-font-weight); } [type="text"],[type="email"],[type="password"],textarea,.input-text { margin: 0 0 calc(1em * 4 / 16) 0; margin: 0 0 var(--spacing-4xs) 0; border-width: 0.125em; border-width: var(--input-border-width); border-style: solid; border-style: var(--input-border-style); border-radius: 0.75em; border-radius: var(--input-border-radius); border-color: #8991a5; border-color: var(--input-border-color); -webkit-box-shadow: inset 0 0.25em 0 0 #f0f1f3; box-shadow: inset 0 0.25em 0 0 #f0f1f3; -webkit-box-shadow: var(--input-box-shadow); box-shadow: var(--input-box-shadow); background: #fff; background: var(--input-background); padding: calc((4em - (1em * 1.5) - (0.125em * 2)) / 2) calc(1em * 1.5); padding: var(--input-padding) } [type="text"].rounded,[type="email"].rounded,[type="password"].rounded,textarea.rounded,.input-text.rounded { --input-border-radius: calc(var(--input-min-height) / 2); } textarea:not([rows]) { height: 10em; } select { position: relative; margin: 0 0 calc(1em * 4 / 16) 0; margin: 0 0 var(--spacing-4xs) 0; border-width: 0.125em; border-width: var(--input-border-width); border-style: solid; border-style: var(--input-border-style); border-radius: 0.75em; border-radius: var(--input-border-radius); border-color: #8991a5; border-color: var(--input-border-color); -webkit-box-shadow: inset 0 0.25em 0 0 #f0f1f3; box-shadow: inset 0 0.25em 0 0 #f0f1f3; -webkit-box-shadow: var(--input-box-shadow); box-shadow: var(--input-box-shadow); background-color: #fff; background-color: var(--input-background); background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='caret-down' class='svg-inline--fa fa-caret-down fa-w-10' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='rgb(73, 80, 87)' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'%3E%3C/path%3E%3C/svg%3E"); background-image: var(--icon-caret-down); background-position: 98% center; background-repeat: no-repeat; background-size: 20px 20px; padding: calc((4em - (1em * 1.5) - (0.125em * 2)) / 2) calc(1em * 1.5); padding: var(--input-padding); width: 100%; height: 4em; height: var(--input-min-height) } select.rounded { --input-border-radius: calc(var(--input-min-height) / 2); } .tip-text,.help-text,.tip { display: block; margin: 0 0 calc(1em * 4 / 16) 0; margin: 0 0 var(--spacing-4xs) 0; color: #515e7b; color: var(--help-color); font-size: calc(1em * 0.875); font-size: var(--help-font-size); } fieldset { margin: calc(1em * 1.25) 0; margin: var(--spacing-lg) 0; border-width: 0.125em 0; border-width: var(--fieldset-border-width); border-style: solid; border-style: var(--fieldset-border-style); border-color: #8991a5; border-color: var(--fieldset-border-color); background: none; background: var(--fieldset-background); padding: 0 0 calc(1em * 12 / 16) 0; padding: var(--fieldset-padding); } legend { background: transparent; background: var(--legend-background); padding: 0 calc(1em * 12 / 16) 0 0; padding: var(--legend-padding); color: #515e7b; color: var(--legend-color); font-weight: bold; font-weight: var(--legend-font-weight); } label.required { color: #183153; color: var(--label-required-color) } label.required::after { color: #183153; color: var(--label-required-color); content: "*"; } input.disabled,textarea.disabled,.input.disabled, input[disabled="disabled"], textarea[disabled="disabled"], .input[disabled="disabled"], input[disabled], textarea[disabled], .input[disabled] { border-color: #c3c6d1; border-color: var(--input-disabled-border-color); -webkit-box-shadow: none; box-shadow: none; background: #c3c6d1; background: var(--input-disabled-background); color: #515e7b; color: var(--input-disabled-color); } label.disabled, input[disabled="disabled"] + label, input[disabled] + label { color: #515e7b; color: var(--label-disabled-color); } input[type="checkbox"] + label, input[type="radio"] + label { display: inline-block; margin-top: 0; margin-right: calc(1em * 12 / 16); margin-right: var(--spacing-sm); font-weight: 400; font-weight: var(--font-weight-normal); } input[type="checkbox"], input[type="radio"], input[type="button"], input[type="submit"], input[type="reset"] { width: auto; } input[readonly],textarea[readonly],.input[readonly] { -webkit-box-shadow: none; box-shadow: none; background-color: transparent; } form button,form .button,form .btn,form [type=button],form [type=reset],form [type=submit] { margin: calc(1em * 12 / 16) 0 0; margin: var(--form-button-margin); } /* stylelint-disable */ input:focus,input.focus,input.focused,textarea:focus,textarea.focus,textarea.focused,.input:focus,.input.focus,.input.focused, select:focus, select.focus, select.focused { outline: none; /* Using the default focus outline as a box-shadow, as Safari and Chrome do not round the corners on the outline. This also fakes the outline gap by adding a --body-background color shadow first, then the normal focus outline. */ -webkit-box-shadow: 0 0 0 calc(1em * 1 / 16) #f0f1f3, 0 0 0 calc(calc(1em * 3 / 16) + calc(1em * 1 / 16)) #74c0fc; box-shadow: 0 0 0 calc(1em * 1 / 16) #f0f1f3, 0 0 0 calc(calc(1em * 3 / 16) + calc(1em * 1 / 16)) #74c0fc; -webkit-box-shadow: 0 0 0 var(--focus-outline-offset) var(--body-background), 0 0 0 calc(var(--focus-outline-width) + var(--focus-outline-offset)) var(--focus-outline-color); box-shadow: 0 0 0 var(--focus-outline-offset) var(--body-background), 0 0 0 calc(var(--focus-outline-width) + var(--focus-outline-offset)) var(--focus-outline-color); } /* stylelint-enable */ .message + input,.message + textarea,.message + .input { margin-top: calc(-1 * calc(1em * 4 / 16)); margin-top: calc(-1 * var(--spacing-4xs)); } form .with-icon-before { position: relative } form .with-icon-before input { padding-left: calc((calc(1em * 1.5) - 0.125em) * 1.6 + 1.25 * 1em); padding-left: calc((var(--input-padding-horizontal) - var(--input-border-width)) * 1.6 + var(--input-with-icon-scale) * 1em); /* icon width plus space on either side */ } form .with-icon-before i[class*="fa-"],form .with-icon-before .svg-inline--fa { display: inline-block; position: absolute; top: calc((4em / 1.25 - 1em) / 2); top: calc((var(--input-min-height) / var(--input-with-icon-scale) - 1em) / 2); left: calc(calc(1em * 1.5) / 1.25); left: calc(var(--input-padding-horizontal) / var(--input-with-icon-scale)); color: #c3c6d1; color: var(--input-with-icon-color); font-size: calc(1.25 * 1em); font-size: calc(var(--input-with-icon-scale) * 1em); pointer-events: none; } form .with-icon-after { position: relative } form .with-icon-after i[class*="fa-"],form .with-icon-after .svg-inline--fa { display: inline-block; position: absolute; top: calc((4em / 1.25 - 1em) / 2); top: calc((var(--input-min-height) / var(--input-with-icon-scale) - 1em) / 2); /* Automatically scales as icon size scales */ right: calc(calc(1em * 1.5) / 1.25); right: calc(var(--input-padding-horizontal) / var(--input-with-icon-scale)); color: #c3c6d1; color: var(--input-with-icon-color); font-size: calc(1.25 * 1em); font-size: calc(var(--input-with-icon-scale) * 1em); pointer-events: none; } form .with-icon-after input { padding-right: calc((calc(1em * 1.5) - 0.125em) * 1.6 + 1.25 * 1em); padding-right: calc((var(--input-padding-horizontal) - var(--input-border-width)) * 1.6 + var(--input-with-icon-scale) * 1em); /* icon width plus space on either side */ } form.inline { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center } form.inline > * { margin: calc(1em * 4 / 16); margin: var(--spacing-4xs); } form.inline input { width: auto; } form.inline button,form.inline .button,form.inline .btn,form.inline [type=button],form.inline [type=reset],form.inline [type=submit] { margin-top: calc(-1 * 0.125em); margin-top: calc(-1 * var(--button-border-width)); /* Offsets button width */ } form .affix { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 0 calc(1em * 4 / 16) 0; margin: 0 0 var(--spacing-4xs) 0 } form .affix span { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; border-width: 0.125em; border-width: var(--input-border-width); border-style: solid; border-style: var(--input-border-style); border-radius: 0.75em; border-radius: var(--input-border-radius); border-color: #8991a5; border-color: var(--input-border-color); background: #8991a5; background: var(--input-affix-background); padding: calc((4em - (1em * 1.5) - (0.125em * 2)) / 2) calc(1em * 1.5); padding: var(--input-padding); color: #fff; color: var(--input-affix-color) } form .affix span:first-child { margin-right: calc((0.125em) * -1); margin-right: calc((var(--input-border-width)) * -1); /* adjust for border */ border-radius: 0.75em 0 0 0.75em; border-radius: var(--input-border-radius) 0 0 var(--input-border-radius); } form .affix span:last-child { margin-left: calc((0.125em) * -1); margin-left: calc((var(--input-border-width)) * -1); /* adjust for border */ border-radius: 0 0.75em 0.75em 0; border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0; } form .affix input { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; margin: 0; width: auto } form .affix input:last-child { border-radius: 0 0.75em 0.75em 0; border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0; } form .affix input:first-child { border-radius: 0.75em 0 0 0.75em; border-radius: var(--input-border-radius) 0 0 var(--input-border-radius); } form .affix button:last-child { margin: 0 0 0.375em calc(-1 * 0.125em); margin: 0 0 var(--button-box-shadow-width) calc(-1 * var(--button-border-width)); border-radius: 0 0.75em 0.75em 0; border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0; } form .affix.rounded { --input-border-radius: calc(var(--input-min-height) / 2) } form .affix.rounded > :first-child { padding-left: calc(1em * 1.25); padding-left: var(--spacing-lg); } form .affix.rounded > :last-child { padding-right: calc(1em * 1.25); padding-right: var(--spacing-lg); } .card { display: block; display: var(--card-display); position: relative; margin-bottom: calc(1em * 1.5); margin-bottom: var(--card-margin-bottom); outline: none; border: 0em solid #fff; border: var(--card-border-width) var(--card-border-style) var(--card-border-color); border-radius: 0.75em; border-radius: var(--card-border-radius); background: #fff; background: var(--card-background); padding: calc(calc((4em - (1em * 1.5) - (0em * 2)) / 2) - 0em) calc(calc(1em * 1.5) - 0em); padding: calc(var(--card-vertical-padding) - var(--card-border-width)) calc(var(--card-horizontal-padding) - var(--card-border-width)); min-height: 4em; min-height: var(--card-min-height); vertical-align: top; vertical-align: var(--card-vertical-align); text-align: center; text-align: var(--card-text-align); color: #183153; color: var(--card-color) } .card > .text-left { text-align: left; text-align: var(--text-align); } .card > .header, .card.header { background: #183153; background: var(--card-header-background); color: #fff; color: var(--card-header-color); } .card > .section { color: #183153; color: var(--card-section-color); } .card > .header, .card > header, .card > .section, .card > section { margin-right: calc(-1 * calc(1em * 1.5) + 0em); margin-right: calc(-1 * var(--card-horizontal-padding) + var(--card-border-width)); margin-left: calc(-1 * calc(1em * 1.5) + 0em); margin-left: calc(-1 * var(--card-horizontal-padding) + var(--card-border-width)); padding: calc((4em - (1em * 1.5) - (0em * 2)) / 2) calc(1em * 1.5); padding: var(--card-vertical-padding) var(--card-horizontal-padding) } .card > .header:first-child, .card > header:first-child, .card > .section:first-child, .card > section:first-child { margin-top: calc(-1 * calc((4em - (1em * 1.5) - (0em * 2)) / 2) + 0em); margin-top: calc(-1 * var(--card-vertical-padding) + var(--card-border-width)); border-top-left-radius: calc(0.75em - 0em); border-top-left-radius: calc(var(--card-border-radius) - var(--card-border-width)); border-top-right-radius: calc(0.75em - 0em); border-top-right-radius: calc(var(--card-border-radius) - var(--card-border-width)); padding-top: calc(calc((4em - (1em * 1.5) - (0em * 2)) / 2) - 0em); padding-top: calc(var(--card-vertical-padding) - var(--card-border-width)); } .card > .header:last-child, .card > header:last-child, .card > .section:last-child, .card > section:last-child { margin-bottom: calc(-1 * calc((4em - (1em * 1.5) - (0em * 2)) / 2) + 0em); margin-bottom: calc(-1 * var(--card-vertical-padding) + var(--card-border-width)); border-bottom-left-radius: calc(0.75em - 0em); border-bottom-left-radius: calc(var(--card-border-radius) - var(--card-border-width)); border-bottom-right-radius: calc(0.75em - 0em); border-bottom-right-radius: calc(var(--card-border-radius) - var(--card-border-width)); padding-bottom: calc(calc((4em - (1em * 1.5) - (0em * 2)) / 2) - 0em); padding-bottom: calc(var(--card-vertical-padding) - var(--card-border-width)); } .card > .section + .section { border-top: 0.125em dotted #f0f1f3; border-top: var(--card-section-border); } .card > .header + .header { border-top: 0.125em dotted #001c40; border-top: var(--card-header-border); } .card.roomy { --card-vertical-padding: var(--card-roomy-vertical-padding); --card-horizontal-padding: var(--card-roomy-horizontal-padding); --card-min-height: var(--card-roomy-min-height); --card-margin: 0 0 var(--card-roomy-vertical-padding); } .card.compact { --card-vertical-padding: var(--card-compact-vertical-padding); --card-horizontal-padding: var(--card-compact-horizontal-padding); --card-min-height: var(--card-compact-min-height); --card-margin: 0 0 var(--card-compct-vertical-padding); } a.card { -webkit-box-shadow: 0 0.25em 0 #c3c6d1; box-shadow: 0 0.25em 0 #c3c6d1; -webkit-box-shadow: var(--card-link-box-shadow); box-shadow: var(--card-link-box-shadow); background: #fff; background: var(--card-link-background); -webkit-text-decoration: var(--card-link-decoration); text-decoration: var(--card-link-decoration); color: #183153; color: var(--card-link-color) } a.card:hover, a.card.hover, a.card:active, a.card.active, a.card:focus, a.card.focus { border: none; -webkit-box-shadow: 0 0.25em 0 #74c0fc; box-shadow: 0 0.25em 0 #74c0fc; -webkit-box-shadow: 0 var(--with-shadow-box-shadow-width) 0 var(--card-link-hover-border-color); box-shadow: 0 var(--with-shadow-box-shadow-width) 0 var(--card-link-hover-border-color); padding: calc((4em - (1em * 1.5) - (0em * 2)) / 2) calc(1em * 1.5); padding: var(--card-vertical-padding) var(--card-horizontal-padding); -webkit-text-decoration: var(--card-link-hover-decoration); text-decoration: var(--card-link-hover-decoration) } a.card:hover::after, a.card.hover::after, a.card:active::after, a.card.active::after, a.card:focus::after, a.card.focus::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 0.125em solid #74c0fc; border: var(--card-link-hover-border-width) var(--card-link-hover-border-style) var(--card-link-hover-border-color); border-radius: 0.75em; border-radius: var(--card-border-radius); content: ""; } a.card:active, a.card.active { top: 0.25em; top: var(--with-shadow-box-shadow-width); -webkit-box-shadow: none; box-shadow: none; } .modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; -webkit-transition: opacity calc(1s * 0.25); transition: opacity calc(1s * 0.25); -webkit-transition: opacity var(--modal-transition-duration); transition: opacity var(--modal-transition-duration); visibility: hidden; opacity: 0; opacity: var(--modal-opacity); z-index: 1; background: rgba(81, 94, 123, 0.5); background: var(--modal-shadow); width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto } .modal > .card { margin: calc(1em * 2) auto calc(1em * 2) auto; margin: var(--modal-margin-top) var(--modal-margin-horizontal) var(--modal-margin-bottom) var(--modal-margin-horizontal); max-width: 80vw; max-width: var(--modal-max-width); min-height: calc(1em * 4); min-height: var(--modal-min-height); } .overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; -webkit-transition: opacity calc(1s * 0.25); transition: opacity calc(1s * 0.25); -webkit-transition: opacity var(--modal-transition-duration); transition: opacity var(--modal-transition-duration); visibility: hidden; opacity: 0; opacity: var(--modal-opacity); z-index: 1; background: rgba(81, 94, 123, 0.5); background: var(--modal-shadow); width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto } .overlay:target { visibility: visible; opacity: 1; } @media (min-width: 768px) { .modal > .card, .modal::part(card) { --modal-max-width: var(--line-length-md); /* fixed width on larger viewports */ } } pre { border-radius: 0.5em; border-radius: var(--border-radius-sm); background: #a5abbb; background: var(--gray-300); padding: 1rem; padding: var(--size-reset-base); overflow: auto; } .example-block code { color: #001c40; color: var(--gray-900) } .example-block code span { display: inline; } .brckt { color: #001c40; color: var(--gray-900); } .eq, .qut { color: #001c40; color: var(--gray-900); } /* add-ons */ /* with hr */ .with-hr,.with-horizontal-rule,.with-bottom-border,.with-border-bottom { border-bottom-width: 0.125em; border-bottom-width: var(--hr-border-width); border-bottom-style: solid; border-bottom-style: var(--hr-border-style); border-bottom-color: #c3c6d1; border-bottom-color: var(--hr-border-color); padding-bottom: 0.25em; padding-bottom: var(--hr-padding-bottom); } /* with icons */ .with-icon i[class*="fa-"],.with-icon .svg-inline--fa, .with-icon-before i[class*="fa-"], .with-icon-before .svg-inline--fa { margin-right: var(--spacing-inline); } .with-icon-after i[class*="fa-"],.with-icon-after .svg-inline--fa { margin-left: var(--spacing-inline); } /* specific styling for links */ a.with-icon i[class*="fa-"],a.with-icon .svg-inline--fa, a.with-icon-before i[class*="fa-"], a.with-icon-before .svg-inline--fa, a.with-icon-after i[class*="fa-"], a.with-icon-after .svg-inline--fa { --spacing-inline: var(--spacing-4xs); } /* measure */ .line-length-2xs { max-width: 15ch; max-width: var(--line-length-2xs); } .line-length-xs { max-width: 30ch; max-width: var(--line-length-xs); } .line-length-sm { max-width: 45ch; max-width: var(--line-length-sm); } .line-length-md { max-width: 66ch; max-width: var(--line-length-md); } .line-length-lg { max-width: 77ch; max-width: var(--line-length-lg); } .line-length-xl { max-width: 90ch; max-width: var(--line-length-xl); } .line-length-none { max-width: none; } @media (min-width: 768px) { .tablet\:line-length-2xs { max-width: 15ch; max-width: var(--line-length-2xs); } .tablet\:line-length-xs { max-width: 30ch; max-width: var(--line-length-xs); } .tablet\:line-length-sm { max-width: 45ch; max-width: var(--line-length-sm); } .tablet\:line-length-md { max-width: 66ch; max-width: var(--line-length-md); } .tablet\:line-length-lg { max-width: 77ch; max-width: var(--line-length-lg); } .tablet\:line-length-xl { max-width: 90ch; max-width: var(--line-length-xl); } .tablet\:line-length-none { max-width: none; } } @media (min-width: 1152px) { .laptop\:line-length-2xs { max-width: 15ch; max-width: var(--line-length-2xs); } .laptop\:line-length-xs { max-width: 30ch; max-width: var(--line-length-xs); } .laptop\:line-length-sm { max-width: 45ch; max-width: var(--line-length-sm); } .laptop\:line-length-md { max-width: 66ch; max-width: var(--line-length-md); } .laptop\:line-length-lg { max-width: 77ch; max-width: var(--line-length-lg); } .laptop\:line-length-xl { max-width: 90ch; max-width: var(--line-length-xl); } .laptop\:line-length-none { max-width: none; } } @media (min-width: 1536px) { .desktop\:line-length-2xs { max-width: 15ch; max-width: var(--line-length-2xs); } .desktop\:line-length-xs { max-width: 30ch; max-width: var(--line-length-xs); } .desktop\:line-length-sm { max-width: 45ch; max-width: var(--line-length-sm); } .desktop\:line-length-md { max-width: 66ch; max-width: var(--line-length-md); } .desktop\:line-length-lg { max-width: 77ch; max-width: var(--line-length-lg); } .desktop\:line-length-xl { max-width: 90ch; max-width: var(--line-length-xl); } .desktop\:line-length-none { max-width: none; } } /* Auto Margins */ .margin-auto { margin-right: auto; margin-left: auto; } .margin-right-auto { margin-right: auto; } .margin-left-auto { margin-left: auto; } @media (min-width: 768px) { .tablet\:margin-auto { margin-right: auto; margin-left: auto; } .tablet\:margin-right-auto { margin-right: auto; } .tablet\:margin-left-auto { margin-left: auto; } } @media (min-width: 1152px) { .laptop\:margin-auto { margin-right: auto; margin-left: auto; } .laptop\:margin-right-auto { margin-right: auto; } .laptop\:margin-left-auto { margin-left: auto; } } @media (min-width: 1536px) { .desktop\:margin-auto { margin-right: auto; margin-left: auto; } .desktop\:margin-right-auto { margin-right: auto; } .desktop\:margin-left-auto { margin-left: auto; } } /* Floats & Clearfix */ .float-right { float: right; } .float-left { float: left; } .float-none { float: none; } @media (min-width: 768px) { .tablet\:float-right { float: right; } .tablet\:float-left { float: left; } .tablet\:float-none { float: none; } } @media (min-width: 1152px) { .laptop\:float-right { float: right; } .laptop\:float-left { float: left; } .laptop\:float-none { float: none; } } @media (min-width: 1536px) { .desktop\:float-right { float: right; } .desktop\:float-left { float: left; } .desktop\:float-none { float: none; } } .clearfix { display: table; clear: both; content: ""; } /* utilities */ /* accessibility-minded */ .sr-only,.screenreader-only { clip: rect(0, 0, 0, 0); position: absolute; -webkit-clip-path: inset(50%); clip-path: inset(50%); border: 0; padding: 0; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; } .sr-only:active,.screenreader-only:active, .sr-only:focus, .screenreader-only:focus { clip: auto; position: static; -webkit-clip-path: none; clip-path: none; width: auto; height: auto; overflow: visible; white-space: normal; } @media (min-width: 768px) { .tablet\:sr-only { clip: rect(0, 0, 0, 0); position: absolute; -webkit-clip-path: inset(50%); clip-path: inset(50%); border: 0; padding: 0; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; } .tablet\:sr-only-focusable:active, .tablet\:sr-only-focusable:focus { clip: auto; position: static; -webkit-clip-path: none; clip-path: none; width: auto; height: auto; overflow: visible; white-space: normal; } } @media (min-width: 1152px) { .laptop\:sr-only { clip: rect(0, 0, 0, 0); position: absolute; -webkit-clip-path: inset(50%); clip-path: inset(50%); border: 0; padding: 0; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; } .laptop\:sr-only-focusable:active, .laptop\:sr-only-focusable:focus { clip: auto; position: static; -webkit-clip-path: none; clip-path: none; width: auto; height: auto; overflow: visible; white-space: normal; } } @media (min-width: 1536px) { .desktop\:sr-only { clip: rect(0, 0, 0, 0); position: absolute; -webkit-clip-path: inset(50%); clip-path: inset(50%); border: 0; padding: 0; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; } .desktop\:sr-only-focusable:active, .desktop\:sr-only-focusable:focus { clip: auto; position: static; -webkit-clip-path: none; clip-path: none; width: auto; height: auto; overflow: visible; white-space: normal; } } /* make sure to set the parent of a :--breakout-action to have relative positioning */ .breakout-button,.breakout-link { position: static } .breakout-button:focus,.breakout-link:focus { outline: none; } .breakout-button::before,.breakout-link::before { display: block; position: absolute; top: 0; left: 0; cursor: pointer; width: 100%; height: 100%; content: ""; } .breakout-button:focus::before,.breakout-link:focus::before { outline: calc(1em * 3 / 16) solid #74c0fc; outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color); } .display-none { display: none; } .display-inline { display: inline; } .display-block { display: block; } .display-inline-block { display: inline-block; } .display-inline-table { display: inline-table; } .display-table { display: table; } .display-table-cell { display: table-cell; } .display-table-row { display: table-row; } .display-table-column { display: table-column; } .display-flex { display: -webkit-box; display: -ms-flexbox; display: flex; } .display-inline-flex { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .flex-row-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .flex-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .flex-column-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; } .flex-nowrap { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .flex-wrap-reverse { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } .flex-items-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .flex-items-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .flex-items-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .flex-items-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } .flex-content-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .flex-content-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .flex-content-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .flex-content-around { -ms-flex-pack: distribute; justify-content: space-around; } .flex-content-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .flex-content-evenly { -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; } @media (min-width: 768px) { .tablet\:display-none { display: none; } .tablet\:display-inline { display: inline; } .tablet\:display-block { display: block; } .tablet\:display-inline-block { display: inline-block; } .tablet\:display-inline-table { display: inline-table; } .tablet\:display-table { display: table; } .tablet\:display-table-cell { display: table-cell; } .tablet\:display-table-row { display: table-row; } .tablet\:display-table-column { display: table-column; } .tablet\:display-flex { display: -webkit-box; display: -ms-flexbox; display: flex; } .tablet\:display-inline-flex { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .tablet\:flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .tablet\:flex-row-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .tablet\:flex-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .tablet\:flex-column-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .tablet\:flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; } .tablet\:flex-nowrap { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .tablet\:flex-wrap-reverse { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } .tablet\:flex-items-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .tablet\:flex-items-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .tablet\:flex-items-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .tablet\:flex-items-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } .tablet\:flex-content-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .tablet\:flex-content-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .tablet\:flex-content-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .tablet\:flex-content-around { -ms-flex-pack: distribute; justify-content: space-around; } .tablet\:flex-content-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .tablet\:flex-content-evenly { -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; } } @media (min-width: 1152px) { .laptop\:display-none { display: none; } .laptop\:display-inline { display: inline; } .laptop\:display-block { display: block; } .laptop\:display-inline-block { display: inline-block; } .laptop\:display-inline-table { display: inline-table; } .laptop\:display-table { display: table; } .laptop\:display-table-cell { display: table-cell; } .laptop\:display-table-row { display: table-row; } .laptop\:display-table-column { display: table-column; } .laptop\:display-flex { display: -webkit-box; display: -ms-flexbox; display: flex; } .laptop\:display-inline-flex { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .laptop\:flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .laptop\:flex-row-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .laptop\:flex-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .laptop\:flex-column-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .laptop\:flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; } .laptop\:flex-nowrap { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .laptop\:flex-wrap-reverse { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } .laptop\:flex-items-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .laptop\:flex-items-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .laptop\:flex-items-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .laptop\:flex-items-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } .laptop\:flex-content-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .laptop\:flex-content-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .laptop\:flex-content-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .laptop\:flex-content-around { -ms-flex-pack: distribute; justify-content: space-around; } .laptop\:flex-content-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .laptop\:flex-content-evenly { -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; } } @media (min-width: 1536px) { .desktop\:display-none { display: none; } .desktop\:display-inline { display: inline; } .desktop\:display-block { display: block; } .desktop\:display-inline-block { display: inline-block; } .desktop\:display-inline-table { display: inline-table; } .desktop\:display-table { display: table; } .desktop\:display-table-cell { display: table-cell; } .desktop\:display-table-row { display: table-row; } .desktop\:display-table-column { display: table-column; } .desktop\:display-flex { display: -webkit-box; display: -ms-flexbox; display: flex; } .desktop\:display-inline-flex { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .desktop\:flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .desktop\:flex-row-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .desktop\:flex-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .desktop\:flex-column-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .desktop\:flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; } .desktop\:flex-nowrap { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .desktop\:flex-wrap-reverse { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } .desktop\:flex-items-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .desktop\:flex-items-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .desktop\:flex-items-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .desktop\:flex-items-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } .desktop\:flex-content-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .desktop\:flex-content-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .desktop\:flex-content-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .desktop\:flex-content-around { -ms-flex-pack: distribute; justify-content: space-around; } .desktop\:flex-content-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .desktop\:flex-content-evenly { -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; } } .align-start, .align-left { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; text-align: flex-start; } .align-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .align-end, .align-right { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; text-align: flex-end; } .align-top { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .align-middle { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .align-bottom { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .align-stretch { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .align-around { -ms-flex-pack: distribute; justify-content: space-around; } .align-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (min-width: 768px) { .tablet\:align-start, .tablet\:align-left { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; text-align: flex-start; } .tablet\:align-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .tablet\:align-end, .tablet\:align-right { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; text-align: flex-end; } .tablet\:align-top { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .tablet\:align-middle { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .tablet\:align-bottom { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .tablet\:align-around { -ms-flex-pack: distribute; justify-content: space-around; } .tablet\:align-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } @media (min-width: 1152px) { .laptop\:align-start, .laptop\:align-left { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; text-align: flex-start; } .laptop\:align-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .laptop\:align-end, .laptop\:align-right { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; text-align: flex-end; } .laptop\:align-top { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .laptop\:align-middle { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .laptop\:align-bottom { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .laptop\:align-around { -ms-flex-pack: distribute; justify-content: space-around; } .laptop\:align-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } @media (min-width: 1536px) { .desktop\:align-start, .desktop\:align-left { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; text-align: flex-start; } .desktop\:align-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .desktop\:align-end, .desktop\:align-right { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; text-align: flex-end; } .desktop\:align-top { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .desktop\:align-middle { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .desktop\:align-bottom { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .desktop\:align-around { -ms-flex-pack: distribute; justify-content: space-around; } .desktop\:align-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } .object-contain { -o-object-fit: contain; object-fit: contain; } .object-cover { -o-object-fit: cover; object-fit: cover; } .object-fill { -o-object-fit: fill; object-fit: fill; } .object-none { -o-object-fit: none; object-fit: none; } .object-scale-down { -o-object-fit: scale-down; object-fit: scale-down; } @media (min-width: 768px) { .tablet\:object-contain { -o-object-fit: contain; object-fit: contain; } .tablet\:object-cover { -o-object-fit: cover; object-fit: cover; } .tablet\:object-fill { -o-object-fit: fill; object-fit: fill; } .tablet\:object-none { -o-object-fit: none; object-fit: none; } .tablet\:object-scale-down { -o-object-fit: scale-down; object-fit: scale-down; } } @media (min-width: 1152px) { .laptop\:object-contain { -o-object-fit: contain; object-fit: contain; } .laptop\:object-cover { -o-object-fit: cover; object-fit: cover; } .laptop\:object-fill { -o-object-fit: fill; object-fit: fill; } .laptop\:object-none { -o-object-fit: none; object-fit: none; } .laptop\:object-scale-down { -o-object-fit: scale-down; object-fit: scale-down; } } @media (min-width: 1536px) { .desktop\:object-contain { -o-object-fit: contain; object-fit: contain; } .desktop\:object-cover { -o-object-fit: cover; object-fit: cover; } .desktop\:object-fill { -o-object-fit: fill; object-fit: fill; } .desktop\:object-none { -o-object-fit: none; object-fit: none; } .desktop\:object-scale-down { -o-object-fit: scale-down; object-fit: scale-down; } } /* spacing - margins */ .margin-7xs { margin: calc(1em * 1 / 16) !important; margin: var(--spacing-7xs) !important; } .margin-top-7xs { margin-top: calc(1em * 1 / 16) !important; margin-top: var(--spacing-7xs) !important; } .margin-right-7xs { margin-right: calc(1em * 1 / 16) !important; margin-right: var(--spacing-7xs) !important; } .margin-bottom-7xs { margin-bottom: calc(1em * 1 / 16) !important; margin-bottom: var(--spacing-7xs) !important; } .margin-left-7xs { margin-left: calc(1em * 1 / 16) !important; margin-left: var(--spacing-7xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-horizontal-7xs { margin-right: calc(1em * 1 / 16) !important; margin-right: var(--spacing-7xs) !important; margin-left: calc(1em * 1 / 16) !important; margin-left: var(--spacing-7xs) !important; } .margin-x-7xs { margin-right: calc(1em * 1 / 16) !important; margin-right: var(--spacing-7xs) !important; margin-left: calc(1em * 1 / 16) !important; margin-left: var(--spacing-7xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-vertical-7xs { margin-top: calc(1em * 1 / 16) !important; margin-top: var(--spacing-7xs) !important; margin-bottom: calc(1em * 1 / 16) !important; margin-bottom: var(--spacing-7xs) !important; } .margin-y-7xs { margin-top: calc(1em * 1 / 16) !important; margin-top: var(--spacing-7xs) !important; margin-bottom: calc(1em * 1 / 16) !important; margin-bottom: var(--spacing-7xs) !important; } .margin-6xs { margin: calc(1em * 2 / 16) !important; margin: var(--spacing-6xs) !important; } .margin-top-6xs { margin-top: calc(1em * 2 / 16) !important; margin-top: var(--spacing-6xs) !important; } .margin-right-6xs { margin-right: calc(1em * 2 / 16) !important; margin-right: var(--spacing-6xs) !important; } .margin-bottom-6xs { margin-bottom: calc(1em * 2 / 16) !important; margin-bottom: var(--spacing-6xs) !important; } .margin-left-6xs { margin-left: calc(1em * 2 / 16) !important; margin-left: var(--spacing-6xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-horizontal-6xs { margin-right: calc(1em * 2 / 16) !important; margin-right: var(--spacing-6xs) !important; margin-left: calc(1em * 2 / 16) !important; margin-left: var(--spacing-6xs) !important; } .margin-x-6xs { margin-right: calc(1em * 2 / 16) !important; margin-right: var(--spacing-6xs) !important; margin-left: calc(1em * 2 / 16) !important; margin-left: var(--spacing-6xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-vertical-6xs { margin-top: calc(1em * 2 / 16) !important; margin-top: var(--spacing-6xs) !important; margin-bottom: calc(1em * 2 / 16) !important; margin-bottom: var(--spacing-6xs) !important; } .margin-y-6xs { margin-top: calc(1em * 2 / 16) !important; margin-top: var(--spacing-6xs) !important; margin-bottom: calc(1em * 2 / 16) !important; margin-bottom: var(--spacing-6xs) !important; } .margin-5xs { margin: calc(1em * 3 / 16) !important; margin: var(--spacing-5xs) !important; } .margin-top-5xs { margin-top: calc(1em * 3 / 16) !important; margin-top: var(--spacing-5xs) !important; } .margin-right-5xs { margin-right: calc(1em * 3 / 16) !important; margin-right: var(--spacing-5xs) !important; } .margin-bottom-5xs { margin-bottom: calc(1em * 3 / 16) !important; margin-bottom: var(--spacing-5xs) !important; } .margin-left-5xs { margin-left: calc(1em * 3 / 16) !important; margin-left: var(--spacing-5xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-horizontal-5xs { margin-right: calc(1em * 3 / 16) !important; margin-right: var(--spacing-5xs) !important; margin-left: calc(1em * 3 / 16) !important; margin-left: var(--spacing-5xs) !important; } .margin-x-5xs { margin-right: calc(1em * 3 / 16) !important; margin-right: var(--spacing-5xs) !important; margin-left: calc(1em * 3 / 16) !important; margin-left: var(--spacing-5xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-vertical-5xs { margin-top: calc(1em * 3 / 16) !important; margin-top: var(--spacing-5xs) !important; margin-bottom: calc(1em * 3 / 16) !important; margin-bottom: var(--spacing-5xs) !important; } .margin-y-5xs { margin-top: calc(1em * 3 / 16) !important; margin-top: var(--spacing-5xs) !important; margin-bottom: calc(1em * 3 / 16) !important; margin-bottom: var(--spacing-5xs) !important; } .margin-4xs { margin: calc(1em * 4 / 16) !important; margin: var(--spacing-4xs) !important; } .margin-top-4xs { margin-top: calc(1em * 4 / 16) !important; margin-top: var(--spacing-4xs) !important; } .margin-right-4xs { margin-right: calc(1em * 4 / 16) !important; margin-right: var(--spacing-4xs) !important; } .margin-bottom-4xs { margin-bottom: calc(1em * 4 / 16) !important; margin-bottom: var(--spacing-4xs) !important; } .margin-left-4xs { margin-left: calc(1em * 4 / 16) !important; margin-left: var(--spacing-4xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-horizontal-4xs { margin-right: calc(1em * 4 / 16) !important; margin-right: var(--spacing-4xs) !important; margin-left: calc(1em * 4 / 16) !important; margin-left: var(--spacing-4xs) !important; } .margin-x-4xs { margin-right: calc(1em * 4 / 16) !important; margin-right: var(--spacing-4xs) !important; margin-left: calc(1em * 4 / 16) !important; margin-left: var(--spacing-4xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-vertical-4xs { margin-top: calc(1em * 4 / 16) !important; margin-top: var(--spacing-4xs) !important; margin-bottom: calc(1em * 4 / 16) !important; margin-bottom: var(--spacing-4xs) !important; } .margin-y-4xs { margin-top: calc(1em * 4 / 16) !important; margin-top: var(--spacing-4xs) !important; margin-bottom: calc(1em * 4 / 16) !important; margin-bottom: var(--spacing-4xs) !important; } .margin-3xs { margin: calc(1em * 6 / 16) !important; margin: var(--spacing-3xs) !important; } .margin-top-3xs { margin-top: calc(1em * 6 / 16) !important; margin-top: var(--spacing-3xs) !important; } .margin-right-3xs { margin-right: calc(1em * 6 / 16) !important; margin-right: var(--spacing-3xs) !important; } .margin-bottom-3xs { margin-bottom: calc(1em * 6 / 16) !important; margin-bottom: var(--spacing-3xs) !important; } .margin-left-3xs { margin-left: calc(1em * 6 / 16) !important; margin-left: var(--spacing-3xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-horizontal-3xs { margin-right: calc(1em * 6 / 16) !important; margin-right: var(--spacing-3xs) !important; margin-left: calc(1em * 6 / 16) !important; margin-left: var(--spacing-3xs) !important; } .margin-x-3xs { margin-right: calc(1em * 6 / 16) !important; margin-right: var(--spacing-3xs) !important; margin-left: calc(1em * 6 / 16) !important; margin-left: var(--spacing-3xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-vertical-3xs { margin-top: calc(1em * 6 / 16) !important; margin-top: var(--spacing-3xs) !important; margin-bottom: calc(1em * 6 / 16) !important; margin-bottom: var(--spacing-3xs) !important; } .margin-y-3xs { margin-top: calc(1em * 6 / 16) !important; margin-top: var(--spacing-3xs) !important; margin-bottom: calc(1em * 6 / 16) !important; margin-bottom: var(--spacing-3xs) !important; } .margin-2xs { margin: calc(1em * 8 / 16) !important; margin: var(--spacing-2xs) !important; } .margin-top-2xs { margin-top: calc(1em * 8 / 16) !important; margin-top: var(--spacing-2xs) !important; } .margin-right-2xs { margin-right: calc(1em * 8 / 16) !important; margin-right: var(--spacing-2xs) !important; } .margin-bottom-2xs { margin-bottom: calc(1em * 8 / 16) !important; margin-bottom: var(--spacing-2xs) !important; } .margin-left-2xs { margin-left: calc(1em * 8 / 16) !important; margin-left: var(--spacing-2xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-horizontal-2xs { margin-right: calc(1em * 8 / 16) !important; margin-right: var(--spacing-2xs) !important; margin-left: calc(1em * 8 / 16) !important; margin-left: var(--spacing-2xs) !important; } .margin-x-2xs { margin-right: calc(1em * 8 / 16) !important; margin-right: var(--spacing-2xs) !important; margin-left: calc(1em * 8 / 16) !important; margin-left: var(--spacing-2xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-vertical-2xs { margin-top: calc(1em * 8 / 16) !important; margin-top: var(--spacing-2xs) !important; margin-bottom: calc(1em * 8 / 16) !important; margin-bottom: var(--spacing-2xs) !important; } .margin-y-2xs { margin-top: calc(1em * 8 / 16) !important; margin-top: var(--spacing-2xs) !important; margin-bottom: calc(1em * 8 / 16) !important; margin-bottom: var(--spacing-2xs) !important; } .margin-xs { margin: calc(1em * 10 / 16) !important; margin: var(--spacing-xs) !important; } .margin-top-xs { margin-top: calc(1em * 10 / 16) !important; margin-top: var(--spacing-xs) !important; } .margin-right-xs { margin-right: calc(1em * 10 / 16) !important; margin-right: var(--spacing-xs) !important; } .margin-bottom-xs { margin-bottom: calc(1em * 10 / 16) !important; margin-bottom: var(--spacing-xs) !important; } .margin-left-xs { margin-left: calc(1em * 10 / 16) !important; margin-left: var(--spacing-xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-horizontal-xs { margin-right: calc(1em * 10 / 16) !important; margin-right: var(--spacing-xs) !important; margin-left: calc(1em * 10 / 16) !important; margin-left: var(--spacing-xs) !important; } .margin-x-xs { margin-right: calc(1em * 10 / 16) !important; margin-right: var(--spacing-xs) !important; margin-left: calc(1em * 10 / 16) !important; margin-left: var(--spacing-xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-vertical-xs { margin-top: calc(1em * 10 / 16) !important; margin-top: var(--spacing-xs) !important; margin-bottom: calc(1em * 10 / 16) !important; margin-bottom: var(--spacing-xs) !important; } .margin-y-xs { margin-top: calc(1em * 10 / 16) !important; margin-top: var(--spacing-xs) !important; margin-bottom: calc(1em * 10 / 16) !important; margin-bottom: var(--spacing-xs) !important; } .margin-sm { margin: calc(1em * 12 / 16) !important; margin: var(--spacing-sm) !important; } .margin-top-sm { margin-top: calc(1em * 12 / 16) !important; margin-top: var(--spacing-sm) !important; } .margin-right-sm { margin-right: calc(1em * 12 / 16) !important; margin-right: var(--spacing-sm) !important; } .margin-bottom-sm { margin-bottom: calc(1em * 12 / 16) !important; margin-bottom: var(--spacing-sm) !important; } .margin-left-sm { margin-left: calc(1em * 12 / 16) !important; margin-left: var(--spacing-sm) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-horizontal-sm { margin-right: calc(1em * 12 / 16) !important; margin-right: var(--spacing-sm) !important; margin-left: calc(1em * 12 / 16) !important; margin-left: var(--spacing-sm) !important; } .margin-x-sm { margin-right: calc(1em * 12 / 16) !important; margin-right: var(--spacing-sm) !important; margin-left: calc(1em * 12 / 16) !important; margin-left: var(--spacing-sm) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-vertical-sm { margin-top: calc(1em * 12 / 16) !important; margin-top: var(--spacing-sm) !important; margin-bottom: calc(1em * 12 / 16) !important; margin-bottom: var(--spacing-sm) !important; } .margin-y-sm { margin-top: calc(1em * 12 / 16) !important; margin-top: var(--spacing-sm) !important; margin-bottom: calc(1em * 12 / 16) !important; margin-bottom: var(--spacing-sm) !important; } .margin-md { margin: calc(1em * 1) !important; margin: var(--spacing-md) !important; } .margin-top-md { margin-top: calc(1em * 1) !important; margin-top: var(--spacing-md) !important; } .margin-right-md { margin-right: calc(1em * 1) !important; margin-right: var(--spacing-md) !important; } .margin-bottom-md { margin-bottom: calc(1em * 1) !important; margin-bottom: var(--spacing-md) !important; } .margin-left-md { margin-left: calc(1em * 1) !important; margin-left: var(--spacing-md) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-horizontal-md { margin-right: calc(1em * 1) !important; margin-right: var(--spacing-md) !important; margin-left: calc(1em * 1) !important; margin-left: var(--spacing-md) !important; } .margin-x-md { margin-right: calc(1em * 1) !important; margin-right: var(--spacing-md) !important; margin-left: calc(1em * 1) !important; margin-left: var(--spacing-md) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-vertical-md { margin-top: calc(1em * 1) !important; margin-top: var(--spacing-md) !important; margin-bottom: calc(1em * 1) !important; margin-bottom: var(--spacing-md) !important; } .margin-y-md { margin-top: calc(1em * 1) !important; margin-top: var(--spacing-md) !important; margin-bottom: calc(1em * 1) !important; margin-bottom: var(--spacing-md) !important; } .margin-lg { margin: calc(1em * 1.25) !important; margin: var(--spacing-lg) !important; } .margin-top-lg { margin-top: calc(1em * 1.25) !important; margin-top: var(--spacing-lg) !important; } .margin-right-lg { margin-right: calc(1em * 1.25) !important; margin-right: var(--spacing-lg) !important; } .margin-bottom-lg { margin-bottom: calc(1em * 1.25) !important; margin-bottom: var(--spacing-lg) !important; } .margin-left-lg { margin-left: calc(1em * 1.25) !important; margin-left: var(--spacing-lg) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-horizontal-lg { margin-right: calc(1em * 1.25) !important; margin-right: var(--spacing-lg) !important; margin-left: calc(1em * 1.25) !important; margin-left: var(--spacing-lg) !important; } .margin-x-lg { margin-right: calc(1em * 1.25) !important; margin-right: var(--spacing-lg) !important; margin-left: calc(1em * 1.25) !important; margin-left: var(--spacing-lg) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-vertical-lg { margin-top: calc(1em * 1.25) !important; margin-top: var(--spacing-lg) !important; margin-bottom: calc(1em * 1.25) !important; margin-bottom: var(--spacing-lg) !important; } .margin-y-lg { margin-top: calc(1em * 1.25) !important; margin-top: var(--spacing-lg) !important; margin-bottom: calc(1em * 1.25) !important; margin-bottom: var(--spacing-lg) !important; } .margin-xl { margin: calc(1em * 1.5) !important; margin: var(--spacing-xl) !important; } .margin-top-xl { margin-top: calc(1em * 1.5) !important; margin-top: var(--spacing-xl) !important; } .margin-right-xl { margin-right: calc(1em * 1.5) !important; margin-right: var(--spacing-xl) !important; } .margin-bottom-xl { margin-bottom: calc(1em * 1.5) !important; margin-bottom: var(--spacing-xl) !important; } .margin-left-xl { margin-left: calc(1em * 1.5) !important; margin-left: var(--spacing-xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-horizontal-xl { margin-right: calc(1em * 1.5) !important; margin-right: var(--spacing-xl) !important; margin-left: calc(1em * 1.5) !important; margin-left: var(--spacing-xl) !important; } .margin-x-xl { margin-right: calc(1em * 1.5) !important; margin-right: var(--spacing-xl) !important; margin-left: calc(1em * 1.5) !important; margin-left: var(--spacing-xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-vertical-xl { margin-top: calc(1em * 1.5) !important; margin-top: var(--spacing-xl) !important; margin-bottom: calc(1em * 1.5) !important; margin-bottom: var(--spacing-xl) !important; } .margin-y-xl { margin-top: calc(1em * 1.5) !important; margin-top: var(--spacing-xl) !important; margin-bottom: calc(1em * 1.5) !important; margin-bottom: var(--spacing-xl) !important; } .margin-2xl { margin: calc(1em * 2) !important; margin: var(--spacing-2xl) !important; } .margin-top-2xl { margin-top: calc(1em * 2) !important; margin-top: var(--spacing-2xl) !important; } .margin-right-2xl { margin-right: calc(1em * 2) !important; margin-right: var(--spacing-2xl) !important; } .margin-bottom-2xl { margin-bottom: calc(1em * 2) !important; margin-bottom: var(--spacing-2xl) !important; } .margin-left-2xl { margin-left: calc(1em * 2) !important; margin-left: var(--spacing-2xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-horizontal-2xl { margin-right: calc(1em * 2) !important; margin-right: var(--spacing-2xl) !important; margin-left: calc(1em * 2) !important; margin-left: var(--spacing-2xl) !important; } .margin-x-2xl { margin-right: calc(1em * 2) !important; margin-right: var(--spacing-2xl) !important; margin-left: calc(1em * 2) !important; margin-left: var(--spacing-2xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-vertical-2xl { margin-top: calc(1em * 2) !important; margin-top: var(--spacing-2xl) !important; margin-bottom: calc(1em * 2) !important; margin-bottom: var(--spacing-2xl) !important; } .margin-y-2xl { margin-top: calc(1em * 2) !important; margin-top: var(--spacing-2xl) !important; margin-bottom: calc(1em * 2) !important; margin-bottom: var(--spacing-2xl) !important; } .margin-3xl { margin: calc(1em * 2.5) !important; margin: var(--spacing-3xl) !important; } .margin-top-3xl { margin-top: calc(1em * 2.5) !important; margin-top: var(--spacing-3xl) !important; } .margin-right-3xl { margin-right: calc(1em * 2.5) !important; margin-right: var(--spacing-3xl) !important; } .margin-bottom-3xl { margin-bottom: calc(1em * 2.5) !important; margin-bottom: var(--spacing-3xl) !important; } .margin-left-3xl { margin-left: calc(1em * 2.5) !important; margin-left: var(--spacing-3xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-horizontal-3xl { margin-right: calc(1em * 2.5) !important; margin-right: var(--spacing-3xl) !important; margin-left: calc(1em * 2.5) !important; margin-left: var(--spacing-3xl) !important; } .margin-x-3xl { margin-right: calc(1em * 2.5) !important; margin-right: var(--spacing-3xl) !important; margin-left: calc(1em * 2.5) !important; margin-left: var(--spacing-3xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-vertical-3xl { margin-top: calc(1em * 2.5) !important; margin-top: var(--spacing-3xl) !important; margin-bottom: calc(1em * 2.5) !important; margin-bottom: var(--spacing-3xl) !important; } .margin-y-3xl { margin-top: calc(1em * 2.5) !important; margin-top: var(--spacing-3xl) !important; margin-bottom: calc(1em * 2.5) !important; margin-bottom: var(--spacing-3xl) !important; } .margin-4xl { margin: calc(1em * 3) !important; margin: var(--spacing-4xl) !important; } .margin-top-4xl { margin-top: calc(1em * 3) !important; margin-top: var(--spacing-4xl) !important; } .margin-right-4xl { margin-right: calc(1em * 3) !important; margin-right: var(--spacing-4xl) !important; } .margin-bottom-4xl { margin-bottom: calc(1em * 3) !important; margin-bottom: var(--spacing-4xl) !important; } .margin-left-4xl { margin-left: calc(1em * 3) !important; margin-left: var(--spacing-4xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-horizontal-4xl { margin-right: calc(1em * 3) !important; margin-right: var(--spacing-4xl) !important; margin-left: calc(1em * 3) !important; margin-left: var(--spacing-4xl) !important; } .margin-x-4xl { margin-right: calc(1em * 3) !important; margin-right: var(--spacing-4xl) !important; margin-left: calc(1em * 3) !important; margin-left: var(--spacing-4xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-vertical-4xl { margin-top: calc(1em * 3) !important; margin-top: var(--spacing-4xl) !important; margin-bottom: calc(1em * 3) !important; margin-bottom: var(--spacing-4xl) !important; } .margin-y-4xl { margin-top: calc(1em * 3) !important; margin-top: var(--spacing-4xl) !important; margin-bottom: calc(1em * 3) !important; margin-bottom: var(--spacing-4xl) !important; } .margin-5xl { margin: calc(1em * 4) !important; margin: var(--spacing-5xl) !important; } .margin-top-5xl { margin-top: calc(1em * 4) !important; margin-top: var(--spacing-5xl) !important; } .margin-right-5xl { margin-right: calc(1em * 4) !important; margin-right: var(--spacing-5xl) !important; } .margin-bottom-5xl { margin-bottom: calc(1em * 4) !important; margin-bottom: var(--spacing-5xl) !important; } .margin-left-5xl { margin-left: calc(1em * 4) !important; margin-left: var(--spacing-5xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-horizontal-5xl { margin-right: calc(1em * 4) !important; margin-right: var(--spacing-5xl) !important; margin-left: calc(1em * 4) !important; margin-left: var(--spacing-5xl) !important; } .margin-x-5xl { margin-right: calc(1em * 4) !important; margin-right: var(--spacing-5xl) !important; margin-left: calc(1em * 4) !important; margin-left: var(--spacing-5xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-vertical-5xl { margin-top: calc(1em * 4) !important; margin-top: var(--spacing-5xl) !important; margin-bottom: calc(1em * 4) !important; margin-bottom: var(--spacing-5xl) !important; } .margin-y-5xl { margin-top: calc(1em * 4) !important; margin-top: var(--spacing-5xl) !important; margin-bottom: calc(1em * 4) !important; margin-bottom: var(--spacing-5xl) !important; } .margin-6xl { margin: calc(1em * 5) !important; margin: var(--spacing-6xl) !important; } .margin-top-6xl { margin-top: calc(1em * 5) !important; margin-top: var(--spacing-6xl) !important; } .margin-right-6xl { margin-right: calc(1em * 5) !important; margin-right: var(--spacing-6xl) !important; } .margin-bottom-6xl { margin-bottom: calc(1em * 5) !important; margin-bottom: var(--spacing-6xl) !important; } .margin-left-6xl { margin-left: calc(1em * 5) !important; margin-left: var(--spacing-6xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-horizontal-6xl { margin-right: calc(1em * 5) !important; margin-right: var(--spacing-6xl) !important; margin-left: calc(1em * 5) !important; margin-left: var(--spacing-6xl) !important; } .margin-x-6xl { margin-right: calc(1em * 5) !important; margin-right: var(--spacing-6xl) !important; margin-left: calc(1em * 5) !important; margin-left: var(--spacing-6xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-vertical-6xl { margin-top: calc(1em * 5) !important; margin-top: var(--spacing-6xl) !important; margin-bottom: calc(1em * 5) !important; margin-bottom: var(--spacing-6xl) !important; } .margin-y-6xl { margin-top: calc(1em * 5) !important; margin-top: var(--spacing-6xl) !important; margin-bottom: calc(1em * 5) !important; margin-bottom: var(--spacing-6xl) !important; } .margin-7xl { margin: calc(1em * 6) !important; margin: var(--spacing-7xl) !important; } .margin-top-7xl { margin-top: calc(1em * 6) !important; margin-top: var(--spacing-7xl) !important; } .margin-right-7xl { margin-right: calc(1em * 6) !important; margin-right: var(--spacing-7xl) !important; } .margin-bottom-7xl { margin-bottom: calc(1em * 6) !important; margin-bottom: var(--spacing-7xl) !important; } .margin-left-7xl { margin-left: calc(1em * 6) !important; margin-left: var(--spacing-7xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-horizontal-7xl { margin-right: calc(1em * 6) !important; margin-right: var(--spacing-7xl) !important; margin-left: calc(1em * 6) !important; margin-left: var(--spacing-7xl) !important; } .margin-x-7xl { margin-right: calc(1em * 6) !important; margin-right: var(--spacing-7xl) !important; margin-left: calc(1em * 6) !important; margin-left: var(--spacing-7xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-vertical-7xl { margin-top: calc(1em * 6) !important; margin-top: var(--spacing-7xl) !important; margin-bottom: calc(1em * 6) !important; margin-bottom: var(--spacing-7xl) !important; } .margin-y-7xl { margin-top: calc(1em * 6) !important; margin-top: var(--spacing-7xl) !important; margin-bottom: calc(1em * 6) !important; margin-bottom: var(--spacing-7xl) !important; } .margin-8xl { margin: calc(1em * 8) !important; margin: var(--spacing-8xl) !important; } .margin-top-8xl { margin-top: calc(1em * 8) !important; margin-top: var(--spacing-8xl) !important; } .margin-right-8xl { margin-right: calc(1em * 8) !important; margin-right: var(--spacing-8xl) !important; } .margin-bottom-8xl { margin-bottom: calc(1em * 8) !important; margin-bottom: var(--spacing-8xl) !important; } .margin-left-8xl { margin-left: calc(1em * 8) !important; margin-left: var(--spacing-8xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-horizontal-8xl { margin-right: calc(1em * 8) !important; margin-right: var(--spacing-8xl) !important; margin-left: calc(1em * 8) !important; margin-left: var(--spacing-8xl) !important; } .margin-x-8xl { margin-right: calc(1em * 8) !important; margin-right: var(--spacing-8xl) !important; margin-left: calc(1em * 8) !important; margin-left: var(--spacing-8xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-vertical-8xl { margin-top: calc(1em * 8) !important; margin-top: var(--spacing-8xl) !important; margin-bottom: calc(1em * 8) !important; margin-bottom: var(--spacing-8xl) !important; } .margin-y-8xl { margin-top: calc(1em * 8) !important; margin-top: var(--spacing-8xl) !important; margin-bottom: calc(1em * 8) !important; margin-bottom: var(--spacing-8xl) !important; } .margin-9xl { margin: calc(1em * 10) !important; margin: var(--spacing-9xl) !important; } .margin-top-9xl { margin-top: calc(1em * 10) !important; margin-top: var(--spacing-9xl) !important; } .margin-right-9xl { margin-right: calc(1em * 10) !important; margin-right: var(--spacing-9xl) !important; } .margin-bottom-9xl { margin-bottom: calc(1em * 10) !important; margin-bottom: var(--spacing-9xl) !important; } .margin-left-9xl { margin-left: calc(1em * 10) !important; margin-left: var(--spacing-9xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-horizontal-9xl { margin-right: calc(1em * 10) !important; margin-right: var(--spacing-9xl) !important; margin-left: calc(1em * 10) !important; margin-left: var(--spacing-9xl) !important; } .margin-x-9xl { margin-right: calc(1em * 10) !important; margin-right: var(--spacing-9xl) !important; margin-left: calc(1em * 10) !important; margin-left: var(--spacing-9xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-vertical-9xl { margin-top: calc(1em * 10) !important; margin-top: var(--spacing-9xl) !important; margin-bottom: calc(1em * 10) !important; margin-bottom: var(--spacing-9xl) !important; } .margin-y-9xl { margin-top: calc(1em * 10) !important; margin-top: var(--spacing-9xl) !important; margin-bottom: calc(1em * 10) !important; margin-bottom: var(--spacing-9xl) !important; } .margin-10xl { margin: calc(1em * 12) !important; margin: var(--spacing-10xl) !important; } .margin-top-10xl { margin-top: calc(1em * 12) !important; margin-top: var(--spacing-10xl) !important; } .margin-right-10xl { margin-right: calc(1em * 12) !important; margin-right: var(--spacing-10xl) !important; } .margin-bottom-10xl { margin-bottom: calc(1em * 12) !important; margin-bottom: var(--spacing-10xl) !important; } .margin-left-10xl { margin-left: calc(1em * 12) !important; margin-left: var(--spacing-10xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-horizontal-10xl { margin-right: calc(1em * 12) !important; margin-right: var(--spacing-10xl) !important; margin-left: calc(1em * 12) !important; margin-left: var(--spacing-10xl) !important; } .margin-x-10xl { margin-right: calc(1em * 12) !important; margin-right: var(--spacing-10xl) !important; margin-left: calc(1em * 12) !important; margin-left: var(--spacing-10xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-vertical-10xl { margin-top: calc(1em * 12) !important; margin-top: var(--spacing-10xl) !important; margin-bottom: calc(1em * 12) !important; margin-bottom: var(--spacing-10xl) !important; } .margin-y-10xl { margin-top: calc(1em * 12) !important; margin-top: var(--spacing-10xl) !important; margin-bottom: calc(1em * 12) !important; margin-bottom: var(--spacing-10xl) !important; } .margin-11xl { margin: calc(1em * 16) !important; margin: var(--spacing-11xl) !important; } .margin-top-11xl { margin-top: calc(1em * 16) !important; margin-top: var(--spacing-11xl) !important; } .margin-right-11xl { margin-right: calc(1em * 16) !important; margin-right: var(--spacing-11xl) !important; } .margin-bottom-11xl { margin-bottom: calc(1em * 16) !important; margin-bottom: var(--spacing-11xl) !important; } .margin-left-11xl { margin-left: calc(1em * 16) !important; margin-left: var(--spacing-11xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-horizontal-11xl { margin-right: calc(1em * 16) !important; margin-right: var(--spacing-11xl) !important; margin-left: calc(1em * 16) !important; margin-left: var(--spacing-11xl) !important; } .margin-x-11xl { margin-right: calc(1em * 16) !important; margin-right: var(--spacing-11xl) !important; margin-left: calc(1em * 16) !important; margin-left: var(--spacing-11xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-vertical-11xl { margin-top: calc(1em * 16) !important; margin-top: var(--spacing-11xl) !important; margin-bottom: calc(1em * 16) !important; margin-bottom: var(--spacing-11xl) !important; } .margin-y-11xl { margin-top: calc(1em * 16) !important; margin-top: var(--spacing-11xl) !important; margin-bottom: calc(1em * 16) !important; margin-bottom: var(--spacing-11xl) !important; } .margin-12xl { margin: calc(1em * 20) !important; margin: var(--spacing-12xl) !important; } .margin-top-12xl { margin-top: calc(1em * 20) !important; margin-top: var(--spacing-12xl) !important; } .margin-right-12xl { margin-right: calc(1em * 20) !important; margin-right: var(--spacing-12xl) !important; } .margin-bottom-12xl { margin-bottom: calc(1em * 20) !important; margin-bottom: var(--spacing-12xl) !important; } .margin-left-12xl { margin-left: calc(1em * 20) !important; margin-left: var(--spacing-12xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-horizontal-12xl { margin-right: calc(1em * 20) !important; margin-right: var(--spacing-12xl) !important; margin-left: calc(1em * 20) !important; margin-left: var(--spacing-12xl) !important; } .margin-x-12xl { margin-right: calc(1em * 20) !important; margin-right: var(--spacing-12xl) !important; margin-left: calc(1em * 20) !important; margin-left: var(--spacing-12xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-vertical-12xl { margin-top: calc(1em * 20) !important; margin-top: var(--spacing-12xl) !important; margin-bottom: calc(1em * 20) !important; margin-bottom: var(--spacing-12xl) !important; } .margin-y-12xl { margin-top: calc(1em * 20) !important; margin-top: var(--spacing-12xl) !important; margin-bottom: calc(1em * 20) !important; margin-bottom: var(--spacing-12xl) !important; } .margin-0 { margin: 0 !important; margin: var(--spacing-0) !important; } .margin-top-0 { margin-top: 0 !important; margin-top: var(--spacing-0) !important; } .margin-right-0 { margin-right: 0 !important; margin-right: var(--spacing-0) !important; } .margin-bottom-0 { margin-bottom: 0 !important; margin-bottom: var(--spacing-0) !important; } .margin-left-0 { margin-left: 0 !important; margin-left: var(--spacing-0) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-horizontal-0 { margin-right: 0 !important; margin-right: var(--spacing-0) !important; margin-left: 0 !important; margin-left: var(--spacing-0) !important; } .margin-x-0 { margin-right: 0 !important; margin-right: var(--spacing-0) !important; margin-left: 0 !important; margin-left: var(--spacing-0) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-vertical-0 { margin-top: 0 !important; margin-top: var(--spacing-0) !important; margin-bottom: 0 !important; margin-bottom: var(--spacing-0) !important; } .margin-y-0 { margin-top: 0 !important; margin-top: var(--spacing-0) !important; margin-bottom: 0 !important; margin-bottom: var(--spacing-0) !important; } .margin-1 { margin: calc(1em * 1 / 16) !important; margin: var(--spacing-1) !important; } .margin-top-1 { margin-top: calc(1em * 1 / 16) !important; margin-top: var(--spacing-1) !important; } .margin-right-1 { margin-right: calc(1em * 1 / 16) !important; margin-right: var(--spacing-1) !important; } .margin-bottom-1 { margin-bottom: calc(1em * 1 / 16) !important; margin-bottom: var(--spacing-1) !important; } .margin-left-1 { margin-left: calc(1em * 1 / 16) !important; margin-left: var(--spacing-1) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-horizontal-1 { margin-right: calc(1em * 1 / 16) !important; margin-right: var(--spacing-1) !important; margin-left: calc(1em * 1 / 16) !important; margin-left: var(--spacing-1) !important; } .margin-x-1 { margin-right: calc(1em * 1 / 16) !important; margin-right: var(--spacing-1) !important; margin-left: calc(1em * 1 / 16) !important; margin-left: var(--spacing-1) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-vertical-1 { margin-top: calc(1em * 1 / 16) !important; margin-top: var(--spacing-1) !important; margin-bottom: calc(1em * 1 / 16) !important; margin-bottom: var(--spacing-1) !important; } .margin-y-1 { margin-top: calc(1em * 1 / 16) !important; margin-top: var(--spacing-1) !important; margin-bottom: calc(1em * 1 / 16) !important; margin-bottom: var(--spacing-1) !important; } .margin-1px { margin: 1px !important; margin: var(--spacing-1px) !important; } .margin-top-1px { margin-top: 1px !important; margin-top: var(--spacing-1px) !important; } .margin-right-1px { margin-right: 1px !important; margin-right: var(--spacing-1px) !important; } .margin-bottom-1px { margin-bottom: 1px !important; margin-bottom: var(--spacing-1px) !important; } .margin-left-1px { margin-left: 1px !important; margin-left: var(--spacing-1px) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-horizontal-1px { margin-right: 1px !important; margin-right: var(--spacing-1px) !important; margin-left: 1px !important; margin-left: var(--spacing-1px) !important; } .margin-x-1px { margin-right: 1px !important; margin-right: var(--spacing-1px) !important; margin-left: 1px !important; margin-left: var(--spacing-1px) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .margin-vertical-1px { margin-top: 1px !important; margin-top: var(--spacing-1px) !important; margin-bottom: 1px !important; margin-bottom: var(--spacing-1px) !important; } .margin-y-1px { margin-top: 1px !important; margin-top: var(--spacing-1px) !important; margin-bottom: 1px !important; margin-bottom: var(--spacing-1px) !important; } @media (min-width: 768px) { .tablet\:margin-7xs { margin: calc(1em * 1 / 16) !important; margin: var(--spacing-7xs) !important; } .tablet\:margin-top-7xs { margin-top: calc(1em * 1 / 16) !important; margin-top: var(--spacing-7xs) !important; } .tablet\:margin-right-7xs { margin-right: calc(1em * 1 / 16) !important; margin-right: var(--spacing-7xs) !important; } .tablet\:margin-bottom-7xs { margin-bottom: calc(1em * 1 / 16) !important; margin-bottom: var(--spacing-7xs) !important; } .tablet\:margin-left-7xs { margin-left: calc(1em * 1 / 16) !important; margin-left: var(--spacing-7xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-horizontal-7xs { margin-right: calc(1em * 1 / 16) !important; margin-right: var(--spacing-7xs) !important; margin-left: calc(1em * 1 / 16) !important; margin-left: var(--spacing-7xs) !important; } .tablet\:margin-x-7xs { margin-right: calc(1em * 1 / 16) !important; margin-right: var(--spacing-7xs) !important; margin-left: calc(1em * 1 / 16) !important; margin-left: var(--spacing-7xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-vertical-7xs { margin-top: calc(1em * 1 / 16) !important; margin-top: var(--spacing-7xs) !important; margin-bottom: calc(1em * 1 / 16) !important; margin-bottom: var(--spacing-7xs) !important; } .tablet\:margin-y-7xs { margin-top: calc(1em * 1 / 16) !important; margin-top: var(--spacing-7xs) !important; margin-bottom: calc(1em * 1 / 16) !important; margin-bottom: var(--spacing-7xs) !important; } .tablet\:margin-6xs { margin: calc(1em * 2 / 16) !important; margin: var(--spacing-6xs) !important; } .tablet\:margin-top-6xs { margin-top: calc(1em * 2 / 16) !important; margin-top: var(--spacing-6xs) !important; } .tablet\:margin-right-6xs { margin-right: calc(1em * 2 / 16) !important; margin-right: var(--spacing-6xs) !important; } .tablet\:margin-bottom-6xs { margin-bottom: calc(1em * 2 / 16) !important; margin-bottom: var(--spacing-6xs) !important; } .tablet\:margin-left-6xs { margin-left: calc(1em * 2 / 16) !important; margin-left: var(--spacing-6xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-horizontal-6xs { margin-right: calc(1em * 2 / 16) !important; margin-right: var(--spacing-6xs) !important; margin-left: calc(1em * 2 / 16) !important; margin-left: var(--spacing-6xs) !important; } .tablet\:margin-x-6xs { margin-right: calc(1em * 2 / 16) !important; margin-right: var(--spacing-6xs) !important; margin-left: calc(1em * 2 / 16) !important; margin-left: var(--spacing-6xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-vertical-6xs { margin-top: calc(1em * 2 / 16) !important; margin-top: var(--spacing-6xs) !important; margin-bottom: calc(1em * 2 / 16) !important; margin-bottom: var(--spacing-6xs) !important; } .tablet\:margin-y-6xs { margin-top: calc(1em * 2 / 16) !important; margin-top: var(--spacing-6xs) !important; margin-bottom: calc(1em * 2 / 16) !important; margin-bottom: var(--spacing-6xs) !important; } .tablet\:margin-5xs { margin: calc(1em * 3 / 16) !important; margin: var(--spacing-5xs) !important; } .tablet\:margin-top-5xs { margin-top: calc(1em * 3 / 16) !important; margin-top: var(--spacing-5xs) !important; } .tablet\:margin-right-5xs { margin-right: calc(1em * 3 / 16) !important; margin-right: var(--spacing-5xs) !important; } .tablet\:margin-bottom-5xs { margin-bottom: calc(1em * 3 / 16) !important; margin-bottom: var(--spacing-5xs) !important; } .tablet\:margin-left-5xs { margin-left: calc(1em * 3 / 16) !important; margin-left: var(--spacing-5xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-horizontal-5xs { margin-right: calc(1em * 3 / 16) !important; margin-right: var(--spacing-5xs) !important; margin-left: calc(1em * 3 / 16) !important; margin-left: var(--spacing-5xs) !important; } .tablet\:margin-x-5xs { margin-right: calc(1em * 3 / 16) !important; margin-right: var(--spacing-5xs) !important; margin-left: calc(1em * 3 / 16) !important; margin-left: var(--spacing-5xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-vertical-5xs { margin-top: calc(1em * 3 / 16) !important; margin-top: var(--spacing-5xs) !important; margin-bottom: calc(1em * 3 / 16) !important; margin-bottom: var(--spacing-5xs) !important; } .tablet\:margin-y-5xs { margin-top: calc(1em * 3 / 16) !important; margin-top: var(--spacing-5xs) !important; margin-bottom: calc(1em * 3 / 16) !important; margin-bottom: var(--spacing-5xs) !important; } .tablet\:margin-4xs { margin: calc(1em * 4 / 16) !important; margin: var(--spacing-4xs) !important; } .tablet\:margin-top-4xs { margin-top: calc(1em * 4 / 16) !important; margin-top: var(--spacing-4xs) !important; } .tablet\:margin-right-4xs { margin-right: calc(1em * 4 / 16) !important; margin-right: var(--spacing-4xs) !important; } .tablet\:margin-bottom-4xs { margin-bottom: calc(1em * 4 / 16) !important; margin-bottom: var(--spacing-4xs) !important; } .tablet\:margin-left-4xs { margin-left: calc(1em * 4 / 16) !important; margin-left: var(--spacing-4xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-horizontal-4xs { margin-right: calc(1em * 4 / 16) !important; margin-right: var(--spacing-4xs) !important; margin-left: calc(1em * 4 / 16) !important; margin-left: var(--spacing-4xs) !important; } .tablet\:margin-x-4xs { margin-right: calc(1em * 4 / 16) !important; margin-right: var(--spacing-4xs) !important; margin-left: calc(1em * 4 / 16) !important; margin-left: var(--spacing-4xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-vertical-4xs { margin-top: calc(1em * 4 / 16) !important; margin-top: var(--spacing-4xs) !important; margin-bottom: calc(1em * 4 / 16) !important; margin-bottom: var(--spacing-4xs) !important; } .tablet\:margin-y-4xs { margin-top: calc(1em * 4 / 16) !important; margin-top: var(--spacing-4xs) !important; margin-bottom: calc(1em * 4 / 16) !important; margin-bottom: var(--spacing-4xs) !important; } .tablet\:margin-3xs { margin: calc(1em * 6 / 16) !important; margin: var(--spacing-3xs) !important; } .tablet\:margin-top-3xs { margin-top: calc(1em * 6 / 16) !important; margin-top: var(--spacing-3xs) !important; } .tablet\:margin-right-3xs { margin-right: calc(1em * 6 / 16) !important; margin-right: var(--spacing-3xs) !important; } .tablet\:margin-bottom-3xs { margin-bottom: calc(1em * 6 / 16) !important; margin-bottom: var(--spacing-3xs) !important; } .tablet\:margin-left-3xs { margin-left: calc(1em * 6 / 16) !important; margin-left: var(--spacing-3xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-horizontal-3xs { margin-right: calc(1em * 6 / 16) !important; margin-right: var(--spacing-3xs) !important; margin-left: calc(1em * 6 / 16) !important; margin-left: var(--spacing-3xs) !important; } .tablet\:margin-x-3xs { margin-right: calc(1em * 6 / 16) !important; margin-right: var(--spacing-3xs) !important; margin-left: calc(1em * 6 / 16) !important; margin-left: var(--spacing-3xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-vertical-3xs { margin-top: calc(1em * 6 / 16) !important; margin-top: var(--spacing-3xs) !important; margin-bottom: calc(1em * 6 / 16) !important; margin-bottom: var(--spacing-3xs) !important; } .tablet\:margin-y-3xs { margin-top: calc(1em * 6 / 16) !important; margin-top: var(--spacing-3xs) !important; margin-bottom: calc(1em * 6 / 16) !important; margin-bottom: var(--spacing-3xs) !important; } .tablet\:margin-2xs { margin: calc(1em * 8 / 16) !important; margin: var(--spacing-2xs) !important; } .tablet\:margin-top-2xs { margin-top: calc(1em * 8 / 16) !important; margin-top: var(--spacing-2xs) !important; } .tablet\:margin-right-2xs { margin-right: calc(1em * 8 / 16) !important; margin-right: var(--spacing-2xs) !important; } .tablet\:margin-bottom-2xs { margin-bottom: calc(1em * 8 / 16) !important; margin-bottom: var(--spacing-2xs) !important; } .tablet\:margin-left-2xs { margin-left: calc(1em * 8 / 16) !important; margin-left: var(--spacing-2xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-horizontal-2xs { margin-right: calc(1em * 8 / 16) !important; margin-right: var(--spacing-2xs) !important; margin-left: calc(1em * 8 / 16) !important; margin-left: var(--spacing-2xs) !important; } .tablet\:margin-x-2xs { margin-right: calc(1em * 8 / 16) !important; margin-right: var(--spacing-2xs) !important; margin-left: calc(1em * 8 / 16) !important; margin-left: var(--spacing-2xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-vertical-2xs { margin-top: calc(1em * 8 / 16) !important; margin-top: var(--spacing-2xs) !important; margin-bottom: calc(1em * 8 / 16) !important; margin-bottom: var(--spacing-2xs) !important; } .tablet\:margin-y-2xs { margin-top: calc(1em * 8 / 16) !important; margin-top: var(--spacing-2xs) !important; margin-bottom: calc(1em * 8 / 16) !important; margin-bottom: var(--spacing-2xs) !important; } .tablet\:margin-xs { margin: calc(1em * 10 / 16) !important; margin: var(--spacing-xs) !important; } .tablet\:margin-top-xs { margin-top: calc(1em * 10 / 16) !important; margin-top: var(--spacing-xs) !important; } .tablet\:margin-right-xs { margin-right: calc(1em * 10 / 16) !important; margin-right: var(--spacing-xs) !important; } .tablet\:margin-bottom-xs { margin-bottom: calc(1em * 10 / 16) !important; margin-bottom: var(--spacing-xs) !important; } .tablet\:margin-left-xs { margin-left: calc(1em * 10 / 16) !important; margin-left: var(--spacing-xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-horizontal-xs { margin-right: calc(1em * 10 / 16) !important; margin-right: var(--spacing-xs) !important; margin-left: calc(1em * 10 / 16) !important; margin-left: var(--spacing-xs) !important; } .tablet\:margin-x-xs { margin-right: calc(1em * 10 / 16) !important; margin-right: var(--spacing-xs) !important; margin-left: calc(1em * 10 / 16) !important; margin-left: var(--spacing-xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-vertical-xs { margin-top: calc(1em * 10 / 16) !important; margin-top: var(--spacing-xs) !important; margin-bottom: calc(1em * 10 / 16) !important; margin-bottom: var(--spacing-xs) !important; } .tablet\:margin-y-xs { margin-top: calc(1em * 10 / 16) !important; margin-top: var(--spacing-xs) !important; margin-bottom: calc(1em * 10 / 16) !important; margin-bottom: var(--spacing-xs) !important; } .tablet\:margin-sm { margin: calc(1em * 12 / 16) !important; margin: var(--spacing-sm) !important; } .tablet\:margin-top-sm { margin-top: calc(1em * 12 / 16) !important; margin-top: var(--spacing-sm) !important; } .tablet\:margin-right-sm { margin-right: calc(1em * 12 / 16) !important; margin-right: var(--spacing-sm) !important; } .tablet\:margin-bottom-sm { margin-bottom: calc(1em * 12 / 16) !important; margin-bottom: var(--spacing-sm) !important; } .tablet\:margin-left-sm { margin-left: calc(1em * 12 / 16) !important; margin-left: var(--spacing-sm) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-horizontal-sm { margin-right: calc(1em * 12 / 16) !important; margin-right: var(--spacing-sm) !important; margin-left: calc(1em * 12 / 16) !important; margin-left: var(--spacing-sm) !important; } .tablet\:margin-x-sm { margin-right: calc(1em * 12 / 16) !important; margin-right: var(--spacing-sm) !important; margin-left: calc(1em * 12 / 16) !important; margin-left: var(--spacing-sm) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-vertical-sm { margin-top: calc(1em * 12 / 16) !important; margin-top: var(--spacing-sm) !important; margin-bottom: calc(1em * 12 / 16) !important; margin-bottom: var(--spacing-sm) !important; } .tablet\:margin-y-sm { margin-top: calc(1em * 12 / 16) !important; margin-top: var(--spacing-sm) !important; margin-bottom: calc(1em * 12 / 16) !important; margin-bottom: var(--spacing-sm) !important; } .tablet\:margin-md { margin: calc(1em * 1) !important; margin: var(--spacing-md) !important; } .tablet\:margin-top-md { margin-top: calc(1em * 1) !important; margin-top: var(--spacing-md) !important; } .tablet\:margin-right-md { margin-right: calc(1em * 1) !important; margin-right: var(--spacing-md) !important; } .tablet\:margin-bottom-md { margin-bottom: calc(1em * 1) !important; margin-bottom: var(--spacing-md) !important; } .tablet\:margin-left-md { margin-left: calc(1em * 1) !important; margin-left: var(--spacing-md) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-horizontal-md { margin-right: calc(1em * 1) !important; margin-right: var(--spacing-md) !important; margin-left: calc(1em * 1) !important; margin-left: var(--spacing-md) !important; } .tablet\:margin-x-md { margin-right: calc(1em * 1) !important; margin-right: var(--spacing-md) !important; margin-left: calc(1em * 1) !important; margin-left: var(--spacing-md) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-vertical-md { margin-top: calc(1em * 1) !important; margin-top: var(--spacing-md) !important; margin-bottom: calc(1em * 1) !important; margin-bottom: var(--spacing-md) !important; } .tablet\:margin-y-md { margin-top: calc(1em * 1) !important; margin-top: var(--spacing-md) !important; margin-bottom: calc(1em * 1) !important; margin-bottom: var(--spacing-md) !important; } .tablet\:margin-lg { margin: calc(1em * 1.25) !important; margin: var(--spacing-lg) !important; } .tablet\:margin-top-lg { margin-top: calc(1em * 1.25) !important; margin-top: var(--spacing-lg) !important; } .tablet\:margin-right-lg { margin-right: calc(1em * 1.25) !important; margin-right: var(--spacing-lg) !important; } .tablet\:margin-bottom-lg { margin-bottom: calc(1em * 1.25) !important; margin-bottom: var(--spacing-lg) !important; } .tablet\:margin-left-lg { margin-left: calc(1em * 1.25) !important; margin-left: var(--spacing-lg) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-horizontal-lg { margin-right: calc(1em * 1.25) !important; margin-right: var(--spacing-lg) !important; margin-left: calc(1em * 1.25) !important; margin-left: var(--spacing-lg) !important; } .tablet\:margin-x-lg { margin-right: calc(1em * 1.25) !important; margin-right: var(--spacing-lg) !important; margin-left: calc(1em * 1.25) !important; margin-left: var(--spacing-lg) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-vertical-lg { margin-top: calc(1em * 1.25) !important; margin-top: var(--spacing-lg) !important; margin-bottom: calc(1em * 1.25) !important; margin-bottom: var(--spacing-lg) !important; } .tablet\:margin-y-lg { margin-top: calc(1em * 1.25) !important; margin-top: var(--spacing-lg) !important; margin-bottom: calc(1em * 1.25) !important; margin-bottom: var(--spacing-lg) !important; } .tablet\:margin-xl { margin: calc(1em * 1.5) !important; margin: var(--spacing-xl) !important; } .tablet\:margin-top-xl { margin-top: calc(1em * 1.5) !important; margin-top: var(--spacing-xl) !important; } .tablet\:margin-right-xl { margin-right: calc(1em * 1.5) !important; margin-right: var(--spacing-xl) !important; } .tablet\:margin-bottom-xl { margin-bottom: calc(1em * 1.5) !important; margin-bottom: var(--spacing-xl) !important; } .tablet\:margin-left-xl { margin-left: calc(1em * 1.5) !important; margin-left: var(--spacing-xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-horizontal-xl { margin-right: calc(1em * 1.5) !important; margin-right: var(--spacing-xl) !important; margin-left: calc(1em * 1.5) !important; margin-left: var(--spacing-xl) !important; } .tablet\:margin-x-xl { margin-right: calc(1em * 1.5) !important; margin-right: var(--spacing-xl) !important; margin-left: calc(1em * 1.5) !important; margin-left: var(--spacing-xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-vertical-xl { margin-top: calc(1em * 1.5) !important; margin-top: var(--spacing-xl) !important; margin-bottom: calc(1em * 1.5) !important; margin-bottom: var(--spacing-xl) !important; } .tablet\:margin-y-xl { margin-top: calc(1em * 1.5) !important; margin-top: var(--spacing-xl) !important; margin-bottom: calc(1em * 1.5) !important; margin-bottom: var(--spacing-xl) !important; } .tablet\:margin-2xl { margin: calc(1em * 2) !important; margin: var(--spacing-2xl) !important; } .tablet\:margin-top-2xl { margin-top: calc(1em * 2) !important; margin-top: var(--spacing-2xl) !important; } .tablet\:margin-right-2xl { margin-right: calc(1em * 2) !important; margin-right: var(--spacing-2xl) !important; } .tablet\:margin-bottom-2xl { margin-bottom: calc(1em * 2) !important; margin-bottom: var(--spacing-2xl) !important; } .tablet\:margin-left-2xl { margin-left: calc(1em * 2) !important; margin-left: var(--spacing-2xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-horizontal-2xl { margin-right: calc(1em * 2) !important; margin-right: var(--spacing-2xl) !important; margin-left: calc(1em * 2) !important; margin-left: var(--spacing-2xl) !important; } .tablet\:margin-x-2xl { margin-right: calc(1em * 2) !important; margin-right: var(--spacing-2xl) !important; margin-left: calc(1em * 2) !important; margin-left: var(--spacing-2xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-vertical-2xl { margin-top: calc(1em * 2) !important; margin-top: var(--spacing-2xl) !important; margin-bottom: calc(1em * 2) !important; margin-bottom: var(--spacing-2xl) !important; } .tablet\:margin-y-2xl { margin-top: calc(1em * 2) !important; margin-top: var(--spacing-2xl) !important; margin-bottom: calc(1em * 2) !important; margin-bottom: var(--spacing-2xl) !important; } .tablet\:margin-3xl { margin: calc(1em * 2.5) !important; margin: var(--spacing-3xl) !important; } .tablet\:margin-top-3xl { margin-top: calc(1em * 2.5) !important; margin-top: var(--spacing-3xl) !important; } .tablet\:margin-right-3xl { margin-right: calc(1em * 2.5) !important; margin-right: var(--spacing-3xl) !important; } .tablet\:margin-bottom-3xl { margin-bottom: calc(1em * 2.5) !important; margin-bottom: var(--spacing-3xl) !important; } .tablet\:margin-left-3xl { margin-left: calc(1em * 2.5) !important; margin-left: var(--spacing-3xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-horizontal-3xl { margin-right: calc(1em * 2.5) !important; margin-right: var(--spacing-3xl) !important; margin-left: calc(1em * 2.5) !important; margin-left: var(--spacing-3xl) !important; } .tablet\:margin-x-3xl { margin-right: calc(1em * 2.5) !important; margin-right: var(--spacing-3xl) !important; margin-left: calc(1em * 2.5) !important; margin-left: var(--spacing-3xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-vertical-3xl { margin-top: calc(1em * 2.5) !important; margin-top: var(--spacing-3xl) !important; margin-bottom: calc(1em * 2.5) !important; margin-bottom: var(--spacing-3xl) !important; } .tablet\:margin-y-3xl { margin-top: calc(1em * 2.5) !important; margin-top: var(--spacing-3xl) !important; margin-bottom: calc(1em * 2.5) !important; margin-bottom: var(--spacing-3xl) !important; } .tablet\:margin-4xl { margin: calc(1em * 3) !important; margin: var(--spacing-4xl) !important; } .tablet\:margin-top-4xl { margin-top: calc(1em * 3) !important; margin-top: var(--spacing-4xl) !important; } .tablet\:margin-right-4xl { margin-right: calc(1em * 3) !important; margin-right: var(--spacing-4xl) !important; } .tablet\:margin-bottom-4xl { margin-bottom: calc(1em * 3) !important; margin-bottom: var(--spacing-4xl) !important; } .tablet\:margin-left-4xl { margin-left: calc(1em * 3) !important; margin-left: var(--spacing-4xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-horizontal-4xl { margin-right: calc(1em * 3) !important; margin-right: var(--spacing-4xl) !important; margin-left: calc(1em * 3) !important; margin-left: var(--spacing-4xl) !important; } .tablet\:margin-x-4xl { margin-right: calc(1em * 3) !important; margin-right: var(--spacing-4xl) !important; margin-left: calc(1em * 3) !important; margin-left: var(--spacing-4xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-vertical-4xl { margin-top: calc(1em * 3) !important; margin-top: var(--spacing-4xl) !important; margin-bottom: calc(1em * 3) !important; margin-bottom: var(--spacing-4xl) !important; } .tablet\:margin-y-4xl { margin-top: calc(1em * 3) !important; margin-top: var(--spacing-4xl) !important; margin-bottom: calc(1em * 3) !important; margin-bottom: var(--spacing-4xl) !important; } .tablet\:margin-5xl { margin: calc(1em * 4) !important; margin: var(--spacing-5xl) !important; } .tablet\:margin-top-5xl { margin-top: calc(1em * 4) !important; margin-top: var(--spacing-5xl) !important; } .tablet\:margin-right-5xl { margin-right: calc(1em * 4) !important; margin-right: var(--spacing-5xl) !important; } .tablet\:margin-bottom-5xl { margin-bottom: calc(1em * 4) !important; margin-bottom: var(--spacing-5xl) !important; } .tablet\:margin-left-5xl { margin-left: calc(1em * 4) !important; margin-left: var(--spacing-5xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-horizontal-5xl { margin-right: calc(1em * 4) !important; margin-right: var(--spacing-5xl) !important; margin-left: calc(1em * 4) !important; margin-left: var(--spacing-5xl) !important; } .tablet\:margin-x-5xl { margin-right: calc(1em * 4) !important; margin-right: var(--spacing-5xl) !important; margin-left: calc(1em * 4) !important; margin-left: var(--spacing-5xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-vertical-5xl { margin-top: calc(1em * 4) !important; margin-top: var(--spacing-5xl) !important; margin-bottom: calc(1em * 4) !important; margin-bottom: var(--spacing-5xl) !important; } .tablet\:margin-y-5xl { margin-top: calc(1em * 4) !important; margin-top: var(--spacing-5xl) !important; margin-bottom: calc(1em * 4) !important; margin-bottom: var(--spacing-5xl) !important; } .tablet\:margin-6xl { margin: calc(1em * 5) !important; margin: var(--spacing-6xl) !important; } .tablet\:margin-top-6xl { margin-top: calc(1em * 5) !important; margin-top: var(--spacing-6xl) !important; } .tablet\:margin-right-6xl { margin-right: calc(1em * 5) !important; margin-right: var(--spacing-6xl) !important; } .tablet\:margin-bottom-6xl { margin-bottom: calc(1em * 5) !important; margin-bottom: var(--spacing-6xl) !important; } .tablet\:margin-left-6xl { margin-left: calc(1em * 5) !important; margin-left: var(--spacing-6xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-horizontal-6xl { margin-right: calc(1em * 5) !important; margin-right: var(--spacing-6xl) !important; margin-left: calc(1em * 5) !important; margin-left: var(--spacing-6xl) !important; } .tablet\:margin-x-6xl { margin-right: calc(1em * 5) !important; margin-right: var(--spacing-6xl) !important; margin-left: calc(1em * 5) !important; margin-left: var(--spacing-6xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-vertical-6xl { margin-top: calc(1em * 5) !important; margin-top: var(--spacing-6xl) !important; margin-bottom: calc(1em * 5) !important; margin-bottom: var(--spacing-6xl) !important; } .tablet\:margin-y-6xl { margin-top: calc(1em * 5) !important; margin-top: var(--spacing-6xl) !important; margin-bottom: calc(1em * 5) !important; margin-bottom: var(--spacing-6xl) !important; } .tablet\:margin-7xl { margin: calc(1em * 6) !important; margin: var(--spacing-7xl) !important; } .tablet\:margin-top-7xl { margin-top: calc(1em * 6) !important; margin-top: var(--spacing-7xl) !important; } .tablet\:margin-right-7xl { margin-right: calc(1em * 6) !important; margin-right: var(--spacing-7xl) !important; } .tablet\:margin-bottom-7xl { margin-bottom: calc(1em * 6) !important; margin-bottom: var(--spacing-7xl) !important; } .tablet\:margin-left-7xl { margin-left: calc(1em * 6) !important; margin-left: var(--spacing-7xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-horizontal-7xl { margin-right: calc(1em * 6) !important; margin-right: var(--spacing-7xl) !important; margin-left: calc(1em * 6) !important; margin-left: var(--spacing-7xl) !important; } .tablet\:margin-x-7xl { margin-right: calc(1em * 6) !important; margin-right: var(--spacing-7xl) !important; margin-left: calc(1em * 6) !important; margin-left: var(--spacing-7xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-vertical-7xl { margin-top: calc(1em * 6) !important; margin-top: var(--spacing-7xl) !important; margin-bottom: calc(1em * 6) !important; margin-bottom: var(--spacing-7xl) !important; } .tablet\:margin-y-7xl { margin-top: calc(1em * 6) !important; margin-top: var(--spacing-7xl) !important; margin-bottom: calc(1em * 6) !important; margin-bottom: var(--spacing-7xl) !important; } .tablet\:margin-8xl { margin: calc(1em * 8) !important; margin: var(--spacing-8xl) !important; } .tablet\:margin-top-8xl { margin-top: calc(1em * 8) !important; margin-top: var(--spacing-8xl) !important; } .tablet\:margin-right-8xl { margin-right: calc(1em * 8) !important; margin-right: var(--spacing-8xl) !important; } .tablet\:margin-bottom-8xl { margin-bottom: calc(1em * 8) !important; margin-bottom: var(--spacing-8xl) !important; } .tablet\:margin-left-8xl { margin-left: calc(1em * 8) !important; margin-left: var(--spacing-8xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-horizontal-8xl { margin-right: calc(1em * 8) !important; margin-right: var(--spacing-8xl) !important; margin-left: calc(1em * 8) !important; margin-left: var(--spacing-8xl) !important; } .tablet\:margin-x-8xl { margin-right: calc(1em * 8) !important; margin-right: var(--spacing-8xl) !important; margin-left: calc(1em * 8) !important; margin-left: var(--spacing-8xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-vertical-8xl { margin-top: calc(1em * 8) !important; margin-top: var(--spacing-8xl) !important; margin-bottom: calc(1em * 8) !important; margin-bottom: var(--spacing-8xl) !important; } .tablet\:margin-y-8xl { margin-top: calc(1em * 8) !important; margin-top: var(--spacing-8xl) !important; margin-bottom: calc(1em * 8) !important; margin-bottom: var(--spacing-8xl) !important; } .tablet\:margin-9xl { margin: calc(1em * 10) !important; margin: var(--spacing-9xl) !important; } .tablet\:margin-top-9xl { margin-top: calc(1em * 10) !important; margin-top: var(--spacing-9xl) !important; } .tablet\:margin-right-9xl { margin-right: calc(1em * 10) !important; margin-right: var(--spacing-9xl) !important; } .tablet\:margin-bottom-9xl { margin-bottom: calc(1em * 10) !important; margin-bottom: var(--spacing-9xl) !important; } .tablet\:margin-left-9xl { margin-left: calc(1em * 10) !important; margin-left: var(--spacing-9xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-horizontal-9xl { margin-right: calc(1em * 10) !important; margin-right: var(--spacing-9xl) !important; margin-left: calc(1em * 10) !important; margin-left: var(--spacing-9xl) !important; } .tablet\:margin-x-9xl { margin-right: calc(1em * 10) !important; margin-right: var(--spacing-9xl) !important; margin-left: calc(1em * 10) !important; margin-left: var(--spacing-9xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-vertical-9xl { margin-top: calc(1em * 10) !important; margin-top: var(--spacing-9xl) !important; margin-bottom: calc(1em * 10) !important; margin-bottom: var(--spacing-9xl) !important; } .tablet\:margin-y-9xl { margin-top: calc(1em * 10) !important; margin-top: var(--spacing-9xl) !important; margin-bottom: calc(1em * 10) !important; margin-bottom: var(--spacing-9xl) !important; } .tablet\:margin-10xl { margin: calc(1em * 12) !important; margin: var(--spacing-10xl) !important; } .tablet\:margin-top-10xl { margin-top: calc(1em * 12) !important; margin-top: var(--spacing-10xl) !important; } .tablet\:margin-right-10xl { margin-right: calc(1em * 12) !important; margin-right: var(--spacing-10xl) !important; } .tablet\:margin-bottom-10xl { margin-bottom: calc(1em * 12) !important; margin-bottom: var(--spacing-10xl) !important; } .tablet\:margin-left-10xl { margin-left: calc(1em * 12) !important; margin-left: var(--spacing-10xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-horizontal-10xl { margin-right: calc(1em * 12) !important; margin-right: var(--spacing-10xl) !important; margin-left: calc(1em * 12) !important; margin-left: var(--spacing-10xl) !important; } .tablet\:margin-x-10xl { margin-right: calc(1em * 12) !important; margin-right: var(--spacing-10xl) !important; margin-left: calc(1em * 12) !important; margin-left: var(--spacing-10xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-vertical-10xl { margin-top: calc(1em * 12) !important; margin-top: var(--spacing-10xl) !important; margin-bottom: calc(1em * 12) !important; margin-bottom: var(--spacing-10xl) !important; } .tablet\:margin-y-10xl { margin-top: calc(1em * 12) !important; margin-top: var(--spacing-10xl) !important; margin-bottom: calc(1em * 12) !important; margin-bottom: var(--spacing-10xl) !important; } .tablet\:margin-11xl { margin: calc(1em * 16) !important; margin: var(--spacing-11xl) !important; } .tablet\:margin-top-11xl { margin-top: calc(1em * 16) !important; margin-top: var(--spacing-11xl) !important; } .tablet\:margin-right-11xl { margin-right: calc(1em * 16) !important; margin-right: var(--spacing-11xl) !important; } .tablet\:margin-bottom-11xl { margin-bottom: calc(1em * 16) !important; margin-bottom: var(--spacing-11xl) !important; } .tablet\:margin-left-11xl { margin-left: calc(1em * 16) !important; margin-left: var(--spacing-11xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-horizontal-11xl { margin-right: calc(1em * 16) !important; margin-right: var(--spacing-11xl) !important; margin-left: calc(1em * 16) !important; margin-left: var(--spacing-11xl) !important; } .tablet\:margin-x-11xl { margin-right: calc(1em * 16) !important; margin-right: var(--spacing-11xl) !important; margin-left: calc(1em * 16) !important; margin-left: var(--spacing-11xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-vertical-11xl { margin-top: calc(1em * 16) !important; margin-top: var(--spacing-11xl) !important; margin-bottom: calc(1em * 16) !important; margin-bottom: var(--spacing-11xl) !important; } .tablet\:margin-y-11xl { margin-top: calc(1em * 16) !important; margin-top: var(--spacing-11xl) !important; margin-bottom: calc(1em * 16) !important; margin-bottom: var(--spacing-11xl) !important; } .tablet\:margin-12xl { margin: calc(1em * 20) !important; margin: var(--spacing-12xl) !important; } .tablet\:margin-top-12xl { margin-top: calc(1em * 20) !important; margin-top: var(--spacing-12xl) !important; } .tablet\:margin-right-12xl { margin-right: calc(1em * 20) !important; margin-right: var(--spacing-12xl) !important; } .tablet\:margin-bottom-12xl { margin-bottom: calc(1em * 20) !important; margin-bottom: var(--spacing-12xl) !important; } .tablet\:margin-left-12xl { margin-left: calc(1em * 20) !important; margin-left: var(--spacing-12xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-horizontal-12xl { margin-right: calc(1em * 20) !important; margin-right: var(--spacing-12xl) !important; margin-left: calc(1em * 20) !important; margin-left: var(--spacing-12xl) !important; } .tablet\:margin-x-12xl { margin-right: calc(1em * 20) !important; margin-right: var(--spacing-12xl) !important; margin-left: calc(1em * 20) !important; margin-left: var(--spacing-12xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-vertical-12xl { margin-top: calc(1em * 20) !important; margin-top: var(--spacing-12xl) !important; margin-bottom: calc(1em * 20) !important; margin-bottom: var(--spacing-12xl) !important; } .tablet\:margin-y-12xl { margin-top: calc(1em * 20) !important; margin-top: var(--spacing-12xl) !important; margin-bottom: calc(1em * 20) !important; margin-bottom: var(--spacing-12xl) !important; } .tablet\:margin-0 { margin: 0 !important; margin: var(--spacing-0) !important; } .tablet\:margin-top-0 { margin-top: 0 !important; margin-top: var(--spacing-0) !important; } .tablet\:margin-right-0 { margin-right: 0 !important; margin-right: var(--spacing-0) !important; } .tablet\:margin-bottom-0 { margin-bottom: 0 !important; margin-bottom: var(--spacing-0) !important; } .tablet\:margin-left-0 { margin-left: 0 !important; margin-left: var(--spacing-0) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-horizontal-0 { margin-right: 0 !important; margin-right: var(--spacing-0) !important; margin-left: 0 !important; margin-left: var(--spacing-0) !important; } .tablet\:margin-x-0 { margin-right: 0 !important; margin-right: var(--spacing-0) !important; margin-left: 0 !important; margin-left: var(--spacing-0) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-vertical-0 { margin-top: 0 !important; margin-top: var(--spacing-0) !important; margin-bottom: 0 !important; margin-bottom: var(--spacing-0) !important; } .tablet\:margin-y-0 { margin-top: 0 !important; margin-top: var(--spacing-0) !important; margin-bottom: 0 !important; margin-bottom: var(--spacing-0) !important; } .tablet\:margin-1 { margin: calc(1em * 1 / 16) !important; margin: var(--spacing-1) !important; } .tablet\:margin-top-1 { margin-top: calc(1em * 1 / 16) !important; margin-top: var(--spacing-1) !important; } .tablet\:margin-right-1 { margin-right: calc(1em * 1 / 16) !important; margin-right: var(--spacing-1) !important; } .tablet\:margin-bottom-1 { margin-bottom: calc(1em * 1 / 16) !important; margin-bottom: var(--spacing-1) !important; } .tablet\:margin-left-1 { margin-left: calc(1em * 1 / 16) !important; margin-left: var(--spacing-1) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-horizontal-1 { margin-right: calc(1em * 1 / 16) !important; margin-right: var(--spacing-1) !important; margin-left: calc(1em * 1 / 16) !important; margin-left: var(--spacing-1) !important; } .tablet\:margin-x-1 { margin-right: calc(1em * 1 / 16) !important; margin-right: var(--spacing-1) !important; margin-left: calc(1em * 1 / 16) !important; margin-left: var(--spacing-1) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-vertical-1 { margin-top: calc(1em * 1 / 16) !important; margin-top: var(--spacing-1) !important; margin-bottom: calc(1em * 1 / 16) !important; margin-bottom: var(--spacing-1) !important; } .tablet\:margin-y-1 { margin-top: calc(1em * 1 / 16) !important; margin-top: var(--spacing-1) !important; margin-bottom: calc(1em * 1 / 16) !important; margin-bottom: var(--spacing-1) !important; } .tablet\:margin-1px { margin: 1px !important; margin: var(--spacing-1px) !important; } .tablet\:margin-top-1px { margin-top: 1px !important; margin-top: var(--spacing-1px) !important; } .tablet\:margin-right-1px { margin-right: 1px !important; margin-right: var(--spacing-1px) !important; } .tablet\:margin-bottom-1px { margin-bottom: 1px !important; margin-bottom: var(--spacing-1px) !important; } .tablet\:margin-left-1px { margin-left: 1px !important; margin-left: var(--spacing-1px) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-horizontal-1px { margin-right: 1px !important; margin-right: var(--spacing-1px) !important; margin-left: 1px !important; margin-left: var(--spacing-1px) !important; } .tablet\:margin-x-1px { margin-right: 1px !important; margin-right: var(--spacing-1px) !important; margin-left: 1px !important; margin-left: var(--spacing-1px) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:margin-vertical-1px { margin-top: 1px !important; margin-top: var(--spacing-1px) !important; margin-bottom: 1px !important; margin-bottom: var(--spacing-1px) !important; } .tablet\:margin-y-1px { margin-top: 1px !important; margin-top: var(--spacing-1px) !important; margin-bottom: 1px !important; margin-bottom: var(--spacing-1px) !important; } } @media (min-width: 1152px) { .laptop\:margin-7xs { margin: calc(1em * 1 / 16) !important; margin: var(--spacing-7xs) !important; } .laptop\:margin-top-7xs { margin-top: calc(1em * 1 / 16) !important; margin-top: var(--spacing-7xs) !important; } .laptop\:margin-right-7xs { margin-right: calc(1em * 1 / 16) !important; margin-right: var(--spacing-7xs) !important; } .laptop\:margin-bottom-7xs { margin-bottom: calc(1em * 1 / 16) !important; margin-bottom: var(--spacing-7xs) !important; } .laptop\:margin-left-7xs { margin-left: calc(1em * 1 / 16) !important; margin-left: var(--spacing-7xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-horizontal-7xs { margin-right: calc(1em * 1 / 16) !important; margin-right: var(--spacing-7xs) !important; margin-left: calc(1em * 1 / 16) !important; margin-left: var(--spacing-7xs) !important; } .laptop\:margin-x-7xs { margin-right: calc(1em * 1 / 16) !important; margin-right: var(--spacing-7xs) !important; margin-left: calc(1em * 1 / 16) !important; margin-left: var(--spacing-7xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-vertical-7xs { margin-top: calc(1em * 1 / 16) !important; margin-top: var(--spacing-7xs) !important; margin-bottom: calc(1em * 1 / 16) !important; margin-bottom: var(--spacing-7xs) !important; } .laptop\:margin-y-7xs { margin-top: calc(1em * 1 / 16) !important; margin-top: var(--spacing-7xs) !important; margin-bottom: calc(1em * 1 / 16) !important; margin-bottom: var(--spacing-7xs) !important; } .laptop\:margin-6xs { margin: calc(1em * 2 / 16) !important; margin: var(--spacing-6xs) !important; } .laptop\:margin-top-6xs { margin-top: calc(1em * 2 / 16) !important; margin-top: var(--spacing-6xs) !important; } .laptop\:margin-right-6xs { margin-right: calc(1em * 2 / 16) !important; margin-right: var(--spacing-6xs) !important; } .laptop\:margin-bottom-6xs { margin-bottom: calc(1em * 2 / 16) !important; margin-bottom: var(--spacing-6xs) !important; } .laptop\:margin-left-6xs { margin-left: calc(1em * 2 / 16) !important; margin-left: var(--spacing-6xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-horizontal-6xs { margin-right: calc(1em * 2 / 16) !important; margin-right: var(--spacing-6xs) !important; margin-left: calc(1em * 2 / 16) !important; margin-left: var(--spacing-6xs) !important; } .laptop\:margin-x-6xs { margin-right: calc(1em * 2 / 16) !important; margin-right: var(--spacing-6xs) !important; margin-left: calc(1em * 2 / 16) !important; margin-left: var(--spacing-6xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-vertical-6xs { margin-top: calc(1em * 2 / 16) !important; margin-top: var(--spacing-6xs) !important; margin-bottom: calc(1em * 2 / 16) !important; margin-bottom: var(--spacing-6xs) !important; } .laptop\:margin-y-6xs { margin-top: calc(1em * 2 / 16) !important; margin-top: var(--spacing-6xs) !important; margin-bottom: calc(1em * 2 / 16) !important; margin-bottom: var(--spacing-6xs) !important; } .laptop\:margin-5xs { margin: calc(1em * 3 / 16) !important; margin: var(--spacing-5xs) !important; } .laptop\:margin-top-5xs { margin-top: calc(1em * 3 / 16) !important; margin-top: var(--spacing-5xs) !important; } .laptop\:margin-right-5xs { margin-right: calc(1em * 3 / 16) !important; margin-right: var(--spacing-5xs) !important; } .laptop\:margin-bottom-5xs { margin-bottom: calc(1em * 3 / 16) !important; margin-bottom: var(--spacing-5xs) !important; } .laptop\:margin-left-5xs { margin-left: calc(1em * 3 / 16) !important; margin-left: var(--spacing-5xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-horizontal-5xs { margin-right: calc(1em * 3 / 16) !important; margin-right: var(--spacing-5xs) !important; margin-left: calc(1em * 3 / 16) !important; margin-left: var(--spacing-5xs) !important; } .laptop\:margin-x-5xs { margin-right: calc(1em * 3 / 16) !important; margin-right: var(--spacing-5xs) !important; margin-left: calc(1em * 3 / 16) !important; margin-left: var(--spacing-5xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-vertical-5xs { margin-top: calc(1em * 3 / 16) !important; margin-top: var(--spacing-5xs) !important; margin-bottom: calc(1em * 3 / 16) !important; margin-bottom: var(--spacing-5xs) !important; } .laptop\:margin-y-5xs { margin-top: calc(1em * 3 / 16) !important; margin-top: var(--spacing-5xs) !important; margin-bottom: calc(1em * 3 / 16) !important; margin-bottom: var(--spacing-5xs) !important; } .laptop\:margin-4xs { margin: calc(1em * 4 / 16) !important; margin: var(--spacing-4xs) !important; } .laptop\:margin-top-4xs { margin-top: calc(1em * 4 / 16) !important; margin-top: var(--spacing-4xs) !important; } .laptop\:margin-right-4xs { margin-right: calc(1em * 4 / 16) !important; margin-right: var(--spacing-4xs) !important; } .laptop\:margin-bottom-4xs { margin-bottom: calc(1em * 4 / 16) !important; margin-bottom: var(--spacing-4xs) !important; } .laptop\:margin-left-4xs { margin-left: calc(1em * 4 / 16) !important; margin-left: var(--spacing-4xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-horizontal-4xs { margin-right: calc(1em * 4 / 16) !important; margin-right: var(--spacing-4xs) !important; margin-left: calc(1em * 4 / 16) !important; margin-left: var(--spacing-4xs) !important; } .laptop\:margin-x-4xs { margin-right: calc(1em * 4 / 16) !important; margin-right: var(--spacing-4xs) !important; margin-left: calc(1em * 4 / 16) !important; margin-left: var(--spacing-4xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-vertical-4xs { margin-top: calc(1em * 4 / 16) !important; margin-top: var(--spacing-4xs) !important; margin-bottom: calc(1em * 4 / 16) !important; margin-bottom: var(--spacing-4xs) !important; } .laptop\:margin-y-4xs { margin-top: calc(1em * 4 / 16) !important; margin-top: var(--spacing-4xs) !important; margin-bottom: calc(1em * 4 / 16) !important; margin-bottom: var(--spacing-4xs) !important; } .laptop\:margin-3xs { margin: calc(1em * 6 / 16) !important; margin: var(--spacing-3xs) !important; } .laptop\:margin-top-3xs { margin-top: calc(1em * 6 / 16) !important; margin-top: var(--spacing-3xs) !important; } .laptop\:margin-right-3xs { margin-right: calc(1em * 6 / 16) !important; margin-right: var(--spacing-3xs) !important; } .laptop\:margin-bottom-3xs { margin-bottom: calc(1em * 6 / 16) !important; margin-bottom: var(--spacing-3xs) !important; } .laptop\:margin-left-3xs { margin-left: calc(1em * 6 / 16) !important; margin-left: var(--spacing-3xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-horizontal-3xs { margin-right: calc(1em * 6 / 16) !important; margin-right: var(--spacing-3xs) !important; margin-left: calc(1em * 6 / 16) !important; margin-left: var(--spacing-3xs) !important; } .laptop\:margin-x-3xs { margin-right: calc(1em * 6 / 16) !important; margin-right: var(--spacing-3xs) !important; margin-left: calc(1em * 6 / 16) !important; margin-left: var(--spacing-3xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-vertical-3xs { margin-top: calc(1em * 6 / 16) !important; margin-top: var(--spacing-3xs) !important; margin-bottom: calc(1em * 6 / 16) !important; margin-bottom: var(--spacing-3xs) !important; } .laptop\:margin-y-3xs { margin-top: calc(1em * 6 / 16) !important; margin-top: var(--spacing-3xs) !important; margin-bottom: calc(1em * 6 / 16) !important; margin-bottom: var(--spacing-3xs) !important; } .laptop\:margin-2xs { margin: calc(1em * 8 / 16) !important; margin: var(--spacing-2xs) !important; } .laptop\:margin-top-2xs { margin-top: calc(1em * 8 / 16) !important; margin-top: var(--spacing-2xs) !important; } .laptop\:margin-right-2xs { margin-right: calc(1em * 8 / 16) !important; margin-right: var(--spacing-2xs) !important; } .laptop\:margin-bottom-2xs { margin-bottom: calc(1em * 8 / 16) !important; margin-bottom: var(--spacing-2xs) !important; } .laptop\:margin-left-2xs { margin-left: calc(1em * 8 / 16) !important; margin-left: var(--spacing-2xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-horizontal-2xs { margin-right: calc(1em * 8 / 16) !important; margin-right: var(--spacing-2xs) !important; margin-left: calc(1em * 8 / 16) !important; margin-left: var(--spacing-2xs) !important; } .laptop\:margin-x-2xs { margin-right: calc(1em * 8 / 16) !important; margin-right: var(--spacing-2xs) !important; margin-left: calc(1em * 8 / 16) !important; margin-left: var(--spacing-2xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-vertical-2xs { margin-top: calc(1em * 8 / 16) !important; margin-top: var(--spacing-2xs) !important; margin-bottom: calc(1em * 8 / 16) !important; margin-bottom: var(--spacing-2xs) !important; } .laptop\:margin-y-2xs { margin-top: calc(1em * 8 / 16) !important; margin-top: var(--spacing-2xs) !important; margin-bottom: calc(1em * 8 / 16) !important; margin-bottom: var(--spacing-2xs) !important; } .laptop\:margin-xs { margin: calc(1em * 10 / 16) !important; margin: var(--spacing-xs) !important; } .laptop\:margin-top-xs { margin-top: calc(1em * 10 / 16) !important; margin-top: var(--spacing-xs) !important; } .laptop\:margin-right-xs { margin-right: calc(1em * 10 / 16) !important; margin-right: var(--spacing-xs) !important; } .laptop\:margin-bottom-xs { margin-bottom: calc(1em * 10 / 16) !important; margin-bottom: var(--spacing-xs) !important; } .laptop\:margin-left-xs { margin-left: calc(1em * 10 / 16) !important; margin-left: var(--spacing-xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-horizontal-xs { margin-right: calc(1em * 10 / 16) !important; margin-right: var(--spacing-xs) !important; margin-left: calc(1em * 10 / 16) !important; margin-left: var(--spacing-xs) !important; } .laptop\:margin-x-xs { margin-right: calc(1em * 10 / 16) !important; margin-right: var(--spacing-xs) !important; margin-left: calc(1em * 10 / 16) !important; margin-left: var(--spacing-xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-vertical-xs { margin-top: calc(1em * 10 / 16) !important; margin-top: var(--spacing-xs) !important; margin-bottom: calc(1em * 10 / 16) !important; margin-bottom: var(--spacing-xs) !important; } .laptop\:margin-y-xs { margin-top: calc(1em * 10 / 16) !important; margin-top: var(--spacing-xs) !important; margin-bottom: calc(1em * 10 / 16) !important; margin-bottom: var(--spacing-xs) !important; } .laptop\:margin-sm { margin: calc(1em * 12 / 16) !important; margin: var(--spacing-sm) !important; } .laptop\:margin-top-sm { margin-top: calc(1em * 12 / 16) !important; margin-top: var(--spacing-sm) !important; } .laptop\:margin-right-sm { margin-right: calc(1em * 12 / 16) !important; margin-right: var(--spacing-sm) !important; } .laptop\:margin-bottom-sm { margin-bottom: calc(1em * 12 / 16) !important; margin-bottom: var(--spacing-sm) !important; } .laptop\:margin-left-sm { margin-left: calc(1em * 12 / 16) !important; margin-left: var(--spacing-sm) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-horizontal-sm { margin-right: calc(1em * 12 / 16) !important; margin-right: var(--spacing-sm) !important; margin-left: calc(1em * 12 / 16) !important; margin-left: var(--spacing-sm) !important; } .laptop\:margin-x-sm { margin-right: calc(1em * 12 / 16) !important; margin-right: var(--spacing-sm) !important; margin-left: calc(1em * 12 / 16) !important; margin-left: var(--spacing-sm) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-vertical-sm { margin-top: calc(1em * 12 / 16) !important; margin-top: var(--spacing-sm) !important; margin-bottom: calc(1em * 12 / 16) !important; margin-bottom: var(--spacing-sm) !important; } .laptop\:margin-y-sm { margin-top: calc(1em * 12 / 16) !important; margin-top: var(--spacing-sm) !important; margin-bottom: calc(1em * 12 / 16) !important; margin-bottom: var(--spacing-sm) !important; } .laptop\:margin-md { margin: calc(1em * 1) !important; margin: var(--spacing-md) !important; } .laptop\:margin-top-md { margin-top: calc(1em * 1) !important; margin-top: var(--spacing-md) !important; } .laptop\:margin-right-md { margin-right: calc(1em * 1) !important; margin-right: var(--spacing-md) !important; } .laptop\:margin-bottom-md { margin-bottom: calc(1em * 1) !important; margin-bottom: var(--spacing-md) !important; } .laptop\:margin-left-md { margin-left: calc(1em * 1) !important; margin-left: var(--spacing-md) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-horizontal-md { margin-right: calc(1em * 1) !important; margin-right: var(--spacing-md) !important; margin-left: calc(1em * 1) !important; margin-left: var(--spacing-md) !important; } .laptop\:margin-x-md { margin-right: calc(1em * 1) !important; margin-right: var(--spacing-md) !important; margin-left: calc(1em * 1) !important; margin-left: var(--spacing-md) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-vertical-md { margin-top: calc(1em * 1) !important; margin-top: var(--spacing-md) !important; margin-bottom: calc(1em * 1) !important; margin-bottom: var(--spacing-md) !important; } .laptop\:margin-y-md { margin-top: calc(1em * 1) !important; margin-top: var(--spacing-md) !important; margin-bottom: calc(1em * 1) !important; margin-bottom: var(--spacing-md) !important; } .laptop\:margin-lg { margin: calc(1em * 1.25) !important; margin: var(--spacing-lg) !important; } .laptop\:margin-top-lg { margin-top: calc(1em * 1.25) !important; margin-top: var(--spacing-lg) !important; } .laptop\:margin-right-lg { margin-right: calc(1em * 1.25) !important; margin-right: var(--spacing-lg) !important; } .laptop\:margin-bottom-lg { margin-bottom: calc(1em * 1.25) !important; margin-bottom: var(--spacing-lg) !important; } .laptop\:margin-left-lg { margin-left: calc(1em * 1.25) !important; margin-left: var(--spacing-lg) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-horizontal-lg { margin-right: calc(1em * 1.25) !important; margin-right: var(--spacing-lg) !important; margin-left: calc(1em * 1.25) !important; margin-left: var(--spacing-lg) !important; } .laptop\:margin-x-lg { margin-right: calc(1em * 1.25) !important; margin-right: var(--spacing-lg) !important; margin-left: calc(1em * 1.25) !important; margin-left: var(--spacing-lg) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-vertical-lg { margin-top: calc(1em * 1.25) !important; margin-top: var(--spacing-lg) !important; margin-bottom: calc(1em * 1.25) !important; margin-bottom: var(--spacing-lg) !important; } .laptop\:margin-y-lg { margin-top: calc(1em * 1.25) !important; margin-top: var(--spacing-lg) !important; margin-bottom: calc(1em * 1.25) !important; margin-bottom: var(--spacing-lg) !important; } .laptop\:margin-xl { margin: calc(1em * 1.5) !important; margin: var(--spacing-xl) !important; } .laptop\:margin-top-xl { margin-top: calc(1em * 1.5) !important; margin-top: var(--spacing-xl) !important; } .laptop\:margin-right-xl { margin-right: calc(1em * 1.5) !important; margin-right: var(--spacing-xl) !important; } .laptop\:margin-bottom-xl { margin-bottom: calc(1em * 1.5) !important; margin-bottom: var(--spacing-xl) !important; } .laptop\:margin-left-xl { margin-left: calc(1em * 1.5) !important; margin-left: var(--spacing-xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-horizontal-xl { margin-right: calc(1em * 1.5) !important; margin-right: var(--spacing-xl) !important; margin-left: calc(1em * 1.5) !important; margin-left: var(--spacing-xl) !important; } .laptop\:margin-x-xl { margin-right: calc(1em * 1.5) !important; margin-right: var(--spacing-xl) !important; margin-left: calc(1em * 1.5) !important; margin-left: var(--spacing-xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-vertical-xl { margin-top: calc(1em * 1.5) !important; margin-top: var(--spacing-xl) !important; margin-bottom: calc(1em * 1.5) !important; margin-bottom: var(--spacing-xl) !important; } .laptop\:margin-y-xl { margin-top: calc(1em * 1.5) !important; margin-top: var(--spacing-xl) !important; margin-bottom: calc(1em * 1.5) !important; margin-bottom: var(--spacing-xl) !important; } .laptop\:margin-2xl { margin: calc(1em * 2) !important; margin: var(--spacing-2xl) !important; } .laptop\:margin-top-2xl { margin-top: calc(1em * 2) !important; margin-top: var(--spacing-2xl) !important; } .laptop\:margin-right-2xl { margin-right: calc(1em * 2) !important; margin-right: var(--spacing-2xl) !important; } .laptop\:margin-bottom-2xl { margin-bottom: calc(1em * 2) !important; margin-bottom: var(--spacing-2xl) !important; } .laptop\:margin-left-2xl { margin-left: calc(1em * 2) !important; margin-left: var(--spacing-2xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-horizontal-2xl { margin-right: calc(1em * 2) !important; margin-right: var(--spacing-2xl) !important; margin-left: calc(1em * 2) !important; margin-left: var(--spacing-2xl) !important; } .laptop\:margin-x-2xl { margin-right: calc(1em * 2) !important; margin-right: var(--spacing-2xl) !important; margin-left: calc(1em * 2) !important; margin-left: var(--spacing-2xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-vertical-2xl { margin-top: calc(1em * 2) !important; margin-top: var(--spacing-2xl) !important; margin-bottom: calc(1em * 2) !important; margin-bottom: var(--spacing-2xl) !important; } .laptop\:margin-y-2xl { margin-top: calc(1em * 2) !important; margin-top: var(--spacing-2xl) !important; margin-bottom: calc(1em * 2) !important; margin-bottom: var(--spacing-2xl) !important; } .laptop\:margin-3xl { margin: calc(1em * 2.5) !important; margin: var(--spacing-3xl) !important; } .laptop\:margin-top-3xl { margin-top: calc(1em * 2.5) !important; margin-top: var(--spacing-3xl) !important; } .laptop\:margin-right-3xl { margin-right: calc(1em * 2.5) !important; margin-right: var(--spacing-3xl) !important; } .laptop\:margin-bottom-3xl { margin-bottom: calc(1em * 2.5) !important; margin-bottom: var(--spacing-3xl) !important; } .laptop\:margin-left-3xl { margin-left: calc(1em * 2.5) !important; margin-left: var(--spacing-3xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-horizontal-3xl { margin-right: calc(1em * 2.5) !important; margin-right: var(--spacing-3xl) !important; margin-left: calc(1em * 2.5) !important; margin-left: var(--spacing-3xl) !important; } .laptop\:margin-x-3xl { margin-right: calc(1em * 2.5) !important; margin-right: var(--spacing-3xl) !important; margin-left: calc(1em * 2.5) !important; margin-left: var(--spacing-3xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-vertical-3xl { margin-top: calc(1em * 2.5) !important; margin-top: var(--spacing-3xl) !important; margin-bottom: calc(1em * 2.5) !important; margin-bottom: var(--spacing-3xl) !important; } .laptop\:margin-y-3xl { margin-top: calc(1em * 2.5) !important; margin-top: var(--spacing-3xl) !important; margin-bottom: calc(1em * 2.5) !important; margin-bottom: var(--spacing-3xl) !important; } .laptop\:margin-4xl { margin: calc(1em * 3) !important; margin: var(--spacing-4xl) !important; } .laptop\:margin-top-4xl { margin-top: calc(1em * 3) !important; margin-top: var(--spacing-4xl) !important; } .laptop\:margin-right-4xl { margin-right: calc(1em * 3) !important; margin-right: var(--spacing-4xl) !important; } .laptop\:margin-bottom-4xl { margin-bottom: calc(1em * 3) !important; margin-bottom: var(--spacing-4xl) !important; } .laptop\:margin-left-4xl { margin-left: calc(1em * 3) !important; margin-left: var(--spacing-4xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-horizontal-4xl { margin-right: calc(1em * 3) !important; margin-right: var(--spacing-4xl) !important; margin-left: calc(1em * 3) !important; margin-left: var(--spacing-4xl) !important; } .laptop\:margin-x-4xl { margin-right: calc(1em * 3) !important; margin-right: var(--spacing-4xl) !important; margin-left: calc(1em * 3) !important; margin-left: var(--spacing-4xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-vertical-4xl { margin-top: calc(1em * 3) !important; margin-top: var(--spacing-4xl) !important; margin-bottom: calc(1em * 3) !important; margin-bottom: var(--spacing-4xl) !important; } .laptop\:margin-y-4xl { margin-top: calc(1em * 3) !important; margin-top: var(--spacing-4xl) !important; margin-bottom: calc(1em * 3) !important; margin-bottom: var(--spacing-4xl) !important; } .laptop\:margin-5xl { margin: calc(1em * 4) !important; margin: var(--spacing-5xl) !important; } .laptop\:margin-top-5xl { margin-top: calc(1em * 4) !important; margin-top: var(--spacing-5xl) !important; } .laptop\:margin-right-5xl { margin-right: calc(1em * 4) !important; margin-right: var(--spacing-5xl) !important; } .laptop\:margin-bottom-5xl { margin-bottom: calc(1em * 4) !important; margin-bottom: var(--spacing-5xl) !important; } .laptop\:margin-left-5xl { margin-left: calc(1em * 4) !important; margin-left: var(--spacing-5xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-horizontal-5xl { margin-right: calc(1em * 4) !important; margin-right: var(--spacing-5xl) !important; margin-left: calc(1em * 4) !important; margin-left: var(--spacing-5xl) !important; } .laptop\:margin-x-5xl { margin-right: calc(1em * 4) !important; margin-right: var(--spacing-5xl) !important; margin-left: calc(1em * 4) !important; margin-left: var(--spacing-5xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-vertical-5xl { margin-top: calc(1em * 4) !important; margin-top: var(--spacing-5xl) !important; margin-bottom: calc(1em * 4) !important; margin-bottom: var(--spacing-5xl) !important; } .laptop\:margin-y-5xl { margin-top: calc(1em * 4) !important; margin-top: var(--spacing-5xl) !important; margin-bottom: calc(1em * 4) !important; margin-bottom: var(--spacing-5xl) !important; } .laptop\:margin-6xl { margin: calc(1em * 5) !important; margin: var(--spacing-6xl) !important; } .laptop\:margin-top-6xl { margin-top: calc(1em * 5) !important; margin-top: var(--spacing-6xl) !important; } .laptop\:margin-right-6xl { margin-right: calc(1em * 5) !important; margin-right: var(--spacing-6xl) !important; } .laptop\:margin-bottom-6xl { margin-bottom: calc(1em * 5) !important; margin-bottom: var(--spacing-6xl) !important; } .laptop\:margin-left-6xl { margin-left: calc(1em * 5) !important; margin-left: var(--spacing-6xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-horizontal-6xl { margin-right: calc(1em * 5) !important; margin-right: var(--spacing-6xl) !important; margin-left: calc(1em * 5) !important; margin-left: var(--spacing-6xl) !important; } .laptop\:margin-x-6xl { margin-right: calc(1em * 5) !important; margin-right: var(--spacing-6xl) !important; margin-left: calc(1em * 5) !important; margin-left: var(--spacing-6xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-vertical-6xl { margin-top: calc(1em * 5) !important; margin-top: var(--spacing-6xl) !important; margin-bottom: calc(1em * 5) !important; margin-bottom: var(--spacing-6xl) !important; } .laptop\:margin-y-6xl { margin-top: calc(1em * 5) !important; margin-top: var(--spacing-6xl) !important; margin-bottom: calc(1em * 5) !important; margin-bottom: var(--spacing-6xl) !important; } .laptop\:margin-7xl { margin: calc(1em * 6) !important; margin: var(--spacing-7xl) !important; } .laptop\:margin-top-7xl { margin-top: calc(1em * 6) !important; margin-top: var(--spacing-7xl) !important; } .laptop\:margin-right-7xl { margin-right: calc(1em * 6) !important; margin-right: var(--spacing-7xl) !important; } .laptop\:margin-bottom-7xl { margin-bottom: calc(1em * 6) !important; margin-bottom: var(--spacing-7xl) !important; } .laptop\:margin-left-7xl { margin-left: calc(1em * 6) !important; margin-left: var(--spacing-7xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-horizontal-7xl { margin-right: calc(1em * 6) !important; margin-right: var(--spacing-7xl) !important; margin-left: calc(1em * 6) !important; margin-left: var(--spacing-7xl) !important; } .laptop\:margin-x-7xl { margin-right: calc(1em * 6) !important; margin-right: var(--spacing-7xl) !important; margin-left: calc(1em * 6) !important; margin-left: var(--spacing-7xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-vertical-7xl { margin-top: calc(1em * 6) !important; margin-top: var(--spacing-7xl) !important; margin-bottom: calc(1em * 6) !important; margin-bottom: var(--spacing-7xl) !important; } .laptop\:margin-y-7xl { margin-top: calc(1em * 6) !important; margin-top: var(--spacing-7xl) !important; margin-bottom: calc(1em * 6) !important; margin-bottom: var(--spacing-7xl) !important; } .laptop\:margin-8xl { margin: calc(1em * 8) !important; margin: var(--spacing-8xl) !important; } .laptop\:margin-top-8xl { margin-top: calc(1em * 8) !important; margin-top: var(--spacing-8xl) !important; } .laptop\:margin-right-8xl { margin-right: calc(1em * 8) !important; margin-right: var(--spacing-8xl) !important; } .laptop\:margin-bottom-8xl { margin-bottom: calc(1em * 8) !important; margin-bottom: var(--spacing-8xl) !important; } .laptop\:margin-left-8xl { margin-left: calc(1em * 8) !important; margin-left: var(--spacing-8xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-horizontal-8xl { margin-right: calc(1em * 8) !important; margin-right: var(--spacing-8xl) !important; margin-left: calc(1em * 8) !important; margin-left: var(--spacing-8xl) !important; } .laptop\:margin-x-8xl { margin-right: calc(1em * 8) !important; margin-right: var(--spacing-8xl) !important; margin-left: calc(1em * 8) !important; margin-left: var(--spacing-8xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-vertical-8xl { margin-top: calc(1em * 8) !important; margin-top: var(--spacing-8xl) !important; margin-bottom: calc(1em * 8) !important; margin-bottom: var(--spacing-8xl) !important; } .laptop\:margin-y-8xl { margin-top: calc(1em * 8) !important; margin-top: var(--spacing-8xl) !important; margin-bottom: calc(1em * 8) !important; margin-bottom: var(--spacing-8xl) !important; } .laptop\:margin-9xl { margin: calc(1em * 10) !important; margin: var(--spacing-9xl) !important; } .laptop\:margin-top-9xl { margin-top: calc(1em * 10) !important; margin-top: var(--spacing-9xl) !important; } .laptop\:margin-right-9xl { margin-right: calc(1em * 10) !important; margin-right: var(--spacing-9xl) !important; } .laptop\:margin-bottom-9xl { margin-bottom: calc(1em * 10) !important; margin-bottom: var(--spacing-9xl) !important; } .laptop\:margin-left-9xl { margin-left: calc(1em * 10) !important; margin-left: var(--spacing-9xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-horizontal-9xl { margin-right: calc(1em * 10) !important; margin-right: var(--spacing-9xl) !important; margin-left: calc(1em * 10) !important; margin-left: var(--spacing-9xl) !important; } .laptop\:margin-x-9xl { margin-right: calc(1em * 10) !important; margin-right: var(--spacing-9xl) !important; margin-left: calc(1em * 10) !important; margin-left: var(--spacing-9xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-vertical-9xl { margin-top: calc(1em * 10) !important; margin-top: var(--spacing-9xl) !important; margin-bottom: calc(1em * 10) !important; margin-bottom: var(--spacing-9xl) !important; } .laptop\:margin-y-9xl { margin-top: calc(1em * 10) !important; margin-top: var(--spacing-9xl) !important; margin-bottom: calc(1em * 10) !important; margin-bottom: var(--spacing-9xl) !important; } .laptop\:margin-10xl { margin: calc(1em * 12) !important; margin: var(--spacing-10xl) !important; } .laptop\:margin-top-10xl { margin-top: calc(1em * 12) !important; margin-top: var(--spacing-10xl) !important; } .laptop\:margin-right-10xl { margin-right: calc(1em * 12) !important; margin-right: var(--spacing-10xl) !important; } .laptop\:margin-bottom-10xl { margin-bottom: calc(1em * 12) !important; margin-bottom: var(--spacing-10xl) !important; } .laptop\:margin-left-10xl { margin-left: calc(1em * 12) !important; margin-left: var(--spacing-10xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-horizontal-10xl { margin-right: calc(1em * 12) !important; margin-right: var(--spacing-10xl) !important; margin-left: calc(1em * 12) !important; margin-left: var(--spacing-10xl) !important; } .laptop\:margin-x-10xl { margin-right: calc(1em * 12) !important; margin-right: var(--spacing-10xl) !important; margin-left: calc(1em * 12) !important; margin-left: var(--spacing-10xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-vertical-10xl { margin-top: calc(1em * 12) !important; margin-top: var(--spacing-10xl) !important; margin-bottom: calc(1em * 12) !important; margin-bottom: var(--spacing-10xl) !important; } .laptop\:margin-y-10xl { margin-top: calc(1em * 12) !important; margin-top: var(--spacing-10xl) !important; margin-bottom: calc(1em * 12) !important; margin-bottom: var(--spacing-10xl) !important; } .laptop\:margin-11xl { margin: calc(1em * 16) !important; margin: var(--spacing-11xl) !important; } .laptop\:margin-top-11xl { margin-top: calc(1em * 16) !important; margin-top: var(--spacing-11xl) !important; } .laptop\:margin-right-11xl { margin-right: calc(1em * 16) !important; margin-right: var(--spacing-11xl) !important; } .laptop\:margin-bottom-11xl { margin-bottom: calc(1em * 16) !important; margin-bottom: var(--spacing-11xl) !important; } .laptop\:margin-left-11xl { margin-left: calc(1em * 16) !important; margin-left: var(--spacing-11xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-horizontal-11xl { margin-right: calc(1em * 16) !important; margin-right: var(--spacing-11xl) !important; margin-left: calc(1em * 16) !important; margin-left: var(--spacing-11xl) !important; } .laptop\:margin-x-11xl { margin-right: calc(1em * 16) !important; margin-right: var(--spacing-11xl) !important; margin-left: calc(1em * 16) !important; margin-left: var(--spacing-11xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-vertical-11xl { margin-top: calc(1em * 16) !important; margin-top: var(--spacing-11xl) !important; margin-bottom: calc(1em * 16) !important; margin-bottom: var(--spacing-11xl) !important; } .laptop\:margin-y-11xl { margin-top: calc(1em * 16) !important; margin-top: var(--spacing-11xl) !important; margin-bottom: calc(1em * 16) !important; margin-bottom: var(--spacing-11xl) !important; } .laptop\:margin-12xl { margin: calc(1em * 20) !important; margin: var(--spacing-12xl) !important; } .laptop\:margin-top-12xl { margin-top: calc(1em * 20) !important; margin-top: var(--spacing-12xl) !important; } .laptop\:margin-right-12xl { margin-right: calc(1em * 20) !important; margin-right: var(--spacing-12xl) !important; } .laptop\:margin-bottom-12xl { margin-bottom: calc(1em * 20) !important; margin-bottom: var(--spacing-12xl) !important; } .laptop\:margin-left-12xl { margin-left: calc(1em * 20) !important; margin-left: var(--spacing-12xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-horizontal-12xl { margin-right: calc(1em * 20) !important; margin-right: var(--spacing-12xl) !important; margin-left: calc(1em * 20) !important; margin-left: var(--spacing-12xl) !important; } .laptop\:margin-x-12xl { margin-right: calc(1em * 20) !important; margin-right: var(--spacing-12xl) !important; margin-left: calc(1em * 20) !important; margin-left: var(--spacing-12xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-vertical-12xl { margin-top: calc(1em * 20) !important; margin-top: var(--spacing-12xl) !important; margin-bottom: calc(1em * 20) !important; margin-bottom: var(--spacing-12xl) !important; } .laptop\:margin-y-12xl { margin-top: calc(1em * 20) !important; margin-top: var(--spacing-12xl) !important; margin-bottom: calc(1em * 20) !important; margin-bottom: var(--spacing-12xl) !important; } .laptop\:margin-0 { margin: 0 !important; margin: var(--spacing-0) !important; } .laptop\:margin-top-0 { margin-top: 0 !important; margin-top: var(--spacing-0) !important; } .laptop\:margin-right-0 { margin-right: 0 !important; margin-right: var(--spacing-0) !important; } .laptop\:margin-bottom-0 { margin-bottom: 0 !important; margin-bottom: var(--spacing-0) !important; } .laptop\:margin-left-0 { margin-left: 0 !important; margin-left: var(--spacing-0) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-horizontal-0 { margin-right: 0 !important; margin-right: var(--spacing-0) !important; margin-left: 0 !important; margin-left: var(--spacing-0) !important; } .laptop\:margin-x-0 { margin-right: 0 !important; margin-right: var(--spacing-0) !important; margin-left: 0 !important; margin-left: var(--spacing-0) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-vertical-0 { margin-top: 0 !important; margin-top: var(--spacing-0) !important; margin-bottom: 0 !important; margin-bottom: var(--spacing-0) !important; } .laptop\:margin-y-0 { margin-top: 0 !important; margin-top: var(--spacing-0) !important; margin-bottom: 0 !important; margin-bottom: var(--spacing-0) !important; } .laptop\:margin-1 { margin: calc(1em * 1 / 16) !important; margin: var(--spacing-1) !important; } .laptop\:margin-top-1 { margin-top: calc(1em * 1 / 16) !important; margin-top: var(--spacing-1) !important; } .laptop\:margin-right-1 { margin-right: calc(1em * 1 / 16) !important; margin-right: var(--spacing-1) !important; } .laptop\:margin-bottom-1 { margin-bottom: calc(1em * 1 / 16) !important; margin-bottom: var(--spacing-1) !important; } .laptop\:margin-left-1 { margin-left: calc(1em * 1 / 16) !important; margin-left: var(--spacing-1) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-horizontal-1 { margin-right: calc(1em * 1 / 16) !important; margin-right: var(--spacing-1) !important; margin-left: calc(1em * 1 / 16) !important; margin-left: var(--spacing-1) !important; } .laptop\:margin-x-1 { margin-right: calc(1em * 1 / 16) !important; margin-right: var(--spacing-1) !important; margin-left: calc(1em * 1 / 16) !important; margin-left: var(--spacing-1) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-vertical-1 { margin-top: calc(1em * 1 / 16) !important; margin-top: var(--spacing-1) !important; margin-bottom: calc(1em * 1 / 16) !important; margin-bottom: var(--spacing-1) !important; } .laptop\:margin-y-1 { margin-top: calc(1em * 1 / 16) !important; margin-top: var(--spacing-1) !important; margin-bottom: calc(1em * 1 / 16) !important; margin-bottom: var(--spacing-1) !important; } .laptop\:margin-1px { margin: 1px !important; margin: var(--spacing-1px) !important; } .laptop\:margin-top-1px { margin-top: 1px !important; margin-top: var(--spacing-1px) !important; } .laptop\:margin-right-1px { margin-right: 1px !important; margin-right: var(--spacing-1px) !important; } .laptop\:margin-bottom-1px { margin-bottom: 1px !important; margin-bottom: var(--spacing-1px) !important; } .laptop\:margin-left-1px { margin-left: 1px !important; margin-left: var(--spacing-1px) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-horizontal-1px { margin-right: 1px !important; margin-right: var(--spacing-1px) !important; margin-left: 1px !important; margin-left: var(--spacing-1px) !important; } .laptop\:margin-x-1px { margin-right: 1px !important; margin-right: var(--spacing-1px) !important; margin-left: 1px !important; margin-left: var(--spacing-1px) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:margin-vertical-1px { margin-top: 1px !important; margin-top: var(--spacing-1px) !important; margin-bottom: 1px !important; margin-bottom: var(--spacing-1px) !important; } .laptop\:margin-y-1px { margin-top: 1px !important; margin-top: var(--spacing-1px) !important; margin-bottom: 1px !important; margin-bottom: var(--spacing-1px) !important; } } @media (min-width: 1536px) { .desktop\:margin-7xs { margin: calc(1em * 1 / 16) !important; margin: var(--spacing-7xs) !important; } .desktop\:margin-top-7xs { margin-top: calc(1em * 1 / 16) !important; margin-top: var(--spacing-7xs) !important; } .desktop\:margin-right-7xs { margin-right: calc(1em * 1 / 16) !important; margin-right: var(--spacing-7xs) !important; } .desktop\:margin-bottom-7xs { margin-bottom: calc(1em * 1 / 16) !important; margin-bottom: var(--spacing-7xs) !important; } .desktop\:margin-left-7xs { margin-left: calc(1em * 1 / 16) !important; margin-left: var(--spacing-7xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-horizontal-7xs { margin-right: calc(1em * 1 / 16) !important; margin-right: var(--spacing-7xs) !important; margin-left: calc(1em * 1 / 16) !important; margin-left: var(--spacing-7xs) !important; } .desktop\:margin-x-7xs { margin-right: calc(1em * 1 / 16) !important; margin-right: var(--spacing-7xs) !important; margin-left: calc(1em * 1 / 16) !important; margin-left: var(--spacing-7xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-vertical-7xs { margin-top: calc(1em * 1 / 16) !important; margin-top: var(--spacing-7xs) !important; margin-bottom: calc(1em * 1 / 16) !important; margin-bottom: var(--spacing-7xs) !important; } .desktop\:margin-y-7xs { margin-top: calc(1em * 1 / 16) !important; margin-top: var(--spacing-7xs) !important; margin-bottom: calc(1em * 1 / 16) !important; margin-bottom: var(--spacing-7xs) !important; } .desktop\:margin-6xs { margin: calc(1em * 2 / 16) !important; margin: var(--spacing-6xs) !important; } .desktop\:margin-top-6xs { margin-top: calc(1em * 2 / 16) !important; margin-top: var(--spacing-6xs) !important; } .desktop\:margin-right-6xs { margin-right: calc(1em * 2 / 16) !important; margin-right: var(--spacing-6xs) !important; } .desktop\:margin-bottom-6xs { margin-bottom: calc(1em * 2 / 16) !important; margin-bottom: var(--spacing-6xs) !important; } .desktop\:margin-left-6xs { margin-left: calc(1em * 2 / 16) !important; margin-left: var(--spacing-6xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-horizontal-6xs { margin-right: calc(1em * 2 / 16) !important; margin-right: var(--spacing-6xs) !important; margin-left: calc(1em * 2 / 16) !important; margin-left: var(--spacing-6xs) !important; } .desktop\:margin-x-6xs { margin-right: calc(1em * 2 / 16) !important; margin-right: var(--spacing-6xs) !important; margin-left: calc(1em * 2 / 16) !important; margin-left: var(--spacing-6xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-vertical-6xs { margin-top: calc(1em * 2 / 16) !important; margin-top: var(--spacing-6xs) !important; margin-bottom: calc(1em * 2 / 16) !important; margin-bottom: var(--spacing-6xs) !important; } .desktop\:margin-y-6xs { margin-top: calc(1em * 2 / 16) !important; margin-top: var(--spacing-6xs) !important; margin-bottom: calc(1em * 2 / 16) !important; margin-bottom: var(--spacing-6xs) !important; } .desktop\:margin-5xs { margin: calc(1em * 3 / 16) !important; margin: var(--spacing-5xs) !important; } .desktop\:margin-top-5xs { margin-top: calc(1em * 3 / 16) !important; margin-top: var(--spacing-5xs) !important; } .desktop\:margin-right-5xs { margin-right: calc(1em * 3 / 16) !important; margin-right: var(--spacing-5xs) !important; } .desktop\:margin-bottom-5xs { margin-bottom: calc(1em * 3 / 16) !important; margin-bottom: var(--spacing-5xs) !important; } .desktop\:margin-left-5xs { margin-left: calc(1em * 3 / 16) !important; margin-left: var(--spacing-5xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-horizontal-5xs { margin-right: calc(1em * 3 / 16) !important; margin-right: var(--spacing-5xs) !important; margin-left: calc(1em * 3 / 16) !important; margin-left: var(--spacing-5xs) !important; } .desktop\:margin-x-5xs { margin-right: calc(1em * 3 / 16) !important; margin-right: var(--spacing-5xs) !important; margin-left: calc(1em * 3 / 16) !important; margin-left: var(--spacing-5xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-vertical-5xs { margin-top: calc(1em * 3 / 16) !important; margin-top: var(--spacing-5xs) !important; margin-bottom: calc(1em * 3 / 16) !important; margin-bottom: var(--spacing-5xs) !important; } .desktop\:margin-y-5xs { margin-top: calc(1em * 3 / 16) !important; margin-top: var(--spacing-5xs) !important; margin-bottom: calc(1em * 3 / 16) !important; margin-bottom: var(--spacing-5xs) !important; } .desktop\:margin-4xs { margin: calc(1em * 4 / 16) !important; margin: var(--spacing-4xs) !important; } .desktop\:margin-top-4xs { margin-top: calc(1em * 4 / 16) !important; margin-top: var(--spacing-4xs) !important; } .desktop\:margin-right-4xs { margin-right: calc(1em * 4 / 16) !important; margin-right: var(--spacing-4xs) !important; } .desktop\:margin-bottom-4xs { margin-bottom: calc(1em * 4 / 16) !important; margin-bottom: var(--spacing-4xs) !important; } .desktop\:margin-left-4xs { margin-left: calc(1em * 4 / 16) !important; margin-left: var(--spacing-4xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-horizontal-4xs { margin-right: calc(1em * 4 / 16) !important; margin-right: var(--spacing-4xs) !important; margin-left: calc(1em * 4 / 16) !important; margin-left: var(--spacing-4xs) !important; } .desktop\:margin-x-4xs { margin-right: calc(1em * 4 / 16) !important; margin-right: var(--spacing-4xs) !important; margin-left: calc(1em * 4 / 16) !important; margin-left: var(--spacing-4xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-vertical-4xs { margin-top: calc(1em * 4 / 16) !important; margin-top: var(--spacing-4xs) !important; margin-bottom: calc(1em * 4 / 16) !important; margin-bottom: var(--spacing-4xs) !important; } .desktop\:margin-y-4xs { margin-top: calc(1em * 4 / 16) !important; margin-top: var(--spacing-4xs) !important; margin-bottom: calc(1em * 4 / 16) !important; margin-bottom: var(--spacing-4xs) !important; } .desktop\:margin-3xs { margin: calc(1em * 6 / 16) !important; margin: var(--spacing-3xs) !important; } .desktop\:margin-top-3xs { margin-top: calc(1em * 6 / 16) !important; margin-top: var(--spacing-3xs) !important; } .desktop\:margin-right-3xs { margin-right: calc(1em * 6 / 16) !important; margin-right: var(--spacing-3xs) !important; } .desktop\:margin-bottom-3xs { margin-bottom: calc(1em * 6 / 16) !important; margin-bottom: var(--spacing-3xs) !important; } .desktop\:margin-left-3xs { margin-left: calc(1em * 6 / 16) !important; margin-left: var(--spacing-3xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-horizontal-3xs { margin-right: calc(1em * 6 / 16) !important; margin-right: var(--spacing-3xs) !important; margin-left: calc(1em * 6 / 16) !important; margin-left: var(--spacing-3xs) !important; } .desktop\:margin-x-3xs { margin-right: calc(1em * 6 / 16) !important; margin-right: var(--spacing-3xs) !important; margin-left: calc(1em * 6 / 16) !important; margin-left: var(--spacing-3xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-vertical-3xs { margin-top: calc(1em * 6 / 16) !important; margin-top: var(--spacing-3xs) !important; margin-bottom: calc(1em * 6 / 16) !important; margin-bottom: var(--spacing-3xs) !important; } .desktop\:margin-y-3xs { margin-top: calc(1em * 6 / 16) !important; margin-top: var(--spacing-3xs) !important; margin-bottom: calc(1em * 6 / 16) !important; margin-bottom: var(--spacing-3xs) !important; } .desktop\:margin-2xs { margin: calc(1em * 8 / 16) !important; margin: var(--spacing-2xs) !important; } .desktop\:margin-top-2xs { margin-top: calc(1em * 8 / 16) !important; margin-top: var(--spacing-2xs) !important; } .desktop\:margin-right-2xs { margin-right: calc(1em * 8 / 16) !important; margin-right: var(--spacing-2xs) !important; } .desktop\:margin-bottom-2xs { margin-bottom: calc(1em * 8 / 16) !important; margin-bottom: var(--spacing-2xs) !important; } .desktop\:margin-left-2xs { margin-left: calc(1em * 8 / 16) !important; margin-left: var(--spacing-2xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-horizontal-2xs { margin-right: calc(1em * 8 / 16) !important; margin-right: var(--spacing-2xs) !important; margin-left: calc(1em * 8 / 16) !important; margin-left: var(--spacing-2xs) !important; } .desktop\:margin-x-2xs { margin-right: calc(1em * 8 / 16) !important; margin-right: var(--spacing-2xs) !important; margin-left: calc(1em * 8 / 16) !important; margin-left: var(--spacing-2xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-vertical-2xs { margin-top: calc(1em * 8 / 16) !important; margin-top: var(--spacing-2xs) !important; margin-bottom: calc(1em * 8 / 16) !important; margin-bottom: var(--spacing-2xs) !important; } .desktop\:margin-y-2xs { margin-top: calc(1em * 8 / 16) !important; margin-top: var(--spacing-2xs) !important; margin-bottom: calc(1em * 8 / 16) !important; margin-bottom: var(--spacing-2xs) !important; } .desktop\:margin-xs { margin: calc(1em * 10 / 16) !important; margin: var(--spacing-xs) !important; } .desktop\:margin-top-xs { margin-top: calc(1em * 10 / 16) !important; margin-top: var(--spacing-xs) !important; } .desktop\:margin-right-xs { margin-right: calc(1em * 10 / 16) !important; margin-right: var(--spacing-xs) !important; } .desktop\:margin-bottom-xs { margin-bottom: calc(1em * 10 / 16) !important; margin-bottom: var(--spacing-xs) !important; } .desktop\:margin-left-xs { margin-left: calc(1em * 10 / 16) !important; margin-left: var(--spacing-xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-horizontal-xs { margin-right: calc(1em * 10 / 16) !important; margin-right: var(--spacing-xs) !important; margin-left: calc(1em * 10 / 16) !important; margin-left: var(--spacing-xs) !important; } .desktop\:margin-x-xs { margin-right: calc(1em * 10 / 16) !important; margin-right: var(--spacing-xs) !important; margin-left: calc(1em * 10 / 16) !important; margin-left: var(--spacing-xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-vertical-xs { margin-top: calc(1em * 10 / 16) !important; margin-top: var(--spacing-xs) !important; margin-bottom: calc(1em * 10 / 16) !important; margin-bottom: var(--spacing-xs) !important; } .desktop\:margin-y-xs { margin-top: calc(1em * 10 / 16) !important; margin-top: var(--spacing-xs) !important; margin-bottom: calc(1em * 10 / 16) !important; margin-bottom: var(--spacing-xs) !important; } .desktop\:margin-sm { margin: calc(1em * 12 / 16) !important; margin: var(--spacing-sm) !important; } .desktop\:margin-top-sm { margin-top: calc(1em * 12 / 16) !important; margin-top: var(--spacing-sm) !important; } .desktop\:margin-right-sm { margin-right: calc(1em * 12 / 16) !important; margin-right: var(--spacing-sm) !important; } .desktop\:margin-bottom-sm { margin-bottom: calc(1em * 12 / 16) !important; margin-bottom: var(--spacing-sm) !important; } .desktop\:margin-left-sm { margin-left: calc(1em * 12 / 16) !important; margin-left: var(--spacing-sm) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-horizontal-sm { margin-right: calc(1em * 12 / 16) !important; margin-right: var(--spacing-sm) !important; margin-left: calc(1em * 12 / 16) !important; margin-left: var(--spacing-sm) !important; } .desktop\:margin-x-sm { margin-right: calc(1em * 12 / 16) !important; margin-right: var(--spacing-sm) !important; margin-left: calc(1em * 12 / 16) !important; margin-left: var(--spacing-sm) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-vertical-sm { margin-top: calc(1em * 12 / 16) !important; margin-top: var(--spacing-sm) !important; margin-bottom: calc(1em * 12 / 16) !important; margin-bottom: var(--spacing-sm) !important; } .desktop\:margin-y-sm { margin-top: calc(1em * 12 / 16) !important; margin-top: var(--spacing-sm) !important; margin-bottom: calc(1em * 12 / 16) !important; margin-bottom: var(--spacing-sm) !important; } .desktop\:margin-md { margin: calc(1em * 1) !important; margin: var(--spacing-md) !important; } .desktop\:margin-top-md { margin-top: calc(1em * 1) !important; margin-top: var(--spacing-md) !important; } .desktop\:margin-right-md { margin-right: calc(1em * 1) !important; margin-right: var(--spacing-md) !important; } .desktop\:margin-bottom-md { margin-bottom: calc(1em * 1) !important; margin-bottom: var(--spacing-md) !important; } .desktop\:margin-left-md { margin-left: calc(1em * 1) !important; margin-left: var(--spacing-md) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-horizontal-md { margin-right: calc(1em * 1) !important; margin-right: var(--spacing-md) !important; margin-left: calc(1em * 1) !important; margin-left: var(--spacing-md) !important; } .desktop\:margin-x-md { margin-right: calc(1em * 1) !important; margin-right: var(--spacing-md) !important; margin-left: calc(1em * 1) !important; margin-left: var(--spacing-md) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-vertical-md { margin-top: calc(1em * 1) !important; margin-top: var(--spacing-md) !important; margin-bottom: calc(1em * 1) !important; margin-bottom: var(--spacing-md) !important; } .desktop\:margin-y-md { margin-top: calc(1em * 1) !important; margin-top: var(--spacing-md) !important; margin-bottom: calc(1em * 1) !important; margin-bottom: var(--spacing-md) !important; } .desktop\:margin-lg { margin: calc(1em * 1.25) !important; margin: var(--spacing-lg) !important; } .desktop\:margin-top-lg { margin-top: calc(1em * 1.25) !important; margin-top: var(--spacing-lg) !important; } .desktop\:margin-right-lg { margin-right: calc(1em * 1.25) !important; margin-right: var(--spacing-lg) !important; } .desktop\:margin-bottom-lg { margin-bottom: calc(1em * 1.25) !important; margin-bottom: var(--spacing-lg) !important; } .desktop\:margin-left-lg { margin-left: calc(1em * 1.25) !important; margin-left: var(--spacing-lg) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-horizontal-lg { margin-right: calc(1em * 1.25) !important; margin-right: var(--spacing-lg) !important; margin-left: calc(1em * 1.25) !important; margin-left: var(--spacing-lg) !important; } .desktop\:margin-x-lg { margin-right: calc(1em * 1.25) !important; margin-right: var(--spacing-lg) !important; margin-left: calc(1em * 1.25) !important; margin-left: var(--spacing-lg) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-vertical-lg { margin-top: calc(1em * 1.25) !important; margin-top: var(--spacing-lg) !important; margin-bottom: calc(1em * 1.25) !important; margin-bottom: var(--spacing-lg) !important; } .desktop\:margin-y-lg { margin-top: calc(1em * 1.25) !important; margin-top: var(--spacing-lg) !important; margin-bottom: calc(1em * 1.25) !important; margin-bottom: var(--spacing-lg) !important; } .desktop\:margin-xl { margin: calc(1em * 1.5) !important; margin: var(--spacing-xl) !important; } .desktop\:margin-top-xl { margin-top: calc(1em * 1.5) !important; margin-top: var(--spacing-xl) !important; } .desktop\:margin-right-xl { margin-right: calc(1em * 1.5) !important; margin-right: var(--spacing-xl) !important; } .desktop\:margin-bottom-xl { margin-bottom: calc(1em * 1.5) !important; margin-bottom: var(--spacing-xl) !important; } .desktop\:margin-left-xl { margin-left: calc(1em * 1.5) !important; margin-left: var(--spacing-xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-horizontal-xl { margin-right: calc(1em * 1.5) !important; margin-right: var(--spacing-xl) !important; margin-left: calc(1em * 1.5) !important; margin-left: var(--spacing-xl) !important; } .desktop\:margin-x-xl { margin-right: calc(1em * 1.5) !important; margin-right: var(--spacing-xl) !important; margin-left: calc(1em * 1.5) !important; margin-left: var(--spacing-xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-vertical-xl { margin-top: calc(1em * 1.5) !important; margin-top: var(--spacing-xl) !important; margin-bottom: calc(1em * 1.5) !important; margin-bottom: var(--spacing-xl) !important; } .desktop\:margin-y-xl { margin-top: calc(1em * 1.5) !important; margin-top: var(--spacing-xl) !important; margin-bottom: calc(1em * 1.5) !important; margin-bottom: var(--spacing-xl) !important; } .desktop\:margin-2xl { margin: calc(1em * 2) !important; margin: var(--spacing-2xl) !important; } .desktop\:margin-top-2xl { margin-top: calc(1em * 2) !important; margin-top: var(--spacing-2xl) !important; } .desktop\:margin-right-2xl { margin-right: calc(1em * 2) !important; margin-right: var(--spacing-2xl) !important; } .desktop\:margin-bottom-2xl { margin-bottom: calc(1em * 2) !important; margin-bottom: var(--spacing-2xl) !important; } .desktop\:margin-left-2xl { margin-left: calc(1em * 2) !important; margin-left: var(--spacing-2xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-horizontal-2xl { margin-right: calc(1em * 2) !important; margin-right: var(--spacing-2xl) !important; margin-left: calc(1em * 2) !important; margin-left: var(--spacing-2xl) !important; } .desktop\:margin-x-2xl { margin-right: calc(1em * 2) !important; margin-right: var(--spacing-2xl) !important; margin-left: calc(1em * 2) !important; margin-left: var(--spacing-2xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-vertical-2xl { margin-top: calc(1em * 2) !important; margin-top: var(--spacing-2xl) !important; margin-bottom: calc(1em * 2) !important; margin-bottom: var(--spacing-2xl) !important; } .desktop\:margin-y-2xl { margin-top: calc(1em * 2) !important; margin-top: var(--spacing-2xl) !important; margin-bottom: calc(1em * 2) !important; margin-bottom: var(--spacing-2xl) !important; } .desktop\:margin-3xl { margin: calc(1em * 2.5) !important; margin: var(--spacing-3xl) !important; } .desktop\:margin-top-3xl { margin-top: calc(1em * 2.5) !important; margin-top: var(--spacing-3xl) !important; } .desktop\:margin-right-3xl { margin-right: calc(1em * 2.5) !important; margin-right: var(--spacing-3xl) !important; } .desktop\:margin-bottom-3xl { margin-bottom: calc(1em * 2.5) !important; margin-bottom: var(--spacing-3xl) !important; } .desktop\:margin-left-3xl { margin-left: calc(1em * 2.5) !important; margin-left: var(--spacing-3xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-horizontal-3xl { margin-right: calc(1em * 2.5) !important; margin-right: var(--spacing-3xl) !important; margin-left: calc(1em * 2.5) !important; margin-left: var(--spacing-3xl) !important; } .desktop\:margin-x-3xl { margin-right: calc(1em * 2.5) !important; margin-right: var(--spacing-3xl) !important; margin-left: calc(1em * 2.5) !important; margin-left: var(--spacing-3xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-vertical-3xl { margin-top: calc(1em * 2.5) !important; margin-top: var(--spacing-3xl) !important; margin-bottom: calc(1em * 2.5) !important; margin-bottom: var(--spacing-3xl) !important; } .desktop\:margin-y-3xl { margin-top: calc(1em * 2.5) !important; margin-top: var(--spacing-3xl) !important; margin-bottom: calc(1em * 2.5) !important; margin-bottom: var(--spacing-3xl) !important; } .desktop\:margin-4xl { margin: calc(1em * 3) !important; margin: var(--spacing-4xl) !important; } .desktop\:margin-top-4xl { margin-top: calc(1em * 3) !important; margin-top: var(--spacing-4xl) !important; } .desktop\:margin-right-4xl { margin-right: calc(1em * 3) !important; margin-right: var(--spacing-4xl) !important; } .desktop\:margin-bottom-4xl { margin-bottom: calc(1em * 3) !important; margin-bottom: var(--spacing-4xl) !important; } .desktop\:margin-left-4xl { margin-left: calc(1em * 3) !important; margin-left: var(--spacing-4xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-horizontal-4xl { margin-right: calc(1em * 3) !important; margin-right: var(--spacing-4xl) !important; margin-left: calc(1em * 3) !important; margin-left: var(--spacing-4xl) !important; } .desktop\:margin-x-4xl { margin-right: calc(1em * 3) !important; margin-right: var(--spacing-4xl) !important; margin-left: calc(1em * 3) !important; margin-left: var(--spacing-4xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-vertical-4xl { margin-top: calc(1em * 3) !important; margin-top: var(--spacing-4xl) !important; margin-bottom: calc(1em * 3) !important; margin-bottom: var(--spacing-4xl) !important; } .desktop\:margin-y-4xl { margin-top: calc(1em * 3) !important; margin-top: var(--spacing-4xl) !important; margin-bottom: calc(1em * 3) !important; margin-bottom: var(--spacing-4xl) !important; } .desktop\:margin-5xl { margin: calc(1em * 4) !important; margin: var(--spacing-5xl) !important; } .desktop\:margin-top-5xl { margin-top: calc(1em * 4) !important; margin-top: var(--spacing-5xl) !important; } .desktop\:margin-right-5xl { margin-right: calc(1em * 4) !important; margin-right: var(--spacing-5xl) !important; } .desktop\:margin-bottom-5xl { margin-bottom: calc(1em * 4) !important; margin-bottom: var(--spacing-5xl) !important; } .desktop\:margin-left-5xl { margin-left: calc(1em * 4) !important; margin-left: var(--spacing-5xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-horizontal-5xl { margin-right: calc(1em * 4) !important; margin-right: var(--spacing-5xl) !important; margin-left: calc(1em * 4) !important; margin-left: var(--spacing-5xl) !important; } .desktop\:margin-x-5xl { margin-right: calc(1em * 4) !important; margin-right: var(--spacing-5xl) !important; margin-left: calc(1em * 4) !important; margin-left: var(--spacing-5xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-vertical-5xl { margin-top: calc(1em * 4) !important; margin-top: var(--spacing-5xl) !important; margin-bottom: calc(1em * 4) !important; margin-bottom: var(--spacing-5xl) !important; } .desktop\:margin-y-5xl { margin-top: calc(1em * 4) !important; margin-top: var(--spacing-5xl) !important; margin-bottom: calc(1em * 4) !important; margin-bottom: var(--spacing-5xl) !important; } .desktop\:margin-6xl { margin: calc(1em * 5) !important; margin: var(--spacing-6xl) !important; } .desktop\:margin-top-6xl { margin-top: calc(1em * 5) !important; margin-top: var(--spacing-6xl) !important; } .desktop\:margin-right-6xl { margin-right: calc(1em * 5) !important; margin-right: var(--spacing-6xl) !important; } .desktop\:margin-bottom-6xl { margin-bottom: calc(1em * 5) !important; margin-bottom: var(--spacing-6xl) !important; } .desktop\:margin-left-6xl { margin-left: calc(1em * 5) !important; margin-left: var(--spacing-6xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-horizontal-6xl { margin-right: calc(1em * 5) !important; margin-right: var(--spacing-6xl) !important; margin-left: calc(1em * 5) !important; margin-left: var(--spacing-6xl) !important; } .desktop\:margin-x-6xl { margin-right: calc(1em * 5) !important; margin-right: var(--spacing-6xl) !important; margin-left: calc(1em * 5) !important; margin-left: var(--spacing-6xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-vertical-6xl { margin-top: calc(1em * 5) !important; margin-top: var(--spacing-6xl) !important; margin-bottom: calc(1em * 5) !important; margin-bottom: var(--spacing-6xl) !important; } .desktop\:margin-y-6xl { margin-top: calc(1em * 5) !important; margin-top: var(--spacing-6xl) !important; margin-bottom: calc(1em * 5) !important; margin-bottom: var(--spacing-6xl) !important; } .desktop\:margin-7xl { margin: calc(1em * 6) !important; margin: var(--spacing-7xl) !important; } .desktop\:margin-top-7xl { margin-top: calc(1em * 6) !important; margin-top: var(--spacing-7xl) !important; } .desktop\:margin-right-7xl { margin-right: calc(1em * 6) !important; margin-right: var(--spacing-7xl) !important; } .desktop\:margin-bottom-7xl { margin-bottom: calc(1em * 6) !important; margin-bottom: var(--spacing-7xl) !important; } .desktop\:margin-left-7xl { margin-left: calc(1em * 6) !important; margin-left: var(--spacing-7xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-horizontal-7xl { margin-right: calc(1em * 6) !important; margin-right: var(--spacing-7xl) !important; margin-left: calc(1em * 6) !important; margin-left: var(--spacing-7xl) !important; } .desktop\:margin-x-7xl { margin-right: calc(1em * 6) !important; margin-right: var(--spacing-7xl) !important; margin-left: calc(1em * 6) !important; margin-left: var(--spacing-7xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-vertical-7xl { margin-top: calc(1em * 6) !important; margin-top: var(--spacing-7xl) !important; margin-bottom: calc(1em * 6) !important; margin-bottom: var(--spacing-7xl) !important; } .desktop\:margin-y-7xl { margin-top: calc(1em * 6) !important; margin-top: var(--spacing-7xl) !important; margin-bottom: calc(1em * 6) !important; margin-bottom: var(--spacing-7xl) !important; } .desktop\:margin-8xl { margin: calc(1em * 8) !important; margin: var(--spacing-8xl) !important; } .desktop\:margin-top-8xl { margin-top: calc(1em * 8) !important; margin-top: var(--spacing-8xl) !important; } .desktop\:margin-right-8xl { margin-right: calc(1em * 8) !important; margin-right: var(--spacing-8xl) !important; } .desktop\:margin-bottom-8xl { margin-bottom: calc(1em * 8) !important; margin-bottom: var(--spacing-8xl) !important; } .desktop\:margin-left-8xl { margin-left: calc(1em * 8) !important; margin-left: var(--spacing-8xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-horizontal-8xl { margin-right: calc(1em * 8) !important; margin-right: var(--spacing-8xl) !important; margin-left: calc(1em * 8) !important; margin-left: var(--spacing-8xl) !important; } .desktop\:margin-x-8xl { margin-right: calc(1em * 8) !important; margin-right: var(--spacing-8xl) !important; margin-left: calc(1em * 8) !important; margin-left: var(--spacing-8xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-vertical-8xl { margin-top: calc(1em * 8) !important; margin-top: var(--spacing-8xl) !important; margin-bottom: calc(1em * 8) !important; margin-bottom: var(--spacing-8xl) !important; } .desktop\:margin-y-8xl { margin-top: calc(1em * 8) !important; margin-top: var(--spacing-8xl) !important; margin-bottom: calc(1em * 8) !important; margin-bottom: var(--spacing-8xl) !important; } .desktop\:margin-9xl { margin: calc(1em * 10) !important; margin: var(--spacing-9xl) !important; } .desktop\:margin-top-9xl { margin-top: calc(1em * 10) !important; margin-top: var(--spacing-9xl) !important; } .desktop\:margin-right-9xl { margin-right: calc(1em * 10) !important; margin-right: var(--spacing-9xl) !important; } .desktop\:margin-bottom-9xl { margin-bottom: calc(1em * 10) !important; margin-bottom: var(--spacing-9xl) !important; } .desktop\:margin-left-9xl { margin-left: calc(1em * 10) !important; margin-left: var(--spacing-9xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-horizontal-9xl { margin-right: calc(1em * 10) !important; margin-right: var(--spacing-9xl) !important; margin-left: calc(1em * 10) !important; margin-left: var(--spacing-9xl) !important; } .desktop\:margin-x-9xl { margin-right: calc(1em * 10) !important; margin-right: var(--spacing-9xl) !important; margin-left: calc(1em * 10) !important; margin-left: var(--spacing-9xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-vertical-9xl { margin-top: calc(1em * 10) !important; margin-top: var(--spacing-9xl) !important; margin-bottom: calc(1em * 10) !important; margin-bottom: var(--spacing-9xl) !important; } .desktop\:margin-y-9xl { margin-top: calc(1em * 10) !important; margin-top: var(--spacing-9xl) !important; margin-bottom: calc(1em * 10) !important; margin-bottom: var(--spacing-9xl) !important; } .desktop\:margin-10xl { margin: calc(1em * 12) !important; margin: var(--spacing-10xl) !important; } .desktop\:margin-top-10xl { margin-top: calc(1em * 12) !important; margin-top: var(--spacing-10xl) !important; } .desktop\:margin-right-10xl { margin-right: calc(1em * 12) !important; margin-right: var(--spacing-10xl) !important; } .desktop\:margin-bottom-10xl { margin-bottom: calc(1em * 12) !important; margin-bottom: var(--spacing-10xl) !important; } .desktop\:margin-left-10xl { margin-left: calc(1em * 12) !important; margin-left: var(--spacing-10xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-horizontal-10xl { margin-right: calc(1em * 12) !important; margin-right: var(--spacing-10xl) !important; margin-left: calc(1em * 12) !important; margin-left: var(--spacing-10xl) !important; } .desktop\:margin-x-10xl { margin-right: calc(1em * 12) !important; margin-right: var(--spacing-10xl) !important; margin-left: calc(1em * 12) !important; margin-left: var(--spacing-10xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-vertical-10xl { margin-top: calc(1em * 12) !important; margin-top: var(--spacing-10xl) !important; margin-bottom: calc(1em * 12) !important; margin-bottom: var(--spacing-10xl) !important; } .desktop\:margin-y-10xl { margin-top: calc(1em * 12) !important; margin-top: var(--spacing-10xl) !important; margin-bottom: calc(1em * 12) !important; margin-bottom: var(--spacing-10xl) !important; } .desktop\:margin-11xl { margin: calc(1em * 16) !important; margin: var(--spacing-11xl) !important; } .desktop\:margin-top-11xl { margin-top: calc(1em * 16) !important; margin-top: var(--spacing-11xl) !important; } .desktop\:margin-right-11xl { margin-right: calc(1em * 16) !important; margin-right: var(--spacing-11xl) !important; } .desktop\:margin-bottom-11xl { margin-bottom: calc(1em * 16) !important; margin-bottom: var(--spacing-11xl) !important; } .desktop\:margin-left-11xl { margin-left: calc(1em * 16) !important; margin-left: var(--spacing-11xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-horizontal-11xl { margin-right: calc(1em * 16) !important; margin-right: var(--spacing-11xl) !important; margin-left: calc(1em * 16) !important; margin-left: var(--spacing-11xl) !important; } .desktop\:margin-x-11xl { margin-right: calc(1em * 16) !important; margin-right: var(--spacing-11xl) !important; margin-left: calc(1em * 16) !important; margin-left: var(--spacing-11xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-vertical-11xl { margin-top: calc(1em * 16) !important; margin-top: var(--spacing-11xl) !important; margin-bottom: calc(1em * 16) !important; margin-bottom: var(--spacing-11xl) !important; } .desktop\:margin-y-11xl { margin-top: calc(1em * 16) !important; margin-top: var(--spacing-11xl) !important; margin-bottom: calc(1em * 16) !important; margin-bottom: var(--spacing-11xl) !important; } .desktop\:margin-12xl { margin: calc(1em * 20) !important; margin: var(--spacing-12xl) !important; } .desktop\:margin-top-12xl { margin-top: calc(1em * 20) !important; margin-top: var(--spacing-12xl) !important; } .desktop\:margin-right-12xl { margin-right: calc(1em * 20) !important; margin-right: var(--spacing-12xl) !important; } .desktop\:margin-bottom-12xl { margin-bottom: calc(1em * 20) !important; margin-bottom: var(--spacing-12xl) !important; } .desktop\:margin-left-12xl { margin-left: calc(1em * 20) !important; margin-left: var(--spacing-12xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-horizontal-12xl { margin-right: calc(1em * 20) !important; margin-right: var(--spacing-12xl) !important; margin-left: calc(1em * 20) !important; margin-left: var(--spacing-12xl) !important; } .desktop\:margin-x-12xl { margin-right: calc(1em * 20) !important; margin-right: var(--spacing-12xl) !important; margin-left: calc(1em * 20) !important; margin-left: var(--spacing-12xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-vertical-12xl { margin-top: calc(1em * 20) !important; margin-top: var(--spacing-12xl) !important; margin-bottom: calc(1em * 20) !important; margin-bottom: var(--spacing-12xl) !important; } .desktop\:margin-y-12xl { margin-top: calc(1em * 20) !important; margin-top: var(--spacing-12xl) !important; margin-bottom: calc(1em * 20) !important; margin-bottom: var(--spacing-12xl) !important; } .desktop\:margin-0 { margin: 0 !important; margin: var(--spacing-0) !important; } .desktop\:margin-top-0 { margin-top: 0 !important; margin-top: var(--spacing-0) !important; } .desktop\:margin-right-0 { margin-right: 0 !important; margin-right: var(--spacing-0) !important; } .desktop\:margin-bottom-0 { margin-bottom: 0 !important; margin-bottom: var(--spacing-0) !important; } .desktop\:margin-left-0 { margin-left: 0 !important; margin-left: var(--spacing-0) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-horizontal-0 { margin-right: 0 !important; margin-right: var(--spacing-0) !important; margin-left: 0 !important; margin-left: var(--spacing-0) !important; } .desktop\:margin-x-0 { margin-right: 0 !important; margin-right: var(--spacing-0) !important; margin-left: 0 !important; margin-left: var(--spacing-0) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-vertical-0 { margin-top: 0 !important; margin-top: var(--spacing-0) !important; margin-bottom: 0 !important; margin-bottom: var(--spacing-0) !important; } .desktop\:margin-y-0 { margin-top: 0 !important; margin-top: var(--spacing-0) !important; margin-bottom: 0 !important; margin-bottom: var(--spacing-0) !important; } .desktop\:margin-1 { margin: calc(1em * 1 / 16) !important; margin: var(--spacing-1) !important; } .desktop\:margin-top-1 { margin-top: calc(1em * 1 / 16) !important; margin-top: var(--spacing-1) !important; } .desktop\:margin-right-1 { margin-right: calc(1em * 1 / 16) !important; margin-right: var(--spacing-1) !important; } .desktop\:margin-bottom-1 { margin-bottom: calc(1em * 1 / 16) !important; margin-bottom: var(--spacing-1) !important; } .desktop\:margin-left-1 { margin-left: calc(1em * 1 / 16) !important; margin-left: var(--spacing-1) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-horizontal-1 { margin-right: calc(1em * 1 / 16) !important; margin-right: var(--spacing-1) !important; margin-left: calc(1em * 1 / 16) !important; margin-left: var(--spacing-1) !important; } .desktop\:margin-x-1 { margin-right: calc(1em * 1 / 16) !important; margin-right: var(--spacing-1) !important; margin-left: calc(1em * 1 / 16) !important; margin-left: var(--spacing-1) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-vertical-1 { margin-top: calc(1em * 1 / 16) !important; margin-top: var(--spacing-1) !important; margin-bottom: calc(1em * 1 / 16) !important; margin-bottom: var(--spacing-1) !important; } .desktop\:margin-y-1 { margin-top: calc(1em * 1 / 16) !important; margin-top: var(--spacing-1) !important; margin-bottom: calc(1em * 1 / 16) !important; margin-bottom: var(--spacing-1) !important; } .desktop\:margin-1px { margin: 1px !important; margin: var(--spacing-1px) !important; } .desktop\:margin-top-1px { margin-top: 1px !important; margin-top: var(--spacing-1px) !important; } .desktop\:margin-right-1px { margin-right: 1px !important; margin-right: var(--spacing-1px) !important; } .desktop\:margin-bottom-1px { margin-bottom: 1px !important; margin-bottom: var(--spacing-1px) !important; } .desktop\:margin-left-1px { margin-left: 1px !important; margin-left: var(--spacing-1px) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-horizontal-1px { margin-right: 1px !important; margin-right: var(--spacing-1px) !important; margin-left: 1px !important; margin-left: var(--spacing-1px) !important; } .desktop\:margin-x-1px { margin-right: 1px !important; margin-right: var(--spacing-1px) !important; margin-left: 1px !important; margin-left: var(--spacing-1px) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:margin-vertical-1px { margin-top: 1px !important; margin-top: var(--spacing-1px) !important; margin-bottom: 1px !important; margin-bottom: var(--spacing-1px) !important; } .desktop\:margin-y-1px { margin-top: 1px !important; margin-top: var(--spacing-1px) !important; margin-bottom: 1px !important; margin-bottom: var(--spacing-1px) !important; } } /* spacing-padding */ .padding-7xs { padding: calc(1em * 1 / 16) !important; padding: var(--spacing-7xs) !important; } .padding-top-7xs { padding-top: calc(1em * 1 / 16) !important; padding-top: var(--spacing-7xs) !important; } .padding-right-7xs { padding-right: calc(1em * 1 / 16) !important; padding-right: var(--spacing-7xs) !important; } .padding-bottom-7xs { padding-bottom: calc(1em * 1 / 16) !important; padding-bottom: var(--spacing-7xs) !important; } .padding-left-7xs { padding-left: calc(1em * 1 / 16) !important; padding-left: var(--spacing-7xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-vertical-7xs { padding-top: calc(1em * 1 / 16) !important; padding-top: var(--spacing-7xs) !important; padding-bottom: calc(1em * 1 / 16) !important; padding-bottom: var(--spacing-7xs) !important; } .padding-y-7xs { padding-top: calc(1em * 1 / 16) !important; padding-top: var(--spacing-7xs) !important; padding-bottom: calc(1em * 1 / 16) !important; padding-bottom: var(--spacing-7xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-horizontal-7xs { padding-right: calc(1em * 1 / 16) !important; padding-right: var(--spacing-7xs) !important; padding-left: calc(1em * 1 / 16) !important; padding-left: var(--spacing-7xs) !important; } .padding-x-7xs { padding-right: calc(1em * 1 / 16) !important; padding-right: var(--spacing-7xs) !important; padding-left: calc(1em * 1 / 16) !important; padding-left: var(--spacing-7xs) !important; } .padding-6xs { padding: calc(1em * 2 / 16) !important; padding: var(--spacing-6xs) !important; } .padding-top-6xs { padding-top: calc(1em * 2 / 16) !important; padding-top: var(--spacing-6xs) !important; } .padding-right-6xs { padding-right: calc(1em * 2 / 16) !important; padding-right: var(--spacing-6xs) !important; } .padding-bottom-6xs { padding-bottom: calc(1em * 2 / 16) !important; padding-bottom: var(--spacing-6xs) !important; } .padding-left-6xs { padding-left: calc(1em * 2 / 16) !important; padding-left: var(--spacing-6xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-vertical-6xs { padding-top: calc(1em * 2 / 16) !important; padding-top: var(--spacing-6xs) !important; padding-bottom: calc(1em * 2 / 16) !important; padding-bottom: var(--spacing-6xs) !important; } .padding-y-6xs { padding-top: calc(1em * 2 / 16) !important; padding-top: var(--spacing-6xs) !important; padding-bottom: calc(1em * 2 / 16) !important; padding-bottom: var(--spacing-6xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-horizontal-6xs { padding-right: calc(1em * 2 / 16) !important; padding-right: var(--spacing-6xs) !important; padding-left: calc(1em * 2 / 16) !important; padding-left: var(--spacing-6xs) !important; } .padding-x-6xs { padding-right: calc(1em * 2 / 16) !important; padding-right: var(--spacing-6xs) !important; padding-left: calc(1em * 2 / 16) !important; padding-left: var(--spacing-6xs) !important; } .padding-5xs { padding: calc(1em * 3 / 16) !important; padding: var(--spacing-5xs) !important; } .padding-top-5xs { padding-top: calc(1em * 3 / 16) !important; padding-top: var(--spacing-5xs) !important; } .padding-right-5xs { padding-right: calc(1em * 3 / 16) !important; padding-right: var(--spacing-5xs) !important; } .padding-bottom-5xs { padding-bottom: calc(1em * 3 / 16) !important; padding-bottom: var(--spacing-5xs) !important; } .padding-left-5xs { padding-left: calc(1em * 3 / 16) !important; padding-left: var(--spacing-5xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-vertical-5xs { padding-top: calc(1em * 3 / 16) !important; padding-top: var(--spacing-5xs) !important; padding-bottom: calc(1em * 3 / 16) !important; padding-bottom: var(--spacing-5xs) !important; } .padding-y-5xs { padding-top: calc(1em * 3 / 16) !important; padding-top: var(--spacing-5xs) !important; padding-bottom: calc(1em * 3 / 16) !important; padding-bottom: var(--spacing-5xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-horizontal-5xs { padding-right: calc(1em * 3 / 16) !important; padding-right: var(--spacing-5xs) !important; padding-left: calc(1em * 3 / 16) !important; padding-left: var(--spacing-5xs) !important; } .padding-x-5xs { padding-right: calc(1em * 3 / 16) !important; padding-right: var(--spacing-5xs) !important; padding-left: calc(1em * 3 / 16) !important; padding-left: var(--spacing-5xs) !important; } .padding-4xs { padding: calc(1em * 4 / 16) !important; padding: var(--spacing-4xs) !important; } .padding-top-4xs { padding-top: calc(1em * 4 / 16) !important; padding-top: var(--spacing-4xs) !important; } .padding-right-4xs { padding-right: calc(1em * 4 / 16) !important; padding-right: var(--spacing-4xs) !important; } .padding-bottom-4xs { padding-bottom: calc(1em * 4 / 16) !important; padding-bottom: var(--spacing-4xs) !important; } .padding-left-4xs { padding-left: calc(1em * 4 / 16) !important; padding-left: var(--spacing-4xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-vertical-4xs { padding-top: calc(1em * 4 / 16) !important; padding-top: var(--spacing-4xs) !important; padding-bottom: calc(1em * 4 / 16) !important; padding-bottom: var(--spacing-4xs) !important; } .padding-y-4xs { padding-top: calc(1em * 4 / 16) !important; padding-top: var(--spacing-4xs) !important; padding-bottom: calc(1em * 4 / 16) !important; padding-bottom: var(--spacing-4xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-horizontal-4xs { padding-right: calc(1em * 4 / 16) !important; padding-right: var(--spacing-4xs) !important; padding-left: calc(1em * 4 / 16) !important; padding-left: var(--spacing-4xs) !important; } .padding-x-4xs { padding-right: calc(1em * 4 / 16) !important; padding-right: var(--spacing-4xs) !important; padding-left: calc(1em * 4 / 16) !important; padding-left: var(--spacing-4xs) !important; } .padding-3xs { padding: calc(1em * 6 / 16) !important; padding: var(--spacing-3xs) !important; } .padding-top-3xs { padding-top: calc(1em * 6 / 16) !important; padding-top: var(--spacing-3xs) !important; } .padding-right-3xs { padding-right: calc(1em * 6 / 16) !important; padding-right: var(--spacing-3xs) !important; } .padding-bottom-3xs { padding-bottom: calc(1em * 6 / 16) !important; padding-bottom: var(--spacing-3xs) !important; } .padding-left-3xs { padding-left: calc(1em * 6 / 16) !important; padding-left: var(--spacing-3xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-vertical-3xs { padding-top: calc(1em * 6 / 16) !important; padding-top: var(--spacing-3xs) !important; padding-bottom: calc(1em * 6 / 16) !important; padding-bottom: var(--spacing-3xs) !important; } .padding-y-3xs { padding-top: calc(1em * 6 / 16) !important; padding-top: var(--spacing-3xs) !important; padding-bottom: calc(1em * 6 / 16) !important; padding-bottom: var(--spacing-3xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-horizontal-3xs { padding-right: calc(1em * 6 / 16) !important; padding-right: var(--spacing-3xs) !important; padding-left: calc(1em * 6 / 16) !important; padding-left: var(--spacing-3xs) !important; } .padding-x-3xs { padding-right: calc(1em * 6 / 16) !important; padding-right: var(--spacing-3xs) !important; padding-left: calc(1em * 6 / 16) !important; padding-left: var(--spacing-3xs) !important; } .padding-2xs { padding: calc(1em * 8 / 16) !important; padding: var(--spacing-2xs) !important; } .padding-top-2xs { padding-top: calc(1em * 8 / 16) !important; padding-top: var(--spacing-2xs) !important; } .padding-right-2xs { padding-right: calc(1em * 8 / 16) !important; padding-right: var(--spacing-2xs) !important; } .padding-bottom-2xs { padding-bottom: calc(1em * 8 / 16) !important; padding-bottom: var(--spacing-2xs) !important; } .padding-left-2xs { padding-left: calc(1em * 8 / 16) !important; padding-left: var(--spacing-2xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-vertical-2xs { padding-top: calc(1em * 8 / 16) !important; padding-top: var(--spacing-2xs) !important; padding-bottom: calc(1em * 8 / 16) !important; padding-bottom: var(--spacing-2xs) !important; } .padding-y-2xs { padding-top: calc(1em * 8 / 16) !important; padding-top: var(--spacing-2xs) !important; padding-bottom: calc(1em * 8 / 16) !important; padding-bottom: var(--spacing-2xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-horizontal-2xs { padding-right: calc(1em * 8 / 16) !important; padding-right: var(--spacing-2xs) !important; padding-left: calc(1em * 8 / 16) !important; padding-left: var(--spacing-2xs) !important; } .padding-x-2xs { padding-right: calc(1em * 8 / 16) !important; padding-right: var(--spacing-2xs) !important; padding-left: calc(1em * 8 / 16) !important; padding-left: var(--spacing-2xs) !important; } .padding-xs { padding: calc(1em * 10 / 16) !important; padding: var(--spacing-xs) !important; } .padding-top-xs { padding-top: calc(1em * 10 / 16) !important; padding-top: var(--spacing-xs) !important; } .padding-right-xs { padding-right: calc(1em * 10 / 16) !important; padding-right: var(--spacing-xs) !important; } .padding-bottom-xs { padding-bottom: calc(1em * 10 / 16) !important; padding-bottom: var(--spacing-xs) !important; } .padding-left-xs { padding-left: calc(1em * 10 / 16) !important; padding-left: var(--spacing-xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-vertical-xs { padding-top: calc(1em * 10 / 16) !important; padding-top: var(--spacing-xs) !important; padding-bottom: calc(1em * 10 / 16) !important; padding-bottom: var(--spacing-xs) !important; } .padding-y-xs { padding-top: calc(1em * 10 / 16) !important; padding-top: var(--spacing-xs) !important; padding-bottom: calc(1em * 10 / 16) !important; padding-bottom: var(--spacing-xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-horizontal-xs { padding-right: calc(1em * 10 / 16) !important; padding-right: var(--spacing-xs) !important; padding-left: calc(1em * 10 / 16) !important; padding-left: var(--spacing-xs) !important; } .padding-x-xs { padding-right: calc(1em * 10 / 16) !important; padding-right: var(--spacing-xs) !important; padding-left: calc(1em * 10 / 16) !important; padding-left: var(--spacing-xs) !important; } .padding-sm { padding: calc(1em * 12 / 16) !important; padding: var(--spacing-sm) !important; } .padding-top-sm { padding-top: calc(1em * 12 / 16) !important; padding-top: var(--spacing-sm) !important; } .padding-right-sm { padding-right: calc(1em * 12 / 16) !important; padding-right: var(--spacing-sm) !important; } .padding-bottom-sm { padding-bottom: calc(1em * 12 / 16) !important; padding-bottom: var(--spacing-sm) !important; } .padding-left-sm { padding-left: calc(1em * 12 / 16) !important; padding-left: var(--spacing-sm) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-vertical-sm { padding-top: calc(1em * 12 / 16) !important; padding-top: var(--spacing-sm) !important; padding-bottom: calc(1em * 12 / 16) !important; padding-bottom: var(--spacing-sm) !important; } .padding-y-sm { padding-top: calc(1em * 12 / 16) !important; padding-top: var(--spacing-sm) !important; padding-bottom: calc(1em * 12 / 16) !important; padding-bottom: var(--spacing-sm) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-horizontal-sm { padding-right: calc(1em * 12 / 16) !important; padding-right: var(--spacing-sm) !important; padding-left: calc(1em * 12 / 16) !important; padding-left: var(--spacing-sm) !important; } .padding-x-sm { padding-right: calc(1em * 12 / 16) !important; padding-right: var(--spacing-sm) !important; padding-left: calc(1em * 12 / 16) !important; padding-left: var(--spacing-sm) !important; } .padding-md { padding: calc(1em * 1) !important; padding: var(--spacing-md) !important; } .padding-top-md { padding-top: calc(1em * 1) !important; padding-top: var(--spacing-md) !important; } .padding-right-md { padding-right: calc(1em * 1) !important; padding-right: var(--spacing-md) !important; } .padding-bottom-md { padding-bottom: calc(1em * 1) !important; padding-bottom: var(--spacing-md) !important; } .padding-left-md { padding-left: calc(1em * 1) !important; padding-left: var(--spacing-md) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-vertical-md { padding-top: calc(1em * 1) !important; padding-top: var(--spacing-md) !important; padding-bottom: calc(1em * 1) !important; padding-bottom: var(--spacing-md) !important; } .padding-y-md { padding-top: calc(1em * 1) !important; padding-top: var(--spacing-md) !important; padding-bottom: calc(1em * 1) !important; padding-bottom: var(--spacing-md) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-horizontal-md { padding-right: calc(1em * 1) !important; padding-right: var(--spacing-md) !important; padding-left: calc(1em * 1) !important; padding-left: var(--spacing-md) !important; } .padding-x-md { padding-right: calc(1em * 1) !important; padding-right: var(--spacing-md) !important; padding-left: calc(1em * 1) !important; padding-left: var(--spacing-md) !important; } .padding-lg { padding: calc(1em * 1.25) !important; padding: var(--spacing-lg) !important; } .padding-top-lg { padding-top: calc(1em * 1.25) !important; padding-top: var(--spacing-lg) !important; } .padding-right-lg { padding-right: calc(1em * 1.25) !important; padding-right: var(--spacing-lg) !important; } .padding-bottom-lg { padding-bottom: calc(1em * 1.25) !important; padding-bottom: var(--spacing-lg) !important; } .padding-left-lg { padding-left: calc(1em * 1.25) !important; padding-left: var(--spacing-lg) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-vertical-lg { padding-top: calc(1em * 1.25) !important; padding-top: var(--spacing-lg) !important; padding-bottom: calc(1em * 1.25) !important; padding-bottom: var(--spacing-lg) !important; } .padding-y-lg { padding-top: calc(1em * 1.25) !important; padding-top: var(--spacing-lg) !important; padding-bottom: calc(1em * 1.25) !important; padding-bottom: var(--spacing-lg) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-horizontal-lg { padding-right: calc(1em * 1.25) !important; padding-right: var(--spacing-lg) !important; padding-left: calc(1em * 1.25) !important; padding-left: var(--spacing-lg) !important; } .padding-x-lg { padding-right: calc(1em * 1.25) !important; padding-right: var(--spacing-lg) !important; padding-left: calc(1em * 1.25) !important; padding-left: var(--spacing-lg) !important; } .padding-xl { padding: calc(1em * 1.5) !important; padding: var(--spacing-xl) !important; } .padding-top-xl { padding-top: calc(1em * 1.5) !important; padding-top: var(--spacing-xl) !important; } .padding-right-xl { padding-right: calc(1em * 1.5) !important; padding-right: var(--spacing-xl) !important; } .padding-bottom-xl { padding-bottom: calc(1em * 1.5) !important; padding-bottom: var(--spacing-xl) !important; } .padding-left-xl { padding-left: calc(1em * 1.5) !important; padding-left: var(--spacing-xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-vertical-xl { padding-top: calc(1em * 1.5) !important; padding-top: var(--spacing-xl) !important; padding-bottom: calc(1em * 1.5) !important; padding-bottom: var(--spacing-xl) !important; } .padding-y-xl { padding-top: calc(1em * 1.5) !important; padding-top: var(--spacing-xl) !important; padding-bottom: calc(1em * 1.5) !important; padding-bottom: var(--spacing-xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-horizontal-xl { padding-right: calc(1em * 1.5) !important; padding-right: var(--spacing-xl) !important; padding-left: calc(1em * 1.5) !important; padding-left: var(--spacing-xl) !important; } .padding-x-xl { padding-right: calc(1em * 1.5) !important; padding-right: var(--spacing-xl) !important; padding-left: calc(1em * 1.5) !important; padding-left: var(--spacing-xl) !important; } .padding-2xl { padding: calc(1em * 2) !important; padding: var(--spacing-2xl) !important; } .padding-top-2xl { padding-top: calc(1em * 2) !important; padding-top: var(--spacing-2xl) !important; } .padding-right-2xl { padding-right: calc(1em * 2) !important; padding-right: var(--spacing-2xl) !important; } .padding-bottom-2xl { padding-bottom: calc(1em * 2) !important; padding-bottom: var(--spacing-2xl) !important; } .padding-left-2xl { padding-left: calc(1em * 2) !important; padding-left: var(--spacing-2xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-vertical-2xl { padding-top: calc(1em * 2) !important; padding-top: var(--spacing-2xl) !important; padding-bottom: calc(1em * 2) !important; padding-bottom: var(--spacing-2xl) !important; } .padding-y-2xl { padding-top: calc(1em * 2) !important; padding-top: var(--spacing-2xl) !important; padding-bottom: calc(1em * 2) !important; padding-bottom: var(--spacing-2xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-horizontal-2xl { padding-right: calc(1em * 2) !important; padding-right: var(--spacing-2xl) !important; padding-left: calc(1em * 2) !important; padding-left: var(--spacing-2xl) !important; } .padding-x-2xl { padding-right: calc(1em * 2) !important; padding-right: var(--spacing-2xl) !important; padding-left: calc(1em * 2) !important; padding-left: var(--spacing-2xl) !important; } .padding-3xl { padding: calc(1em * 2.5) !important; padding: var(--spacing-3xl) !important; } .padding-top-3xl { padding-top: calc(1em * 2.5) !important; padding-top: var(--spacing-3xl) !important; } .padding-right-3xl { padding-right: calc(1em * 2.5) !important; padding-right: var(--spacing-3xl) !important; } .padding-bottom-3xl { padding-bottom: calc(1em * 2.5) !important; padding-bottom: var(--spacing-3xl) !important; } .padding-left-3xl { padding-left: calc(1em * 2.5) !important; padding-left: var(--spacing-3xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-vertical-3xl { padding-top: calc(1em * 2.5) !important; padding-top: var(--spacing-3xl) !important; padding-bottom: calc(1em * 2.5) !important; padding-bottom: var(--spacing-3xl) !important; } .padding-y-3xl { padding-top: calc(1em * 2.5) !important; padding-top: var(--spacing-3xl) !important; padding-bottom: calc(1em * 2.5) !important; padding-bottom: var(--spacing-3xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-horizontal-3xl { padding-right: calc(1em * 2.5) !important; padding-right: var(--spacing-3xl) !important; padding-left: calc(1em * 2.5) !important; padding-left: var(--spacing-3xl) !important; } .padding-x-3xl { padding-right: calc(1em * 2.5) !important; padding-right: var(--spacing-3xl) !important; padding-left: calc(1em * 2.5) !important; padding-left: var(--spacing-3xl) !important; } .padding-4xl { padding: calc(1em * 3) !important; padding: var(--spacing-4xl) !important; } .padding-top-4xl { padding-top: calc(1em * 3) !important; padding-top: var(--spacing-4xl) !important; } .padding-right-4xl { padding-right: calc(1em * 3) !important; padding-right: var(--spacing-4xl) !important; } .padding-bottom-4xl { padding-bottom: calc(1em * 3) !important; padding-bottom: var(--spacing-4xl) !important; } .padding-left-4xl { padding-left: calc(1em * 3) !important; padding-left: var(--spacing-4xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-vertical-4xl { padding-top: calc(1em * 3) !important; padding-top: var(--spacing-4xl) !important; padding-bottom: calc(1em * 3) !important; padding-bottom: var(--spacing-4xl) !important; } .padding-y-4xl { padding-top: calc(1em * 3) !important; padding-top: var(--spacing-4xl) !important; padding-bottom: calc(1em * 3) !important; padding-bottom: var(--spacing-4xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-horizontal-4xl { padding-right: calc(1em * 3) !important; padding-right: var(--spacing-4xl) !important; padding-left: calc(1em * 3) !important; padding-left: var(--spacing-4xl) !important; } .padding-x-4xl { padding-right: calc(1em * 3) !important; padding-right: var(--spacing-4xl) !important; padding-left: calc(1em * 3) !important; padding-left: var(--spacing-4xl) !important; } .padding-5xl { padding: calc(1em * 4) !important; padding: var(--spacing-5xl) !important; } .padding-top-5xl { padding-top: calc(1em * 4) !important; padding-top: var(--spacing-5xl) !important; } .padding-right-5xl { padding-right: calc(1em * 4) !important; padding-right: var(--spacing-5xl) !important; } .padding-bottom-5xl { padding-bottom: calc(1em * 4) !important; padding-bottom: var(--spacing-5xl) !important; } .padding-left-5xl { padding-left: calc(1em * 4) !important; padding-left: var(--spacing-5xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-vertical-5xl { padding-top: calc(1em * 4) !important; padding-top: var(--spacing-5xl) !important; padding-bottom: calc(1em * 4) !important; padding-bottom: var(--spacing-5xl) !important; } .padding-y-5xl { padding-top: calc(1em * 4) !important; padding-top: var(--spacing-5xl) !important; padding-bottom: calc(1em * 4) !important; padding-bottom: var(--spacing-5xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-horizontal-5xl { padding-right: calc(1em * 4) !important; padding-right: var(--spacing-5xl) !important; padding-left: calc(1em * 4) !important; padding-left: var(--spacing-5xl) !important; } .padding-x-5xl { padding-right: calc(1em * 4) !important; padding-right: var(--spacing-5xl) !important; padding-left: calc(1em * 4) !important; padding-left: var(--spacing-5xl) !important; } .padding-6xl { padding: calc(1em * 5) !important; padding: var(--spacing-6xl) !important; } .padding-top-6xl { padding-top: calc(1em * 5) !important; padding-top: var(--spacing-6xl) !important; } .padding-right-6xl { padding-right: calc(1em * 5) !important; padding-right: var(--spacing-6xl) !important; } .padding-bottom-6xl { padding-bottom: calc(1em * 5) !important; padding-bottom: var(--spacing-6xl) !important; } .padding-left-6xl { padding-left: calc(1em * 5) !important; padding-left: var(--spacing-6xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-vertical-6xl { padding-top: calc(1em * 5) !important; padding-top: var(--spacing-6xl) !important; padding-bottom: calc(1em * 5) !important; padding-bottom: var(--spacing-6xl) !important; } .padding-y-6xl { padding-top: calc(1em * 5) !important; padding-top: var(--spacing-6xl) !important; padding-bottom: calc(1em * 5) !important; padding-bottom: var(--spacing-6xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-horizontal-6xl { padding-right: calc(1em * 5) !important; padding-right: var(--spacing-6xl) !important; padding-left: calc(1em * 5) !important; padding-left: var(--spacing-6xl) !important; } .padding-x-6xl { padding-right: calc(1em * 5) !important; padding-right: var(--spacing-6xl) !important; padding-left: calc(1em * 5) !important; padding-left: var(--spacing-6xl) !important; } .padding-7xl { padding: calc(1em * 6) !important; padding: var(--spacing-7xl) !important; } .padding-top-7xl { padding-top: calc(1em * 6) !important; padding-top: var(--spacing-7xl) !important; } .padding-right-7xl { padding-right: calc(1em * 6) !important; padding-right: var(--spacing-7xl) !important; } .padding-bottom-7xl { padding-bottom: calc(1em * 6) !important; padding-bottom: var(--spacing-7xl) !important; } .padding-left-7xl { padding-left: calc(1em * 6) !important; padding-left: var(--spacing-7xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-vertical-7xl { padding-top: calc(1em * 6) !important; padding-top: var(--spacing-7xl) !important; padding-bottom: calc(1em * 6) !important; padding-bottom: var(--spacing-7xl) !important; } .padding-y-7xl { padding-top: calc(1em * 6) !important; padding-top: var(--spacing-7xl) !important; padding-bottom: calc(1em * 6) !important; padding-bottom: var(--spacing-7xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-horizontal-7xl { padding-right: calc(1em * 6) !important; padding-right: var(--spacing-7xl) !important; padding-left: calc(1em * 6) !important; padding-left: var(--spacing-7xl) !important; } .padding-x-7xl { padding-right: calc(1em * 6) !important; padding-right: var(--spacing-7xl) !important; padding-left: calc(1em * 6) !important; padding-left: var(--spacing-7xl) !important; } .padding-8xl { padding: calc(1em * 8) !important; padding: var(--spacing-8xl) !important; } .padding-top-8xl { padding-top: calc(1em * 8) !important; padding-top: var(--spacing-8xl) !important; } .padding-right-8xl { padding-right: calc(1em * 8) !important; padding-right: var(--spacing-8xl) !important; } .padding-bottom-8xl { padding-bottom: calc(1em * 8) !important; padding-bottom: var(--spacing-8xl) !important; } .padding-left-8xl { padding-left: calc(1em * 8) !important; padding-left: var(--spacing-8xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-vertical-8xl { padding-top: calc(1em * 8) !important; padding-top: var(--spacing-8xl) !important; padding-bottom: calc(1em * 8) !important; padding-bottom: var(--spacing-8xl) !important; } .padding-y-8xl { padding-top: calc(1em * 8) !important; padding-top: var(--spacing-8xl) !important; padding-bottom: calc(1em * 8) !important; padding-bottom: var(--spacing-8xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-horizontal-8xl { padding-right: calc(1em * 8) !important; padding-right: var(--spacing-8xl) !important; padding-left: calc(1em * 8) !important; padding-left: var(--spacing-8xl) !important; } .padding-x-8xl { padding-right: calc(1em * 8) !important; padding-right: var(--spacing-8xl) !important; padding-left: calc(1em * 8) !important; padding-left: var(--spacing-8xl) !important; } .padding-9xl { padding: calc(1em * 10) !important; padding: var(--spacing-9xl) !important; } .padding-top-9xl { padding-top: calc(1em * 10) !important; padding-top: var(--spacing-9xl) !important; } .padding-right-9xl { padding-right: calc(1em * 10) !important; padding-right: var(--spacing-9xl) !important; } .padding-bottom-9xl { padding-bottom: calc(1em * 10) !important; padding-bottom: var(--spacing-9xl) !important; } .padding-left-9xl { padding-left: calc(1em * 10) !important; padding-left: var(--spacing-9xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-vertical-9xl { padding-top: calc(1em * 10) !important; padding-top: var(--spacing-9xl) !important; padding-bottom: calc(1em * 10) !important; padding-bottom: var(--spacing-9xl) !important; } .padding-y-9xl { padding-top: calc(1em * 10) !important; padding-top: var(--spacing-9xl) !important; padding-bottom: calc(1em * 10) !important; padding-bottom: var(--spacing-9xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-horizontal-9xl { padding-right: calc(1em * 10) !important; padding-right: var(--spacing-9xl) !important; padding-left: calc(1em * 10) !important; padding-left: var(--spacing-9xl) !important; } .padding-x-9xl { padding-right: calc(1em * 10) !important; padding-right: var(--spacing-9xl) !important; padding-left: calc(1em * 10) !important; padding-left: var(--spacing-9xl) !important; } .padding-10xl { padding: calc(1em * 12) !important; padding: var(--spacing-10xl) !important; } .padding-top-10xl { padding-top: calc(1em * 12) !important; padding-top: var(--spacing-10xl) !important; } .padding-right-10xl { padding-right: calc(1em * 12) !important; padding-right: var(--spacing-10xl) !important; } .padding-bottom-10xl { padding-bottom: calc(1em * 12) !important; padding-bottom: var(--spacing-10xl) !important; } .padding-left-10xl { padding-left: calc(1em * 12) !important; padding-left: var(--spacing-10xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-vertical-10xl { padding-top: calc(1em * 12) !important; padding-top: var(--spacing-10xl) !important; padding-bottom: calc(1em * 12) !important; padding-bottom: var(--spacing-10xl) !important; } .padding-y-10xl { padding-top: calc(1em * 12) !important; padding-top: var(--spacing-10xl) !important; padding-bottom: calc(1em * 12) !important; padding-bottom: var(--spacing-10xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-horizontal-10xl { padding-right: calc(1em * 12) !important; padding-right: var(--spacing-10xl) !important; padding-left: calc(1em * 12) !important; padding-left: var(--spacing-10xl) !important; } .padding-x-10xl { padding-right: calc(1em * 12) !important; padding-right: var(--spacing-10xl) !important; padding-left: calc(1em * 12) !important; padding-left: var(--spacing-10xl) !important; } .padding-11xl { padding: calc(1em * 16) !important; padding: var(--spacing-11xl) !important; } .padding-top-11xl { padding-top: calc(1em * 16) !important; padding-top: var(--spacing-11xl) !important; } .padding-right-11xl { padding-right: calc(1em * 16) !important; padding-right: var(--spacing-11xl) !important; } .padding-bottom-11xl { padding-bottom: calc(1em * 16) !important; padding-bottom: var(--spacing-11xl) !important; } .padding-left-11xl { padding-left: calc(1em * 16) !important; padding-left: var(--spacing-11xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-vertical-11xl { padding-top: calc(1em * 16) !important; padding-top: var(--spacing-11xl) !important; padding-bottom: calc(1em * 16) !important; padding-bottom: var(--spacing-11xl) !important; } .padding-y-11xl { padding-top: calc(1em * 16) !important; padding-top: var(--spacing-11xl) !important; padding-bottom: calc(1em * 16) !important; padding-bottom: var(--spacing-11xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-horizontal-11xl { padding-right: calc(1em * 16) !important; padding-right: var(--spacing-11xl) !important; padding-left: calc(1em * 16) !important; padding-left: var(--spacing-11xl) !important; } .padding-x-11xl { padding-right: calc(1em * 16) !important; padding-right: var(--spacing-11xl) !important; padding-left: calc(1em * 16) !important; padding-left: var(--spacing-11xl) !important; } .padding-12xl { padding: calc(1em * 20) !important; padding: var(--spacing-12xl) !important; } .padding-top-12xl { padding-top: calc(1em * 20) !important; padding-top: var(--spacing-12xl) !important; } .padding-right-12xl { padding-right: calc(1em * 20) !important; padding-right: var(--spacing-12xl) !important; } .padding-bottom-12xl { padding-bottom: calc(1em * 20) !important; padding-bottom: var(--spacing-12xl) !important; } .padding-left-12xl { padding-left: calc(1em * 20) !important; padding-left: var(--spacing-12xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-vertical-12xl { padding-top: calc(1em * 20) !important; padding-top: var(--spacing-12xl) !important; padding-bottom: calc(1em * 20) !important; padding-bottom: var(--spacing-12xl) !important; } .padding-y-12xl { padding-top: calc(1em * 20) !important; padding-top: var(--spacing-12xl) !important; padding-bottom: calc(1em * 20) !important; padding-bottom: var(--spacing-12xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-horizontal-12xl { padding-right: calc(1em * 20) !important; padding-right: var(--spacing-12xl) !important; padding-left: calc(1em * 20) !important; padding-left: var(--spacing-12xl) !important; } .padding-x-12xl { padding-right: calc(1em * 20) !important; padding-right: var(--spacing-12xl) !important; padding-left: calc(1em * 20) !important; padding-left: var(--spacing-12xl) !important; } .padding-0 { padding: 0 !important; padding: var(--spacing-0) !important; } .padding-top-0 { padding-top: 0 !important; padding-top: var(--spacing-0) !important; } .padding-right-0 { padding-right: 0 !important; padding-right: var(--spacing-0) !important; } .padding-bottom-0 { padding-bottom: 0 !important; padding-bottom: var(--spacing-0) !important; } .padding-left-0 { padding-left: 0 !important; padding-left: var(--spacing-0) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-vertical-0 { padding-top: 0 !important; padding-top: var(--spacing-0) !important; padding-bottom: 0 !important; padding-bottom: var(--spacing-0) !important; } .padding-y-0 { padding-top: 0 !important; padding-top: var(--spacing-0) !important; padding-bottom: 0 !important; padding-bottom: var(--spacing-0) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-horizontal-0 { padding-right: 0 !important; padding-right: var(--spacing-0) !important; padding-left: 0 !important; padding-left: var(--spacing-0) !important; } .padding-x-0 { padding-right: 0 !important; padding-right: var(--spacing-0) !important; padding-left: 0 !important; padding-left: var(--spacing-0) !important; } .padding-1 { padding: calc(1em * 1 / 16) !important; padding: var(--spacing-1) !important; } .padding-top-1 { padding-top: calc(1em * 1 / 16) !important; padding-top: var(--spacing-1) !important; } .padding-right-1 { padding-right: calc(1em * 1 / 16) !important; padding-right: var(--spacing-1) !important; } .padding-bottom-1 { padding-bottom: calc(1em * 1 / 16) !important; padding-bottom: var(--spacing-1) !important; } .padding-left-1 { padding-left: calc(1em * 1 / 16) !important; padding-left: var(--spacing-1) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-vertical-1 { padding-top: calc(1em * 1 / 16) !important; padding-top: var(--spacing-1) !important; padding-bottom: calc(1em * 1 / 16) !important; padding-bottom: var(--spacing-1) !important; } .padding-y-1 { padding-top: calc(1em * 1 / 16) !important; padding-top: var(--spacing-1) !important; padding-bottom: calc(1em * 1 / 16) !important; padding-bottom: var(--spacing-1) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-horizontal-1 { padding-right: calc(1em * 1 / 16) !important; padding-right: var(--spacing-1) !important; padding-left: calc(1em * 1 / 16) !important; padding-left: var(--spacing-1) !important; } .padding-x-1 { padding-right: calc(1em * 1 / 16) !important; padding-right: var(--spacing-1) !important; padding-left: calc(1em * 1 / 16) !important; padding-left: var(--spacing-1) !important; } .padding-1px { padding: 1px !important; padding: var(--spacing-1px) !important; } .padding-top-1px { padding-top: 1px !important; padding-top: var(--spacing-1px) !important; } .padding-right-1px { padding-right: 1px !important; padding-right: var(--spacing-1px) !important; } .padding-bottom-1px { padding-bottom: 1px !important; padding-bottom: var(--spacing-1px) !important; } .padding-left-1px { padding-left: 1px !important; padding-left: var(--spacing-1px) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-vertical-1px { padding-top: 1px !important; padding-top: var(--spacing-1px) !important; padding-bottom: 1px !important; padding-bottom: var(--spacing-1px) !important; } .padding-y-1px { padding-top: 1px !important; padding-top: var(--spacing-1px) !important; padding-bottom: 1px !important; padding-bottom: var(--spacing-1px) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .padding-horizontal-1px { padding-right: 1px !important; padding-right: var(--spacing-1px) !important; padding-left: 1px !important; padding-left: var(--spacing-1px) !important; } .padding-x-1px { padding-right: 1px !important; padding-right: var(--spacing-1px) !important; padding-left: 1px !important; padding-left: var(--spacing-1px) !important; } @media (min-width: 768px) { .tablet\:padding-7xs { padding: calc(1em * 1 / 16) !important; padding: var(--spacing-7xs) !important; } .tablet\:padding-top-7xs { padding-top: calc(1em * 1 / 16) !important; padding-top: var(--spacing-7xs) !important; } .tablet\:padding-right-7xs { padding-right: calc(1em * 1 / 16) !important; padding-right: var(--spacing-7xs) !important; } .tablet\:padding-bottom-7xs { padding-bottom: calc(1em * 1 / 16) !important; padding-bottom: var(--spacing-7xs) !important; } .tablet\:padding-left-7xs { padding-left: calc(1em * 1 / 16) !important; padding-left: var(--spacing-7xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-horizontal-7xs { padding-right: calc(1em * 1 / 16) !important; padding-right: var(--spacing-7xs) !important; padding-left: calc(1em * 1 / 16) !important; padding-left: var(--spacing-7xs) !important; } .tablet\:padding-x-7xs { padding-right: calc(1em * 1 / 16) !important; padding-right: var(--spacing-7xs) !important; padding-left: calc(1em * 1 / 16) !important; padding-left: var(--spacing-7xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-vertical-7xs { padding-top: calc(1em * 1 / 16) !important; padding-top: var(--spacing-7xs) !important; padding-bottom: calc(1em * 1 / 16) !important; padding-bottom: var(--spacing-7xs) !important; } .tablet\:padding-y-7xs { padding-top: calc(1em * 1 / 16) !important; padding-top: var(--spacing-7xs) !important; padding-bottom: calc(1em * 1 / 16) !important; padding-bottom: var(--spacing-7xs) !important; } .tablet\:padding-6xs { padding: calc(1em * 2 / 16) !important; padding: var(--spacing-6xs) !important; } .tablet\:padding-top-6xs { padding-top: calc(1em * 2 / 16) !important; padding-top: var(--spacing-6xs) !important; } .tablet\:padding-right-6xs { padding-right: calc(1em * 2 / 16) !important; padding-right: var(--spacing-6xs) !important; } .tablet\:padding-bottom-6xs { padding-bottom: calc(1em * 2 / 16) !important; padding-bottom: var(--spacing-6xs) !important; } .tablet\:padding-left-6xs { padding-left: calc(1em * 2 / 16) !important; padding-left: var(--spacing-6xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-horizontal-6xs { padding-right: calc(1em * 2 / 16) !important; padding-right: var(--spacing-6xs) !important; padding-left: calc(1em * 2 / 16) !important; padding-left: var(--spacing-6xs) !important; } .tablet\:padding-x-6xs { padding-right: calc(1em * 2 / 16) !important; padding-right: var(--spacing-6xs) !important; padding-left: calc(1em * 2 / 16) !important; padding-left: var(--spacing-6xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-vertical-6xs { padding-top: calc(1em * 2 / 16) !important; padding-top: var(--spacing-6xs) !important; padding-bottom: calc(1em * 2 / 16) !important; padding-bottom: var(--spacing-6xs) !important; } .tablet\:padding-y-6xs { padding-top: calc(1em * 2 / 16) !important; padding-top: var(--spacing-6xs) !important; padding-bottom: calc(1em * 2 / 16) !important; padding-bottom: var(--spacing-6xs) !important; } .tablet\:padding-5xs { padding: calc(1em * 3 / 16) !important; padding: var(--spacing-5xs) !important; } .tablet\:padding-top-5xs { padding-top: calc(1em * 3 / 16) !important; padding-top: var(--spacing-5xs) !important; } .tablet\:padding-right-5xs { padding-right: calc(1em * 3 / 16) !important; padding-right: var(--spacing-5xs) !important; } .tablet\:padding-bottom-5xs { padding-bottom: calc(1em * 3 / 16) !important; padding-bottom: var(--spacing-5xs) !important; } .tablet\:padding-left-5xs { padding-left: calc(1em * 3 / 16) !important; padding-left: var(--spacing-5xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-horizontal-5xs { padding-right: calc(1em * 3 / 16) !important; padding-right: var(--spacing-5xs) !important; padding-left: calc(1em * 3 / 16) !important; padding-left: var(--spacing-5xs) !important; } .tablet\:padding-x-5xs { padding-right: calc(1em * 3 / 16) !important; padding-right: var(--spacing-5xs) !important; padding-left: calc(1em * 3 / 16) !important; padding-left: var(--spacing-5xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-vertical-5xs { padding-top: calc(1em * 3 / 16) !important; padding-top: var(--spacing-5xs) !important; padding-bottom: calc(1em * 3 / 16) !important; padding-bottom: var(--spacing-5xs) !important; } .tablet\:padding-y-5xs { padding-top: calc(1em * 3 / 16) !important; padding-top: var(--spacing-5xs) !important; padding-bottom: calc(1em * 3 / 16) !important; padding-bottom: var(--spacing-5xs) !important; } .tablet\:padding-4xs { padding: calc(1em * 4 / 16) !important; padding: var(--spacing-4xs) !important; } .tablet\:padding-top-4xs { padding-top: calc(1em * 4 / 16) !important; padding-top: var(--spacing-4xs) !important; } .tablet\:padding-right-4xs { padding-right: calc(1em * 4 / 16) !important; padding-right: var(--spacing-4xs) !important; } .tablet\:padding-bottom-4xs { padding-bottom: calc(1em * 4 / 16) !important; padding-bottom: var(--spacing-4xs) !important; } .tablet\:padding-left-4xs { padding-left: calc(1em * 4 / 16) !important; padding-left: var(--spacing-4xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-horizontal-4xs { padding-right: calc(1em * 4 / 16) !important; padding-right: var(--spacing-4xs) !important; padding-left: calc(1em * 4 / 16) !important; padding-left: var(--spacing-4xs) !important; } .tablet\:padding-x-4xs { padding-right: calc(1em * 4 / 16) !important; padding-right: var(--spacing-4xs) !important; padding-left: calc(1em * 4 / 16) !important; padding-left: var(--spacing-4xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-vertical-4xs { padding-top: calc(1em * 4 / 16) !important; padding-top: var(--spacing-4xs) !important; padding-bottom: calc(1em * 4 / 16) !important; padding-bottom: var(--spacing-4xs) !important; } .tablet\:padding-y-4xs { padding-top: calc(1em * 4 / 16) !important; padding-top: var(--spacing-4xs) !important; padding-bottom: calc(1em * 4 / 16) !important; padding-bottom: var(--spacing-4xs) !important; } .tablet\:padding-3xs { padding: calc(1em * 6 / 16) !important; padding: var(--spacing-3xs) !important; } .tablet\:padding-top-3xs { padding-top: calc(1em * 6 / 16) !important; padding-top: var(--spacing-3xs) !important; } .tablet\:padding-right-3xs { padding-right: calc(1em * 6 / 16) !important; padding-right: var(--spacing-3xs) !important; } .tablet\:padding-bottom-3xs { padding-bottom: calc(1em * 6 / 16) !important; padding-bottom: var(--spacing-3xs) !important; } .tablet\:padding-left-3xs { padding-left: calc(1em * 6 / 16) !important; padding-left: var(--spacing-3xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-horizontal-3xs { padding-right: calc(1em * 6 / 16) !important; padding-right: var(--spacing-3xs) !important; padding-left: calc(1em * 6 / 16) !important; padding-left: var(--spacing-3xs) !important; } .tablet\:padding-x-3xs { padding-right: calc(1em * 6 / 16) !important; padding-right: var(--spacing-3xs) !important; padding-left: calc(1em * 6 / 16) !important; padding-left: var(--spacing-3xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-vertical-3xs { padding-top: calc(1em * 6 / 16) !important; padding-top: var(--spacing-3xs) !important; padding-bottom: calc(1em * 6 / 16) !important; padding-bottom: var(--spacing-3xs) !important; } .tablet\:padding-y-3xs { padding-top: calc(1em * 6 / 16) !important; padding-top: var(--spacing-3xs) !important; padding-bottom: calc(1em * 6 / 16) !important; padding-bottom: var(--spacing-3xs) !important; } .tablet\:padding-2xs { padding: calc(1em * 8 / 16) !important; padding: var(--spacing-2xs) !important; } .tablet\:padding-top-2xs { padding-top: calc(1em * 8 / 16) !important; padding-top: var(--spacing-2xs) !important; } .tablet\:padding-right-2xs { padding-right: calc(1em * 8 / 16) !important; padding-right: var(--spacing-2xs) !important; } .tablet\:padding-bottom-2xs { padding-bottom: calc(1em * 8 / 16) !important; padding-bottom: var(--spacing-2xs) !important; } .tablet\:padding-left-2xs { padding-left: calc(1em * 8 / 16) !important; padding-left: var(--spacing-2xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-horizontal-2xs { padding-right: calc(1em * 8 / 16) !important; padding-right: var(--spacing-2xs) !important; padding-left: calc(1em * 8 / 16) !important; padding-left: var(--spacing-2xs) !important; } .tablet\:padding-x-2xs { padding-right: calc(1em * 8 / 16) !important; padding-right: var(--spacing-2xs) !important; padding-left: calc(1em * 8 / 16) !important; padding-left: var(--spacing-2xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-vertical-2xs { padding-top: calc(1em * 8 / 16) !important; padding-top: var(--spacing-2xs) !important; padding-bottom: calc(1em * 8 / 16) !important; padding-bottom: var(--spacing-2xs) !important; } .tablet\:padding-y-2xs { padding-top: calc(1em * 8 / 16) !important; padding-top: var(--spacing-2xs) !important; padding-bottom: calc(1em * 8 / 16) !important; padding-bottom: var(--spacing-2xs) !important; } .tablet\:padding-xs { padding: calc(1em * 10 / 16) !important; padding: var(--spacing-xs) !important; } .tablet\:padding-top-xs { padding-top: calc(1em * 10 / 16) !important; padding-top: var(--spacing-xs) !important; } .tablet\:padding-right-xs { padding-right: calc(1em * 10 / 16) !important; padding-right: var(--spacing-xs) !important; } .tablet\:padding-bottom-xs { padding-bottom: calc(1em * 10 / 16) !important; padding-bottom: var(--spacing-xs) !important; } .tablet\:padding-left-xs { padding-left: calc(1em * 10 / 16) !important; padding-left: var(--spacing-xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-horizontal-xs { padding-right: calc(1em * 10 / 16) !important; padding-right: var(--spacing-xs) !important; padding-left: calc(1em * 10 / 16) !important; padding-left: var(--spacing-xs) !important; } .tablet\:padding-x-xs { padding-right: calc(1em * 10 / 16) !important; padding-right: var(--spacing-xs) !important; padding-left: calc(1em * 10 / 16) !important; padding-left: var(--spacing-xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-vertical-xs { padding-top: calc(1em * 10 / 16) !important; padding-top: var(--spacing-xs) !important; padding-bottom: calc(1em * 10 / 16) !important; padding-bottom: var(--spacing-xs) !important; } .tablet\:padding-y-xs { padding-top: calc(1em * 10 / 16) !important; padding-top: var(--spacing-xs) !important; padding-bottom: calc(1em * 10 / 16) !important; padding-bottom: var(--spacing-xs) !important; } .tablet\:padding-sm { padding: calc(1em * 12 / 16) !important; padding: var(--spacing-sm) !important; } .tablet\:padding-top-sm { padding-top: calc(1em * 12 / 16) !important; padding-top: var(--spacing-sm) !important; } .tablet\:padding-right-sm { padding-right: calc(1em * 12 / 16) !important; padding-right: var(--spacing-sm) !important; } .tablet\:padding-bottom-sm { padding-bottom: calc(1em * 12 / 16) !important; padding-bottom: var(--spacing-sm) !important; } .tablet\:padding-left-sm { padding-left: calc(1em * 12 / 16) !important; padding-left: var(--spacing-sm) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-horizontal-sm { padding-right: calc(1em * 12 / 16) !important; padding-right: var(--spacing-sm) !important; padding-left: calc(1em * 12 / 16) !important; padding-left: var(--spacing-sm) !important; } .tablet\:padding-x-sm { padding-right: calc(1em * 12 / 16) !important; padding-right: var(--spacing-sm) !important; padding-left: calc(1em * 12 / 16) !important; padding-left: var(--spacing-sm) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-vertical-sm { padding-top: calc(1em * 12 / 16) !important; padding-top: var(--spacing-sm) !important; padding-bottom: calc(1em * 12 / 16) !important; padding-bottom: var(--spacing-sm) !important; } .tablet\:padding-y-sm { padding-top: calc(1em * 12 / 16) !important; padding-top: var(--spacing-sm) !important; padding-bottom: calc(1em * 12 / 16) !important; padding-bottom: var(--spacing-sm) !important; } .tablet\:padding-md { padding: calc(1em * 1) !important; padding: var(--spacing-md) !important; } .tablet\:padding-top-md { padding-top: calc(1em * 1) !important; padding-top: var(--spacing-md) !important; } .tablet\:padding-right-md { padding-right: calc(1em * 1) !important; padding-right: var(--spacing-md) !important; } .tablet\:padding-bottom-md { padding-bottom: calc(1em * 1) !important; padding-bottom: var(--spacing-md) !important; } .tablet\:padding-left-md { padding-left: calc(1em * 1) !important; padding-left: var(--spacing-md) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-horizontal-md { padding-right: calc(1em * 1) !important; padding-right: var(--spacing-md) !important; padding-left: calc(1em * 1) !important; padding-left: var(--spacing-md) !important; } .tablet\:padding-x-md { padding-right: calc(1em * 1) !important; padding-right: var(--spacing-md) !important; padding-left: calc(1em * 1) !important; padding-left: var(--spacing-md) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-vertical-md { padding-top: calc(1em * 1) !important; padding-top: var(--spacing-md) !important; padding-bottom: calc(1em * 1) !important; padding-bottom: var(--spacing-md) !important; } .tablet\:padding-y-md { padding-top: calc(1em * 1) !important; padding-top: var(--spacing-md) !important; padding-bottom: calc(1em * 1) !important; padding-bottom: var(--spacing-md) !important; } .tablet\:padding-lg { padding: calc(1em * 1.25) !important; padding: var(--spacing-lg) !important; } .tablet\:padding-top-lg { padding-top: calc(1em * 1.25) !important; padding-top: var(--spacing-lg) !important; } .tablet\:padding-right-lg { padding-right: calc(1em * 1.25) !important; padding-right: var(--spacing-lg) !important; } .tablet\:padding-bottom-lg { padding-bottom: calc(1em * 1.25) !important; padding-bottom: var(--spacing-lg) !important; } .tablet\:padding-left-lg { padding-left: calc(1em * 1.25) !important; padding-left: var(--spacing-lg) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-horizontal-lg { padding-right: calc(1em * 1.25) !important; padding-right: var(--spacing-lg) !important; padding-left: calc(1em * 1.25) !important; padding-left: var(--spacing-lg) !important; } .tablet\:padding-x-lg { padding-right: calc(1em * 1.25) !important; padding-right: var(--spacing-lg) !important; padding-left: calc(1em * 1.25) !important; padding-left: var(--spacing-lg) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-vertical-lg { padding-top: calc(1em * 1.25) !important; padding-top: var(--spacing-lg) !important; padding-bottom: calc(1em * 1.25) !important; padding-bottom: var(--spacing-lg) !important; } .tablet\:padding-y-lg { padding-top: calc(1em * 1.25) !important; padding-top: var(--spacing-lg) !important; padding-bottom: calc(1em * 1.25) !important; padding-bottom: var(--spacing-lg) !important; } .tablet\:padding-xl { padding: calc(1em * 1.5) !important; padding: var(--spacing-xl) !important; } .tablet\:padding-top-xl { padding-top: calc(1em * 1.5) !important; padding-top: var(--spacing-xl) !important; } .tablet\:padding-right-xl { padding-right: calc(1em * 1.5) !important; padding-right: var(--spacing-xl) !important; } .tablet\:padding-bottom-xl { padding-bottom: calc(1em * 1.5) !important; padding-bottom: var(--spacing-xl) !important; } .tablet\:padding-left-xl { padding-left: calc(1em * 1.5) !important; padding-left: var(--spacing-xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-horizontal-xl { padding-right: calc(1em * 1.5) !important; padding-right: var(--spacing-xl) !important; padding-left: calc(1em * 1.5) !important; padding-left: var(--spacing-xl) !important; } .tablet\:padding-x-xl { padding-right: calc(1em * 1.5) !important; padding-right: var(--spacing-xl) !important; padding-left: calc(1em * 1.5) !important; padding-left: var(--spacing-xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-vertical-xl { padding-top: calc(1em * 1.5) !important; padding-top: var(--spacing-xl) !important; padding-bottom: calc(1em * 1.5) !important; padding-bottom: var(--spacing-xl) !important; } .tablet\:padding-y-xl { padding-top: calc(1em * 1.5) !important; padding-top: var(--spacing-xl) !important; padding-bottom: calc(1em * 1.5) !important; padding-bottom: var(--spacing-xl) !important; } .tablet\:padding-2xl { padding: calc(1em * 2) !important; padding: var(--spacing-2xl) !important; } .tablet\:padding-top-2xl { padding-top: calc(1em * 2) !important; padding-top: var(--spacing-2xl) !important; } .tablet\:padding-right-2xl { padding-right: calc(1em * 2) !important; padding-right: var(--spacing-2xl) !important; } .tablet\:padding-bottom-2xl { padding-bottom: calc(1em * 2) !important; padding-bottom: var(--spacing-2xl) !important; } .tablet\:padding-left-2xl { padding-left: calc(1em * 2) !important; padding-left: var(--spacing-2xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-horizontal-2xl { padding-right: calc(1em * 2) !important; padding-right: var(--spacing-2xl) !important; padding-left: calc(1em * 2) !important; padding-left: var(--spacing-2xl) !important; } .tablet\:padding-x-2xl { padding-right: calc(1em * 2) !important; padding-right: var(--spacing-2xl) !important; padding-left: calc(1em * 2) !important; padding-left: var(--spacing-2xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-vertical-2xl { padding-top: calc(1em * 2) !important; padding-top: var(--spacing-2xl) !important; padding-bottom: calc(1em * 2) !important; padding-bottom: var(--spacing-2xl) !important; } .tablet\:padding-y-2xl { padding-top: calc(1em * 2) !important; padding-top: var(--spacing-2xl) !important; padding-bottom: calc(1em * 2) !important; padding-bottom: var(--spacing-2xl) !important; } .tablet\:padding-3xl { padding: calc(1em * 2.5) !important; padding: var(--spacing-3xl) !important; } .tablet\:padding-top-3xl { padding-top: calc(1em * 2.5) !important; padding-top: var(--spacing-3xl) !important; } .tablet\:padding-right-3xl { padding-right: calc(1em * 2.5) !important; padding-right: var(--spacing-3xl) !important; } .tablet\:padding-bottom-3xl { padding-bottom: calc(1em * 2.5) !important; padding-bottom: var(--spacing-3xl) !important; } .tablet\:padding-left-3xl { padding-left: calc(1em * 2.5) !important; padding-left: var(--spacing-3xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-horizontal-3xl { padding-right: calc(1em * 2.5) !important; padding-right: var(--spacing-3xl) !important; padding-left: calc(1em * 2.5) !important; padding-left: var(--spacing-3xl) !important; } .tablet\:padding-x-3xl { padding-right: calc(1em * 2.5) !important; padding-right: var(--spacing-3xl) !important; padding-left: calc(1em * 2.5) !important; padding-left: var(--spacing-3xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-vertical-3xl { padding-top: calc(1em * 2.5) !important; padding-top: var(--spacing-3xl) !important; padding-bottom: calc(1em * 2.5) !important; padding-bottom: var(--spacing-3xl) !important; } .tablet\:padding-y-3xl { padding-top: calc(1em * 2.5) !important; padding-top: var(--spacing-3xl) !important; padding-bottom: calc(1em * 2.5) !important; padding-bottom: var(--spacing-3xl) !important; } .tablet\:padding-4xl { padding: calc(1em * 3) !important; padding: var(--spacing-4xl) !important; } .tablet\:padding-top-4xl { padding-top: calc(1em * 3) !important; padding-top: var(--spacing-4xl) !important; } .tablet\:padding-right-4xl { padding-right: calc(1em * 3) !important; padding-right: var(--spacing-4xl) !important; } .tablet\:padding-bottom-4xl { padding-bottom: calc(1em * 3) !important; padding-bottom: var(--spacing-4xl) !important; } .tablet\:padding-left-4xl { padding-left: calc(1em * 3) !important; padding-left: var(--spacing-4xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-horizontal-4xl { padding-right: calc(1em * 3) !important; padding-right: var(--spacing-4xl) !important; padding-left: calc(1em * 3) !important; padding-left: var(--spacing-4xl) !important; } .tablet\:padding-x-4xl { padding-right: calc(1em * 3) !important; padding-right: var(--spacing-4xl) !important; padding-left: calc(1em * 3) !important; padding-left: var(--spacing-4xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-vertical-4xl { padding-top: calc(1em * 3) !important; padding-top: var(--spacing-4xl) !important; padding-bottom: calc(1em * 3) !important; padding-bottom: var(--spacing-4xl) !important; } .tablet\:padding-y-4xl { padding-top: calc(1em * 3) !important; padding-top: var(--spacing-4xl) !important; padding-bottom: calc(1em * 3) !important; padding-bottom: var(--spacing-4xl) !important; } .tablet\:padding-5xl { padding: calc(1em * 4) !important; padding: var(--spacing-5xl) !important; } .tablet\:padding-top-5xl { padding-top: calc(1em * 4) !important; padding-top: var(--spacing-5xl) !important; } .tablet\:padding-right-5xl { padding-right: calc(1em * 4) !important; padding-right: var(--spacing-5xl) !important; } .tablet\:padding-bottom-5xl { padding-bottom: calc(1em * 4) !important; padding-bottom: var(--spacing-5xl) !important; } .tablet\:padding-left-5xl { padding-left: calc(1em * 4) !important; padding-left: var(--spacing-5xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-horizontal-5xl { padding-right: calc(1em * 4) !important; padding-right: var(--spacing-5xl) !important; padding-left: calc(1em * 4) !important; padding-left: var(--spacing-5xl) !important; } .tablet\:padding-x-5xl { padding-right: calc(1em * 4) !important; padding-right: var(--spacing-5xl) !important; padding-left: calc(1em * 4) !important; padding-left: var(--spacing-5xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-vertical-5xl { padding-top: calc(1em * 4) !important; padding-top: var(--spacing-5xl) !important; padding-bottom: calc(1em * 4) !important; padding-bottom: var(--spacing-5xl) !important; } .tablet\:padding-y-5xl { padding-top: calc(1em * 4) !important; padding-top: var(--spacing-5xl) !important; padding-bottom: calc(1em * 4) !important; padding-bottom: var(--spacing-5xl) !important; } .tablet\:padding-6xl { padding: calc(1em * 5) !important; padding: var(--spacing-6xl) !important; } .tablet\:padding-top-6xl { padding-top: calc(1em * 5) !important; padding-top: var(--spacing-6xl) !important; } .tablet\:padding-right-6xl { padding-right: calc(1em * 5) !important; padding-right: var(--spacing-6xl) !important; } .tablet\:padding-bottom-6xl { padding-bottom: calc(1em * 5) !important; padding-bottom: var(--spacing-6xl) !important; } .tablet\:padding-left-6xl { padding-left: calc(1em * 5) !important; padding-left: var(--spacing-6xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-horizontal-6xl { padding-right: calc(1em * 5) !important; padding-right: var(--spacing-6xl) !important; padding-left: calc(1em * 5) !important; padding-left: var(--spacing-6xl) !important; } .tablet\:padding-x-6xl { padding-right: calc(1em * 5) !important; padding-right: var(--spacing-6xl) !important; padding-left: calc(1em * 5) !important; padding-left: var(--spacing-6xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-vertical-6xl { padding-top: calc(1em * 5) !important; padding-top: var(--spacing-6xl) !important; padding-bottom: calc(1em * 5) !important; padding-bottom: var(--spacing-6xl) !important; } .tablet\:padding-y-6xl { padding-top: calc(1em * 5) !important; padding-top: var(--spacing-6xl) !important; padding-bottom: calc(1em * 5) !important; padding-bottom: var(--spacing-6xl) !important; } .tablet\:padding-7xl { padding: calc(1em * 6) !important; padding: var(--spacing-7xl) !important; } .tablet\:padding-top-7xl { padding-top: calc(1em * 6) !important; padding-top: var(--spacing-7xl) !important; } .tablet\:padding-right-7xl { padding-right: calc(1em * 6) !important; padding-right: var(--spacing-7xl) !important; } .tablet\:padding-bottom-7xl { padding-bottom: calc(1em * 6) !important; padding-bottom: var(--spacing-7xl) !important; } .tablet\:padding-left-7xl { padding-left: calc(1em * 6) !important; padding-left: var(--spacing-7xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-horizontal-7xl { padding-right: calc(1em * 6) !important; padding-right: var(--spacing-7xl) !important; padding-left: calc(1em * 6) !important; padding-left: var(--spacing-7xl) !important; } .tablet\:padding-x-7xl { padding-right: calc(1em * 6) !important; padding-right: var(--spacing-7xl) !important; padding-left: calc(1em * 6) !important; padding-left: var(--spacing-7xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-vertical-7xl { padding-top: calc(1em * 6) !important; padding-top: var(--spacing-7xl) !important; padding-bottom: calc(1em * 6) !important; padding-bottom: var(--spacing-7xl) !important; } .tablet\:padding-y-7xl { padding-top: calc(1em * 6) !important; padding-top: var(--spacing-7xl) !important; padding-bottom: calc(1em * 6) !important; padding-bottom: var(--spacing-7xl) !important; } .tablet\:padding-8xl { padding: calc(1em * 8) !important; padding: var(--spacing-8xl) !important; } .tablet\:padding-top-8xl { padding-top: calc(1em * 8) !important; padding-top: var(--spacing-8xl) !important; } .tablet\:padding-right-8xl { padding-right: calc(1em * 8) !important; padding-right: var(--spacing-8xl) !important; } .tablet\:padding-bottom-8xl { padding-bottom: calc(1em * 8) !important; padding-bottom: var(--spacing-8xl) !important; } .tablet\:padding-left-8xl { padding-left: calc(1em * 8) !important; padding-left: var(--spacing-8xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-horizontal-8xl { padding-right: calc(1em * 8) !important; padding-right: var(--spacing-8xl) !important; padding-left: calc(1em * 8) !important; padding-left: var(--spacing-8xl) !important; } .tablet\:padding-x-8xl { padding-right: calc(1em * 8) !important; padding-right: var(--spacing-8xl) !important; padding-left: calc(1em * 8) !important; padding-left: var(--spacing-8xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-vertical-8xl { padding-top: calc(1em * 8) !important; padding-top: var(--spacing-8xl) !important; padding-bottom: calc(1em * 8) !important; padding-bottom: var(--spacing-8xl) !important; } .tablet\:padding-y-8xl { padding-top: calc(1em * 8) !important; padding-top: var(--spacing-8xl) !important; padding-bottom: calc(1em * 8) !important; padding-bottom: var(--spacing-8xl) !important; } .tablet\:padding-9xl { padding: calc(1em * 10) !important; padding: var(--spacing-9xl) !important; } .tablet\:padding-top-9xl { padding-top: calc(1em * 10) !important; padding-top: var(--spacing-9xl) !important; } .tablet\:padding-right-9xl { padding-right: calc(1em * 10) !important; padding-right: var(--spacing-9xl) !important; } .tablet\:padding-bottom-9xl { padding-bottom: calc(1em * 10) !important; padding-bottom: var(--spacing-9xl) !important; } .tablet\:padding-left-9xl { padding-left: calc(1em * 10) !important; padding-left: var(--spacing-9xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-horizontal-9xl { padding-right: calc(1em * 10) !important; padding-right: var(--spacing-9xl) !important; padding-left: calc(1em * 10) !important; padding-left: var(--spacing-9xl) !important; } .tablet\:padding-x-9xl { padding-right: calc(1em * 10) !important; padding-right: var(--spacing-9xl) !important; padding-left: calc(1em * 10) !important; padding-left: var(--spacing-9xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-vertical-9xl { padding-top: calc(1em * 10) !important; padding-top: var(--spacing-9xl) !important; padding-bottom: calc(1em * 10) !important; padding-bottom: var(--spacing-9xl) !important; } .tablet\:padding-y-9xl { padding-top: calc(1em * 10) !important; padding-top: var(--spacing-9xl) !important; padding-bottom: calc(1em * 10) !important; padding-bottom: var(--spacing-9xl) !important; } .tablet\:padding-10xl { padding: calc(1em * 12) !important; padding: var(--spacing-10xl) !important; } .tablet\:padding-top-10xl { padding-top: calc(1em * 12) !important; padding-top: var(--spacing-10xl) !important; } .tablet\:padding-right-10xl { padding-right: calc(1em * 12) !important; padding-right: var(--spacing-10xl) !important; } .tablet\:padding-bottom-10xl { padding-bottom: calc(1em * 12) !important; padding-bottom: var(--spacing-10xl) !important; } .tablet\:padding-left-10xl { padding-left: calc(1em * 12) !important; padding-left: var(--spacing-10xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-horizontal-10xl { padding-right: calc(1em * 12) !important; padding-right: var(--spacing-10xl) !important; padding-left: calc(1em * 12) !important; padding-left: var(--spacing-10xl) !important; } .tablet\:padding-x-10xl { padding-right: calc(1em * 12) !important; padding-right: var(--spacing-10xl) !important; padding-left: calc(1em * 12) !important; padding-left: var(--spacing-10xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-vertical-10xl { padding-top: calc(1em * 12) !important; padding-top: var(--spacing-10xl) !important; padding-bottom: calc(1em * 12) !important; padding-bottom: var(--spacing-10xl) !important; } .tablet\:padding-y-10xl { padding-top: calc(1em * 12) !important; padding-top: var(--spacing-10xl) !important; padding-bottom: calc(1em * 12) !important; padding-bottom: var(--spacing-10xl) !important; } .tablet\:padding-11xl { padding: calc(1em * 16) !important; padding: var(--spacing-11xl) !important; } .tablet\:padding-top-11xl { padding-top: calc(1em * 16) !important; padding-top: var(--spacing-11xl) !important; } .tablet\:padding-right-11xl { padding-right: calc(1em * 16) !important; padding-right: var(--spacing-11xl) !important; } .tablet\:padding-bottom-11xl { padding-bottom: calc(1em * 16) !important; padding-bottom: var(--spacing-11xl) !important; } .tablet\:padding-left-11xl { padding-left: calc(1em * 16) !important; padding-left: var(--spacing-11xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-horizontal-11xl { padding-right: calc(1em * 16) !important; padding-right: var(--spacing-11xl) !important; padding-left: calc(1em * 16) !important; padding-left: var(--spacing-11xl) !important; } .tablet\:padding-x-11xl { padding-right: calc(1em * 16) !important; padding-right: var(--spacing-11xl) !important; padding-left: calc(1em * 16) !important; padding-left: var(--spacing-11xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-vertical-11xl { padding-top: calc(1em * 16) !important; padding-top: var(--spacing-11xl) !important; padding-bottom: calc(1em * 16) !important; padding-bottom: var(--spacing-11xl) !important; } .tablet\:padding-y-11xl { padding-top: calc(1em * 16) !important; padding-top: var(--spacing-11xl) !important; padding-bottom: calc(1em * 16) !important; padding-bottom: var(--spacing-11xl) !important; } .tablet\:padding-12xl { padding: calc(1em * 20) !important; padding: var(--spacing-12xl) !important; } .tablet\:padding-top-12xl { padding-top: calc(1em * 20) !important; padding-top: var(--spacing-12xl) !important; } .tablet\:padding-right-12xl { padding-right: calc(1em * 20) !important; padding-right: var(--spacing-12xl) !important; } .tablet\:padding-bottom-12xl { padding-bottom: calc(1em * 20) !important; padding-bottom: var(--spacing-12xl) !important; } .tablet\:padding-left-12xl { padding-left: calc(1em * 20) !important; padding-left: var(--spacing-12xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-horizontal-12xl { padding-right: calc(1em * 20) !important; padding-right: var(--spacing-12xl) !important; padding-left: calc(1em * 20) !important; padding-left: var(--spacing-12xl) !important; } .tablet\:padding-x-12xl { padding-right: calc(1em * 20) !important; padding-right: var(--spacing-12xl) !important; padding-left: calc(1em * 20) !important; padding-left: var(--spacing-12xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-vertical-12xl { padding-top: calc(1em * 20) !important; padding-top: var(--spacing-12xl) !important; padding-bottom: calc(1em * 20) !important; padding-bottom: var(--spacing-12xl) !important; } .tablet\:padding-y-12xl { padding-top: calc(1em * 20) !important; padding-top: var(--spacing-12xl) !important; padding-bottom: calc(1em * 20) !important; padding-bottom: var(--spacing-12xl) !important; } .tablet\:padding-0 { padding: 0 !important; padding: var(--spacing-0) !important; } .tablet\:padding-top-0 { padding-top: 0 !important; padding-top: var(--spacing-0) !important; } .tablet\:padding-right-0 { padding-right: 0 !important; padding-right: var(--spacing-0) !important; } .tablet\:padding-bottom-0 { padding-bottom: 0 !important; padding-bottom: var(--spacing-0) !important; } .tablet\:padding-left-0 { padding-left: 0 !important; padding-left: var(--spacing-0) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-horizontal-0 { padding-right: 0 !important; padding-right: var(--spacing-0) !important; padding-left: 0 !important; padding-left: var(--spacing-0) !important; } .tablet\:padding-x-0 { padding-right: 0 !important; padding-right: var(--spacing-0) !important; padding-left: 0 !important; padding-left: var(--spacing-0) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-vertical-0 { padding-top: 0 !important; padding-top: var(--spacing-0) !important; padding-bottom: 0 !important; padding-bottom: var(--spacing-0) !important; } .tablet\:padding-y-0 { padding-top: 0 !important; padding-top: var(--spacing-0) !important; padding-bottom: 0 !important; padding-bottom: var(--spacing-0) !important; } .tablet\:padding-1 { padding: calc(1em * 1 / 16) !important; padding: var(--spacing-1) !important; } .tablet\:padding-top-1 { padding-top: calc(1em * 1 / 16) !important; padding-top: var(--spacing-1) !important; } .tablet\:padding-right-1 { padding-right: calc(1em * 1 / 16) !important; padding-right: var(--spacing-1) !important; } .tablet\:padding-bottom-1 { padding-bottom: calc(1em * 1 / 16) !important; padding-bottom: var(--spacing-1) !important; } .tablet\:padding-left-1 { padding-left: calc(1em * 1 / 16) !important; padding-left: var(--spacing-1) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-horizontal-1 { padding-right: calc(1em * 1 / 16) !important; padding-right: var(--spacing-1) !important; padding-left: calc(1em * 1 / 16) !important; padding-left: var(--spacing-1) !important; } .tablet\:padding-x-1 { padding-right: calc(1em * 1 / 16) !important; padding-right: var(--spacing-1) !important; padding-left: calc(1em * 1 / 16) !important; padding-left: var(--spacing-1) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-vertical-1 { padding-top: calc(1em * 1 / 16) !important; padding-top: var(--spacing-1) !important; padding-bottom: calc(1em * 1 / 16) !important; padding-bottom: var(--spacing-1) !important; } .tablet\:padding-y-1 { padding-top: calc(1em * 1 / 16) !important; padding-top: var(--spacing-1) !important; padding-bottom: calc(1em * 1 / 16) !important; padding-bottom: var(--spacing-1) !important; } .tablet\:padding-1px { padding: 1px !important; padding: var(--spacing-1px) !important; } .tablet\:padding-top-1px { padding-top: 1px !important; padding-top: var(--spacing-1px) !important; } .tablet\:padding-right-1px { padding-right: 1px !important; padding-right: var(--spacing-1px) !important; } .tablet\:padding-bottom-1px { padding-bottom: 1px !important; padding-bottom: var(--spacing-1px) !important; } .tablet\:padding-left-1px { padding-left: 1px !important; padding-left: var(--spacing-1px) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-horizontal-1px { padding-right: 1px !important; padding-right: var(--spacing-1px) !important; padding-left: 1px !important; padding-left: var(--spacing-1px) !important; } .tablet\:padding-x-1px { padding-right: 1px !important; padding-right: var(--spacing-1px) !important; padding-left: 1px !important; padding-left: var(--spacing-1px) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .tablet\:padding-vertical-1px { padding-top: 1px !important; padding-top: var(--spacing-1px) !important; padding-bottom: 1px !important; padding-bottom: var(--spacing-1px) !important; } .tablet\:padding-y-1px { padding-top: 1px !important; padding-top: var(--spacing-1px) !important; padding-bottom: 1px !important; padding-bottom: var(--spacing-1px) !important; } } @media (min-width: 1152px) { .laptop\:padding-7xs { padding: calc(1em * 1 / 16) !important; padding: var(--spacing-7xs) !important; } .laptop\:padding-top-7xs { padding-top: calc(1em * 1 / 16) !important; padding-top: var(--spacing-7xs) !important; } .laptop\:padding-right-7xs { padding-right: calc(1em * 1 / 16) !important; padding-right: var(--spacing-7xs) !important; } .laptop\:padding-bottom-7xs { padding-bottom: calc(1em * 1 / 16) !important; padding-bottom: var(--spacing-7xs) !important; } .laptop\:padding-left-7xs { padding-left: calc(1em * 1 / 16) !important; padding-left: var(--spacing-7xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-horizontal-7xs { padding-right: calc(1em * 1 / 16) !important; padding-right: var(--spacing-7xs) !important; padding-left: calc(1em * 1 / 16) !important; padding-left: var(--spacing-7xs) !important; } .laptop\:padding-x-7xs { padding-right: calc(1em * 1 / 16) !important; padding-right: var(--spacing-7xs) !important; padding-left: calc(1em * 1 / 16) !important; padding-left: var(--spacing-7xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-vertical-7xs { padding-top: calc(1em * 1 / 16) !important; padding-top: var(--spacing-7xs) !important; padding-bottom: calc(1em * 1 / 16) !important; padding-bottom: var(--spacing-7xs) !important; } .laptop\:padding-y-7xs { padding-top: calc(1em * 1 / 16) !important; padding-top: var(--spacing-7xs) !important; padding-bottom: calc(1em * 1 / 16) !important; padding-bottom: var(--spacing-7xs) !important; } .laptop\:padding-6xs { padding: calc(1em * 2 / 16) !important; padding: var(--spacing-6xs) !important; } .laptop\:padding-top-6xs { padding-top: calc(1em * 2 / 16) !important; padding-top: var(--spacing-6xs) !important; } .laptop\:padding-right-6xs { padding-right: calc(1em * 2 / 16) !important; padding-right: var(--spacing-6xs) !important; } .laptop\:padding-bottom-6xs { padding-bottom: calc(1em * 2 / 16) !important; padding-bottom: var(--spacing-6xs) !important; } .laptop\:padding-left-6xs { padding-left: calc(1em * 2 / 16) !important; padding-left: var(--spacing-6xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-horizontal-6xs { padding-right: calc(1em * 2 / 16) !important; padding-right: var(--spacing-6xs) !important; padding-left: calc(1em * 2 / 16) !important; padding-left: var(--spacing-6xs) !important; } .laptop\:padding-x-6xs { padding-right: calc(1em * 2 / 16) !important; padding-right: var(--spacing-6xs) !important; padding-left: calc(1em * 2 / 16) !important; padding-left: var(--spacing-6xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-vertical-6xs { padding-top: calc(1em * 2 / 16) !important; padding-top: var(--spacing-6xs) !important; padding-bottom: calc(1em * 2 / 16) !important; padding-bottom: var(--spacing-6xs) !important; } .laptop\:padding-y-6xs { padding-top: calc(1em * 2 / 16) !important; padding-top: var(--spacing-6xs) !important; padding-bottom: calc(1em * 2 / 16) !important; padding-bottom: var(--spacing-6xs) !important; } .laptop\:padding-5xs { padding: calc(1em * 3 / 16) !important; padding: var(--spacing-5xs) !important; } .laptop\:padding-top-5xs { padding-top: calc(1em * 3 / 16) !important; padding-top: var(--spacing-5xs) !important; } .laptop\:padding-right-5xs { padding-right: calc(1em * 3 / 16) !important; padding-right: var(--spacing-5xs) !important; } .laptop\:padding-bottom-5xs { padding-bottom: calc(1em * 3 / 16) !important; padding-bottom: var(--spacing-5xs) !important; } .laptop\:padding-left-5xs { padding-left: calc(1em * 3 / 16) !important; padding-left: var(--spacing-5xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-horizontal-5xs { padding-right: calc(1em * 3 / 16) !important; padding-right: var(--spacing-5xs) !important; padding-left: calc(1em * 3 / 16) !important; padding-left: var(--spacing-5xs) !important; } .laptop\:padding-x-5xs { padding-right: calc(1em * 3 / 16) !important; padding-right: var(--spacing-5xs) !important; padding-left: calc(1em * 3 / 16) !important; padding-left: var(--spacing-5xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-vertical-5xs { padding-top: calc(1em * 3 / 16) !important; padding-top: var(--spacing-5xs) !important; padding-bottom: calc(1em * 3 / 16) !important; padding-bottom: var(--spacing-5xs) !important; } .laptop\:padding-y-5xs { padding-top: calc(1em * 3 / 16) !important; padding-top: var(--spacing-5xs) !important; padding-bottom: calc(1em * 3 / 16) !important; padding-bottom: var(--spacing-5xs) !important; } .laptop\:padding-4xs { padding: calc(1em * 4 / 16) !important; padding: var(--spacing-4xs) !important; } .laptop\:padding-top-4xs { padding-top: calc(1em * 4 / 16) !important; padding-top: var(--spacing-4xs) !important; } .laptop\:padding-right-4xs { padding-right: calc(1em * 4 / 16) !important; padding-right: var(--spacing-4xs) !important; } .laptop\:padding-bottom-4xs { padding-bottom: calc(1em * 4 / 16) !important; padding-bottom: var(--spacing-4xs) !important; } .laptop\:padding-left-4xs { padding-left: calc(1em * 4 / 16) !important; padding-left: var(--spacing-4xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-horizontal-4xs { padding-right: calc(1em * 4 / 16) !important; padding-right: var(--spacing-4xs) !important; padding-left: calc(1em * 4 / 16) !important; padding-left: var(--spacing-4xs) !important; } .laptop\:padding-x-4xs { padding-right: calc(1em * 4 / 16) !important; padding-right: var(--spacing-4xs) !important; padding-left: calc(1em * 4 / 16) !important; padding-left: var(--spacing-4xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-vertical-4xs { padding-top: calc(1em * 4 / 16) !important; padding-top: var(--spacing-4xs) !important; padding-bottom: calc(1em * 4 / 16) !important; padding-bottom: var(--spacing-4xs) !important; } .laptop\:padding-y-4xs { padding-top: calc(1em * 4 / 16) !important; padding-top: var(--spacing-4xs) !important; padding-bottom: calc(1em * 4 / 16) !important; padding-bottom: var(--spacing-4xs) !important; } .laptop\:padding-3xs { padding: calc(1em * 6 / 16) !important; padding: var(--spacing-3xs) !important; } .laptop\:padding-top-3xs { padding-top: calc(1em * 6 / 16) !important; padding-top: var(--spacing-3xs) !important; } .laptop\:padding-right-3xs { padding-right: calc(1em * 6 / 16) !important; padding-right: var(--spacing-3xs) !important; } .laptop\:padding-bottom-3xs { padding-bottom: calc(1em * 6 / 16) !important; padding-bottom: var(--spacing-3xs) !important; } .laptop\:padding-left-3xs { padding-left: calc(1em * 6 / 16) !important; padding-left: var(--spacing-3xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-horizontal-3xs { padding-right: calc(1em * 6 / 16) !important; padding-right: var(--spacing-3xs) !important; padding-left: calc(1em * 6 / 16) !important; padding-left: var(--spacing-3xs) !important; } .laptop\:padding-x-3xs { padding-right: calc(1em * 6 / 16) !important; padding-right: var(--spacing-3xs) !important; padding-left: calc(1em * 6 / 16) !important; padding-left: var(--spacing-3xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-vertical-3xs { padding-top: calc(1em * 6 / 16) !important; padding-top: var(--spacing-3xs) !important; padding-bottom: calc(1em * 6 / 16) !important; padding-bottom: var(--spacing-3xs) !important; } .laptop\:padding-y-3xs { padding-top: calc(1em * 6 / 16) !important; padding-top: var(--spacing-3xs) !important; padding-bottom: calc(1em * 6 / 16) !important; padding-bottom: var(--spacing-3xs) !important; } .laptop\:padding-2xs { padding: calc(1em * 8 / 16) !important; padding: var(--spacing-2xs) !important; } .laptop\:padding-top-2xs { padding-top: calc(1em * 8 / 16) !important; padding-top: var(--spacing-2xs) !important; } .laptop\:padding-right-2xs { padding-right: calc(1em * 8 / 16) !important; padding-right: var(--spacing-2xs) !important; } .laptop\:padding-bottom-2xs { padding-bottom: calc(1em * 8 / 16) !important; padding-bottom: var(--spacing-2xs) !important; } .laptop\:padding-left-2xs { padding-left: calc(1em * 8 / 16) !important; padding-left: var(--spacing-2xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-horizontal-2xs { padding-right: calc(1em * 8 / 16) !important; padding-right: var(--spacing-2xs) !important; padding-left: calc(1em * 8 / 16) !important; padding-left: var(--spacing-2xs) !important; } .laptop\:padding-x-2xs { padding-right: calc(1em * 8 / 16) !important; padding-right: var(--spacing-2xs) !important; padding-left: calc(1em * 8 / 16) !important; padding-left: var(--spacing-2xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-vertical-2xs { padding-top: calc(1em * 8 / 16) !important; padding-top: var(--spacing-2xs) !important; padding-bottom: calc(1em * 8 / 16) !important; padding-bottom: var(--spacing-2xs) !important; } .laptop\:padding-y-2xs { padding-top: calc(1em * 8 / 16) !important; padding-top: var(--spacing-2xs) !important; padding-bottom: calc(1em * 8 / 16) !important; padding-bottom: var(--spacing-2xs) !important; } .laptop\:padding-xs { padding: calc(1em * 10 / 16) !important; padding: var(--spacing-xs) !important; } .laptop\:padding-top-xs { padding-top: calc(1em * 10 / 16) !important; padding-top: var(--spacing-xs) !important; } .laptop\:padding-right-xs { padding-right: calc(1em * 10 / 16) !important; padding-right: var(--spacing-xs) !important; } .laptop\:padding-bottom-xs { padding-bottom: calc(1em * 10 / 16) !important; padding-bottom: var(--spacing-xs) !important; } .laptop\:padding-left-xs { padding-left: calc(1em * 10 / 16) !important; padding-left: var(--spacing-xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-horizontal-xs { padding-right: calc(1em * 10 / 16) !important; padding-right: var(--spacing-xs) !important; padding-left: calc(1em * 10 / 16) !important; padding-left: var(--spacing-xs) !important; } .laptop\:padding-x-xs { padding-right: calc(1em * 10 / 16) !important; padding-right: var(--spacing-xs) !important; padding-left: calc(1em * 10 / 16) !important; padding-left: var(--spacing-xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-vertical-xs { padding-top: calc(1em * 10 / 16) !important; padding-top: var(--spacing-xs) !important; padding-bottom: calc(1em * 10 / 16) !important; padding-bottom: var(--spacing-xs) !important; } .laptop\:padding-y-xs { padding-top: calc(1em * 10 / 16) !important; padding-top: var(--spacing-xs) !important; padding-bottom: calc(1em * 10 / 16) !important; padding-bottom: var(--spacing-xs) !important; } .laptop\:padding-sm { padding: calc(1em * 12 / 16) !important; padding: var(--spacing-sm) !important; } .laptop\:padding-top-sm { padding-top: calc(1em * 12 / 16) !important; padding-top: var(--spacing-sm) !important; } .laptop\:padding-right-sm { padding-right: calc(1em * 12 / 16) !important; padding-right: var(--spacing-sm) !important; } .laptop\:padding-bottom-sm { padding-bottom: calc(1em * 12 / 16) !important; padding-bottom: var(--spacing-sm) !important; } .laptop\:padding-left-sm { padding-left: calc(1em * 12 / 16) !important; padding-left: var(--spacing-sm) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-horizontal-sm { padding-right: calc(1em * 12 / 16) !important; padding-right: var(--spacing-sm) !important; padding-left: calc(1em * 12 / 16) !important; padding-left: var(--spacing-sm) !important; } .laptop\:padding-x-sm { padding-right: calc(1em * 12 / 16) !important; padding-right: var(--spacing-sm) !important; padding-left: calc(1em * 12 / 16) !important; padding-left: var(--spacing-sm) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-vertical-sm { padding-top: calc(1em * 12 / 16) !important; padding-top: var(--spacing-sm) !important; padding-bottom: calc(1em * 12 / 16) !important; padding-bottom: var(--spacing-sm) !important; } .laptop\:padding-y-sm { padding-top: calc(1em * 12 / 16) !important; padding-top: var(--spacing-sm) !important; padding-bottom: calc(1em * 12 / 16) !important; padding-bottom: var(--spacing-sm) !important; } .laptop\:padding-md { padding: calc(1em * 1) !important; padding: var(--spacing-md) !important; } .laptop\:padding-top-md { padding-top: calc(1em * 1) !important; padding-top: var(--spacing-md) !important; } .laptop\:padding-right-md { padding-right: calc(1em * 1) !important; padding-right: var(--spacing-md) !important; } .laptop\:padding-bottom-md { padding-bottom: calc(1em * 1) !important; padding-bottom: var(--spacing-md) !important; } .laptop\:padding-left-md { padding-left: calc(1em * 1) !important; padding-left: var(--spacing-md) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-horizontal-md { padding-right: calc(1em * 1) !important; padding-right: var(--spacing-md) !important; padding-left: calc(1em * 1) !important; padding-left: var(--spacing-md) !important; } .laptop\:padding-x-md { padding-right: calc(1em * 1) !important; padding-right: var(--spacing-md) !important; padding-left: calc(1em * 1) !important; padding-left: var(--spacing-md) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-vertical-md { padding-top: calc(1em * 1) !important; padding-top: var(--spacing-md) !important; padding-bottom: calc(1em * 1) !important; padding-bottom: var(--spacing-md) !important; } .laptop\:padding-y-md { padding-top: calc(1em * 1) !important; padding-top: var(--spacing-md) !important; padding-bottom: calc(1em * 1) !important; padding-bottom: var(--spacing-md) !important; } .laptop\:padding-lg { padding: calc(1em * 1.25) !important; padding: var(--spacing-lg) !important; } .laptop\:padding-top-lg { padding-top: calc(1em * 1.25) !important; padding-top: var(--spacing-lg) !important; } .laptop\:padding-right-lg { padding-right: calc(1em * 1.25) !important; padding-right: var(--spacing-lg) !important; } .laptop\:padding-bottom-lg { padding-bottom: calc(1em * 1.25) !important; padding-bottom: var(--spacing-lg) !important; } .laptop\:padding-left-lg { padding-left: calc(1em * 1.25) !important; padding-left: var(--spacing-lg) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-horizontal-lg { padding-right: calc(1em * 1.25) !important; padding-right: var(--spacing-lg) !important; padding-left: calc(1em * 1.25) !important; padding-left: var(--spacing-lg) !important; } .laptop\:padding-x-lg { padding-right: calc(1em * 1.25) !important; padding-right: var(--spacing-lg) !important; padding-left: calc(1em * 1.25) !important; padding-left: var(--spacing-lg) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-vertical-lg { padding-top: calc(1em * 1.25) !important; padding-top: var(--spacing-lg) !important; padding-bottom: calc(1em * 1.25) !important; padding-bottom: var(--spacing-lg) !important; } .laptop\:padding-y-lg { padding-top: calc(1em * 1.25) !important; padding-top: var(--spacing-lg) !important; padding-bottom: calc(1em * 1.25) !important; padding-bottom: var(--spacing-lg) !important; } .laptop\:padding-xl { padding: calc(1em * 1.5) !important; padding: var(--spacing-xl) !important; } .laptop\:padding-top-xl { padding-top: calc(1em * 1.5) !important; padding-top: var(--spacing-xl) !important; } .laptop\:padding-right-xl { padding-right: calc(1em * 1.5) !important; padding-right: var(--spacing-xl) !important; } .laptop\:padding-bottom-xl { padding-bottom: calc(1em * 1.5) !important; padding-bottom: var(--spacing-xl) !important; } .laptop\:padding-left-xl { padding-left: calc(1em * 1.5) !important; padding-left: var(--spacing-xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-horizontal-xl { padding-right: calc(1em * 1.5) !important; padding-right: var(--spacing-xl) !important; padding-left: calc(1em * 1.5) !important; padding-left: var(--spacing-xl) !important; } .laptop\:padding-x-xl { padding-right: calc(1em * 1.5) !important; padding-right: var(--spacing-xl) !important; padding-left: calc(1em * 1.5) !important; padding-left: var(--spacing-xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-vertical-xl { padding-top: calc(1em * 1.5) !important; padding-top: var(--spacing-xl) !important; padding-bottom: calc(1em * 1.5) !important; padding-bottom: var(--spacing-xl) !important; } .laptop\:padding-y-xl { padding-top: calc(1em * 1.5) !important; padding-top: var(--spacing-xl) !important; padding-bottom: calc(1em * 1.5) !important; padding-bottom: var(--spacing-xl) !important; } .laptop\:padding-2xl { padding: calc(1em * 2) !important; padding: var(--spacing-2xl) !important; } .laptop\:padding-top-2xl { padding-top: calc(1em * 2) !important; padding-top: var(--spacing-2xl) !important; } .laptop\:padding-right-2xl { padding-right: calc(1em * 2) !important; padding-right: var(--spacing-2xl) !important; } .laptop\:padding-bottom-2xl { padding-bottom: calc(1em * 2) !important; padding-bottom: var(--spacing-2xl) !important; } .laptop\:padding-left-2xl { padding-left: calc(1em * 2) !important; padding-left: var(--spacing-2xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-horizontal-2xl { padding-right: calc(1em * 2) !important; padding-right: var(--spacing-2xl) !important; padding-left: calc(1em * 2) !important; padding-left: var(--spacing-2xl) !important; } .laptop\:padding-x-2xl { padding-right: calc(1em * 2) !important; padding-right: var(--spacing-2xl) !important; padding-left: calc(1em * 2) !important; padding-left: var(--spacing-2xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-vertical-2xl { padding-top: calc(1em * 2) !important; padding-top: var(--spacing-2xl) !important; padding-bottom: calc(1em * 2) !important; padding-bottom: var(--spacing-2xl) !important; } .laptop\:padding-y-2xl { padding-top: calc(1em * 2) !important; padding-top: var(--spacing-2xl) !important; padding-bottom: calc(1em * 2) !important; padding-bottom: var(--spacing-2xl) !important; } .laptop\:padding-3xl { padding: calc(1em * 2.5) !important; padding: var(--spacing-3xl) !important; } .laptop\:padding-top-3xl { padding-top: calc(1em * 2.5) !important; padding-top: var(--spacing-3xl) !important; } .laptop\:padding-right-3xl { padding-right: calc(1em * 2.5) !important; padding-right: var(--spacing-3xl) !important; } .laptop\:padding-bottom-3xl { padding-bottom: calc(1em * 2.5) !important; padding-bottom: var(--spacing-3xl) !important; } .laptop\:padding-left-3xl { padding-left: calc(1em * 2.5) !important; padding-left: var(--spacing-3xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-horizontal-3xl { padding-right: calc(1em * 2.5) !important; padding-right: var(--spacing-3xl) !important; padding-left: calc(1em * 2.5) !important; padding-left: var(--spacing-3xl) !important; } .laptop\:padding-x-3xl { padding-right: calc(1em * 2.5) !important; padding-right: var(--spacing-3xl) !important; padding-left: calc(1em * 2.5) !important; padding-left: var(--spacing-3xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-vertical-3xl { padding-top: calc(1em * 2.5) !important; padding-top: var(--spacing-3xl) !important; padding-bottom: calc(1em * 2.5) !important; padding-bottom: var(--spacing-3xl) !important; } .laptop\:padding-y-3xl { padding-top: calc(1em * 2.5) !important; padding-top: var(--spacing-3xl) !important; padding-bottom: calc(1em * 2.5) !important; padding-bottom: var(--spacing-3xl) !important; } .laptop\:padding-4xl { padding: calc(1em * 3) !important; padding: var(--spacing-4xl) !important; } .laptop\:padding-top-4xl { padding-top: calc(1em * 3) !important; padding-top: var(--spacing-4xl) !important; } .laptop\:padding-right-4xl { padding-right: calc(1em * 3) !important; padding-right: var(--spacing-4xl) !important; } .laptop\:padding-bottom-4xl { padding-bottom: calc(1em * 3) !important; padding-bottom: var(--spacing-4xl) !important; } .laptop\:padding-left-4xl { padding-left: calc(1em * 3) !important; padding-left: var(--spacing-4xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-horizontal-4xl { padding-right: calc(1em * 3) !important; padding-right: var(--spacing-4xl) !important; padding-left: calc(1em * 3) !important; padding-left: var(--spacing-4xl) !important; } .laptop\:padding-x-4xl { padding-right: calc(1em * 3) !important; padding-right: var(--spacing-4xl) !important; padding-left: calc(1em * 3) !important; padding-left: var(--spacing-4xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-vertical-4xl { padding-top: calc(1em * 3) !important; padding-top: var(--spacing-4xl) !important; padding-bottom: calc(1em * 3) !important; padding-bottom: var(--spacing-4xl) !important; } .laptop\:padding-y-4xl { padding-top: calc(1em * 3) !important; padding-top: var(--spacing-4xl) !important; padding-bottom: calc(1em * 3) !important; padding-bottom: var(--spacing-4xl) !important; } .laptop\:padding-5xl { padding: calc(1em * 4) !important; padding: var(--spacing-5xl) !important; } .laptop\:padding-top-5xl { padding-top: calc(1em * 4) !important; padding-top: var(--spacing-5xl) !important; } .laptop\:padding-right-5xl { padding-right: calc(1em * 4) !important; padding-right: var(--spacing-5xl) !important; } .laptop\:padding-bottom-5xl { padding-bottom: calc(1em * 4) !important; padding-bottom: var(--spacing-5xl) !important; } .laptop\:padding-left-5xl { padding-left: calc(1em * 4) !important; padding-left: var(--spacing-5xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-horizontal-5xl { padding-right: calc(1em * 4) !important; padding-right: var(--spacing-5xl) !important; padding-left: calc(1em * 4) !important; padding-left: var(--spacing-5xl) !important; } .laptop\:padding-x-5xl { padding-right: calc(1em * 4) !important; padding-right: var(--spacing-5xl) !important; padding-left: calc(1em * 4) !important; padding-left: var(--spacing-5xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-vertical-5xl { padding-top: calc(1em * 4) !important; padding-top: var(--spacing-5xl) !important; padding-bottom: calc(1em * 4) !important; padding-bottom: var(--spacing-5xl) !important; } .laptop\:padding-y-5xl { padding-top: calc(1em * 4) !important; padding-top: var(--spacing-5xl) !important; padding-bottom: calc(1em * 4) !important; padding-bottom: var(--spacing-5xl) !important; } .laptop\:padding-6xl { padding: calc(1em * 5) !important; padding: var(--spacing-6xl) !important; } .laptop\:padding-top-6xl { padding-top: calc(1em * 5) !important; padding-top: var(--spacing-6xl) !important; } .laptop\:padding-right-6xl { padding-right: calc(1em * 5) !important; padding-right: var(--spacing-6xl) !important; } .laptop\:padding-bottom-6xl { padding-bottom: calc(1em * 5) !important; padding-bottom: var(--spacing-6xl) !important; } .laptop\:padding-left-6xl { padding-left: calc(1em * 5) !important; padding-left: var(--spacing-6xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-horizontal-6xl { padding-right: calc(1em * 5) !important; padding-right: var(--spacing-6xl) !important; padding-left: calc(1em * 5) !important; padding-left: var(--spacing-6xl) !important; } .laptop\:padding-x-6xl { padding-right: calc(1em * 5) !important; padding-right: var(--spacing-6xl) !important; padding-left: calc(1em * 5) !important; padding-left: var(--spacing-6xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-vertical-6xl { padding-top: calc(1em * 5) !important; padding-top: var(--spacing-6xl) !important; padding-bottom: calc(1em * 5) !important; padding-bottom: var(--spacing-6xl) !important; } .laptop\:padding-y-6xl { padding-top: calc(1em * 5) !important; padding-top: var(--spacing-6xl) !important; padding-bottom: calc(1em * 5) !important; padding-bottom: var(--spacing-6xl) !important; } .laptop\:padding-7xl { padding: calc(1em * 6) !important; padding: var(--spacing-7xl) !important; } .laptop\:padding-top-7xl { padding-top: calc(1em * 6) !important; padding-top: var(--spacing-7xl) !important; } .laptop\:padding-right-7xl { padding-right: calc(1em * 6) !important; padding-right: var(--spacing-7xl) !important; } .laptop\:padding-bottom-7xl { padding-bottom: calc(1em * 6) !important; padding-bottom: var(--spacing-7xl) !important; } .laptop\:padding-left-7xl { padding-left: calc(1em * 6) !important; padding-left: var(--spacing-7xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-horizontal-7xl { padding-right: calc(1em * 6) !important; padding-right: var(--spacing-7xl) !important; padding-left: calc(1em * 6) !important; padding-left: var(--spacing-7xl) !important; } .laptop\:padding-x-7xl { padding-right: calc(1em * 6) !important; padding-right: var(--spacing-7xl) !important; padding-left: calc(1em * 6) !important; padding-left: var(--spacing-7xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-vertical-7xl { padding-top: calc(1em * 6) !important; padding-top: var(--spacing-7xl) !important; padding-bottom: calc(1em * 6) !important; padding-bottom: var(--spacing-7xl) !important; } .laptop\:padding-y-7xl { padding-top: calc(1em * 6) !important; padding-top: var(--spacing-7xl) !important; padding-bottom: calc(1em * 6) !important; padding-bottom: var(--spacing-7xl) !important; } .laptop\:padding-8xl { padding: calc(1em * 8) !important; padding: var(--spacing-8xl) !important; } .laptop\:padding-top-8xl { padding-top: calc(1em * 8) !important; padding-top: var(--spacing-8xl) !important; } .laptop\:padding-right-8xl { padding-right: calc(1em * 8) !important; padding-right: var(--spacing-8xl) !important; } .laptop\:padding-bottom-8xl { padding-bottom: calc(1em * 8) !important; padding-bottom: var(--spacing-8xl) !important; } .laptop\:padding-left-8xl { padding-left: calc(1em * 8) !important; padding-left: var(--spacing-8xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-horizontal-8xl { padding-right: calc(1em * 8) !important; padding-right: var(--spacing-8xl) !important; padding-left: calc(1em * 8) !important; padding-left: var(--spacing-8xl) !important; } .laptop\:padding-x-8xl { padding-right: calc(1em * 8) !important; padding-right: var(--spacing-8xl) !important; padding-left: calc(1em * 8) !important; padding-left: var(--spacing-8xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-vertical-8xl { padding-top: calc(1em * 8) !important; padding-top: var(--spacing-8xl) !important; padding-bottom: calc(1em * 8) !important; padding-bottom: var(--spacing-8xl) !important; } .laptop\:padding-y-8xl { padding-top: calc(1em * 8) !important; padding-top: var(--spacing-8xl) !important; padding-bottom: calc(1em * 8) !important; padding-bottom: var(--spacing-8xl) !important; } .laptop\:padding-9xl { padding: calc(1em * 10) !important; padding: var(--spacing-9xl) !important; } .laptop\:padding-top-9xl { padding-top: calc(1em * 10) !important; padding-top: var(--spacing-9xl) !important; } .laptop\:padding-right-9xl { padding-right: calc(1em * 10) !important; padding-right: var(--spacing-9xl) !important; } .laptop\:padding-bottom-9xl { padding-bottom: calc(1em * 10) !important; padding-bottom: var(--spacing-9xl) !important; } .laptop\:padding-left-9xl { padding-left: calc(1em * 10) !important; padding-left: var(--spacing-9xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-horizontal-9xl { padding-right: calc(1em * 10) !important; padding-right: var(--spacing-9xl) !important; padding-left: calc(1em * 10) !important; padding-left: var(--spacing-9xl) !important; } .laptop\:padding-x-9xl { padding-right: calc(1em * 10) !important; padding-right: var(--spacing-9xl) !important; padding-left: calc(1em * 10) !important; padding-left: var(--spacing-9xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-vertical-9xl { padding-top: calc(1em * 10) !important; padding-top: var(--spacing-9xl) !important; padding-bottom: calc(1em * 10) !important; padding-bottom: var(--spacing-9xl) !important; } .laptop\:padding-y-9xl { padding-top: calc(1em * 10) !important; padding-top: var(--spacing-9xl) !important; padding-bottom: calc(1em * 10) !important; padding-bottom: var(--spacing-9xl) !important; } .laptop\:padding-10xl { padding: calc(1em * 12) !important; padding: var(--spacing-10xl) !important; } .laptop\:padding-top-10xl { padding-top: calc(1em * 12) !important; padding-top: var(--spacing-10xl) !important; } .laptop\:padding-right-10xl { padding-right: calc(1em * 12) !important; padding-right: var(--spacing-10xl) !important; } .laptop\:padding-bottom-10xl { padding-bottom: calc(1em * 12) !important; padding-bottom: var(--spacing-10xl) !important; } .laptop\:padding-left-10xl { padding-left: calc(1em * 12) !important; padding-left: var(--spacing-10xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-horizontal-10xl { padding-right: calc(1em * 12) !important; padding-right: var(--spacing-10xl) !important; padding-left: calc(1em * 12) !important; padding-left: var(--spacing-10xl) !important; } .laptop\:padding-x-10xl { padding-right: calc(1em * 12) !important; padding-right: var(--spacing-10xl) !important; padding-left: calc(1em * 12) !important; padding-left: var(--spacing-10xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-vertical-10xl { padding-top: calc(1em * 12) !important; padding-top: var(--spacing-10xl) !important; padding-bottom: calc(1em * 12) !important; padding-bottom: var(--spacing-10xl) !important; } .laptop\:padding-y-10xl { padding-top: calc(1em * 12) !important; padding-top: var(--spacing-10xl) !important; padding-bottom: calc(1em * 12) !important; padding-bottom: var(--spacing-10xl) !important; } .laptop\:padding-11xl { padding: calc(1em * 16) !important; padding: var(--spacing-11xl) !important; } .laptop\:padding-top-11xl { padding-top: calc(1em * 16) !important; padding-top: var(--spacing-11xl) !important; } .laptop\:padding-right-11xl { padding-right: calc(1em * 16) !important; padding-right: var(--spacing-11xl) !important; } .laptop\:padding-bottom-11xl { padding-bottom: calc(1em * 16) !important; padding-bottom: var(--spacing-11xl) !important; } .laptop\:padding-left-11xl { padding-left: calc(1em * 16) !important; padding-left: var(--spacing-11xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-horizontal-11xl { padding-right: calc(1em * 16) !important; padding-right: var(--spacing-11xl) !important; padding-left: calc(1em * 16) !important; padding-left: var(--spacing-11xl) !important; } .laptop\:padding-x-11xl { padding-right: calc(1em * 16) !important; padding-right: var(--spacing-11xl) !important; padding-left: calc(1em * 16) !important; padding-left: var(--spacing-11xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-vertical-11xl { padding-top: calc(1em * 16) !important; padding-top: var(--spacing-11xl) !important; padding-bottom: calc(1em * 16) !important; padding-bottom: var(--spacing-11xl) !important; } .laptop\:padding-y-11xl { padding-top: calc(1em * 16) !important; padding-top: var(--spacing-11xl) !important; padding-bottom: calc(1em * 16) !important; padding-bottom: var(--spacing-11xl) !important; } .laptop\:padding-12xl { padding: calc(1em * 20) !important; padding: var(--spacing-12xl) !important; } .laptop\:padding-top-12xl { padding-top: calc(1em * 20) !important; padding-top: var(--spacing-12xl) !important; } .laptop\:padding-right-12xl { padding-right: calc(1em * 20) !important; padding-right: var(--spacing-12xl) !important; } .laptop\:padding-bottom-12xl { padding-bottom: calc(1em * 20) !important; padding-bottom: var(--spacing-12xl) !important; } .laptop\:padding-left-12xl { padding-left: calc(1em * 20) !important; padding-left: var(--spacing-12xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-horizontal-12xl { padding-right: calc(1em * 20) !important; padding-right: var(--spacing-12xl) !important; padding-left: calc(1em * 20) !important; padding-left: var(--spacing-12xl) !important; } .laptop\:padding-x-12xl { padding-right: calc(1em * 20) !important; padding-right: var(--spacing-12xl) !important; padding-left: calc(1em * 20) !important; padding-left: var(--spacing-12xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-vertical-12xl { padding-top: calc(1em * 20) !important; padding-top: var(--spacing-12xl) !important; padding-bottom: calc(1em * 20) !important; padding-bottom: var(--spacing-12xl) !important; } .laptop\:padding-y-12xl { padding-top: calc(1em * 20) !important; padding-top: var(--spacing-12xl) !important; padding-bottom: calc(1em * 20) !important; padding-bottom: var(--spacing-12xl) !important; } .laptop\:padding-0 { padding: 0 !important; padding: var(--spacing-0) !important; } .laptop\:padding-top-0 { padding-top: 0 !important; padding-top: var(--spacing-0) !important; } .laptop\:padding-right-0 { padding-right: 0 !important; padding-right: var(--spacing-0) !important; } .laptop\:padding-bottom-0 { padding-bottom: 0 !important; padding-bottom: var(--spacing-0) !important; } .laptop\:padding-left-0 { padding-left: 0 !important; padding-left: var(--spacing-0) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-horizontal-0 { padding-right: 0 !important; padding-right: var(--spacing-0) !important; padding-left: 0 !important; padding-left: var(--spacing-0) !important; } .laptop\:padding-x-0 { padding-right: 0 !important; padding-right: var(--spacing-0) !important; padding-left: 0 !important; padding-left: var(--spacing-0) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-vertical-0 { padding-top: 0 !important; padding-top: var(--spacing-0) !important; padding-bottom: 0 !important; padding-bottom: var(--spacing-0) !important; } .laptop\:padding-y-0 { padding-top: 0 !important; padding-top: var(--spacing-0) !important; padding-bottom: 0 !important; padding-bottom: var(--spacing-0) !important; } .laptop\:padding-1 { padding: calc(1em * 1 / 16) !important; padding: var(--spacing-1) !important; } .laptop\:padding-top-1 { padding-top: calc(1em * 1 / 16) !important; padding-top: var(--spacing-1) !important; } .laptop\:padding-right-1 { padding-right: calc(1em * 1 / 16) !important; padding-right: var(--spacing-1) !important; } .laptop\:padding-bottom-1 { padding-bottom: calc(1em * 1 / 16) !important; padding-bottom: var(--spacing-1) !important; } .laptop\:padding-left-1 { padding-left: calc(1em * 1 / 16) !important; padding-left: var(--spacing-1) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-horizontal-1 { padding-right: calc(1em * 1 / 16) !important; padding-right: var(--spacing-1) !important; padding-left: calc(1em * 1 / 16) !important; padding-left: var(--spacing-1) !important; } .laptop\:padding-x-1 { padding-right: calc(1em * 1 / 16) !important; padding-right: var(--spacing-1) !important; padding-left: calc(1em * 1 / 16) !important; padding-left: var(--spacing-1) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-vertical-1 { padding-top: calc(1em * 1 / 16) !important; padding-top: var(--spacing-1) !important; padding-bottom: calc(1em * 1 / 16) !important; padding-bottom: var(--spacing-1) !important; } .laptop\:padding-y-1 { padding-top: calc(1em * 1 / 16) !important; padding-top: var(--spacing-1) !important; padding-bottom: calc(1em * 1 / 16) !important; padding-bottom: var(--spacing-1) !important; } .laptop\:padding-1px { padding: 1px !important; padding: var(--spacing-1px) !important; } .laptop\:padding-top-1px { padding-top: 1px !important; padding-top: var(--spacing-1px) !important; } .laptop\:padding-right-1px { padding-right: 1px !important; padding-right: var(--spacing-1px) !important; } .laptop\:padding-bottom-1px { padding-bottom: 1px !important; padding-bottom: var(--spacing-1px) !important; } .laptop\:padding-left-1px { padding-left: 1px !important; padding-left: var(--spacing-1px) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-horizontal-1px { padding-right: 1px !important; padding-right: var(--spacing-1px) !important; padding-left: 1px !important; padding-left: var(--spacing-1px) !important; } .laptop\:padding-x-1px { padding-right: 1px !important; padding-right: var(--spacing-1px) !important; padding-left: 1px !important; padding-left: var(--spacing-1px) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .laptop\:padding-vertical-1px { padding-top: 1px !important; padding-top: var(--spacing-1px) !important; padding-bottom: 1px !important; padding-bottom: var(--spacing-1px) !important; } .laptop\:padding-y-1px { padding-top: 1px !important; padding-top: var(--spacing-1px) !important; padding-bottom: 1px !important; padding-bottom: var(--spacing-1px) !important; } } @media (min-width: 1536px) { .desktop\:padding-7xs { padding: calc(1em * 1 / 16) !important; padding: var(--spacing-7xs) !important; } .desktop\:padding-top-7xs { padding-top: calc(1em * 1 / 16) !important; padding-top: var(--spacing-7xs) !important; } .desktop\:padding-right-7xs { padding-right: calc(1em * 1 / 16) !important; padding-right: var(--spacing-7xs) !important; } .desktop\:padding-bottom-7xs { padding-bottom: calc(1em * 1 / 16) !important; padding-bottom: var(--spacing-7xs) !important; } .desktop\:padding-left-7xs { padding-left: calc(1em * 1 / 16) !important; padding-left: var(--spacing-7xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-horizontal-7xs { padding-right: calc(1em * 1 / 16) !important; padding-right: var(--spacing-7xs) !important; padding-left: calc(1em * 1 / 16) !important; padding-left: var(--spacing-7xs) !important; } .desktop\:padding-x-7xs { padding-right: calc(1em * 1 / 16) !important; padding-right: var(--spacing-7xs) !important; padding-left: calc(1em * 1 / 16) !important; padding-left: var(--spacing-7xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-vertical-7xs { padding-top: calc(1em * 1 / 16) !important; padding-top: var(--spacing-7xs) !important; padding-bottom: calc(1em * 1 / 16) !important; padding-bottom: var(--spacing-7xs) !important; } .desktop\:padding-y-7xs { padding-top: calc(1em * 1 / 16) !important; padding-top: var(--spacing-7xs) !important; padding-bottom: calc(1em * 1 / 16) !important; padding-bottom: var(--spacing-7xs) !important; } .desktop\:padding-6xs { padding: calc(1em * 2 / 16) !important; padding: var(--spacing-6xs) !important; } .desktop\:padding-top-6xs { padding-top: calc(1em * 2 / 16) !important; padding-top: var(--spacing-6xs) !important; } .desktop\:padding-right-6xs { padding-right: calc(1em * 2 / 16) !important; padding-right: var(--spacing-6xs) !important; } .desktop\:padding-bottom-6xs { padding-bottom: calc(1em * 2 / 16) !important; padding-bottom: var(--spacing-6xs) !important; } .desktop\:padding-left-6xs { padding-left: calc(1em * 2 / 16) !important; padding-left: var(--spacing-6xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-horizontal-6xs { padding-right: calc(1em * 2 / 16) !important; padding-right: var(--spacing-6xs) !important; padding-left: calc(1em * 2 / 16) !important; padding-left: var(--spacing-6xs) !important; } .desktop\:padding-x-6xs { padding-right: calc(1em * 2 / 16) !important; padding-right: var(--spacing-6xs) !important; padding-left: calc(1em * 2 / 16) !important; padding-left: var(--spacing-6xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-vertical-6xs { padding-top: calc(1em * 2 / 16) !important; padding-top: var(--spacing-6xs) !important; padding-bottom: calc(1em * 2 / 16) !important; padding-bottom: var(--spacing-6xs) !important; } .desktop\:padding-y-6xs { padding-top: calc(1em * 2 / 16) !important; padding-top: var(--spacing-6xs) !important; padding-bottom: calc(1em * 2 / 16) !important; padding-bottom: var(--spacing-6xs) !important; } .desktop\:padding-5xs { padding: calc(1em * 3 / 16) !important; padding: var(--spacing-5xs) !important; } .desktop\:padding-top-5xs { padding-top: calc(1em * 3 / 16) !important; padding-top: var(--spacing-5xs) !important; } .desktop\:padding-right-5xs { padding-right: calc(1em * 3 / 16) !important; padding-right: var(--spacing-5xs) !important; } .desktop\:padding-bottom-5xs { padding-bottom: calc(1em * 3 / 16) !important; padding-bottom: var(--spacing-5xs) !important; } .desktop\:padding-left-5xs { padding-left: calc(1em * 3 / 16) !important; padding-left: var(--spacing-5xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-horizontal-5xs { padding-right: calc(1em * 3 / 16) !important; padding-right: var(--spacing-5xs) !important; padding-left: calc(1em * 3 / 16) !important; padding-left: var(--spacing-5xs) !important; } .desktop\:padding-x-5xs { padding-right: calc(1em * 3 / 16) !important; padding-right: var(--spacing-5xs) !important; padding-left: calc(1em * 3 / 16) !important; padding-left: var(--spacing-5xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-vertical-5xs { padding-top: calc(1em * 3 / 16) !important; padding-top: var(--spacing-5xs) !important; padding-bottom: calc(1em * 3 / 16) !important; padding-bottom: var(--spacing-5xs) !important; } .desktop\:padding-y-5xs { padding-top: calc(1em * 3 / 16) !important; padding-top: var(--spacing-5xs) !important; padding-bottom: calc(1em * 3 / 16) !important; padding-bottom: var(--spacing-5xs) !important; } .desktop\:padding-4xs { padding: calc(1em * 4 / 16) !important; padding: var(--spacing-4xs) !important; } .desktop\:padding-top-4xs { padding-top: calc(1em * 4 / 16) !important; padding-top: var(--spacing-4xs) !important; } .desktop\:padding-right-4xs { padding-right: calc(1em * 4 / 16) !important; padding-right: var(--spacing-4xs) !important; } .desktop\:padding-bottom-4xs { padding-bottom: calc(1em * 4 / 16) !important; padding-bottom: var(--spacing-4xs) !important; } .desktop\:padding-left-4xs { padding-left: calc(1em * 4 / 16) !important; padding-left: var(--spacing-4xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-horizontal-4xs { padding-right: calc(1em * 4 / 16) !important; padding-right: var(--spacing-4xs) !important; padding-left: calc(1em * 4 / 16) !important; padding-left: var(--spacing-4xs) !important; } .desktop\:padding-x-4xs { padding-right: calc(1em * 4 / 16) !important; padding-right: var(--spacing-4xs) !important; padding-left: calc(1em * 4 / 16) !important; padding-left: var(--spacing-4xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-vertical-4xs { padding-top: calc(1em * 4 / 16) !important; padding-top: var(--spacing-4xs) !important; padding-bottom: calc(1em * 4 / 16) !important; padding-bottom: var(--spacing-4xs) !important; } .desktop\:padding-y-4xs { padding-top: calc(1em * 4 / 16) !important; padding-top: var(--spacing-4xs) !important; padding-bottom: calc(1em * 4 / 16) !important; padding-bottom: var(--spacing-4xs) !important; } .desktop\:padding-3xs { padding: calc(1em * 6 / 16) !important; padding: var(--spacing-3xs) !important; } .desktop\:padding-top-3xs { padding-top: calc(1em * 6 / 16) !important; padding-top: var(--spacing-3xs) !important; } .desktop\:padding-right-3xs { padding-right: calc(1em * 6 / 16) !important; padding-right: var(--spacing-3xs) !important; } .desktop\:padding-bottom-3xs { padding-bottom: calc(1em * 6 / 16) !important; padding-bottom: var(--spacing-3xs) !important; } .desktop\:padding-left-3xs { padding-left: calc(1em * 6 / 16) !important; padding-left: var(--spacing-3xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-horizontal-3xs { padding-right: calc(1em * 6 / 16) !important; padding-right: var(--spacing-3xs) !important; padding-left: calc(1em * 6 / 16) !important; padding-left: var(--spacing-3xs) !important; } .desktop\:padding-x-3xs { padding-right: calc(1em * 6 / 16) !important; padding-right: var(--spacing-3xs) !important; padding-left: calc(1em * 6 / 16) !important; padding-left: var(--spacing-3xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-vertical-3xs { padding-top: calc(1em * 6 / 16) !important; padding-top: var(--spacing-3xs) !important; padding-bottom: calc(1em * 6 / 16) !important; padding-bottom: var(--spacing-3xs) !important; } .desktop\:padding-y-3xs { padding-top: calc(1em * 6 / 16) !important; padding-top: var(--spacing-3xs) !important; padding-bottom: calc(1em * 6 / 16) !important; padding-bottom: var(--spacing-3xs) !important; } .desktop\:padding-2xs { padding: calc(1em * 8 / 16) !important; padding: var(--spacing-2xs) !important; } .desktop\:padding-top-2xs { padding-top: calc(1em * 8 / 16) !important; padding-top: var(--spacing-2xs) !important; } .desktop\:padding-right-2xs { padding-right: calc(1em * 8 / 16) !important; padding-right: var(--spacing-2xs) !important; } .desktop\:padding-bottom-2xs { padding-bottom: calc(1em * 8 / 16) !important; padding-bottom: var(--spacing-2xs) !important; } .desktop\:padding-left-2xs { padding-left: calc(1em * 8 / 16) !important; padding-left: var(--spacing-2xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-horizontal-2xs { padding-right: calc(1em * 8 / 16) !important; padding-right: var(--spacing-2xs) !important; padding-left: calc(1em * 8 / 16) !important; padding-left: var(--spacing-2xs) !important; } .desktop\:padding-x-2xs { padding-right: calc(1em * 8 / 16) !important; padding-right: var(--spacing-2xs) !important; padding-left: calc(1em * 8 / 16) !important; padding-left: var(--spacing-2xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-vertical-2xs { padding-top: calc(1em * 8 / 16) !important; padding-top: var(--spacing-2xs) !important; padding-bottom: calc(1em * 8 / 16) !important; padding-bottom: var(--spacing-2xs) !important; } .desktop\:padding-y-2xs { padding-top: calc(1em * 8 / 16) !important; padding-top: var(--spacing-2xs) !important; padding-bottom: calc(1em * 8 / 16) !important; padding-bottom: var(--spacing-2xs) !important; } .desktop\:padding-xs { padding: calc(1em * 10 / 16) !important; padding: var(--spacing-xs) !important; } .desktop\:padding-top-xs { padding-top: calc(1em * 10 / 16) !important; padding-top: var(--spacing-xs) !important; } .desktop\:padding-right-xs { padding-right: calc(1em * 10 / 16) !important; padding-right: var(--spacing-xs) !important; } .desktop\:padding-bottom-xs { padding-bottom: calc(1em * 10 / 16) !important; padding-bottom: var(--spacing-xs) !important; } .desktop\:padding-left-xs { padding-left: calc(1em * 10 / 16) !important; padding-left: var(--spacing-xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-horizontal-xs { padding-right: calc(1em * 10 / 16) !important; padding-right: var(--spacing-xs) !important; padding-left: calc(1em * 10 / 16) !important; padding-left: var(--spacing-xs) !important; } .desktop\:padding-x-xs { padding-right: calc(1em * 10 / 16) !important; padding-right: var(--spacing-xs) !important; padding-left: calc(1em * 10 / 16) !important; padding-left: var(--spacing-xs) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-vertical-xs { padding-top: calc(1em * 10 / 16) !important; padding-top: var(--spacing-xs) !important; padding-bottom: calc(1em * 10 / 16) !important; padding-bottom: var(--spacing-xs) !important; } .desktop\:padding-y-xs { padding-top: calc(1em * 10 / 16) !important; padding-top: var(--spacing-xs) !important; padding-bottom: calc(1em * 10 / 16) !important; padding-bottom: var(--spacing-xs) !important; } .desktop\:padding-sm { padding: calc(1em * 12 / 16) !important; padding: var(--spacing-sm) !important; } .desktop\:padding-top-sm { padding-top: calc(1em * 12 / 16) !important; padding-top: var(--spacing-sm) !important; } .desktop\:padding-right-sm { padding-right: calc(1em * 12 / 16) !important; padding-right: var(--spacing-sm) !important; } .desktop\:padding-bottom-sm { padding-bottom: calc(1em * 12 / 16) !important; padding-bottom: var(--spacing-sm) !important; } .desktop\:padding-left-sm { padding-left: calc(1em * 12 / 16) !important; padding-left: var(--spacing-sm) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-horizontal-sm { padding-right: calc(1em * 12 / 16) !important; padding-right: var(--spacing-sm) !important; padding-left: calc(1em * 12 / 16) !important; padding-left: var(--spacing-sm) !important; } .desktop\:padding-x-sm { padding-right: calc(1em * 12 / 16) !important; padding-right: var(--spacing-sm) !important; padding-left: calc(1em * 12 / 16) !important; padding-left: var(--spacing-sm) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-vertical-sm { padding-top: calc(1em * 12 / 16) !important; padding-top: var(--spacing-sm) !important; padding-bottom: calc(1em * 12 / 16) !important; padding-bottom: var(--spacing-sm) !important; } .desktop\:padding-y-sm { padding-top: calc(1em * 12 / 16) !important; padding-top: var(--spacing-sm) !important; padding-bottom: calc(1em * 12 / 16) !important; padding-bottom: var(--spacing-sm) !important; } .desktop\:padding-md { padding: calc(1em * 1) !important; padding: var(--spacing-md) !important; } .desktop\:padding-top-md { padding-top: calc(1em * 1) !important; padding-top: var(--spacing-md) !important; } .desktop\:padding-right-md { padding-right: calc(1em * 1) !important; padding-right: var(--spacing-md) !important; } .desktop\:padding-bottom-md { padding-bottom: calc(1em * 1) !important; padding-bottom: var(--spacing-md) !important; } .desktop\:padding-left-md { padding-left: calc(1em * 1) !important; padding-left: var(--spacing-md) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-horizontal-md { padding-right: calc(1em * 1) !important; padding-right: var(--spacing-md) !important; padding-left: calc(1em * 1) !important; padding-left: var(--spacing-md) !important; } .desktop\:padding-x-md { padding-right: calc(1em * 1) !important; padding-right: var(--spacing-md) !important; padding-left: calc(1em * 1) !important; padding-left: var(--spacing-md) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-vertical-md { padding-top: calc(1em * 1) !important; padding-top: var(--spacing-md) !important; padding-bottom: calc(1em * 1) !important; padding-bottom: var(--spacing-md) !important; } .desktop\:padding-y-md { padding-top: calc(1em * 1) !important; padding-top: var(--spacing-md) !important; padding-bottom: calc(1em * 1) !important; padding-bottom: var(--spacing-md) !important; } .desktop\:padding-lg { padding: calc(1em * 1.25) !important; padding: var(--spacing-lg) !important; } .desktop\:padding-top-lg { padding-top: calc(1em * 1.25) !important; padding-top: var(--spacing-lg) !important; } .desktop\:padding-right-lg { padding-right: calc(1em * 1.25) !important; padding-right: var(--spacing-lg) !important; } .desktop\:padding-bottom-lg { padding-bottom: calc(1em * 1.25) !important; padding-bottom: var(--spacing-lg) !important; } .desktop\:padding-left-lg { padding-left: calc(1em * 1.25) !important; padding-left: var(--spacing-lg) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-horizontal-lg { padding-right: calc(1em * 1.25) !important; padding-right: var(--spacing-lg) !important; padding-left: calc(1em * 1.25) !important; padding-left: var(--spacing-lg) !important; } .desktop\:padding-x-lg { padding-right: calc(1em * 1.25) !important; padding-right: var(--spacing-lg) !important; padding-left: calc(1em * 1.25) !important; padding-left: var(--spacing-lg) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-vertical-lg { padding-top: calc(1em * 1.25) !important; padding-top: var(--spacing-lg) !important; padding-bottom: calc(1em * 1.25) !important; padding-bottom: var(--spacing-lg) !important; } .desktop\:padding-y-lg { padding-top: calc(1em * 1.25) !important; padding-top: var(--spacing-lg) !important; padding-bottom: calc(1em * 1.25) !important; padding-bottom: var(--spacing-lg) !important; } .desktop\:padding-xl { padding: calc(1em * 1.5) !important; padding: var(--spacing-xl) !important; } .desktop\:padding-top-xl { padding-top: calc(1em * 1.5) !important; padding-top: var(--spacing-xl) !important; } .desktop\:padding-right-xl { padding-right: calc(1em * 1.5) !important; padding-right: var(--spacing-xl) !important; } .desktop\:padding-bottom-xl { padding-bottom: calc(1em * 1.5) !important; padding-bottom: var(--spacing-xl) !important; } .desktop\:padding-left-xl { padding-left: calc(1em * 1.5) !important; padding-left: var(--spacing-xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-horizontal-xl { padding-right: calc(1em * 1.5) !important; padding-right: var(--spacing-xl) !important; padding-left: calc(1em * 1.5) !important; padding-left: var(--spacing-xl) !important; } .desktop\:padding-x-xl { padding-right: calc(1em * 1.5) !important; padding-right: var(--spacing-xl) !important; padding-left: calc(1em * 1.5) !important; padding-left: var(--spacing-xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-vertical-xl { padding-top: calc(1em * 1.5) !important; padding-top: var(--spacing-xl) !important; padding-bottom: calc(1em * 1.5) !important; padding-bottom: var(--spacing-xl) !important; } .desktop\:padding-y-xl { padding-top: calc(1em * 1.5) !important; padding-top: var(--spacing-xl) !important; padding-bottom: calc(1em * 1.5) !important; padding-bottom: var(--spacing-xl) !important; } .desktop\:padding-2xl { padding: calc(1em * 2) !important; padding: var(--spacing-2xl) !important; } .desktop\:padding-top-2xl { padding-top: calc(1em * 2) !important; padding-top: var(--spacing-2xl) !important; } .desktop\:padding-right-2xl { padding-right: calc(1em * 2) !important; padding-right: var(--spacing-2xl) !important; } .desktop\:padding-bottom-2xl { padding-bottom: calc(1em * 2) !important; padding-bottom: var(--spacing-2xl) !important; } .desktop\:padding-left-2xl { padding-left: calc(1em * 2) !important; padding-left: var(--spacing-2xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-horizontal-2xl { padding-right: calc(1em * 2) !important; padding-right: var(--spacing-2xl) !important; padding-left: calc(1em * 2) !important; padding-left: var(--spacing-2xl) !important; } .desktop\:padding-x-2xl { padding-right: calc(1em * 2) !important; padding-right: var(--spacing-2xl) !important; padding-left: calc(1em * 2) !important; padding-left: var(--spacing-2xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-vertical-2xl { padding-top: calc(1em * 2) !important; padding-top: var(--spacing-2xl) !important; padding-bottom: calc(1em * 2) !important; padding-bottom: var(--spacing-2xl) !important; } .desktop\:padding-y-2xl { padding-top: calc(1em * 2) !important; padding-top: var(--spacing-2xl) !important; padding-bottom: calc(1em * 2) !important; padding-bottom: var(--spacing-2xl) !important; } .desktop\:padding-3xl { padding: calc(1em * 2.5) !important; padding: var(--spacing-3xl) !important; } .desktop\:padding-top-3xl { padding-top: calc(1em * 2.5) !important; padding-top: var(--spacing-3xl) !important; } .desktop\:padding-right-3xl { padding-right: calc(1em * 2.5) !important; padding-right: var(--spacing-3xl) !important; } .desktop\:padding-bottom-3xl { padding-bottom: calc(1em * 2.5) !important; padding-bottom: var(--spacing-3xl) !important; } .desktop\:padding-left-3xl { padding-left: calc(1em * 2.5) !important; padding-left: var(--spacing-3xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-horizontal-3xl { padding-right: calc(1em * 2.5) !important; padding-right: var(--spacing-3xl) !important; padding-left: calc(1em * 2.5) !important; padding-left: var(--spacing-3xl) !important; } .desktop\:padding-x-3xl { padding-right: calc(1em * 2.5) !important; padding-right: var(--spacing-3xl) !important; padding-left: calc(1em * 2.5) !important; padding-left: var(--spacing-3xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-vertical-3xl { padding-top: calc(1em * 2.5) !important; padding-top: var(--spacing-3xl) !important; padding-bottom: calc(1em * 2.5) !important; padding-bottom: var(--spacing-3xl) !important; } .desktop\:padding-y-3xl { padding-top: calc(1em * 2.5) !important; padding-top: var(--spacing-3xl) !important; padding-bottom: calc(1em * 2.5) !important; padding-bottom: var(--spacing-3xl) !important; } .desktop\:padding-4xl { padding: calc(1em * 3) !important; padding: var(--spacing-4xl) !important; } .desktop\:padding-top-4xl { padding-top: calc(1em * 3) !important; padding-top: var(--spacing-4xl) !important; } .desktop\:padding-right-4xl { padding-right: calc(1em * 3) !important; padding-right: var(--spacing-4xl) !important; } .desktop\:padding-bottom-4xl { padding-bottom: calc(1em * 3) !important; padding-bottom: var(--spacing-4xl) !important; } .desktop\:padding-left-4xl { padding-left: calc(1em * 3) !important; padding-left: var(--spacing-4xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-horizontal-4xl { padding-right: calc(1em * 3) !important; padding-right: var(--spacing-4xl) !important; padding-left: calc(1em * 3) !important; padding-left: var(--spacing-4xl) !important; } .desktop\:padding-x-4xl { padding-right: calc(1em * 3) !important; padding-right: var(--spacing-4xl) !important; padding-left: calc(1em * 3) !important; padding-left: var(--spacing-4xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-vertical-4xl { padding-top: calc(1em * 3) !important; padding-top: var(--spacing-4xl) !important; padding-bottom: calc(1em * 3) !important; padding-bottom: var(--spacing-4xl) !important; } .desktop\:padding-y-4xl { padding-top: calc(1em * 3) !important; padding-top: var(--spacing-4xl) !important; padding-bottom: calc(1em * 3) !important; padding-bottom: var(--spacing-4xl) !important; } .desktop\:padding-5xl { padding: calc(1em * 4) !important; padding: var(--spacing-5xl) !important; } .desktop\:padding-top-5xl { padding-top: calc(1em * 4) !important; padding-top: var(--spacing-5xl) !important; } .desktop\:padding-right-5xl { padding-right: calc(1em * 4) !important; padding-right: var(--spacing-5xl) !important; } .desktop\:padding-bottom-5xl { padding-bottom: calc(1em * 4) !important; padding-bottom: var(--spacing-5xl) !important; } .desktop\:padding-left-5xl { padding-left: calc(1em * 4) !important; padding-left: var(--spacing-5xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-horizontal-5xl { padding-right: calc(1em * 4) !important; padding-right: var(--spacing-5xl) !important; padding-left: calc(1em * 4) !important; padding-left: var(--spacing-5xl) !important; } .desktop\:padding-x-5xl { padding-right: calc(1em * 4) !important; padding-right: var(--spacing-5xl) !important; padding-left: calc(1em * 4) !important; padding-left: var(--spacing-5xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-vertical-5xl { padding-top: calc(1em * 4) !important; padding-top: var(--spacing-5xl) !important; padding-bottom: calc(1em * 4) !important; padding-bottom: var(--spacing-5xl) !important; } .desktop\:padding-y-5xl { padding-top: calc(1em * 4) !important; padding-top: var(--spacing-5xl) !important; padding-bottom: calc(1em * 4) !important; padding-bottom: var(--spacing-5xl) !important; } .desktop\:padding-6xl { padding: calc(1em * 5) !important; padding: var(--spacing-6xl) !important; } .desktop\:padding-top-6xl { padding-top: calc(1em * 5) !important; padding-top: var(--spacing-6xl) !important; } .desktop\:padding-right-6xl { padding-right: calc(1em * 5) !important; padding-right: var(--spacing-6xl) !important; } .desktop\:padding-bottom-6xl { padding-bottom: calc(1em * 5) !important; padding-bottom: var(--spacing-6xl) !important; } .desktop\:padding-left-6xl { padding-left: calc(1em * 5) !important; padding-left: var(--spacing-6xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-horizontal-6xl { padding-right: calc(1em * 5) !important; padding-right: var(--spacing-6xl) !important; padding-left: calc(1em * 5) !important; padding-left: var(--spacing-6xl) !important; } .desktop\:padding-x-6xl { padding-right: calc(1em * 5) !important; padding-right: var(--spacing-6xl) !important; padding-left: calc(1em * 5) !important; padding-left: var(--spacing-6xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-vertical-6xl { padding-top: calc(1em * 5) !important; padding-top: var(--spacing-6xl) !important; padding-bottom: calc(1em * 5) !important; padding-bottom: var(--spacing-6xl) !important; } .desktop\:padding-y-6xl { padding-top: calc(1em * 5) !important; padding-top: var(--spacing-6xl) !important; padding-bottom: calc(1em * 5) !important; padding-bottom: var(--spacing-6xl) !important; } .desktop\:padding-7xl { padding: calc(1em * 6) !important; padding: var(--spacing-7xl) !important; } .desktop\:padding-top-7xl { padding-top: calc(1em * 6) !important; padding-top: var(--spacing-7xl) !important; } .desktop\:padding-right-7xl { padding-right: calc(1em * 6) !important; padding-right: var(--spacing-7xl) !important; } .desktop\:padding-bottom-7xl { padding-bottom: calc(1em * 6) !important; padding-bottom: var(--spacing-7xl) !important; } .desktop\:padding-left-7xl { padding-left: calc(1em * 6) !important; padding-left: var(--spacing-7xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-horizontal-7xl { padding-right: calc(1em * 6) !important; padding-right: var(--spacing-7xl) !important; padding-left: calc(1em * 6) !important; padding-left: var(--spacing-7xl) !important; } .desktop\:padding-x-7xl { padding-right: calc(1em * 6) !important; padding-right: var(--spacing-7xl) !important; padding-left: calc(1em * 6) !important; padding-left: var(--spacing-7xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-vertical-7xl { padding-top: calc(1em * 6) !important; padding-top: var(--spacing-7xl) !important; padding-bottom: calc(1em * 6) !important; padding-bottom: var(--spacing-7xl) !important; } .desktop\:padding-y-7xl { padding-top: calc(1em * 6) !important; padding-top: var(--spacing-7xl) !important; padding-bottom: calc(1em * 6) !important; padding-bottom: var(--spacing-7xl) !important; } .desktop\:padding-8xl { padding: calc(1em * 8) !important; padding: var(--spacing-8xl) !important; } .desktop\:padding-top-8xl { padding-top: calc(1em * 8) !important; padding-top: var(--spacing-8xl) !important; } .desktop\:padding-right-8xl { padding-right: calc(1em * 8) !important; padding-right: var(--spacing-8xl) !important; } .desktop\:padding-bottom-8xl { padding-bottom: calc(1em * 8) !important; padding-bottom: var(--spacing-8xl) !important; } .desktop\:padding-left-8xl { padding-left: calc(1em * 8) !important; padding-left: var(--spacing-8xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-horizontal-8xl { padding-right: calc(1em * 8) !important; padding-right: var(--spacing-8xl) !important; padding-left: calc(1em * 8) !important; padding-left: var(--spacing-8xl) !important; } .desktop\:padding-x-8xl { padding-right: calc(1em * 8) !important; padding-right: var(--spacing-8xl) !important; padding-left: calc(1em * 8) !important; padding-left: var(--spacing-8xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-vertical-8xl { padding-top: calc(1em * 8) !important; padding-top: var(--spacing-8xl) !important; padding-bottom: calc(1em * 8) !important; padding-bottom: var(--spacing-8xl) !important; } .desktop\:padding-y-8xl { padding-top: calc(1em * 8) !important; padding-top: var(--spacing-8xl) !important; padding-bottom: calc(1em * 8) !important; padding-bottom: var(--spacing-8xl) !important; } .desktop\:padding-9xl { padding: calc(1em * 10) !important; padding: var(--spacing-9xl) !important; } .desktop\:padding-top-9xl { padding-top: calc(1em * 10) !important; padding-top: var(--spacing-9xl) !important; } .desktop\:padding-right-9xl { padding-right: calc(1em * 10) !important; padding-right: var(--spacing-9xl) !important; } .desktop\:padding-bottom-9xl { padding-bottom: calc(1em * 10) !important; padding-bottom: var(--spacing-9xl) !important; } .desktop\:padding-left-9xl { padding-left: calc(1em * 10) !important; padding-left: var(--spacing-9xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-horizontal-9xl { padding-right: calc(1em * 10) !important; padding-right: var(--spacing-9xl) !important; padding-left: calc(1em * 10) !important; padding-left: var(--spacing-9xl) !important; } .desktop\:padding-x-9xl { padding-right: calc(1em * 10) !important; padding-right: var(--spacing-9xl) !important; padding-left: calc(1em * 10) !important; padding-left: var(--spacing-9xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-vertical-9xl { padding-top: calc(1em * 10) !important; padding-top: var(--spacing-9xl) !important; padding-bottom: calc(1em * 10) !important; padding-bottom: var(--spacing-9xl) !important; } .desktop\:padding-y-9xl { padding-top: calc(1em * 10) !important; padding-top: var(--spacing-9xl) !important; padding-bottom: calc(1em * 10) !important; padding-bottom: var(--spacing-9xl) !important; } .desktop\:padding-10xl { padding: calc(1em * 12) !important; padding: var(--spacing-10xl) !important; } .desktop\:padding-top-10xl { padding-top: calc(1em * 12) !important; padding-top: var(--spacing-10xl) !important; } .desktop\:padding-right-10xl { padding-right: calc(1em * 12) !important; padding-right: var(--spacing-10xl) !important; } .desktop\:padding-bottom-10xl { padding-bottom: calc(1em * 12) !important; padding-bottom: var(--spacing-10xl) !important; } .desktop\:padding-left-10xl { padding-left: calc(1em * 12) !important; padding-left: var(--spacing-10xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-horizontal-10xl { padding-right: calc(1em * 12) !important; padding-right: var(--spacing-10xl) !important; padding-left: calc(1em * 12) !important; padding-left: var(--spacing-10xl) !important; } .desktop\:padding-x-10xl { padding-right: calc(1em * 12) !important; padding-right: var(--spacing-10xl) !important; padding-left: calc(1em * 12) !important; padding-left: var(--spacing-10xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-vertical-10xl { padding-top: calc(1em * 12) !important; padding-top: var(--spacing-10xl) !important; padding-bottom: calc(1em * 12) !important; padding-bottom: var(--spacing-10xl) !important; } .desktop\:padding-y-10xl { padding-top: calc(1em * 12) !important; padding-top: var(--spacing-10xl) !important; padding-bottom: calc(1em * 12) !important; padding-bottom: var(--spacing-10xl) !important; } .desktop\:padding-11xl { padding: calc(1em * 16) !important; padding: var(--spacing-11xl) !important; } .desktop\:padding-top-11xl { padding-top: calc(1em * 16) !important; padding-top: var(--spacing-11xl) !important; } .desktop\:padding-right-11xl { padding-right: calc(1em * 16) !important; padding-right: var(--spacing-11xl) !important; } .desktop\:padding-bottom-11xl { padding-bottom: calc(1em * 16) !important; padding-bottom: var(--spacing-11xl) !important; } .desktop\:padding-left-11xl { padding-left: calc(1em * 16) !important; padding-left: var(--spacing-11xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-horizontal-11xl { padding-right: calc(1em * 16) !important; padding-right: var(--spacing-11xl) !important; padding-left: calc(1em * 16) !important; padding-left: var(--spacing-11xl) !important; } .desktop\:padding-x-11xl { padding-right: calc(1em * 16) !important; padding-right: var(--spacing-11xl) !important; padding-left: calc(1em * 16) !important; padding-left: var(--spacing-11xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-vertical-11xl { padding-top: calc(1em * 16) !important; padding-top: var(--spacing-11xl) !important; padding-bottom: calc(1em * 16) !important; padding-bottom: var(--spacing-11xl) !important; } .desktop\:padding-y-11xl { padding-top: calc(1em * 16) !important; padding-top: var(--spacing-11xl) !important; padding-bottom: calc(1em * 16) !important; padding-bottom: var(--spacing-11xl) !important; } .desktop\:padding-12xl { padding: calc(1em * 20) !important; padding: var(--spacing-12xl) !important; } .desktop\:padding-top-12xl { padding-top: calc(1em * 20) !important; padding-top: var(--spacing-12xl) !important; } .desktop\:padding-right-12xl { padding-right: calc(1em * 20) !important; padding-right: var(--spacing-12xl) !important; } .desktop\:padding-bottom-12xl { padding-bottom: calc(1em * 20) !important; padding-bottom: var(--spacing-12xl) !important; } .desktop\:padding-left-12xl { padding-left: calc(1em * 20) !important; padding-left: var(--spacing-12xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-horizontal-12xl { padding-right: calc(1em * 20) !important; padding-right: var(--spacing-12xl) !important; padding-left: calc(1em * 20) !important; padding-left: var(--spacing-12xl) !important; } .desktop\:padding-x-12xl { padding-right: calc(1em * 20) !important; padding-right: var(--spacing-12xl) !important; padding-left: calc(1em * 20) !important; padding-left: var(--spacing-12xl) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-vertical-12xl { padding-top: calc(1em * 20) !important; padding-top: var(--spacing-12xl) !important; padding-bottom: calc(1em * 20) !important; padding-bottom: var(--spacing-12xl) !important; } .desktop\:padding-y-12xl { padding-top: calc(1em * 20) !important; padding-top: var(--spacing-12xl) !important; padding-bottom: calc(1em * 20) !important; padding-bottom: var(--spacing-12xl) !important; } .desktop\:padding-0 { padding: 0 !important; padding: var(--spacing-0) !important; } .desktop\:padding-top-0 { padding-top: 0 !important; padding-top: var(--spacing-0) !important; } .desktop\:padding-right-0 { padding-right: 0 !important; padding-right: var(--spacing-0) !important; } .desktop\:padding-bottom-0 { padding-bottom: 0 !important; padding-bottom: var(--spacing-0) !important; } .desktop\:padding-left-0 { padding-left: 0 !important; padding-left: var(--spacing-0) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-horizontal-0 { padding-right: 0 !important; padding-right: var(--spacing-0) !important; padding-left: 0 !important; padding-left: var(--spacing-0) !important; } .desktop\:padding-x-0 { padding-right: 0 !important; padding-right: var(--spacing-0) !important; padding-left: 0 !important; padding-left: var(--spacing-0) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-vertical-0 { padding-top: 0 !important; padding-top: var(--spacing-0) !important; padding-bottom: 0 !important; padding-bottom: var(--spacing-0) !important; } .desktop\:padding-y-0 { padding-top: 0 !important; padding-top: var(--spacing-0) !important; padding-bottom: 0 !important; padding-bottom: var(--spacing-0) !important; } .desktop\:padding-1 { padding: calc(1em * 1 / 16) !important; padding: var(--spacing-1) !important; } .desktop\:padding-top-1 { padding-top: calc(1em * 1 / 16) !important; padding-top: var(--spacing-1) !important; } .desktop\:padding-right-1 { padding-right: calc(1em * 1 / 16) !important; padding-right: var(--spacing-1) !important; } .desktop\:padding-bottom-1 { padding-bottom: calc(1em * 1 / 16) !important; padding-bottom: var(--spacing-1) !important; } .desktop\:padding-left-1 { padding-left: calc(1em * 1 / 16) !important; padding-left: var(--spacing-1) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-horizontal-1 { padding-right: calc(1em * 1 / 16) !important; padding-right: var(--spacing-1) !important; padding-left: calc(1em * 1 / 16) !important; padding-left: var(--spacing-1) !important; } .desktop\:padding-x-1 { padding-right: calc(1em * 1 / 16) !important; padding-right: var(--spacing-1) !important; padding-left: calc(1em * 1 / 16) !important; padding-left: var(--spacing-1) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-vertical-1 { padding-top: calc(1em * 1 / 16) !important; padding-top: var(--spacing-1) !important; padding-bottom: calc(1em * 1 / 16) !important; padding-bottom: var(--spacing-1) !important; } .desktop\:padding-y-1 { padding-top: calc(1em * 1 / 16) !important; padding-top: var(--spacing-1) !important; padding-bottom: calc(1em * 1 / 16) !important; padding-bottom: var(--spacing-1) !important; } .desktop\:padding-1px { padding: 1px !important; padding: var(--spacing-1px) !important; } .desktop\:padding-top-1px { padding-top: 1px !important; padding-top: var(--spacing-1px) !important; } .desktop\:padding-right-1px { padding-right: 1px !important; padding-right: var(--spacing-1px) !important; } .desktop\:padding-bottom-1px { padding-bottom: 1px !important; padding-bottom: var(--spacing-1px) !important; } .desktop\:padding-left-1px { padding-left: 1px !important; padding-left: var(--spacing-1px) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-horizontal-1px { padding-right: 1px !important; padding-right: var(--spacing-1px) !important; padding-left: 1px !important; padding-left: var(--spacing-1px) !important; } .desktop\:padding-x-1px { padding-right: 1px !important; padding-right: var(--spacing-1px) !important; padding-left: 1px !important; padding-left: var(--spacing-1px) !important; } /* DEV TODO: Get this pair of identical rules working in one selector */ .desktop\:padding-vertical-1px { padding-top: 1px !important; padding-top: var(--spacing-1px) !important; padding-bottom: 1px !important; padding-bottom: var(--spacing-1px) !important; } .desktop\:padding-y-1px { padding-top: 1px !important; padding-top: var(--spacing-1px) !important; padding-bottom: 1px !important; padding-bottom: var(--spacing-1px) !important; } } /* text-wrangling */ .muted,.mute { color: #183153; color: var(--text-color); } .underline { --text-decoration: underline; -webkit-text-decoration: var(--text-decoration); text-decoration: var(--text-decoration); } .text-reset { --color: inherit; color: var(--color); } .text-sans-serif { font-family: cera-round-pro, "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-family: var(--font-family-sans-serif); } .text-serif { font-family: fa-livory, "Georgia", "Times New Roman", "Times", serif; font-family: var(--font-family-serif); } .text-monospace { font-family: "Menlo", "Monaco", "Consolas", "Courier New", monospace; font-family: var(--font-family-monospace); } .text-wrap { white-space: normal; } .text-nowrap { white-space: nowrap; } .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .text-break { word-break: break-word; word-wrap: break-word; } .text-lowercase { text-transform: lowercase; } .text-uppercase { text-transform: uppercase; } .text-capitalize { text-transform: capitalize; } .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } .text-justify { text-align: justify; } @media (min-width: 768px) { .tablet\:text-wrap { white-space: normal; } .tablet\:text-nowrap { white-space: nowrap; } .tablet\:text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tablet\:text-left { text-align: left; } .tablet\:text-right { text-align: right; } .tablet\:text-center { text-align: center; } .tablet\:text-justify { text-align: justify; } } @media (min-width: 1152px) { .laptop\:text-wrap { white-space: normal; } .laptop\:text-nowrap { white-space: nowrap; } .laptop\:text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .laptop\:text-left { text-align: left; } .laptop\:text-right { text-align: right; } .laptop\:text-center { text-align: center; } .laptop\:text-justify { text-align: justify; } } @media (min-width: 1536px) { .desktop\:text-wrap { white-space: normal; } .desktop\:text-nowrap { white-space: nowrap; } .desktop\:text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .desktop\:text-left { text-align: left; } .desktop\:text-right { text-align: right; } .desktop\:text-center { text-align: center; } .desktop\:text-justify { text-align: justify; } } .with-border { border: solid #c3c6d1 0.125em; border: var(--border-style) var(--border-color) var(--border-width); } .no-border { border: none !important; } .with-border-radius { border-radius: 0.75em; border-radius: var(--border-radius); } .no-border-radius { border-radius: 0 !important; } .with-triangle { position: relative } .with-triangle.top::after, .with-triangle.right::after, .with-triangle.bottom::after, .with-triangle.left::after { position: absolute; border: 1em solid transparent; border: var(--triangle-size) solid transparent; width: 0; height: 0; content: ""; } .with-triangle.top::after, .with-triangle.bottom::after { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .with-triangle.left::after, .with-triangle.right::after { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .with-triangle.top::after { top: calc(-1 * 1em); top: calc(-1 * var(--triangle-size)); border-top-width: 0; border-bottom-color: #fff; border-bottom-color: var(--triangle-color); } .with-triangle.right::after { right: calc(-1 * 1em); right: calc(-1 * var(--triangle-size)); border-right-width: 0; border-left-color: #fff; border-left-color: var(--triangle-color); } .with-triangle.bottom::after { bottom: calc(-1 * 1em); bottom: calc(-1 * var(--triangle-size)); border-bottom-width: 0; border-top-color: #fff; border-top-color: var(--triangle-color); } .with-triangle.left::after { left: calc(-1 * 1em); left: calc(-1 * var(--triangle-size)); border-left-width: 0; border-right-color: #fff; border-right-color: var(--triangle-color); } .with-close { position: relative } .with-close .close { --fa-primary-color: var(--with-close-times-color); --fa-secondary-opacity: 1; --button-active-background: transparent; --button-active-border-width: 0; --button-background: transparent; --button-border-width: 0; --button-box-shadow: none; --button-hover-background: transparent; --button-margin-bottom: 0; --button-padding: 0; -webkit-box-sizing: content-box; box-sizing: content-box; position: absolute; top: -0.5em; right: -0.5em; line-height: 1; color: inherit; color: var(--with-close-close-color); font-size: calc(1em * 1.5); font-size: var(--with-close-close-font-size) } .with-close .close:hover { cursor: pointer; color: #e03131; color: var(--with-close-close-hover-color); } .with-close { /* Special case for Cards */ } .with-close.card > .header:nth-last-child(2), .with-close.card > .section:nth-last-child(2) { margin-bottom: calc(-1 * calc((4em - (1em * 1.5) - (0em * 2)) / 2)); margin-bottom: calc(-1 * var(--card-vertical-padding)); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; } .with-close h1,.with-close h2,.with-close h3,.with-close h4,.with-close h5,.with-close h6,.with-close .h1,.with-close .h2,.with-close .h3,.with-close .h4,.with-close .h5,.with-close .h6, .with-close p, .with-close .p { /* Nasssty icons dom order makes us do this, precious. */ } .with-close h1:nth-last-child(2),.with-close h2:nth-last-child(2),.with-close h3:nth-last-child(2),.with-close h4:nth-last-child(2),.with-close h5:nth-last-child(2),.with-close h6:nth-last-child(2),.with-close .h1:nth-last-child(2),.with-close .h2:nth-last-child(2),.with-close .h3:nth-last-child(2),.with-close .h4:nth-last-child(2),.with-close .h5:nth-last-child(2),.with-close .h6:nth-last-child(2), .with-close p:nth-last-child(2), .with-close .p:nth-last-child(2) { margin-bottom: 0; } .with-shadow { -webkit-box-shadow: 0 0.25em 0 #c3c6d1; box-shadow: 0 0.25em 0 #c3c6d1; -webkit-box-shadow: var(--with-shadow-box-shadow); box-shadow: var(--with-shadow-box-shadow); } .z-background { z-index: -1; z-index: var(--depth-background); } .z--1 { z-index: -1; z-index: var(--depth--1); } .z-0 { z-index: 0; z-index: var(--depth-0); } .z-1 { z-index: 10; z-index: var(--depth-1); } .z-2 { z-index: 20; z-index: var(--depth-2); } .z-3 { z-index: 30; z-index: var(--depth-3); } .z-4 { z-index: 40; z-index: var(--depth-4); } .z-5 { z-index: 50; z-index: var(--depth-5); } .z-foreground { z-index: 50; z-index: var(--depth-foreground); } .z-auto { z-index: auto; } .position-static { position: static; } .position-absolute { position: absolute; } .position-fixed { position: fixed; } .position-fixed-top { position: fixed; top: 0; z-index: 10; z-index: var(--depth-1); } .position-fixed-bottom { position: fixed; bottom: 0; z-index: 10; z-index: var(--depth-1); } .position-relative { position: relative; } .position-sticky { position: sticky; } .position-sticky-top { position: sticky; top: 0; z-index: 10; z-index: var(--depth-1); } .position-sticky-bottom { position: sticky; bottom: 0; z-index: 10; z-index: var(--depth-1); } .top-0 { top: 0; top: var(--spacing-0); } .top-1 { top: calc(1em * 1 / 16); top: var(--spacing-1); } .top-5xs { top: calc(1em * 3 / 16); top: var(--spacing-5xs); } .top-4xs { top: calc(1em * 4 / 16); top: var(--spacing-4xs); } .top-3xs { top: calc(1em * 6 / 16); top: var(--spacing-3xs); } .top-2xs { top: calc(1em * 8 / 16); top: var(--spacing-2xs); } .top-xs { top: calc(1em * 10 / 16); top: var(--spacing-xs); } .top-md { top: calc(1em * 1); top: var(--spacing-md); } .right-0 { right: 0; right: var(--spacing-0); } .right-1 { right: calc(1em * 1 / 16); right: var(--spacing-1); } .right-5xs { right: calc(1em * 3 / 16); right: var(--spacing-5xs); } .right-4xs { right: calc(1em * 4 / 16); right: var(--spacing-4xs); } .right-3xs { right: calc(1em * 6 / 16); right: var(--spacing-3xs); } .right-2xs { right: calc(1em * 8 / 16); right: var(--spacing-2xs); } .right-xs { right: calc(1em * 10 / 16); right: var(--spacing-xs); } .right-md { right: calc(1em * 1); right: var(--spacing-md); } .bottom-0 { bottom: 0; bottom: var(--spacing-0); } .bottom-1 { bottom: calc(1em * 1 / 16); bottom: var(--spacing-1); } .bottom-5xs { bottom: calc(1em * 3 / 16); bottom: var(--spacing-5xs); } .bottom-4xs { bottom: calc(1em * 4 / 16); bottom: var(--spacing-4xs); } .bottom-3xs { bottom: calc(1em * 6 / 16); bottom: var(--spacing-3xs); } .bottom-2xs { bottom: calc(1em * 8 / 16); bottom: var(--spacing-2xs); } .bottom-xs { bottom: calc(1em * 10 / 16); bottom: var(--spacing-xs); } .bottom-md { bottom: calc(1em * 1); bottom: var(--spacing-md); } .left-0 { left: 0; left: var(--spacing-0); } .left-1 { left: calc(1em * 1 / 16); left: var(--spacing-1); } .left-5xs { left: calc(1em * 3 / 16); left: var(--spacing-5xs); } .left-4xs { left: calc(1em * 4 / 16); left: var(--spacing-4xs); } .left-3xs { left: calc(1em * 6 / 16); left: var(--spacing-3xs); } .left-2xs { left: calc(1em * 8 / 16); left: var(--spacing-2xs); } .left-xs { left: calc(1em * 10 / 16); left: var(--spacing-xs); } .left-md { left: calc(1em * 1); left: var(--spacing-md); } @media (min-width: 768px) { .tablet\:z-background { z-index: -1; z-index: var(--depth-background); } .tablet\:z--1 { z-index: -1; z-index: var(--depth--1); } .tablet\:z-0 { z-index: 0; z-index: var(--depth-0); } .tablet\:z-1 { z-index: 10; z-index: var(--depth-1); } .tablet\:z-2 { z-index: 20; z-index: var(--depth-2); } .tablet\:z-3 { z-index: 30; z-index: var(--depth-3); } .tablet\:z-4 { z-index: 40; z-index: var(--depth-4); } .tablet\:z-5 { z-index: 50; z-index: var(--depth-5); } .tablet\:z-foreground { z-index: 50; z-index: var(--depth-foreground); } .tablet\:z-auto { z-index: auto; } .tablet\:position-static { position: static; } .tablet\:position-absolute { position: absolute; } .tablet\:position-fixed { position: fixed; } .tablet\:position-fixed-top { position: fixed; top: 0; z-index: 10; z-index: var(--depth-1); } .tablet\:position-fixed-bottom { position: fixed; bottom: 0; z-index: 10; z-index: var(--depth-1); } .tablet\:position-relative { position: relative; } .tablet\:position-sticky { position: sticky; } .tablet\:position-sticky-top { position: sticky; top: 0; z-index: 10; z-index: var(--depth-1); } .tablet\:position-sticky-bottom { position: sticky; bottom: 0; z-index: 10; z-index: var(--depth-1); } .tablet\:top-0 { top: 0; top: var(--spacing-0); } .tablet\:top-1 { top: calc(1em * 1 / 16); top: var(--spacing-1); } .tablet\:top-5xs { top: calc(1em * 3 / 16); top: var(--spacing-5xs); } .tablet\:top-4xs { top: calc(1em * 4 / 16); top: var(--spacing-4xs); } .tablet\:top-3xs { top: calc(1em * 6 / 16); top: var(--spacing-3xs); } .tablet\:top-2xs { top: calc(1em * 8 / 16); top: var(--spacing-2xs); } .tablet\:top-xs { top: calc(1em * 10 / 16); top: var(--spacing-xs); } .tablet\:top-md { top: calc(1em * 1); top: var(--spacing-md); } .tablet\:right-0 { right: 0; right: var(--spacing-0); } .tablet\:right-1 { right: calc(1em * 1 / 16); right: var(--spacing-1); } .tablet\:right-5xs { right: calc(1em * 3 / 16); right: var(--spacing-5xs); } .tablet\:right-4xs { right: calc(1em * 4 / 16); right: var(--spacing-4xs); } .tablet\:right-3xs { right: calc(1em * 6 / 16); right: var(--spacing-3xs); } .tablet\:right-2xs { right: calc(1em * 8 / 16); right: var(--spacing-2xs); } .tablet\:right-xs { right: calc(1em * 10 / 16); right: var(--spacing-xs); } .tablet\:right-md { right: calc(1em * 1); right: var(--spacing-md); } .tablet\:bottom-0 { bottom: 0; bottom: var(--spacing-0); } .tablet\:bottom-1 { bottom: calc(1em * 1 / 16); bottom: var(--spacing-1); } .tablet\:bottom-5xs { bottom: calc(1em * 3 / 16); bottom: var(--spacing-5xs); } .tablet\:bottom-4xs { bottom: calc(1em * 4 / 16); bottom: var(--spacing-4xs); } .tablet\:bottom-3xs { bottom: calc(1em * 6 / 16); bottom: var(--spacing-3xs); } .tablet\:bottom-2xs { bottom: calc(1em * 8 / 16); bottom: var(--spacing-2xs); } .tablet\:bottom-xs { bottom: calc(1em * 10 / 16); bottom: var(--spacing-xs); } .tablet\:bottom-md { bottom: calc(1em * 1); bottom: var(--spacing-md); } .tablet\:left-0 { left: 0; left: var(--spacing-0); } .tablet\:left-1 { left: calc(1em * 1 / 16); left: var(--spacing-1); } .tablet\:left-5xs { left: calc(1em * 3 / 16); left: var(--spacing-5xs); } .tablet\:left-4xs { left: calc(1em * 4 / 16); left: var(--spacing-4xs); } .tablet\:left-3xs { left: calc(1em * 6 / 16); left: var(--spacing-3xs); } .tablet\:left-2xs { left: calc(1em * 8 / 16); left: var(--spacing-2xs); } .tablet\:left-xs { left: calc(1em * 10 / 16); left: var(--spacing-xs); } .tablet\:left-md { left: calc(1em * 1); left: var(--spacing-md); } } @media (min-width: 1152px) { .laptop\:z-background { z-index: -1; z-index: var(--depth-background); } .laptop\:z--1 { z-index: -1; z-index: var(--depth--1); } .laptop\:z-0 { z-index: 0; z-index: var(--depth-0); } .laptop\:z-1 { z-index: 10; z-index: var(--depth-1); } .laptop\:z-2 { z-index: 20; z-index: var(--depth-2); } .laptop\:z-3 { z-index: 30; z-index: var(--depth-3); } .laptop\:z-4 { z-index: 40; z-index: var(--depth-4); } .laptop\:z-5 { z-index: 50; z-index: var(--depth-5); } .laptop\:z-foreground { z-index: 50; z-index: var(--depth-foreground); } .laptop\:z-auto { z-index: auto; } .laptop\:position-static { position: static; } .laptop\:position-absolute { position: absolute; } .laptop\:position-fixed { position: fixed; } .laptop\:position-fixed-top { position: fixed; top: 0; z-index: 10; z-index: var(--depth-1); } .laptop\:position-fixed-bottom { position: fixed; bottom: 0; z-index: 10; z-index: var(--depth-1); } .laptop\:position-relative { position: relative; } .laptop\:position-sticky { position: sticky; } .laptop\:position-sticky-top { position: sticky; top: 0; z-index: 10; z-index: var(--depth-1); } .laptop\:position-sticky-bottom { position: sticky; bottom: 0; z-index: 10; z-index: var(--depth-1); } .laptop\:top-0 { top: 0; top: var(--spacing-0); } .laptop\:top-1 { top: calc(1em * 1 / 16); top: var(--spacing-1); } .laptop\:top-5xs { top: calc(1em * 3 / 16); top: var(--spacing-5xs); } .laptop\:top-4xs { top: calc(1em * 4 / 16); top: var(--spacing-4xs); } .laptop\:top-3xs { top: calc(1em * 6 / 16); top: var(--spacing-3xs); } .laptop\:top-2xs { top: calc(1em * 8 / 16); top: var(--spacing-2xs); } .laptop\:top-xs { top: calc(1em * 10 / 16); top: var(--spacing-xs); } .laptop\:top-md { top: calc(1em * 1); top: var(--spacing-md); } .laptop\:right-0 { right: 0; right: var(--spacing-0); } .laptop\:right-1 { right: calc(1em * 1 / 16); right: var(--spacing-1); } .laptop\:right-5xs { right: calc(1em * 3 / 16); right: var(--spacing-5xs); } .laptop\:right-4xs { right: calc(1em * 4 / 16); right: var(--spacing-4xs); } .laptop\:right-3xs { right: calc(1em * 6 / 16); right: var(--spacing-3xs); } .laptop\:right-2xs { right: calc(1em * 8 / 16); right: var(--spacing-2xs); } .laptop\:right-xs { right: calc(1em * 10 / 16); right: var(--spacing-xs); } .laptop\:right-md { right: calc(1em * 1); right: var(--spacing-md); } .laptop\:bottom-0 { bottom: 0; bottom: var(--spacing-0); } .laptop\:bottom-1 { bottom: calc(1em * 1 / 16); bottom: var(--spacing-1); } .laptop\:bottom-5xs { bottom: calc(1em * 3 / 16); bottom: var(--spacing-5xs); } .laptop\:bottom-4xs { bottom: calc(1em * 4 / 16); bottom: var(--spacing-4xs); } .laptop\:bottom-3xs { bottom: calc(1em * 6 / 16); bottom: var(--spacing-3xs); } .laptop\:bottom-2xs { bottom: calc(1em * 8 / 16); bottom: var(--spacing-2xs); } .laptop\:bottom-xs { bottom: calc(1em * 10 / 16); bottom: var(--spacing-xs); } .laptop\:bottom-md { bottom: calc(1em * 1); bottom: var(--spacing-md); } .laptop\:left-0 { left: 0; left: var(--spacing-0); } .laptop\:left-1 { left: calc(1em * 1 / 16); left: var(--spacing-1); } .laptop\:left-5xs { left: calc(1em * 3 / 16); left: var(--spacing-5xs); } .laptop\:left-4xs { left: calc(1em * 4 / 16); left: var(--spacing-4xs); } .laptop\:left-3xs { left: calc(1em * 6 / 16); left: var(--spacing-3xs); } .laptop\:left-2xs { left: calc(1em * 8 / 16); left: var(--spacing-2xs); } .laptop\:left-xs { left: calc(1em * 10 / 16); left: var(--spacing-xs); } .laptop\:left-md { left: calc(1em * 1); left: var(--spacing-md); } } @media (min-width: 1536px) { .desktop\:z-background { z-index: -1; z-index: var(--depth-background); } .desktop\:z--1 { z-index: -1; z-index: var(--depth--1); } .desktop\:z-0 { z-index: 0; z-index: var(--depth-0); } .desktop\:z-1 { z-index: 10; z-index: var(--depth-1); } .desktop\:z-2 { z-index: 20; z-index: var(--depth-2); } .desktop\:z-3 { z-index: 30; z-index: var(--depth-3); } .desktop\:z-4 { z-index: 40; z-index: var(--depth-4); } .desktop\:z-5 { z-index: 50; z-index: var(--depth-5); } .desktop\:z-foreground { z-index: 50; z-index: var(--depth-foreground); } .desktop\:z-auto { z-index: auto; } .desktop\:position-static { position: static; } .desktop\:position-absolute { position: absolute; } .desktop\:position-fixed { position: fixed; } .desktop\:position-fixed-top { position: fixed; top: 0; z-index: 10; z-index: var(--depth-1); } .desktop\:position-fixed-bottom { position: fixed; bottom: 0; z-index: 10; z-index: var(--depth-1); } .desktop\:position-relative { position: relative; } .desktop\:position-sticky { position: sticky; } .desktop\:position-sticky-top { position: sticky; top: 0; z-index: 10; z-index: var(--depth-1); } .desktop\:position-sticky-bottom { position: sticky; bottom: 0; z-index: 10; z-index: var(--depth-1); } .desktop\:top-0 { top: 0; top: var(--spacing-0); } .desktop\:top-1 { top: calc(1em * 1 / 16); top: var(--spacing-1); } .desktop\:top-5xs { top: calc(1em * 3 / 16); top: var(--spacing-5xs); } .desktop\:top-4xs { top: calc(1em * 4 / 16); top: var(--spacing-4xs); } .desktop\:top-3xs { top: calc(1em * 6 / 16); top: var(--spacing-3xs); } .desktop\:top-2xs { top: calc(1em * 8 / 16); top: var(--spacing-2xs); } .desktop\:top-xs { top: calc(1em * 10 / 16); top: var(--spacing-xs); } .desktop\:top-md { top: calc(1em * 1); top: var(--spacing-md); } .desktop\:right-0 { right: 0; right: var(--spacing-0); } .desktop\:right-1 { right: calc(1em * 1 / 16); right: var(--spacing-1); } .desktop\:right-5xs { right: calc(1em * 3 / 16); right: var(--spacing-5xs); } .desktop\:right-4xs { right: calc(1em * 4 / 16); right: var(--spacing-4xs); } .desktop\:right-3xs { right: calc(1em * 6 / 16); right: var(--spacing-3xs); } .desktop\:right-2xs { right: calc(1em * 8 / 16); right: var(--spacing-2xs); } .desktop\:right-xs { right: calc(1em * 10 / 16); right: var(--spacing-xs); } .desktop\:right-md { right: calc(1em * 1); right: var(--spacing-md); } .desktop\:bottom-0 { bottom: 0; bottom: var(--spacing-0); } .desktop\:bottom-1 { bottom: calc(1em * 1 / 16); bottom: var(--spacing-1); } .desktop\:bottom-5xs { bottom: calc(1em * 3 / 16); bottom: var(--spacing-5xs); } .desktop\:bottom-4xs { bottom: calc(1em * 4 / 16); bottom: var(--spacing-4xs); } .desktop\:bottom-3xs { bottom: calc(1em * 6 / 16); bottom: var(--spacing-3xs); } .desktop\:bottom-2xs { bottom: calc(1em * 8 / 16); bottom: var(--spacing-2xs); } .desktop\:bottom-xs { bottom: calc(1em * 10 / 16); bottom: var(--spacing-xs); } .desktop\:bottom-md { bottom: calc(1em * 1); bottom: var(--spacing-md); } .desktop\:left-0 { left: 0; left: var(--spacing-0); } .desktop\:left-1 { left: calc(1em * 1 / 16); left: var(--spacing-1); } .desktop\:left-5xs { left: calc(1em * 3 / 16); left: var(--spacing-5xs); } .desktop\:left-4xs { left: calc(1em * 4 / 16); left: var(--spacing-4xs); } .desktop\:left-3xs { left: calc(1em * 6 / 16); left: var(--spacing-3xs); } .desktop\:left-2xs { left: calc(1em * 8 / 16); left: var(--spacing-2xs); } .desktop\:left-xs { left: calc(1em * 10 / 16); left: var(--spacing-xs); } .desktop\:left-md { left: calc(1em * 1); left: var(--spacing-md); } } /* sizes */ .size-6xs { font-size: calc(1em * 0.25); font-size: var(--size-6xs); } .size-5xs { font-size: calc(1em * 0.3125); font-size: var(--size-5xs); } .size-4xs { font-size: calc(1em * 0.375); font-size: var(--size-4xs); } .size-3xs { font-size: calc(1em * 0.5); font-size: var(--size-3xs); } .size-2xs { font-size: calc(1em * 0.625); font-size: var(--size-2xs); } .size-xs { font-size: calc(1em * 0.75); font-size: var(--size-xs); } .size-sm { font-size: calc(1em * 0.875); font-size: var(--size-sm); } .size-md { font-size: 1em; font-size: var(--size-md); } .size-lg { font-size: calc(1em * 1.25); font-size: var(--size-lg); } .size-xl { font-size: calc(1em * 1.5); font-size: var(--size-xl); } .size-2xl { font-size: calc(1em * 2); font-size: var(--size-2xl); } .size-3xl { font-size: calc(1em * 2.5); font-size: var(--size-3xl); } .size-4xl { font-size: calc(1em * 3); font-size: var(--size-4xl); } .size-5xl { font-size: calc(1em * 3.75); font-size: var(--size-5xl); } .size-6xl { font-size: calc(1em * 4.5); font-size: var(--size-6xl); } @media (min-width: 768px) { .tablet\:size-6xs { font-size: calc(1em * 0.25); font-size: var(--size-6xs); } .tablet\:size-5xs { font-size: calc(1em * 0.3125); font-size: var(--size-5xs); } .tablet\:size-4xs { font-size: calc(1em * 0.375); font-size: var(--size-4xs); } .tablet\:size-3xs { font-size: calc(1em * 0.5); font-size: var(--size-3xs); } .tablet\:size-2xs { font-size: calc(1em * 0.625); font-size: var(--size-2xs); } .tablet\:size-xs { font-size: calc(1em * 0.75); font-size: var(--size-xs); } .tablet\:size-sm { font-size: calc(1em * 0.875); font-size: var(--size-sm); } .tablet\:size-md { font-size: 1em; font-size: var(--size-md); } .tablet\:size-lg { font-size: calc(1em * 1.25); font-size: var(--size-lg); } .tablet\:size-xl { font-size: calc(1em * 1.5); font-size: var(--size-xl); } .tablet\:size-2xl { font-size: calc(1em * 2); font-size: var(--size-2xl); } .tablet\:size-3xl { font-size: calc(1em * 2.5); font-size: var(--size-3xl); } .tablet\:size-4xl { font-size: calc(1em * 3); font-size: var(--size-4xl); } .tablet\:size-5xl { font-size: calc(1em * 3.75); font-size: var(--size-5xl); } .tablet\:size-6xl { font-size: calc(1em * 4.5); font-size: var(--size-6xl); } } @media (min-width: 1152px) { .laptop\:size-6xs { font-size: calc(1em * 0.25); font-size: var(--size-6xs); } .laptop\:size-5xs { font-size: calc(1em * 0.3125); font-size: var(--size-5xs); } .laptop\:size-4xs { font-size: calc(1em * 0.375); font-size: var(--size-4xs); } .laptop\:size-3xs { font-size: calc(1em * 0.5); font-size: var(--size-3xs); } .laptop\:size-2xs { font-size: calc(1em * 0.625); font-size: var(--size-2xs); } .laptop\:size-xs { font-size: calc(1em * 0.75); font-size: var(--size-xs); } .laptop\:size-sm { font-size: calc(1em * 0.875); font-size: var(--size-sm); } .laptop\:size-md { font-size: 1em; font-size: var(--size-md); } .laptop\:size-lg { font-size: calc(1em * 1.25); font-size: var(--size-lg); } .laptop\:size-xl { font-size: calc(1em * 1.5); font-size: var(--size-xl); } .laptop\:size-2xl { font-size: calc(1em * 2); font-size: var(--size-2xl); } .laptop\:size-3xl { font-size: calc(1em * 2.5); font-size: var(--size-3xl); } .laptop\:size-4xl { font-size: calc(1em * 3); font-size: var(--size-4xl); } .laptop\:size-5xl { font-size: calc(1em * 3.75); font-size: var(--size-5xl); } .laptop\:size-6xl { font-size: calc(1em * 4.5); font-size: var(--size-6xl); } } @media (min-width: 1536px) { .desktop\:size-6xs { font-size: calc(1em * 0.25); font-size: var(--size-6xs); } .desktop\:size-5xs { font-size: calc(1em * 0.3125); font-size: var(--size-5xs); } .desktop\:size-4xs { font-size: calc(1em * 0.375); font-size: var(--size-4xs); } .desktop\:size-3xs { font-size: calc(1em * 0.5); font-size: var(--size-3xs); } .desktop\:size-2xs { font-size: calc(1em * 0.625); font-size: var(--size-2xs); } .desktop\:size-xs { font-size: calc(1em * 0.75); font-size: var(--size-xs); } .desktop\:size-sm { font-size: calc(1em * 0.875); font-size: var(--size-sm); } .desktop\:size-md { font-size: 1em; font-size: var(--size-md); } .desktop\:size-lg { font-size: calc(1em * 1.25); font-size: var(--size-lg); } .desktop\:size-xl { font-size: calc(1em * 1.5); font-size: var(--size-xl); } .desktop\:size-2xl { font-size: calc(1em * 2); font-size: var(--size-2xl); } .desktop\:size-3xl { font-size: calc(1em * 2.5); font-size: var(--size-3xl); } .desktop\:size-4xl { font-size: calc(1em * 3); font-size: var(--size-4xl); } .desktop\:size-5xl { font-size: calc(1em * 3.75); font-size: var(--size-5xl); } .desktop\:size-6xl { font-size: calc(1em * 4.5); font-size: var(--size-6xl); } } /* sizes resets */ .size-reset-6xs { font-size: calc(1rem * 0.25); font-size: var(--size-reset-6xs); } .size-reset-5xs { font-size: calc(1rem * 0.3125); font-size: var(--size-reset-5xs); } .size-reset-4xs { font-size: calc(1rem * 0.375); font-size: var(--size-reset-4xs); } .size-reset-3xs { font-size: calc(1rem * 0.5); font-size: var(--size-reset-3xs); } .size-reset-2xs { font-size: calc(1rem * 0.625); font-size: var(--size-reset-2xs); } .size-reset-xs { font-size: calc(1rem * 0.75); font-size: var(--size-reset-xs); } .size-reset-sm { font-size: calc(1rem * 0.875); font-size: var(--size-reset-sm); } .size-reset-md { font-size: 1rem; font-size: var(--size-reset-md); } .size-reset-lg { font-size: calc(1rem * 1.25); font-size: var(--size-reset-lg); } .size-reset-xl { font-size: calc(1rem * 1.5); font-size: var(--size-reset-xl); } .size-reset-2xl { font-size: calc(1rem * 2); font-size: var(--size-reset-2xl); } .size-reset-3xl { font-size: calc(1rem * 2.5); font-size: var(--size-reset-3xl); } .size-reset-4xl { font-size: calc(1rem * 3); font-size: var(--size-reset-4xl); } .size-reset-5xl { font-size: calc(1rem * 3.75); font-size: var(--size-reset-5xl); } .size-reset-6xl { font-size: calc(1rem * 4.5); font-size: var(--size-reset-6xl); } @media (min-width: 768px) { .tablet\:size-reset-6xs { font-size: calc(1rem * 0.25); font-size: var(--size-reset-6xs); } .tablet\:size-reset-5xs { font-size: calc(1rem * 0.3125); font-size: var(--size-reset-5xs); } .tablet\:size-reset-4xs { font-size: calc(1rem * 0.375); font-size: var(--size-reset-4xs); } .tablet\:size-reset-3xs { font-size: calc(1rem * 0.5); font-size: var(--size-reset-3xs); } .tablet\:size-reset-2xs { font-size: calc(1rem * 0.625); font-size: var(--size-reset-2xs); } .tablet\:size-reset-xs { font-size: calc(1rem * 0.75); font-size: var(--size-reset-xs); } .tablet\:size-reset-sm { font-size: calc(1rem * 0.875); font-size: var(--size-reset-sm); } .tablet\:size-reset-md { font-size: 1rem; font-size: var(--size-reset-md); } .tablet\:size-reset-lg { font-size: calc(1rem * 1.25); font-size: var(--size-reset-lg); } .tablet\:size-reset-xl { font-size: calc(1rem * 1.5); font-size: var(--size-reset-xl); } .tablet\:size-reset-2xl { font-size: calc(1rem * 2); font-size: var(--size-reset-2xl); } .tablet\:size-reset-3xl { font-size: calc(1rem * 2.5); font-size: var(--size-reset-3xl); } .tablet\:size-reset-4xl { font-size: calc(1rem * 3); font-size: var(--size-reset-4xl); } .tablet\:size-reset-5xl { font-size: calc(1rem * 3.75); font-size: var(--size-reset-5xl); } .tablet\:size-reset-6xl { font-size: calc(1rem * 4.5); font-size: var(--size-reset-6xl); } } @media (min-width: 1152px) { .laptop\:size-reset-6xs { font-size: calc(1rem * 0.25); font-size: var(--size-reset-6xs); } .laptop\:size-reset-5xs { font-size: calc(1rem * 0.3125); font-size: var(--size-reset-5xs); } .laptop\:size-reset-4xs { font-size: calc(1rem * 0.375); font-size: var(--size-reset-4xs); } .laptop\:size-reset-3xs { font-size: calc(1rem * 0.5); font-size: var(--size-reset-3xs); } .laptop\:size-reset-2xs { font-size: calc(1rem * 0.625); font-size: var(--size-reset-2xs); } .laptop\:size-reset-xs { font-size: calc(1rem * 0.75); font-size: var(--size-reset-xs); } .laptop\:size-reset-sm { font-size: calc(1rem * 0.875); font-size: var(--size-reset-sm); } .laptop\:size-reset-md { font-size: 1rem; font-size: var(--size-reset-md); } .laptop\:size-reset-lg { font-size: calc(1rem * 1.25); font-size: var(--size-reset-lg); } .laptop\:size-reset-xl { font-size: calc(1rem * 1.5); font-size: var(--size-reset-xl); } .laptop\:size-reset-2xl { font-size: calc(1rem * 2); font-size: var(--size-reset-2xl); } .laptop\:size-reset-3xl { font-size: calc(1rem * 2.5); font-size: var(--size-reset-3xl); } .laptop\:size-reset-4xl { font-size: calc(1rem * 3); font-size: var(--size-reset-4xl); } .laptop\:size-reset-5xl { font-size: calc(1rem * 3.75); font-size: var(--size-reset-5xl); } .laptop\:size-reset-6xl { font-size: calc(1rem * 4.5); font-size: var(--size-reset-6xl); } } @media (min-width: 1536px) { .desktop\:size-reset-6xs { font-size: calc(1rem * 0.25); font-size: var(--size-reset-6xs); } .desktop\:size-reset-5xs { font-size: calc(1rem * 0.3125); font-size: var(--size-reset-5xs); } .desktop\:size-reset-4xs { font-size: calc(1rem * 0.375); font-size: var(--size-reset-4xs); } .desktop\:size-reset-3xs { font-size: calc(1rem * 0.5); font-size: var(--size-reset-3xs); } .desktop\:size-reset-2xs { font-size: calc(1rem * 0.625); font-size: var(--size-reset-2xs); } .desktop\:size-reset-xs { font-size: calc(1rem * 0.75); font-size: var(--size-reset-xs); } .desktop\:size-reset-sm { font-size: calc(1rem * 0.875); font-size: var(--size-reset-sm); } .desktop\:size-reset-md { font-size: 1rem; font-size: var(--size-reset-md); } .desktop\:size-reset-lg { font-size: calc(1rem * 1.25); font-size: var(--size-reset-lg); } .desktop\:size-reset-xl { font-size: calc(1rem * 1.5); font-size: var(--size-reset-xl); } .desktop\:size-reset-2xl { font-size: calc(1rem * 2); font-size: var(--size-reset-2xl); } .desktop\:size-reset-3xl { font-size: calc(1rem * 2.5); font-size: var(--size-reset-3xl); } .desktop\:size-reset-4xl { font-size: calc(1rem * 3); font-size: var(--size-reset-4xl); } .desktop\:size-reset-5xl { font-size: calc(1rem * 3.75); font-size: var(--size-reset-5xl); } .desktop\:size-reset-6xl { font-size: calc(1rem * 4.5); font-size: var(--size-reset-6xl); } } .visibility-hidden, .invisible { visibility: hidden; } .visibility-visible, .visible { visibility: visible; } @media (min-width: 768px) { .tablet\:visibility-hidden, .tablet\:invisible { visibility: hidden; } .tablet\:visibility-visible, .tablet\:visible { visibility: visible; } } @media (min-width: 1152px) { .laptop\:visibility-hidden, .laptop\:invisible { visibility: hidden; } .laptop\:visibility-visible, .laptop\:visible { visibility: visible; } } @media (min-width: 1536px) { .desktop\:visibility-hidden, .desktop\:invisible { visibility: hidden; } .desktop\:visibility-visible, .desktop\:visible { visibility: visible; } }