#product {
    display: grid;
    grid-template-areas: 'header header header' '. content .' 'footer footer footer';
    grid-template-columns: 1fr 100% 1fr;
    grid-template-rows: auto minmax(100vh, max-content) auto;
}

*,
:after,
:before {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(59, 130, 246, .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(59, 130, 246, .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
}

/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/
*,
:after,
:before {
    box-sizing: border-box;
    border: 0 solid
}

:after,
:before {
    --tw-content: ""
}

:host,
html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent
}

body {
    margin: 0;
    line-height: inherit
}

hr {
    height: 0;
    color: inherit;
    border-top-width: 1px
}

abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit
}

a {
    color: inherit;
    text-decoration: inherit
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
pre,
samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    padding: 0
}

button,
select {
    text-transform: none
}

button,
input:where([type=button]),
input:where([type=reset]),
input:where([type=submit]) {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none
}

:-moz-focusring {
    outline: auto
}

:-moz-ui-invalid {
    box-shadow: none
}

progress {
    vertical-align: baseline
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

summary {
    display: list-item
}

blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
    margin: 0
}

fieldset {
    margin: 0
}

fieldset,
legend {
    padding: 0
}

menu,
ol,
ul {
    list-style: none;
    margin: 0;
    padding: 0
}

dialog {
    padding: 0
}

textarea {
    resize: vertical
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    opacity: 1;
    color: #9ca3af
}

input::placeholder,
textarea::placeholder {
    opacity: 1;
    color: #9ca3af
}

[role=button],
button {
    cursor: pointer
}

:disabled {
    cursor: default
}

audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
    display: block;
    vertical-align: middle
}

img,
video {
    max-width: 100%;
    height: auto
}

[hidden]:where(:not([hidden=until-found])) {
    display: none
}

:root {
    --tom-color-brand-default: #0086ff;
    --tom-color-brand-darker: #0075e2;
    --tom-color-brand-lighter: #2fa0fd;
    --tom-color-brand-default-inverted: #fff;
    --tom-color-brand-darker-inverted: #fff;
    --tom-color-brand-lighter-inverted: #edf8ff;
    --tom-color-on-brand-default: #fff;
    --tom-color-on-brand-darker: #fff;
    --tom-color-on-brand-lighter: #edf8ff;
    --tom-color-on-brand-default-inverted: #0086ff;
    --tom-color-on-brand-darker-inverted: #0075e2;
    --tom-color-on-brand-lighter-inverted: #2fa0fd;
    --tom-color-on-danger-default: #fff;
    --tom-color-on-danger-darker: #fff;
    --tom-color-on-danger-lighter: #fff6f7;
    --tom-color-on-danger-default-inverted: #d30d31;
    --tom-color-on-danger-darker-inverted: #b01636;
    --tom-color-on-danger-lighter-inverted: #e41c41;
    --tom-color-on-info-default: #fff;
    --tom-color-on-info-darker: #fff;
    --tom-color-on-info-lighter: #f6fcff;
    --tom-color-on-info-default-inverted: #08a8e7;
    --tom-color-on-info-darker-inverted: #0f9acb;
    --tom-color-on-info-lighter-inverted: #1fb7f3;
    --tom-color-on-interaction-default: #fff;
    --tom-color-on-interaction-darker: #fff;
    --tom-color-on-interaction-lighter: #edf8ff;
    --tom-color-on-interaction-default-inverted: #0086ff;
    --tom-color-on-interaction-darker-inverted: #0075e2;
    --tom-color-on-interaction-lighter-inverted: #2fa0fd;
    --tom-color-on-loyalty-default: #99620f;
    --tom-color-on-loyalty-darker: #fff8d7;
    --tom-color-on-loyalty-lighter: #99620f;
    --tom-color-on-loyalty-default-inverted: #f9c52e;
    --tom-color-on-loyalty-darker-inverted: #99620f;
    --tom-color-on-loyalty-lighter-inverted: #fed556;
    --tom-color-on-success-default: #fff;
    --tom-color-on-success-darker: #fff;
    --tom-color-on-success-lighter: #f9fff3;
    --tom-color-on-success-default-inverted: #4ea900;
    --tom-color-on-success-darker-inverted: #429502;
    --tom-color-on-success-lighter-inverted: #5ebe09;
    --tom-color-on-surface-1: #1e2428;
    --tom-color-on-surface-2: #343b3f;
    --tom-color-on-surface-3: #51585c;
    --tom-color-on-surface-4: #697277;
    --tom-color-on-surface-5: #949ea2;
    --tom-color-on-surface-6: #b8c1c4;
    --tom-color-on-surface-7: #d3dadd;
    --tom-color-on-surface-8: #e3e8ea;
    --tom-color-on-surface-9: #f0f3f4;
    --tom-color-on-surface-10: #fff;
    --tom-color-on-warning-default: #fff;
    --tom-color-on-warning-darker: #fff;
    --tom-color-on-warning-lighter: #fffdf0;
    --tom-color-on-warning-default-inverted: #ccac00;
    --tom-color-on-warning-darker-inverted: #997800;
    --tom-color-on-warning-lighter-inverted: #eac600;
    --tom-color-on-artic-100: #00c3d9;
    --tom-color-on-artic-200: #fff;
    --tom-color-on-artic-300: #fff;
    --tom-color-on-artic-400: #fff;
    --tom-color-on-artic-000: #00c3d9;
    --tom-color-on-blonde-100: #dfc018;
    --tom-color-on-blonde-200: #fff;
    --tom-color-on-blonde-300: #fff;
    --tom-color-on-blonde-400: #fff;
    --tom-color-on-blonde-000: #dfc018;
    --tom-color-on-blue-100: #0075e2;
    --tom-color-on-blue-200: #fff;
    --tom-color-on-blue-300: #fff;
    --tom-color-on-blue-400: #fff;
    --tom-color-on-blue-000: #0075e2;
    --tom-color-on-cyan-100: #0f9acb;
    --tom-color-on-cyan-200: #fff;
    --tom-color-on-cyan-300: #fff;
    --tom-color-on-cyan-400: #fff;
    --tom-color-on-cyan-500: #fff;
    --tom-color-on-cyan-000: #0f9acb;
    --tom-color-on-gold-100: #eeb510;
    --tom-color-on-gold-200: #fff;
    --tom-color-on-gold-300: #fff;
    --tom-color-on-gold-400: #fff;
    --tom-color-on-gold-500: #fff;
    --tom-color-on-gold-000: #eeb510;
    --tom-color-on-green-100: #429502;
    --tom-color-on-green-200: #fff;
    --tom-color-on-green-300: #fff;
    --tom-color-on-green-400: #fff;
    --tom-color-on-green-500: #fff;
    --tom-color-on-green-000: #429502;
    --tom-color-on-grey-100: #1e2428;
    --tom-color-on-grey-200: #1e2428;
    --tom-color-on-grey-300: #1e2428;
    --tom-color-on-grey-400: #1e2428;
    --tom-color-on-grey-500: #1e2428;
    --tom-color-on-grey-600: #fff;
    --tom-color-on-grey-700: #fff;
    --tom-color-on-grey-800: #fff;
    --tom-color-on-grey-900: #fff;
    --tom-color-on-grey-000: #1e2428;
    --tom-color-on-lime-100: #11c11b;
    --tom-color-on-lime-200: #fff;
    --tom-color-on-lime-300: #fff;
    --tom-color-on-lime-400: #fff;
    --tom-color-on-lime-000: #11c11b;
    --tom-color-on-pink-100: #eb2593;
    --tom-color-on-pink-200: #fff;
    --tom-color-on-pink-300: #fff;
    --tom-color-on-pink-400: #fff;
    --tom-color-on-pink-000: #eb2593;
    --tom-color-on-purple-100: #9110c2;
    --tom-color-on-purple-200: #fff;
    --tom-color-on-purple-300: #fff;
    --tom-color-on-purple-400: #fff;
    --tom-color-on-purple-000: #9110c2;
    --tom-color-on-red-100: #b01636;
    --tom-color-on-red-200: #fff;
    --tom-color-on-red-300: #fff;
    --tom-color-on-red-400: #fff;
    --tom-color-on-red-500: #fff;
    --tom-color-on-red-000: #b01636;
    --tom-color-on-scarlet-100: #e3172c;
    --tom-color-on-scarlet-200: #fff;
    --tom-color-on-scarlet-300: #fff;
    --tom-color-on-scarlet-400: #fff;
    --tom-color-on-scarlet-000: #e3172c;
    --tom-color-on-tangerine-100: #ec7712;
    --tom-color-on-tangerine-200: #fff;
    --tom-color-on-tangerine-300: #fff;
    --tom-color-on-tangerine-400: #fff;
    --tom-color-on-tangerine-000: #ec7712;
    --tom-color-on-yellow-100: #e5a400;
    --tom-color-on-yellow-200: #fff;
    --tom-color-on-yellow-300: #fff;
    --tom-color-on-yellow-400: #fff;
    --tom-color-on-yellow-500: #fff;
    --tom-color-on-yellow-000: #e5a400;
    --tom-color-danger-default: #d30d31;
    --tom-color-danger-darker: #b01636;
    --tom-color-danger-lighter: #e41c41;
    --tom-color-danger-default-inverted: #fff;
    --tom-color-danger-darker-inverted: #fff;
    --tom-color-danger-lighter-inverted: #fff6f7;
    --tom-color-info-default: #08a8e7;
    --tom-color-info-darker: #0f9acb;
    --tom-color-info-lighter: #1fb7f3;
    --tom-color-info-default-inverted: #fff;
    --tom-color-info-darker-inverted: #fff;
    --tom-color-info-lighter-inverted: #f6fcff;
    --tom-color-interaction-default: #0086ff;
    --tom-color-interaction-darker: #0075e2;
    --tom-color-interaction-lighter: #2fa0fd;
    --tom-color-interaction-default-inverted: #fff;
    --tom-color-interaction-darker-inverted: #fff;
    --tom-color-interaction-lighter-inverted: #edf8ff;
    --tom-color-loyalty-default: #f9c52e;
    --tom-color-loyalty-darker: #99620f;
    --tom-color-loyalty-lighter: #fed556;
    --tom-color-loyalty-default-inverted: #99620f;
    --tom-color-loyalty-darker-inverted: #fff8d7;
    --tom-color-loyalty-lighter-inverted: #99620f;
    --tom-color-success-default: #4ea900;
    --tom-color-success-darker: #429502;
    --tom-color-success-lighter: #5ebe09;
    --tom-color-success-default-inverted: #fff;
    --tom-color-success-darker-inverted: #fff;
    --tom-color-success-lighter-inverted: #f9fff3;
    --tom-color-surface-low: #f0f3f4;
    --tom-color-surface-high: #fff;
    --tom-color-surface-container-lowest: #fff;
    --tom-color-surface-container-lower: #f0f3f4;
    --tom-color-surface-container-low: #e3e8ea;
    --tom-color-surface-container-mid: #d3dadd;
    --tom-color-surface-container-high: #b8c1c4;
    --tom-color-surface-container-higher: #949ea2;
    --tom-color-surface-container-highest: #697277;
    --tom-color-warning-default: #ccac00;
    --tom-color-warning-darker: #997800;
    --tom-color-warning-lighter: #eac600;
    --tom-color-warning-default-inverted: #fff;
    --tom-color-warning-darker-inverted: #fff;
    --tom-color-warning-lighter-inverted: #fffdf0;
    --tom-color-artic-100: #cbf5fd;
    --tom-color-artic-200: #2bd7ee;
    --tom-color-artic-300: #00cce4;
    --tom-color-artic-400: #00c3d9;
    --tom-color-artic-000: #f2fdff;
    --tom-color-blonde-100: #fff9cb;
    --tom-color-blonde-200: #ffe868;
    --tom-color-blonde-300: #fbdc31;
    --tom-color-blonde-400: #dfc018;
    --tom-color-blonde-000: #fffbed;
    --tom-color-blue-100: #d8f3ff;
    --tom-color-blue-200: #2fa0fd;
    --tom-color-blue-300: #0086ff;
    --tom-color-blue-400: #0075e2;
    --tom-color-blue-000: #edf8ff;
    --tom-color-cyan-100: #dbf5ff;
    --tom-color-cyan-200: #1fb7f3;
    --tom-color-cyan-300: #08a8e7;
    --tom-color-cyan-400: #0f9acb;
    --tom-color-cyan-500: #095e7b;
    --tom-color-cyan-000: #f6fcff;
    --tom-color-gold-100: #fff8d7;
    --tom-color-gold-200: #fed556;
    --tom-color-gold-300: #f9c52e;
    --tom-color-gold-400: #eeb510;
    --tom-color-gold-500: #99620f;
    --tom-color-gold-000: #faf6ea;
    --tom-color-green-100: #ebfdd9;
    --tom-color-green-200: #5ebe09;
    --tom-color-green-300: #4ea900;
    --tom-color-green-400: #429502;
    --tom-color-green-500: #2d6501;
    --tom-color-green-000: #f9fff3;
    --tom-color-grey-100: #f0f3f4;
    --tom-color-grey-200: #e3e8ea;
    --tom-color-grey-300: #d3dadd;
    --tom-color-grey-400: #b8c1c4;
    --tom-color-grey-500: #949ea2;
    --tom-color-grey-600: #697277;
    --tom-color-grey-700: #51585c;
    --tom-color-grey-800: #343b3f;
    --tom-color-grey-900: #1e2428;
    --tom-color-grey-000: #fff;
    --tom-color-lime-100: #d9fdda;
    --tom-color-lime-200: #3be33f;
    --tom-color-lime-300: #21d427;
    --tom-color-lime-400: #11c11b;
    --tom-color-lime-000: #f5fff5;
    --tom-color-pink-100: #ffd8ed;
    --tom-color-pink-200: #ff62b7;
    --tom-color-pink-300: #fc3ea7;
    --tom-color-pink-400: #eb2593;
    --tom-color-pink-000: #fff0f7;
    --tom-color-purple-100: #f9deff;
    --tom-color-purple-200: #b532ec;
    --tom-color-purple-300: #a320de;
    --tom-color-purple-400: #9110c2;
    --tom-color-purple-000: #fdf5ff;
    --tom-color-red-100: #ffdee2;
    --tom-color-red-200: #e41c41;
    --tom-color-red-300: #d30d31;
    --tom-color-red-400: #b01636;
    --tom-color-red-500: #831028;
    --tom-color-red-000: #fff6f7;
    --tom-color-scarlet-100: #ffe0e6;
    --tom-color-scarlet-200: #ff455c;
    --tom-color-scarlet-300: #fc2a41;
    --tom-color-scarlet-400: #e3172c;
    --tom-color-scarlet-000: #fff5f6;
    --tom-color-tangerine-100: #ffe6d3;
    --tom-color-tangerine-200: #ff9e4d;
    --tom-color-tangerine-300: #fd8a25;
    --tom-color-tangerine-400: #ec7712;
    --tom-color-tangerine-000: #fff5f0;
    --tom-color-yellow-100: #fff6cc;
    --tom-color-yellow-200: #fed34e;
    --tom-color-yellow-300: #f8bf1b;
    --tom-color-yellow-400: #e5a400;
    --tom-color-yellow-500: #b25f00;
    --tom-color-yellow-000: #fffdf0;
    --tom-color-trademark-color-whatsapp: #29a71a;
    --tom-color-trademark-color-aliexpress: #ff2751;
    --tom-border-none: 0;
    --tom-border-thin: 1px;
    --tom-border-medium: 2px;
    --tom-border-thick: 3px;
    --tom-border-thicker: 4px;
    --tom-elevation-none: none;
    --tom-elevation-sm: 0px 4px 7px rgba(0, 0, 0, .04), 0px 1.92921px 0.876509px rgba(0, 0, 0, .015);
    --tom-elevation-md: 0px 9px 14px 2px rgba(0, 0, 0, .05), 0px 2.64715px 0.931014px 2px rgba(0, 0, 0, .018), 0px 5.0715px 3.12708px 2px rgba(0, 0, 0, .002);
    --tom-elevation-lg: 0px 24px 36px 2px rgba(0, 0, 0, .05), 0px 15.9152px 10.8529px 2px rgba(0, 0, 0, .017), 0px 9.91213px 4.50776px 2px rgba(0, 0, 0, .01), 0px 5.32265px 1.63037px 2px rgba(0, 0, 0, .006);
    --tom-opacity-0: 0;
    --tom-opacity-10: 0.1;
    --tom-opacity-20: 0.2;
    --tom-opacity-30: 0.3;
    --tom-opacity-40: 0.4;
    --tom-opacity-50: 0.5;
    --tom-opacity-60: 0.6;
    --tom-opacity-70: 0.7;
    --tom-opacity-80: 0.8;
    --tom-opacity-90: 0.9;
    --tom-radius-none: 0;
    --tom-radius-xsm: 2px;
    --tom-radius-sm: 4px;
    --tom-radius-md: 8px;
    --tom-radius-lg: 12px;
    --tom-radius-xlg: 16px;
    --tom-radius-2xlg: 24px;
    --tom-radius-full: 9999px;
    --tom-screen-android-min: 360px;
    --tom-screen-android-max: 743px;
    --tom-screen-ios-min: 375px;
    --tom-screen-ios-max: 743px;
    --tom-screen-responsive-min: 360px;
    --tom-screen-responsive-max: 1440px;
    --tom-screen-breakpoints-sm: 360px;
    --tom-screen-breakpoints-md: 744px;
    --tom-screen-breakpoints-lg: 1024px;
    --tom-screen-breakpoints-xlg: 1280px;
    --tom-spacing-3xsm: 2px;
    --tom-spacing-2xsm: 4px;
    --tom-spacing-xsm: 8px;
    --tom-spacing-sm: 12px;
    --tom-spacing-md: 16px;
    --tom-spacing-lg: 24px;
    --tom-spacing-xlg: 32px;
    --tom-spacing-2xlg: 40px;
    --tom-spacing-3xlg: 48px;
    --tom-spacing-hg: 64px;
    --tom-spacing-xhg: 80px;
    --tom-spacing-2xhg: 96px;
    --tom-font-family: "Magalu UI", Tahoma, sans-serif;
    --tom-font-DEFAULT: 400 16px/18px "Magalu UI", Tahoma, sans-serif;
    --tom-font-4xlg-regular: 400 55px/62px "Magalu UI", Tahoma, sans-serif;
    --tom-font-4xlg-medium: 500 55px/62px "Magalu UI", Tahoma, sans-serif;
    --tom-font-4xlg-bold: 560 55px/62px "Magalu UI", Tahoma, sans-serif;
    --tom-font-3xlg-regular: 400 44px/50px "Magalu UI", Tahoma, sans-serif;
    --tom-font-3xlg-medium: 500 44px/50px "Magalu UI", Tahoma, sans-serif;
    --tom-font-3xlg-bold: 560 44px/50px "Magalu UI", Tahoma, sans-serif;
    --tom-font-2xlg-regular: 400 35px/40px "Magalu UI", Tahoma, sans-serif;
    --tom-font-2xlg-medium: 500 35px/40px "Magalu UI", Tahoma, sans-serif;
    --tom-font-2xlg-bold: 560 35px/40px "Magalu UI", Tahoma, sans-serif;
    --tom-font-xlg-regular: 400 28px/32px "Magalu UI", Tahoma, sans-serif;
    --tom-font-xlg-medium: 500 28px/32px "Magalu UI", Tahoma, sans-serif;
    --tom-font-xlg-bold: 560 28px/32px "Magalu UI", Tahoma, sans-serif;
    --tom-font-lg-regular: 400 22px/28px "Magalu UI", Tahoma, sans-serif;
    --tom-font-lg-medium: 500 22px/28px "Magalu UI", Tahoma, sans-serif;
    --tom-font-lg-bold: 560 22px/28px "Magalu UI", Tahoma, sans-serif;
    --tom-font-md-regular: 400 20px/26px "Magalu UI", Tahoma, sans-serif;
    --tom-font-md-medium: 500 20px/26px "Magalu UI", Tahoma, sans-serif;
    --tom-font-md-bold: 560 20px/26px "Magalu UI", Tahoma, sans-serif;
    --tom-font-sm-regular: 400 18px/26px "Magalu UI", Tahoma, sans-serif;
    --tom-font-sm-medium: 500 18px/26px "Magalu UI", Tahoma, sans-serif;
    --tom-font-sm-bold: 560 18px/26px "Magalu UI", Tahoma, sans-serif;
    --tom-font-xsm-regular: 400 16px/18px "Magalu UI", Tahoma, sans-serif;
    --tom-font-xsm-medium: 500 16px/18px "Magalu UI", Tahoma, sans-serif;
    --tom-font-xsm-bold: 560 16px/18px "Magalu UI", Tahoma, sans-serif;
    --tom-font-2xsm-regular: 400 14px/16px "Magalu UI", Tahoma, sans-serif;
    --tom-font-2xsm-medium: 500 14px/16px "Magalu UI", Tahoma, sans-serif;
    --tom-font-2xsm-bold: 560 14px/16px "Magalu UI", Tahoma, sans-serif;
    --tom-font-3xsm-regular: 400 12px/14px "Magalu UI", Tahoma, sans-serif;
    --tom-font-3xsm-medium: 500 12px/14px "Magalu UI", Tahoma, sans-serif;
    --tom-font-3xsm-bold: 560 12px/14px "Magalu UI", Tahoma, sans-serif;
    --tom-font-4xsm-regular: 400 10px/14px "Magalu UI", Tahoma, sans-serif;
    --tom-font-4xsm-medium: 500 10px/14px "Magalu UI", Tahoma, sans-serif;
    --tom-font-4xsm-bold: 560 10px/14px "Magalu UI", Tahoma, sans-serif
}

*,
:after,
:before {
    border: 0 solid;
    box-sizing: inherit
}

html {
    box-sizing: border-box
}

body {
    font: var(--tom-font-DEFAULT);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased
}

@font-face {
    font-family: Magalu UI;
    font-display: swap;
    src: url(https://m.magazineluiza.com.br/tom/fonts/magalu-ui-variable/files/MagaluUIVariable.woff2) format("woff2")
}

.theme-black-friday {
    --tom-color-brand-default: #1e2428;
    --tom-color-brand-darker: #343b3f;
    --tom-color-brand-lighter: #51585c;
    --tom-color-brand-default-inverted: #fff;
    --tom-color-brand-darker-inverted: #fff;
    --tom-color-brand-lighter-inverted: #fff;
    --tom-color-on-brand-default: #fff;
    --tom-color-on-brand-darker: #fff;
    --tom-color-on-brand-lighter: #fff;
    --tom-color-on-brand-default-inverted: #1e2428;
    --tom-color-on-brand-darker-inverted: #343b3f;
    --tom-color-on-brand-lighter-inverted: #51585c
}

.theme-lf {
    --tom-color-brand-default: #bd021d;
    --tom-color-brand-darker: #a40018;
    --tom-color-brand-default-inverted: #fff;
    --tom-color-brand-darker-inverted: #fff;
    --tom-color-on-brand-default: #fff;
    --tom-color-on-brand-darker: #fff;
    --tom-color-on-brand-default-inverted: #bd021d;
    --tom-color-on-brand-darker-inverted: #a40018
}

.theme-payday {
    --tom-color-brand-default: #040949;
    --tom-color-brand-darker: #020634;
    --tom-color-brand-default-inverted: #fff;
    --tom-color-brand-darker-inverted: #fff;
    --tom-color-on-brand-default: #fff;
    --tom-color-on-brand-darker: #fff;
    --tom-color-on-brand-default-inverted: #040949;
    --tom-color-on-brand-darker-inverted: #020634
}

@keyframes bottom-sheet-sticky {
    0% {
        top: 50%
    }

    to {
        top: 0
    }
}

@keyframes dialog-sticky {
    0% {
        top: 50%
    }

    to {
        top: 0
    }
}

@font-face {
    font-family: tom-icons;
    font-display: block;
    src: url(https://m.magazineluiza.com.br/tom/icons/1.45.0/font/tom-icons.ttf) format("truetype"), url(https://m.magazineluiza.com.br/tom/icons/1.45.0/font/tom-icons.woff) format("woff"), url(https://m.magazineluiza.com.br/tom/icons/1.45.0/font/tom-icons.woff2) format("woff2")
}

@keyframes ripple-pressed {
    0% {
        background-color: var(--tom-color-surface-container-low)
    }

    50% {
        background-color: var(--tom-color-surface-container-high)
    }

    to {
        background-color: var(--tom-color-surface-container-low)
    }
}

@keyframes tab-indicator-show {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.container {
    width: 100%
}

@media (min-width:360px) {
    .container {
        max-width: 360px
    }
}

@media (min-width:744px) {
    .container {
        max-width: 744px
    }
}

@media (min-width:1024px) {
    .container {
        max-width: 1024px
    }
}

@media (min-width:1280px) {
    .container {
        max-width: 1280px
    }
}

@media (min-width:1536px) {
    .container {
        max-width: 1536px
    }
}

.info {
    background-color: var(--tom-color-interaction-lighter-inverted);
    border-color: var(--tom-color-on-interaction-lighter-inverted);
    border-radius: var(--tom-radius-md);
    border-width: var(--tom-border-thin)
}

.info.alert-feedback-icon:before {
    width: var(--tom-spacing-lg);
    height: var(--tom-spacing-lg);
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    line-height: 1;
    font-size: var(--tom-spacing-lg);
    margin-right: var(--tom-spacing-sm);
    align-self: start;
    content: "\f175";
    color: var(--tom-color-on-interaction-lighter-inverted)
}

.success {
    background-color: var(--tom-color-success-lighter-inverted);
    border-color: var(--tom-color-on-success-lighter-inverted);
    border-radius: var(--tom-radius-md);
    border-width: var(--tom-border-thin)
}

.success.alert-feedback-icon:before {
    width: var(--tom-spacing-lg);
    height: var(--tom-spacing-lg);
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    line-height: 1;
    font-size: var(--tom-spacing-lg);
    margin-right: var(--tom-spacing-sm);
    align-self: start;
    content: "\f14a";
    color: var(--tom-color-on-success-lighter-inverted)
}

.warning {
    background-color: var(--tom-color-warning-lighter-inverted);
    border-color: var(--tom-color-on-warning-lighter-inverted);
    border-radius: var(--tom-radius-md);
    border-width: var(--tom-border-thin)
}

.warning.alert-feedback-icon:before {
    width: var(--tom-spacing-lg);
    height: var(--tom-spacing-lg);
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    line-height: 1;
    font-size: var(--tom-spacing-lg);
    margin-right: var(--tom-spacing-sm);
    align-self: start;
    content: "\f1c1";
    color: var(--tom-color-on-warning-lighter-inverted)
}

.error {
    background-color: var(--tom-color-danger-lighter-inverted);
    border-color: var(--tom-color-on-danger-lighter-inverted);
    border-radius: var(--tom-radius-md);
    border-width: var(--tom-border-thin)
}

.error.alert-feedback-icon:before {
    width: var(--tom-spacing-lg);
    height: var(--tom-spacing-lg);
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    line-height: 1;
    font-size: var(--tom-spacing-lg);
    margin-right: var(--tom-spacing-sm);
    align-self: start;
    content: "\f175";
    color: var(--tom-color-on-danger-lighter-inverted)
}

.badge {
    display: inline-block;
    text-align: center;
    border-radius: 123px;
    color: var(--tom-color-surface-container-lowest);
    border-color: var(--tom-color-interaction-default);
    background-color: var(--tom-color-interaction-default);
    padding: var(--tom-spacing-2xsm);
    font: var(--tom-font-2xsm-medium);
    line-height: 1;
    min-width: 22px;
    max-width: 31px
}

.bottom-sheet {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    visibility: hidden;
    opacity: 0;
    transition: .1s linear
}

.bottom-sheet.visible {
    visibility: visible;
    opacity: 1
}

.bottom-sheet.visible .bottom-sheet-container {
    transform: translateY(0)
}

.bottom-sheet .bottom-sheet-overlay {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--tom-color-surface-container-highest);
    opacity: var(--tom-opacity-50);
    z-index: 999998
}

.bottom-sheet .bottom-sheet-container {
    position: fixed;
    flex-direction: column;
    bottom: 0;
    z-index: 999999;
    max-height: 100%;
    overflow-y: auto;
    transform: translateY(100%);
    transition: .4s ease
}

.bottom-sheet .bottom-sheet-container,
.bottom-sheet .bottom-sheet-container .bottom-sheet-header {
    display: flex;
    width: 100%;
    height: auto;
    background-color: var(--tom-color-surface-container-lowest);
    border-top-left-radius: var(--tom-radius-2xlg);
    border-top-right-radius: var(--tom-radius-2xlg)
}

.bottom-sheet .bottom-sheet-container .bottom-sheet-header {
    position: sticky;
    justify-content: space-between;
    align-items: center;
    top: 0;
    left: 0;
    padding: var(--tom-spacing-lg) var(--tom-spacing-md) var(--tom-spacing-md);
    border-bottom: var(--tom-border-thin) solid var(--tom-color-surface-container-mid);
    gap: var(--tom-spacing-xlg)
}

.bottom-sheet .bottom-sheet-container .bottom-sheet-header .bottom-sheet-close {
    position: relative;
    display: inline-flex;
    align-items: center;
    border-radius: var(--tom-radius-2xlg);
    padding: var(--tom-spacing-2xsm);
    background-color: var(--tom-color-surface-container-low)
}

.bottom-sheet .bottom-sheet-container .bottom-sheet-header .bottom-sheet-close:before {
    width: var(--tom-spacing-lg);
    height: var(--tom-spacing-lg);
    content: "\f151";
    color: var(--tom-color-on-surface-3);
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    line-height: 1;
    font-size: var(--tom-spacing-lg)
}

.bottom-sheet .bottom-sheet-container .bottom-sheet-content {
    padding: var(--tom-spacing-lg) var(--tom-spacing-md);
    flex-grow: 3
}

.bottom-sheet .bottom-sheet-container .bottom-sheet-footer {
    position: sticky;
    display: block;
    width: 100%;
    height: auto;
    bottom: 0;
    left: 0;
    padding: var(--tom-spacing-md);
    background-color: var(--tom-color-surface-container-lowest);
    border-top: var(--tom-border-thin) solid var(--tom-color-surface-container-mid)
}

.bottom-sheet.bottom-sheet-full .bottom-sheet-container {
    height: 100%
}

@supports (animation-timeline:scroll()) {
    .bottom-sheet.bottom-sheet-sticky .bottom-sheet-container {
        min-height: 50%;
        top: 50%;
        animation: bottom-sheet-sticky linear;
        animation-timeline: scroll(self block)
    }
}

.btn {
    align-items: center;
    display: inline-flex;
    border: 1px solid;
    border-radius: var(--tom-radius-md);
    font: var(--tom-font-xsm-bold);
    gap: var(--tom-spacing-2xsm);
    padding: var(--tom-spacing-xsm) var(--tom-spacing-sm);
    background-color: var(--tom-color-interaction-default);
    border-color: var(--tom-color-interaction-default);
    color: var(--tom-color-on-interaction-default)
}

.btn:hover {
    background-color: var(--tom-color-interaction-lighter);
    border-color: var(--tom-color-on-interaction-lighter)
}

.btn:active {
    background-color: var(--tom-color-interaction-darker);
    border-color: var(--tom-color-on-interaction-darker)
}

.btn.disabled,
.btn:disabled {
    background-color: var(--tom-color-surface-container-low);
    border-color: var(--tom-color-surface-container-low);
    color: var(--tom-color-on-surface-5);
    cursor: not-allowed;
    pointer-events: none
}

.btn-sm {
    align-items: center;
    display: inline-flex;
    border: 1px solid;
    border-radius: var(--tom-radius-md);
    font: var(--tom-font-xsm-bold);
    gap: var(--tom-spacing-2xsm);
    padding: var(--tom-spacing-2xsm) var(--tom-spacing-sm);
    background-color: var(--tom-color-interaction-default);
    border-color: var(--tom-color-interaction-default);
    color: var(--tom-color-on-interaction-default)
}

.btn-sm:hover {
    background-color: var(--tom-color-interaction-lighter);
    border-color: var(--tom-color-on-interaction-lighter)
}

.btn-sm:active {
    background-color: var(--tom-color-interaction-darker);
    border-color: var(--tom-color-on-interaction-darker)
}

.btn-sm.disabled,
.btn-sm:disabled {
    background-color: var(--tom-color-surface-container-low);
    border-color: var(--tom-color-surface-container-low);
    color: var(--tom-color-on-surface-5);
    cursor: not-allowed;
    pointer-events: none
}

.btn-md {
    align-items: center;
    display: inline-flex;
    border: 1px solid;
    border-radius: var(--tom-radius-md);
    font: var(--tom-font-xsm-bold);
    gap: var(--tom-spacing-2xsm);
    padding: var(--tom-spacing-xsm) var(--tom-spacing-sm);
    background-color: var(--tom-color-interaction-default);
    border-color: var(--tom-color-interaction-default);
    color: var(--tom-color-on-interaction-default)
}

.btn-md:hover {
    background-color: var(--tom-color-interaction-lighter);
    border-color: var(--tom-color-on-interaction-lighter)
}

.btn-md:active {
    background-color: var(--tom-color-interaction-darker);
    border-color: var(--tom-color-on-interaction-darker)
}

.btn-md.disabled,
.btn-md:disabled {
    background-color: var(--tom-color-surface-container-low);
    border-color: var(--tom-color-surface-container-low);
    color: var(--tom-color-on-surface-5);
    cursor: not-allowed;
    pointer-events: none
}

.btn-lg {
    align-items: center;
    display: inline-flex;
    border: 1px solid;
    border-radius: var(--tom-radius-lg);
    font: var(--tom-font-xsm-bold);
    gap: var(--tom-spacing-xsm);
    padding: var(--tom-spacing-sm) var(--tom-spacing-md);
    background-color: var(--tom-color-interaction-default);
    border-color: var(--tom-color-interaction-default);
    color: var(--tom-color-on-interaction-default)
}

.btn-lg:hover {
    background-color: var(--tom-color-interaction-lighter);
    border-color: var(--tom-color-on-interaction-lighter)
}

.btn-lg:active {
    background-color: var(--tom-color-interaction-darker);
    border-color: var(--tom-color-on-interaction-darker)
}

.btn-lg.disabled,
.btn-lg:disabled {
    background-color: var(--tom-color-surface-container-low);
    border-color: var(--tom-color-surface-container-low);
    color: var(--tom-color-on-surface-5);
    cursor: not-allowed;
    pointer-events: none
}

.btn-outline {
    background-color: transparent;
    border-color: var(--tom-color-interaction-default);
    color: var(--tom-color-on-interaction-default-inverted)
}

.btn-outline:hover {
    background-color: transparent;
    border-color: var(--tom-color-interaction-lighter);
    color: var(--tom-color-on-interaction-lighter-inverted)
}

.btn-outline:active {
    background-color: var(--tom-color-surface-container-mid);
    border-color: var(--tom-color-interaction-darker);
    color: var(--tom-color-on-interaction-darker-inverted)
}

.btn-outline.disabled,
.btn-outline:disabled {
    background-color: transparent;
    border-color: var(--tom-color-on-surface-5);
    color: var(--tom-color-on-surface-5);
    cursor: not-allowed;
    pointer-events: none
}

.btn-invisible {
    color: var(--tom-color-on-interaction-default-inverted)
}

.btn-invisible,
.btn-invisible:hover {
    background-color: transparent;
    border-color: transparent
}

.btn-invisible:hover {
    color: var(--tom-color-on-interaction-lighter-inverted)
}

.btn-invisible:active {
    background-color: var(--tom-color-surface-container-mid);
    border-color: var(--tom-color-surface-container-mid);
    color: var(--tom-color-on-interaction-darker-inverted)
}

.btn-invisible.disabled,
.btn-invisible:disabled {
    background-color: transparent;
    border-color: transparent;
    color: var(--tom-color-on-surface-5);
    cursor: not-allowed;
    pointer-events: none
}

.btn-inverted {
    background-color: var(--tom-color-interaction-default-inverted);
    border-color: var(--tom-color-interaction-default-inverted);
    color: var(--tom-color-on-interaction-default-inverted)
}

.btn-inverted:hover {
    background-color: var(--tom-color-interaction-lighter-inverted);
    border-color: var(--tom-color-interaction-lighter-inverted);
    color: var(--tom-color-on-interaction-lighter-inverted)
}

.btn-inverted:active {
    background-color: var(--tom-color-surface-container-mid);
    border-color: var(--tom-color-surface-container-mid);
    color: var(--tom-color-on-interaction-darker-inverted)
}

.btn-inverted.disabled,
.btn-inverted:disabled {
    background-color: var(--tom-color-surface-container-lowest);
    border-color: var(--tom-color-surface-container-lowest);
    color: var(--tom-color-on-surface-5);
    cursor: not-allowed;
    pointer-events: none
}

.btn-success {
    background-color: var(--tom-color-success-default);
    border-color: var(--tom-color-success-default);
    color: var(--tom-color-on-success-default)
}

.btn-success:hover {
    background-color: var(--tom-color-success-lighter);
    border-color: var(--tom-color-on-success-lighter)
}

.btn-success:active {
    background-color: var(--tom-color-success-darker);
    border-color: var(--tom-color-on-success-darker)
}

.btn-success.disabled,
.btn-success:disabled {
    background-color: var(--tom-color-surface-container-low);
    border-color: var(--tom-color-surface-container-low);
    color: var(--tom-color-on-surface-5);
    cursor: not-allowed;
    pointer-events: none
}

.btn-success-outline {
    background-color: transparent;
    border-color: var(--tom-color-success-default);
    color: var(--tom-color-on-success-default-inverted)
}

.btn-success-outline:hover {
    background-color: transparent;
    border-color: var(--tom-color-success-lighter);
    color: var(--tom-color-on-success-lighter-inverted)
}

.btn-success-outline:active {
    background-color: var(--tom-color-surface-container-mid);
    border-color: var(--tom-color-success-darker);
    color: var(--tom-color-on-success-darker-inverted)
}

.btn-success-outline.disabled,
.btn-success-outline:disabled {
    background-color: transparent;
    border-color: var(--tom-color-on-surface-5);
    color: var(--tom-color-on-surface-5);
    cursor: not-allowed;
    pointer-events: none
}

.btn-success-invisible {
    color: var(--tom-color-on-success-default-inverted)
}

.btn-success-invisible,
.btn-success-invisible:hover {
    background-color: transparent;
    border-color: transparent
}

.btn-success-invisible:hover {
    color: var(--tom-color-on-success-lighter-inverted)
}

.btn-success-invisible:active {
    background-color: var(--tom-color-surface-container-mid);
    border-color: var(--tom-color-surface-container-mid);
    color: var(--tom-color-on-success-darker-inverted)
}

.btn-success-invisible.disabled,
.btn-success-invisible:disabled {
    background-color: transparent;
    border-color: transparent;
    color: var(--tom-color-on-surface-5);
    cursor: not-allowed;
    pointer-events: none
}

.btn-success-inverted {
    background-color: var(--tom-color-success-default-inverted);
    border-color: var(--tom-color-success-default-inverted);
    color: var(--tom-color-on-success-default-inverted)
}

.btn-success-inverted:hover {
    background-color: var(--tom-color-success-lighter-inverted);
    border-color: var(--tom-color-success-lighter-inverted);
    color: var(--tom-color-on-success-lighter-inverted)
}

.btn-success-inverted:active {
    background-color: var(--tom-color-surface-container-mid);
    border-color: var(--tom-color-surface-container-mid);
    color: var(--tom-color-on-success-darker-inverted)
}

.btn-success-inverted.disabled,
.btn-success-inverted:disabled {
    background-color: var(--tom-color-surface-container-lowest);
    border-color: var(--tom-color-surface-container-lowest);
    color: var(--tom-color-on-surface-5);
    cursor: not-allowed;
    pointer-events: none
}

.btn-danger {
    background-color: var(--tom-color-danger-default);
    border-color: var(--tom-color-danger-default);
    color: var(--tom-color-on-danger-default)
}

.btn-danger:hover {
    background-color: var(--tom-color-danger-lighter);
    border-color: var(--tom-color-on-danger-lighter)
}

.btn-danger:active {
    background-color: var(--tom-color-danger-darker);
    border-color: var(--tom-color-on-danger-darker)
}

.btn-danger.disabled,
.btn-danger:disabled {
    background-color: var(--tom-color-surface-container-low);
    border-color: var(--tom-color-surface-container-low);
    color: var(--tom-color-on-surface-5);
    cursor: not-allowed;
    pointer-events: none
}

.btn-danger-outline {
    background-color: transparent;
    border-color: var(--tom-color-danger-default);
    color: var(--tom-color-on-danger-default-inverted)
}

.btn-danger-outline:hover {
    background-color: transparent;
    border-color: var(--tom-color-danger-lighter);
    color: var(--tom-color-on-danger-lighter-inverted)
}

.btn-danger-outline:active {
    background-color: var(--tom-color-surface-container-mid);
    border-color: var(--tom-color-danger-darker);
    color: var(--tom-color-on-danger-darker-inverted)
}

.btn-danger-outline.disabled,
.btn-danger-outline:disabled {
    background-color: transparent;
    border-color: var(--tom-color-on-surface-5);
    color: var(--tom-color-on-surface-5);
    cursor: not-allowed;
    pointer-events: none
}

.btn-danger-invisible {
    color: var(--tom-color-on-danger-default-inverted)
}

.btn-danger-invisible,
.btn-danger-invisible:hover {
    background-color: transparent;
    border-color: transparent
}

.btn-danger-invisible:hover {
    color: var(--tom-color-on-danger-lighter-inverted)
}

.btn-danger-invisible:active {
    background-color: var(--tom-color-surface-container-mid);
    border-color: var(--tom-color-surface-container-mid);
    color: var(--tom-color-on-danger-darker-inverted)
}

.btn-danger-invisible.disabled,
.btn-danger-invisible:disabled {
    background-color: transparent;
    border-color: transparent;
    color: var(--tom-color-on-surface-5);
    cursor: not-allowed;
    pointer-events: none
}

.btn-danger-inverted {
    background-color: var(--tom-color-danger-default-inverted);
    border-color: var(--tom-color-danger-default-inverted);
    color: var(--tom-color-on-danger-default-inverted)
}

.btn-danger-inverted:hover {
    background-color: var(--tom-color-danger-lighter-inverted);
    border-color: var(--tom-color-danger-lighter-inverted);
    color: var(--tom-color-on-danger-lighter-inverted)
}

.btn-danger-inverted:active {
    background-color: var(--tom-color-surface-container-mid);
    border-color: var(--tom-color-surface-container-mid);
    color: var(--tom-color-on-danger-darker-inverted)
}

.btn-danger-inverted.disabled,
.btn-danger-inverted:disabled {
    background-color: var(--tom-color-surface-container-lowest);
    border-color: var(--tom-color-surface-container-lowest);
    color: var(--tom-color-on-surface-5);
    cursor: not-allowed;
    pointer-events: none
}

.checkbox-group {
    width: -moz-fit-content;
    width: fit-content;
    box-sizing: content-box;
    position: relative;
    display: flex;
    align-items: center
}

.checkbox-group>.title {
    position: absolute;
    left: 22px;
    color: var(--tom-color-on-surface-3);
    margin-left: var(--tom-spacing-xsm);
    font: var(--tom-font-sm-regular);
    cursor: pointer;
    z-index: 1
}

.checkbox-group>.ripple {
    box-sizing: unset;
    position: absolute;
    height: 22px;
    width: 22px;
    padding: 11px;
    background-color: var(--tom-color-surface-container-low);
    border-radius: 50%;
    left: -11px;
    z-index: 0;
    opacity: 0;
    transform-origin: center center;
    transition: opacity 375ms linear
}

.checkbox-group>.mark {
    display: none;
    position: absolute
}

.checkbox-group>.mark:before {
    width: 11px;
    left: 7px;
    top: -1px;
    transform: rotate(-45deg)
}

.checkbox-group>.mark:after,
.checkbox-group>.mark:before {
    position: absolute;
    content: "";
    display: block;
    border-radius: var(--tom-radius-xsm);
    height: 0;
    border: 1px solid;
    color: var(--tom-color-on-interaction-default);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    pointer-events: none;
    z-index: 2
}

.checkbox-group>.mark:after {
    width: 6px;
    left: 3px;
    top: 1px;
    transform: rotate(45deg)
}

.checkbox-group>.checkbox {
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 2px solid;
    border-color: var(--tom-color-surface-container-higher);
    border-radius: var(--tom-radius-sm);
    cursor: pointer;
    height: 22px;
    outline: none;
    width: 22px;
    z-index: 1
}

.checkbox-group>.checkbox:checked~.unchecked,
.checkbox-group>.checkbox:not(:checked)~.checked {
    display: none
}

.checkbox-group>.checkbox:checked~.checked,
.checkbox-group>.checkbox:not(:checked)~.unchecked {
    position: absolute;
    display: inline-flex;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1
}

.checkbox-group>.checkbox:hover:not(:disabled) {
    border-color: var(--tom-color-surface-container-highest)
}

.checkbox-group>.checkbox:hover:not(:disabled)~.ripple {
    opacity: 1;
    transform-origin: center center;
    transition: opacity 375ms linear
}

.checkbox-group>.checkbox:disabled {
    cursor: not-allowed
}

.checkbox-group>.checkbox:disabled~.ripple {
    display: none
}

.checkbox-group>.checkbox:disabled~.title {
    cursor: not-allowed
}

.checkbox-group>.checkbox:disabled:checked,
.checkbox-group>.checkbox:disabled:indeterminate {
    background-color: var(--tom-color-surface-container-higher);
    border-color: var(--tom-color-surface-container-higher)
}

.checkbox-group>.checkbox:disabled:checked:hover,
.checkbox-group>.checkbox:disabled:indeterminate:hover {
    background-color: var(--tom-color-surface-container-higher);
    border-color: var(--tom-color-surface-container-higher)
}

.checkbox-group>.checkbox:checked,
.checkbox-group>.checkbox:indeterminate {
    background-color: var(--tom-color-interaction-default);
    border-color: var(--tom-color-interaction-default)
}

.checkbox-group>.checkbox:checked:hover,
.checkbox-group>.checkbox:indeterminate:hover {
    background-color: var(--tom-color-interaction-lighter);
    border-color: var(--tom-color-interaction-lighter)
}

.checkbox-group>.checkbox:checked~.ripple {
    animation: ripple-pressed .5s
}

.checkbox-group>.checkbox:checked~.mark {
    display: block
}

.checkbox-group>.checkbox:indeterminate~.mark {
    display: block
}

.checkbox-group>.checkbox:indeterminate~.mark:before {
    display: block;
    transform: none;
    left: 50%;
    margin-left: 4px
}

.checkbox-group>.checkbox:indeterminate~.mark:after {
    display: none
}

.checkbox-group>.transparent {
    border: none !important;
    background-color: transparent !important
}

.chip {
    align-items: center;
    display: inline-flex;
    border: 1px solid;
    border-radius: var(--tom-radius-2xlg);
    cursor: pointer;
    font: var(--tom-font-xsm-regular);
    gap: var(--tom-spacing-2xsm);
    padding: var(--tom-spacing-xsm) var(--tom-spacing-sm)
}

.chip>.chip-action[class*=icon-],
.chip>.chip-icon[class*=icon-] {
    font-size: var(--tom-spacing-lg);
    height: var(--tom-spacing-lg);
    width: var(--tom-spacing-lg)
}

.chip>.chip-icon+.chip-text,
.chip>.chip-text+.chip-action {
    padding-left: var(--tom-spacing-xsm)
}

.chip>.input.text {
    font: var(--tom-font-xsm-regular)
}

.chip {
    background-color: var(--tom-color-surface-container-lowest);
    border-color: var(--tom-color-on-surface-9);
    color: var(--tom-color-on-surface-3)
}

.chip:hover {
    background-color: var(--tom-color-surface-container-mid);
    color: var(--tom-color-on-surface-2)
}

.chip.selected,
.selected>.chip {
    background-color: var(--tom-color-interaction-default);
    color: var(--tom-color-on-interaction-default)
}

.chip.disabled,
.disabled>.chip {
    background-color: var(--tom-color-surface-container-low);
    color: var(--tom-color-on-surface-5);
    cursor: not-allowed
}

.chip-sm {
    align-items: center;
    display: inline-flex;
    border: 1px solid;
    border-radius: var(--tom-radius-2xlg);
    cursor: pointer;
    font: var(--tom-font-2xsm-regular);
    gap: var(--tom-spacing-2xsm);
    padding: var(--tom-spacing-2xsm) var(--tom-spacing-xsm)
}

.chip-sm>.chip-action[class*=icon-],
.chip-sm>.chip-icon[class*=icon-] {
    font-size: var(--tom-spacing-md);
    height: var(--tom-spacing-md);
    width: var(--tom-spacing-md)
}

.chip-sm>.chip-text+.chip-action,
>.chip-icon+.chip-text>.chip-sm {
    padding-left: var(--tom-spacing-2xsm)
}

.chip-sm>.input.text {
    font: var(--tom-font-2xsm-regular)
}

.chip-sm {
    background-color: var(--tom-color-surface-container-lowest);
    border-color: var(--tom-color-on-surface-9);
    color: var(--tom-color-on-surface-3)
}

.chip-sm:hover {
    background-color: var(--tom-color-surface-container-mid);
    color: var(--tom-color-on-surface-2)
}

.chip-sm.selected,
.selected>.chip-sm {
    background-color: var(--tom-color-interaction-default);
    color: var(--tom-color-on-interaction-default)
}

.chip-sm.disabled,
.disabled>.chip-sm {
    background-color: var(--tom-color-surface-container-low);
    color: var(--tom-color-on-surface-5);
    cursor: not-allowed
}

.chip-md {
    align-items: center;
    display: inline-flex;
    border: 1px solid;
    border-radius: var(--tom-radius-2xlg);
    cursor: pointer;
    font: var(--tom-font-xsm-regular);
    gap: var(--tom-spacing-2xsm);
    padding: var(--tom-spacing-xsm) var(--tom-spacing-sm)
}

.chip-md>.chip-action[class*=icon-],
.chip-md>.chip-icon[class*=icon-] {
    font-size: var(--tom-spacing-lg);
    height: var(--tom-spacing-lg);
    width: var(--tom-spacing-lg)
}

.chip-md>.chip-icon+.chip-text,
.chip-md>.chip-text+.chip-action {
    padding-left: var(--tom-spacing-xsm)
}

.chip-md>.input.text {
    font: var(--tom-font-xsm-regular)
}

.chip-md {
    background-color: var(--tom-color-surface-container-lowest);
    border-color: var(--tom-color-on-surface-9);
    color: var(--tom-color-on-surface-3)
}

.chip-md:hover {
    background-color: var(--tom-color-surface-container-mid);
    color: var(--tom-color-on-surface-2)
}

.chip-md.selected,
.selected>.chip-md {
    background-color: var(--tom-color-interaction-default);
    color: var(--tom-color-on-interaction-default)
}

.chip-md.disabled,
.disabled>.chip-md {
    background-color: var(--tom-color-surface-container-low);
    color: var(--tom-color-on-surface-5);
    cursor: not-allowed
}

.chip-outline {
    background-color: transparent;
    color: var(--tom-color-on-surface-3)
}

.chip-outline,
.chip-outline:hover {
    border-color: var(--tom-color-on-surface-3)
}

.chip-outline:hover {
    background-color: var(--tom-color-surface-container-mid);
    color: var(--tom-color-on-surface-2)
}

.chip-outline.selected,
.selected>.chip-outline {
    background-color: transparent;
    border-color: var(--tom-color-on-interaction-default-inverted);
    color: var(--tom-color-on-interaction-default-inverted)
}

.chip-outline.disabled,
.disabled>.chip-outline {
    background-color: var(--tom-color-surface-container-low);
    border-color: var(--tom-color-on-surface-5);
    color: var(--tom-color-on-surface-5);
    cursor: not-allowed
}

.dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    visibility: hidden;
    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.dialog.visible {
    visibility: visible;
    opacity: 1
}

.dialog .dialog-overlay {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--tom-color-on-surface-2);
    opacity: var(--tom-opacity-60);
    z-index: 999998
}

.dialog .dialog-container {
    position: fixed;
    align-self: center;
    z-index: 999999;
    max-height: 100%;
    overflow-y: auto
}

.dialog .dialog-container,
.dialog .dialog-container .dialog-header {
    display: flex;
    flex-direction: column;
    height: auto;
    background-color: var(--tom-color-surface-container-lowest);
    border-radius: var(--tom-radius-2xlg)
}

.dialog .dialog-container .dialog-header {
    position: sticky;
    align-items: center;
    width: 100%;
    top: 0;
    left: 0;
    padding: var(--tom-spacing-lg) var(--tom-spacing-md) var(--tom-spacing-md);
    gap: var(--tom-spacing-xlg)
}

.dialog .dialog-container .dialog-header.dialog-header-center .dialog-title {
    text-align: center;
    width: 65%
}

.dialog .dialog-container .dialog-header.dialog-header-center-desk .dialog-title {
    text-align: center
}

.dialog .dialog-container .dialog-header.dialog-header-left .dialog-title {
    text-align: left;
    width: 75%;
    align-self: flex-start
}

.dialog .dialog-container .dialog-header.dialog-header-center-desk {
    padding-top: calc(var(--tom-spacing-xlg) + var(--tom-spacing-xlg))
}

.dialog .dialog-container .dialog-header .dialog-title {
    font: var(--tom-font-md-bold);
    color: var(--tom-color-on-surface-3)
}

.dialog .dialog-container .dialog-header .dialog-header-image {
    width: 70%
}

.dialog .dialog-container .dialog-header .dialog-close {
    position: absolute;
    top: var(--tom-spacing-md);
    right: var(--tom-spacing-md);
    justify-self: right;
    width: -moz-fit-content;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    border-radius: var(--tom-radius-2xlg);
    padding: var(--tom-spacing-2xsm);
    background-color: var(--tom-color-surface-container-low)
}

.dialog .dialog-container .dialog-header .dialog-close:before {
    width: var(--tom-spacing-lg);
    height: var(--tom-spacing-lg);
    content: "\f151";
    color: var(--tom-color-on-surface-3);
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    line-height: 1;
    font-size: var(--tom-spacing-lg);
    cursor: pointer
}

.dialog .dialog-container .dialog-content {
    padding: var(--tom-spacing-lg) var(--tom-spacing-md);
    flex-grow: 3
}

.dialog .dialog-container .dialog-footer {
    position: sticky;
    display: block;
    width: 100%;
    height: auto;
    bottom: 0;
    left: 0;
    padding: var(--tom-spacing-md);
    background-color: var(--tom-color-surface-container-lowest)
}

.dialog.dialog-full .dialog-container {
    height: 100%
}

@supports (animation-timeline:scroll()) {
    .dialog.dialog-sticky .dialog-container {
        min-height: 50%;
        top: 50%;
        animation: dialog-sticky linear;
        animation-timeline: scroll(self block)
    }
}

.icon {
    display: inline-flex
}

.icon-left:before,
.icon-right:after,
.icon:before {
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon.icon-3p:before {
    content: "\f101"
}

.icon-left.icon-access-time:before,
.icon-right.icon-access-time:after,
.icon.icon-access-time:before {
    content: "\f102"
}

.icon-access-time:not(.icon):before {
    content: "\f102";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-left.icon-account-circle:before,
.icon-right.icon-account-circle:after,
.icon.icon-account-circle:before {
    content: "\f103"
}

.icon-account-circle:not(.icon):before {
    content: "\f103";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon.icon-add-card:before {
    content: "\f104"
}

.icon.icon-add:before {
    content: "\f105"
}

.icon.icon-alternate-email:before {
    content: "\f106"
}

.icon.icon-american-express:before {
    content: "\f107"
}

.icon.icon-apple:before {
    content: "\f108"
}

.icon-left.icon-arrow-back:before,
.icon-right.icon-arrow-back:after,
.icon.icon-arrow-back:before {
    content: "\f109"
}

.icon-arrow-back:not(.icon):before {
    content: "\f109";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon.icon-arrow-down-left:before {
    content: "\f10a"
}

.icon-left.icon-arrow-down-right:before,
.icon-right.icon-arrow-down-right:after,
.icon.icon-arrow-down-right:before {
    content: "\f10b"
}

.icon-arrow-down-right:not(.icon):before {
    content: "\f10b";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon.icon-arrow-downward:before {
    content: "\f10c"
}

.icon.icon-arrow-forward:before {
    content: "\f10d"
}

.icon-left.icon-arrow-upward:before,
.icon-right.icon-arrow-upward:after,
.icon.icon-arrow-upward:before {
    content: "\f10e"
}

.icon-arrow-upward:not(.icon):before {
    content: "\f10e";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-left.icon-audio-up:before,
.icon-right.icon-audio-up:after,
.icon.icon-audio-up:before {
    content: "\f10f"
}

.icon-audio-up:not(.icon):before {
    content: "\f10f";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon.icon-aura:before {
    content: "\f110"
}

.icon.icon-block:before {
    content: "\f111"
}

.icon-left.icon-boleto:before,
.icon-right.icon-boleto:after,
.icon.icon-boleto:before {
    content: "\f112"
}

.icon-boleto:not(.icon):before {
    content: "\f112";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon.icon-caixa:before {
    content: "\f113"
}

.icon.icon-calendar-today:before {
    content: "\f114"
}

.icon.icon-call:before {
    content: "\f115"
}

.icon.icon-cancel:before {
    content: "\f116"
}

.icon.icon-cartao-luiza-gold:before {
    content: "\f117"
}

.icon.icon-cartao-luiza:before {
    content: "\f118"
}

.icon.icon-cartao-magalu:before {
    content: "\f119"
}

.icon.icon-category-af:before {
    content: "\f11a"
}

.icon.icon-category-am:before {
    content: "\f11b"
}

.icon.icon-category-ar:before {
    content: "\f11c"
}

.icon.icon-category-au:before {
    content: "\f11d"
}

.icon.icon-category-bb:before {
    content: "\f11e"
}

.icon.icon-category-br:before {
    content: "\f11f"
}

.icon.icon-category-bs:before {
    content: "\f120"
}

.icon.icon-category-cf:before {
    content: "\f121"
}

.icon.icon-category-ci:before {
    content: "\f122"
}

.icon.icon-category-cj:before {
    content: "\f123"
}

.icon.icon-category-cm:before {
    content: "\f124"
}

.icon.icon-category-co:before {
    content: "\f125"
}

.icon.icon-category-cp:before {
    content: "\f126"
}

.icon.icon-category-cr:before {
    content: "\f127"
}

.icon.icon-category-de:before {
    content: "\f128"
}

.icon.icon-category-ea:before {
    content: "\f129"
}

.icon.icon-category-ed:before {
    content: "\f12a"
}

.icon.icon-category-ep:before {
    content: "\f12b"
}

.icon.icon-category-es:before {
    content: "\f12c"
}

.icon.icon-category-et:before {
    content: "\f12d"
}

.icon.icon-category-fj:before {
    content: "\f12e"
}

.icon.icon-category-fm:before {
    content: "\f12f"
}

.icon.icon-category-fs:before {
    content: "\f130"
}

.icon.icon-category-ga:before {
    content: "\f131"
}

.icon.icon-category-im:before {
    content: "\f132"
}

.icon.icon-category-in:before {
    content: "\f133"
}

.icon.icon-category-li:before {
    content: "\f134"
}

.icon.icon-category-md:before {
    content: "\f135"
}

.icon.icon-category-me:before {
    content: "\f136"
}

.icon.icon-category-mo:before {
    content: "\f137"
}

.icon.icon-category-ms:before {
    content: "\f138"
}

.icon.icon-category-na:before {
    content: "\f139"
}

.icon.icon-category-pa:before {
    content: "\f13a"
}

.icon.icon-category-pe:before {
    content: "\f13b"
}

.icon.icon-category-pf:before {
    content: "\f13c"
}

.icon.icon-category-pi:before {
    content: "\f13d"
}

.icon.icon-category-re:before {
    content: "\f13e"
}

.icon.icon-category-rg:before {
    content: "\f13f"
}

.icon.icon-category-sa:before {
    content: "\f140"
}

.icon.icon-category-se:before {
    content: "\f141"
}

.icon.icon-category-tb:before {
    content: "\f142"
}

.icon.icon-category-te:before {
    content: "\f143"
}

.icon.icon-category-tf:before {
    content: "\f144"
}

.icon.icon-category-ud:before {
    content: "\f145"
}

.icon.icon-chat-bubble-outline:before {
    content: "\f146"
}

.icon.icon-chat-success:before {
    content: "\f147"
}

.icon.icon-chat-warning:before {
    content: "\f148"
}

.icon.icon-chat:before {
    content: "\f149"
}

.icon-left.icon-check-circle:before,
.icon-right.icon-check-circle:after,
.icon.icon-check-circle:before {
    content: "\f14a"
}

.icon-check-circle:not(.icon):before {
    content: "\f14a";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon.icon-check-magalu-indica:before {
    content: "\f14b"
}

.icon-left.icon-check:before,
.icon-right.icon-check:after,
.icon.icon-check:before {
    content: "\f14c"
}

.icon-check:not(.icon):before {
    content: "\f14c";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-left.icon-chevron-down:before,
.icon-right.icon-chevron-down:after,
.icon.icon-chevron-down:before {
    content: "\f14d"
}

.icon-chevron-down:not(.icon):before {
    content: "\f14d";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-left.icon-chevron-left:before,
.icon-right.icon-chevron-left:after,
.icon.icon-chevron-left:before {
    content: "\f14e"
}

.icon-chevron-left:not(.icon):before {
    content: "\f14e";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-left.icon-chevron-right:before,
.icon-right.icon-chevron-right:after,
.icon.icon-chevron-right:before {
    content: "\f14f"
}

.icon-chevron-right:not(.icon):before {
    content: "\f14f";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon.icon-chevron-up:before {
    content: "\f150"
}

.icon-left.icon-close:before,
.icon-right.icon-close:after,
.icon.icon-close:before {
    content: "\f151"
}

.icon-close:not(.icon):before {
    content: "\f151";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-left.icon-compra-internacional:before,
.icon-right.icon-compra-internacional:after,
.icon.icon-compra-internacional:before {
    content: "\f152"
}

.icon-compra-internacional:not(.icon):before {
    content: "\f152";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon.icon-contact-support:before {
    content: "\f153"
}

.icon-left.icon-credit-card:before,
.icon-right.icon-credit-card:after,
.icon.icon-credit-card:before {
    content: "\f154"
}

.icon-credit-card:not(.icon):before {
    content: "\f154";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-left.icon-cupom:before,
.icon-right.icon-cupom:after,
.icon.icon-cupom:before {
    content: "\f155"
}

.icon-cupom:not(.icon):before {
    content: "\f155";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon.icon-customer-contact:before {
    content: "\f156"
}

.icon.icon-delete:before {
    content: "\f157"
}

.icon.icon-delivery-success:before {
    content: "\f158"
}

.icon.icon-delivery-warning:before {
    content: "\f159"
}

.icon.icon-denuncia:before {
    content: "\f15a"
}

.icon.icon-dinners:before {
    content: "\f15b"
}

.icon.icon-discount:before {
    content: "\f15c"
}

.icon.icon-dois-cartoes:before {
    content: "\f15d"
}

.icon.icon-elo:before {
    content: "\f15e"
}

.icon.icon-email:before {
    content: "\f15f"
}

.icon-left.icon-entrega-2-dias:before,
.icon-right.icon-entrega-2-dias:after,
.icon.icon-entrega-2-dias:before {
    content: "\f160"
}

.icon-entrega-2-dias:not(.icon):before {
    content: "\f160";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-left.icon-epoca:before,
.icon-right.icon-epoca:after,
.icon.icon-epoca:before {
    content: "\f161"
}

.icon-epoca:not(.icon):before {
    content: "\f161";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon.icon-error-outline:before {
    content: "\f162"
}

.icon.icon-exchange:before {
    content: "\f163"
}

.icon.icon-facebook:before {
    content: "\f164"
}

.icon-left.icon-fale-com-lojista:before,
.icon-right.icon-fale-com-lojista:after,
.icon.icon-fale-com-lojista:before {
    content: "\f165"
}

.icon-fale-com-lojista:not(.icon):before {
    content: "\f165";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-left.icon-favorite-border:before,
.icon-right.icon-favorite-border:after,
.icon.icon-favorite-border:before {
    content: "\f166"
}

.icon-favorite-border:not(.icon):before {
    content: "\f166";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-left.icon-favorite:before,
.icon-right.icon-favorite:after,
.icon.icon-favorite:before {
    content: "\f167"
}

.icon-favorite:not(.icon):before {
    content: "\f167";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon.icon-file-download:before {
    content: "\f168"
}

.icon.icon-file-upload:before {
    content: "\f169"
}

.icon.icon-filter-list:before {
    content: "\f16a"
}

.icon.icon-google:before {
    content: "\f16b"
}

.icon.icon-guarantee-filled:before {
    content: "\f16c"
}

.icon-left.icon-guarantee:before,
.icon-right.icon-guarantee:after,
.icon.icon-guarantee:before {
    content: "\f16d"
}

.icon-guarantee:not(.icon):before {
    content: "\f16d";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon.icon-headset-mic:before {
    content: "\f16e"
}

.icon.icon-help-outline:before {
    content: "\f16f"
}

.icon-left.icon-highlight-off:before,
.icon-right.icon-highlight-off:after,
.icon.icon-highlight-off:before {
    content: "\f170"
}

.icon-highlight-off:not(.icon):before {
    content: "\f170";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon.icon-hipercard:before {
    content: "\f171"
}

.icon.icon-history:before {
    content: "\f172"
}

.icon-left.icon-home:before,
.icon-right.icon-home:after,
.icon.icon-home:before {
    content: "\f173"
}

.icon-home:not(.icon):before {
    content: "\f173";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon.icon-image:before {
    content: "\f174"
}

.icon-left.icon-info:before,
.icon-right.icon-info:after,
.icon.icon-info:before {
    content: "\f175"
}

.icon-info:not(.icon):before {
    content: "\f175";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon.icon-instagram:before {
    content: "\f176"
}

.icon.icon-inventory:before {
    content: "\f177"
}

.icon.icon-ios-share:before {
    content: "\f178"
}

.icon.icon-linkedin:before {
    content: "\f179"
}

.icon-left.icon-list:before,
.icon-right.icon-list:after,
.icon.icon-list:before {
    content: "\f17a"
}

.icon-list:not(.icon):before {
    content: "\f17a";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon.icon-loader-color-full:before {
    content: "\f17b"
}

.icon-left.icon-loader-color-less:before,
.icon-right.icon-loader-color-less:after,
.icon.icon-loader-color-less:before {
    content: "\f17c"
}

.icon-loader-color-less:not(.icon):before {
    content: "\f17c";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon.icon-local-mall:before {
    content: "\f17d"
}

.icon.icon-local-offer-outline:before {
    content: "\f17e"
}

.icon.icon-local-shipping-filled:before {
    content: "\f17f"
}

.icon.icon-local-shipping:before {
    content: "\f180"
}

.icon-left.icon-location-filled:before,
.icon-right.icon-location-filled:after,
.icon.icon-location-filled:before {
    content: "\f181"
}

.icon-location-filled:not(.icon):before {
    content: "\f181";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon.icon-location-on:before {
    content: "\f182"
}

.icon.icon-locker-filled:before {
    content: "\f183"
}

.icon-left.icon-luiza-card:before,
.icon-right.icon-luiza-card:after,
.icon.icon-luiza-card:before {
    content: "\f184"
}

.icon-luiza-card:not(.icon):before {
    content: "\f184";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon.icon-magalu-full:before {
    content: "\f185"
}

.icon.icon-magalu-recommend:before {
    content: "\f186"
}

.icon-left.icon-magalu:before,
.icon-right.icon-magalu:after,
.icon.icon-magalu:before {
    content: "\f187"
}

.icon-magalu:not(.icon):before {
    content: "\f187";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon.icon-mail-open:before {
    content: "\f188"
}

.icon.icon-mail:before {
    content: "\f189"
}

.icon.icon-mastercard:before {
    content: "\f18a"
}

.icon-left.icon-menu:before,
.icon-right.icon-menu:after,
.icon.icon-menu:before {
    content: "\f18b"
}

.icon-menu:not(.icon):before {
    content: "\f18b";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon.icon-more-horiz:before {
    content: "\f18c"
}

.icon.icon-more-vert:before {
    content: "\f18d"
}

.icon-left.icon-my-location:before,
.icon-right.icon-my-location:after,
.icon.icon-my-location:before {
    content: "\f18e"
}

.icon-my-location:not(.icon):before {
    content: "\f18e";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-left.icon-netshoes-circle:before,
.icon-right.icon-netshoes-circle:after,
.icon.icon-netshoes-circle:before {
    content: "\f18f"
}

.icon-netshoes-circle:not(.icon):before {
    content: "\f18f";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon.icon-notifications-active:before {
    content: "\f190"
}

.icon.icon-notifications:before {
    content: "\f191"
}

.icon.icon-open-in-new:before {
    content: "\f192"
}

.icon.icon-package-alert:before {
    content: "\f193"
}

.icon.icon-pedido:before {
    content: "\f194"
}

.icon.icon-person:before {
    content: "\f195"
}

.icon.icon-phone-in-talk:before {
    content: "\f196"
}

.icon.icon-pinterest:before {
    content: "\f197"
}

.icon-left.icon-pix:before,
.icon-right.icon-pix:after,
.icon.icon-pix:before {
    content: "\f198"
}

.icon-pix:not(.icon):before {
    content: "\f198";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-left.icon-place:before,
.icon-right.icon-place:after,
.icon.icon-place:before {
    content: "\f199"
}

.icon-place:not(.icon):before {
    content: "\f199";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-left.icon-play-arrow:before,
.icon-right.icon-play-arrow:after,
.icon.icon-play-arrow:before {
    content: "\f19a"
}

.icon-play-arrow:not(.icon):before {
    content: "\f19a";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon.icon-play-circle:before {
    content: "\f19b"
}

.icon.icon-privacy-policy:before {
    content: "\f19c"
}

.icon.icon-question-answer:before {
    content: "\f19d"
}

.icon.icon-receipt:before {
    content: "\f19e"
}

.icon.icon-regulatory:before {
    content: "\f19f"
}

.icon.icon-remove:before {
    content: "\f1a0"
}

.icon.icon-reply-all:before {
    content: "\f1a1"
}

.icon-left.icon-retira-loja:before,
.icon-right.icon-retira-loja:after,
.icon.icon-retira-loja:before {
    content: "\f1a2"
}

.icon-retira-loja:not(.icon):before {
    content: "\f1a2";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-left.icon-search:before,
.icon-right.icon-search:after,
.icon.icon-search:before {
    content: "\f1a3"
}

.icon-search:not(.icon):before {
    content: "\f1a3";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-left.icon-service-baby-shower:before,
.icon-right.icon-service-baby-shower:after,
.icon.icon-service-baby-shower:before {
    content: "\f1a4"
}

.icon-service-baby-shower:not(.icon):before {
    content: "\f1a4";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-left.icon-service-consortium:before,
.icon-right.icon-service-consortium:after,
.icon.icon-service-consortium:before {
    content: "\f1a5"
}

.icon-service-consortium:not(.icon):before {
    content: "\f1a5";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-left.icon-service-control-plan:before,
.icon-right.icon-service-control-plan:after,
.icon.icon-service-control-plan:before {
    content: "\f1a6"
}

.icon-service-control-plan:not(.icon):before {
    content: "\f1a6";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-left.icon-service-emp-magalu:before,
.icon-right.icon-service-emp-magalu:after,
.icon.icon-service-emp-magalu:before {
    content: "\f1a7"
}

.icon-service-emp-magalu:not(.icon):before {
    content: "\f1a7";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-left.icon-service-gold-client:before,
.icon-right.icon-service-gold-client:after,
.icon.icon-service-gold-client:before {
    content: "\f1a8"
}

.icon-service-gold-client:not(.icon):before {
    content: "\f1a8";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon.icon-service-house-security:before {
    content: "\f1a9"
}

.icon-left.icon-service-luizaseg:before,
.icon-right.icon-service-luizaseg:after,
.icon.icon-service-luizaseg:before {
    content: "\f1aa"
}

.icon-service-luizaseg:not(.icon):before {
    content: "\f1aa";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-left.icon-service-marketplace:before,
.icon-right.icon-service-marketplace:after,
.icon.icon-service-marketplace:before {
    content: "\f1ab"
}

.icon-service-marketplace:not(.icon):before {
    content: "\f1ab";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-left.icon-service-marriage:before,
.icon-right.icon-service-marriage:after,
.icon.icon-service-marriage:before {
    content: "\f1ac"
}

.icon-service-marriage:not(.icon):before {
    content: "\f1ac";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-left.icon-service-partner:before,
.icon-right.icon-service-partner:after,
.icon.icon-service-partner:before {
    content: "\f1ad"
}

.icon-service-partner:not(.icon):before {
    content: "\f1ad";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-left.icon-service-smart-house:before,
.icon-right.icon-service-smart-house:after,
.icon.icon-service-smart-house:before {
    content: "\f1ae"
}

.icon-service-smart-house:not(.icon):before {
    content: "\f1ae";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon.icon-settings:before {
    content: "\f1af"
}

.icon-left.icon-share:before,
.icon-right.icon-share:after,
.icon.icon-share:before {
    content: "\f1b0"
}

.icon-share:not(.icon):before {
    content: "\f1b0";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon.icon-shopping-bag-fast:before {
    content: "\f1b1"
}

.icon.icon-shopping-bag-filled:before {
    content: "\f1b2"
}

.icon-left.icon-shopping-bag:before,
.icon-right.icon-shopping-bag:after,
.icon.icon-shopping-bag:before {
    content: "\f1b3"
}

.icon-shopping-bag:not(.icon):before {
    content: "\f1b3";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon.icon-star-border:before {
    content: "\f1b4"
}

.icon.icon-star-half-filled:before {
    content: "\f1b5"
}

.icon.icon-star-half:before {
    content: "\f1b6"
}

.icon-left.icon-star:before,
.icon-right.icon-star:after,
.icon.icon-star:before {
    content: "\f1b7"
}

.icon-star:not(.icon):before {
    content: "\f1b7";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-left.icon-sumarizacao-ia:before,
.icon-right.icon-sumarizacao-ia:after,
.icon.icon-sumarizacao-ia:before {
    content: "\f1b8"
}

.icon-sumarizacao-ia:not(.icon):before {
    content: "\f1b8";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-left.icon-support-agent:before,
.icon-right.icon-support-agent:after,
.icon.icon-support-agent:before {
    content: "\f1b9"
}

.icon-support-agent:not(.icon):before {
    content: "\f1b9";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon.icon-thumb-up:before {
    content: "\f1ba"
}

.icon.icon-tiktok:before {
    content: "\f1bb"
}

.icon.icon-twitter-X:before {
    content: "\f1bc"
}

.icon.icon-twitter:before {
    content: "\f1bd"
}

.icon.icon-vale-compra:before {
    content: "\f1be"
}

.icon.icon-verified-user:before {
    content: "\f1bf"
}

.icon.icon-visa:before {
    content: "\f1c0"
}

.icon.icon-warning-amber:before {
    content: "\f1c1"
}

.icon.icon-whatsapp-share:before {
    content: "\f1c2"
}

.icon.icon-whatsapp:before {
    content: "\f1c3"
}

.icon.icon-youtube:before {
    content: "\f1c4"
}

.icon-left.icon-zattini:before,
.icon-right.icon-zattini:after,
.icon.icon-zattini:before {
    content: "\f1c5"
}

.icon-zattini:not(.icon):before {
    content: "\f1c5";
    font-family: tom-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.input-text {
    align-items: center;
    color: var(--tom-color-on-surface-3);
    font: var(--tom-font-sm-regular);
    border-radius: var(--tom-radius-lg);
    border: 1px solid;
    border-color: var(--tom-color-on-surface-6);
    outline: none;
    background-color: var(--tom-color-surface-container-lowest);
    padding: var(--tom-spacing-sm) var(--tom-spacing-md) calc(var(--tom-spacing-sm) - var(--tom-spacing-3xsm))
}

.input-text:placeholder {
    color: var(--tom-color-on-surface-5);
    font: var(--tom-font-sm-regular)
}

.input-text:hover {
    border-color: var(--tom-color-on-surface-3)
}

.input-text:focus {
    border-color: var(--tom-color-on-interaction-lighter-inverted);
    background-color: var(--tom-color-interaction-lighter-inverted)
}

.disabled>.input-text,
.input-text:disabled {
    background-color: var(--tom-color-surface-container-lowest)
}

.disabled>.input-text:hover,
.input-text:disabled:hover {
    border-color: var(--tom-color-on-surface-6)
}

.error>.input-text,
.input-text.error {
    border-color: var(--tom-color-on-danger-lighter-inverted);
    background-color: var(--tom-color-danger-lighter-inverted)
}

.input-multiline {
    border: 1px solid;
    border-color: var(--tom-color-on-surface-6);
    padding: var(--tom-spacing-sm);
    border-radius: var(--tom-radius-sm)
}

.input-multiline:hover {
    border-color: var(--tom-color-on-surface-3)
}

.input-multiline:focus {
    border-color: var(--tom-color-on-interaction-lighter-inverted);
    background-color: var(--tom-color-interaction-lighter-inverted)
}

.input-multiline:focus-visible {
    border-color: var(--tom-color-on-interaction-lighter-inverted);
    background-color: var(--tom-color-interaction-lighter-inverted)
}

.error>.input-multiline,
.input-multiline.error {
    border-color: var(--tom-color-on-danger-lighter-inverted);
    background-color: var(--tom-color-danger-lighter-inverted)
}

.input-group {
    display: grid;
    position: relative;
    justify-items: scretch;
    justify-content: space-between;
    gap: var(--tom-spacing-2xsm);
    grid-template-areas: "ihleft ihright" "ibody ibody" "ifooter ifooter"
}

.input-group:has(.input-suggestions[data-open=true]) .input-text {
    border-radius: var(--tom-spacing-md) var(--tom-spacing-md) 0 0;
    border-bottom: var(--tom-border-thin) solid;
    border-color: transparent
}

.input-group:has(.input-suggestions[data-open=true]) .input-text:focus,
.input-group:has(.input-suggestions[data-open=true]) .input-text:hover {
    border-bottom: var(--tom-border-thin) solid;
    border-color: transparent;
    background-color: var(--tom-color-surface-container-lowest)
}

.input-group>.input-suggestions[data-open=true] {
    display: block
}

.input-group>.input-suggestions {
    width: 100%;
    display: none;
    padding: var(--tom-spacing-md);
    border-radius: 0 0 var(--tom-radius-lg) var(--tom-radius-lg);
    background-color: var(--tom-color-surface-container-lowest);
    position: absolute;
    z-index: 1;
    top: calc(100% - var(--tom-spacing-2xsm))
}

.input-group>.input-suggestions:before {
    content: "";
    display: block;
    width: calc(100% - var(--tom-spacing-md) - var(--tom-spacing-md));
    height: 1px;
    background-color: var(--tom-color-interaction-default);
    position: absolute;
    top: 0;
    left: var(--tom-spacing-md);
    pointer-events: none
}

.input-group>.input-suggestions .input-suggestions-title {
    color: var(--tom-color-on-surface-2);
    font: var(--tom-font-md-bold);
    min-height: 32px;
    margin-bottom: var(--tom-spacing-2xsm)
}

.input-group>.input-suggestions .input-suggestions-list {
    display: flex;
    flex-direction: column;
    gap: var(--tom-spacing-2xsm)
}

.input-group>.input-suggestions .input-suggestions-list .input-suggestions-item {
    display: flex;
    align-items: center;
    min-height: 32px;
    gap: var(--tom-spacing-2xsm);
    color: var(--tom-color-on-surface-3);
    font: var(--tom-font-xsm-regular);
    border-bottom: var(--tom-border-thin) solid;
    border-color: var(--tom-color-on-surface-7);
    cursor: pointer
}

.input-group>.input-suggestions .input-suggestions-list .input-suggestions-item:last-child {
    border: none
}

.input-group>.input-suggestions .input-suggestions-list .input-suggestions-item>i {
    display: flex
}

.input-group>label {
    grid-area: ihleft;
    font: var(--tom-font-xsm-medium);
    margin-left: var(--tom-spacing-3xsm);
    margin-right: var(--tom-spacing-xsm);
    color: var(--tom-color-on-surface-3)
}

.input-group>.input-tip {
    grid-area: ihright;
    text-align: right;
    font: var(--tom-font-3xsm-regular);
    margin-right: var(--tom-spacing-3xsm);
    color: var(--tom-color-on-surface-4)
}

.input-group>.input-icon[class*=icon-] {
    color: var(--tom-color-on-surface-5);
    font-size: var(--tom-spacing-lg);
    grid-area: ibody;
    height: var(--tom-spacing-lg);
    margin-left: var(--tom-spacing-md);
    margin-right: var(--tom-spacing-xsm);
    margin-top: var(--tom-spacing-sm);
    width: var(--tom-spacing-lg);
    z-index: 1
}

.input-group>.input-icon-end {
    display: flex;
    justify-self: end
}

.input-group>.input-icon.input-icon-end {
    margin-left: var(--tom-spacing-xsm);
    margin-right: var(--tom-spacing-md)
}

.input-group>.input-text {
    grid-area: ibody;
    flex-basis: 100%
}

.input-group>.input-icon+.input-text {
    padding-left: calc(var(--tom-spacing-md) + var(--tom-spacing-lg) + var(--tom-spacing-xsm))
}

.input-group:has(.input-reset)>.input-text {
    padding-right: calc(var(--tom-spacing-md) + var(--tom-spacing-lg) + var(--tom-spacing-xsm))
}

.input-group>.input-text+.input-reset {
    border-radius: 50%;
    box-sizing: content-box;
    color: var(--tom-color-on-surface-3);
    font-size: var(--tom-spacing-lg);
    grid-area: ibody;
    height: var(--tom-spacing-lg);
    margin-bottom: auto;
    margin-left: auto;
    margin-right: var(--tom-spacing-md);
    margin-top: auto;
    position: relative;
    width: var(--tom-spacing-lg);
    z-index: 1
}

.input-group>.input-text:-moz-placeholder-shown+.input-reset {
    display: none
}

.input-group>.input-text:placeholder-shown+.input-reset {
    display: none
}

.input-group>.input-info {
    align-items: center;
    display: flex;
    grid-area: ifooter;
    font: var(--tom-font-2xsm-regular);
    margin-left: var(--tom-spacing-3xsm);
    padding-top: var(--tom-spacing-2xsm);
    color: var(--tom-color-on-surface-4);
    gap: var(--tom-spacing-2xsm)
}

.input-group.error>.input-info,
.input-group.error>.input-tip,
.input-group.error>label {
    color: var(--tom-color-on-danger-lighter-inverted)
}

.input-group>.input-multiline {
    grid-area: ibody
}

.list {
    min-width: 180px
}

.list.list-transparent>.list-item {
    background-color: transparent
}

.list.list-divided>.list-item {
    border-bottom: var(--tom-border-thin) solid;
    border-color: var(--tom-color-on-surface-7)
}

.list.list-large>.list-item {
    min-height: 65px
}

.list .list-item {
    min-height: 48px;
    display: flex;
    padding: 0 var(--tom-spacing-md);
    justify-content: space-between;
    align-items: center;
    gap: var(--tom-spacing-xsm);
    align-self: stretch;
    background-color: var(--tom-color-surface-high)
}

.list .list-item a {
    display: inherit;
    justify-content: inherit;
    align-items: inherit;
    gap: inherit;
    width: 100%
}

.list .list-item.list-item.list-item-single {
    border-radius: var(--tom-radius-lg);
    background-color: var(--tom-color-surface-high)
}

.list .list-item:first-child {
    border-radius: var(--tom-radius-lg) var(--tom-radius-lg) 0 0
}

.list .list-item:last-child {
    border-radius: 0 0 var(--tom-radius-lg) var(--tom-radius-lg);
    border: none
}

.list .list-item .list-item-text {
    font: var(--tom-font-xsm-regular);
    color: var(--tom-color-on-surface-3);
    text-overflow: ellipsis;
    text-align: left;
    flex-grow: 1
}

.radio-group {
    box-sizing: content-box;
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--tom-spacing-xsm)
}

.radio-group:hover:not(:disabled) {
    border-color: var(--tom-color-surface-container-highest)
}

.radio-group:focus:not(:disabled)~.ripple,
.radio-group:hover:not(:disabled)~.ripple {
    opacity: 1;
    transform-origin: center center;
    transition: opacity 375ms linear
}

.radio-group:focus:not(:disabled)~.ripple {
    background-color: var(--tom-color-surface-container-mid)
}

.radio-group:focus:not(:disabled)~.radio {
    outline-color: var(--tom-color-surface-container-highest)
}

.radio-group:focus:not(:disabled)~.radio:checked {
    outline-color: var(--tom-color-interaction-default);
    background-color: var(--tom-color-interaction-default)
}

.radio-group>label {
    color: var(--tom-color-on-surface-3)
}

.radio-group>input[class=radio] {
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    outline: 2px solid;
    outline-color: var(--tom-color-surface-container-higher);
    border-radius: 50%;
    cursor: pointer;
    z-index: 1
}

.radio-group>input[class=radio]:hover:not(:disabled) {
    outline-color: var(--tom-color-surface-container-highest)
}

.radio-group>input[class=radio]:hover:not(:disabled)~.ripple {
    opacity: 1;
    transform-origin: center center;
    transition: opacity 375ms linear
}

.radio-group>input[class=radio]:disabled {
    outline-color: var(--tom-color-surface-container-high);
    cursor: not-allowed
}

.radio-group>input[class=radio]:disabled~.ripple {
    display: none
}

.radio-group>input[class=radio]:disabled~label {
    cursor: not-allowed
}

.radio-group>input[class=radio]:disabled:checked {
    border: 4px solid;
    border-color: var(--tom-color-surface-container-lowest);
    background-color: var(--tom-color-surface-container-high);
    outline-color: var(--tom-color-surface-container-high)
}

.radio-group>input[class=radio]:disabled:checked:hover {
    outline-color: var(--tom-color-surface-container-higher);
    background-color: var(--tom-color-surface-container-higher)
}

.radio-group>input[class=radio]:checked {
    border: 4px solid;
    border-color: var(--tom-color-surface-container-lowest);
    outline-color: var(--tom-color-interaction-default);
    background-color: var(--tom-color-interaction-default)
}

.radio-group>input[class=radio]:checked:hover {
    outline-color: var(--tom-color-interaction-lighter);
    background-color: var(--tom-color-interaction-lighter)
}

.radio-group>input[class=radio]:checked~.ripple {
    animation: ripple-pressed .5s
}

.radio-group>.ripple {
    position: absolute;
    height: 40px;
    width: 40px;
    background-color: var(--tom-color-surface-container-low);
    border-radius: 50%;
    left: -11px;
    z-index: 0;
    opacity: 0;
    transform-origin: center center;
    transition: opacity 375ms linear
}

.tab {
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-align: center;
    font: var(--tom-font-sm-regular);
    gap: var(--tom-spacing-xsm);
    height: var(--tom-spacing-2xlg);
    color: var(--tom-color-on-surface-2);
    background-color: var(--tom-color-surface-container-lowest);
    padding: var(--tom-spacing-xsm);
    min-width: 100px;
    transition: color .1s linear
}

.tab>i {
    font-size: var(--tom-font-lg-regular)
}

.tab.selected {
    color: var(--tom-color-interaction-default)
}

.tab.selected:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    padding: 0 var(--tom-spacing-xsm);
    background-clip: content-box;
    background-color: var(--tom-color-interaction-default);
    animation: tab-indicator-show .1s linear
}

.tab-group {
    overflow-x: auto;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(max-content, 1fr);
    gap: var(--tom-spacing-xsm);
    background-color: var(--tom-color-surface-container-lowest)
}

.tag {
    border-radius: var(--tom-radius-sm);
    font: var(--tom-font-2xsm-regular);
    padding: var(--tom-spacing-2xsm) var(--tom-spacing-xsm);
    border-color: var(--tom-color-brand-default)
}

.tag,
.tag-sm {
    display: inline-flex;
    justify-content: center;
    gap: var(--tom-spacing-2xsm);
    background-color: var(--tom-color-brand-default);
    color: var(--tom-color-on-brand-default)
}

.tag-sm {
    border-radius: var(--tom-radius-xsm);
    font: var(--tom-font-3xsm-regular);
    padding: var(--tom-spacing-3xsm) var(--tom-spacing-2xsm);
    border-color: var(--tom-color-brand-default)
}

.tag-lighter {
    background-color: var(--tom-color-brand-lighter-inverted);
    border-color: var(--tom-color-brand-lighter-inverted)
}

.tag-inverted,
.tag-lighter {
    color: var(--tom-color-on-brand-darker-inverted)
}

.tag-inverted {
    background-color: var(--tom-color-brand-default-inverted);
    border-color: var(--tom-color-brand-default-inverted)
}

.tag-primary {
    background-color: var(--tom-color-interaction-default);
    border-color: var(--tom-color-interaction-default);
    color: var(--tom-color-on-interaction-default)
}

.tag-primary-lighter {
    background-color: var(--tom-color-interaction-lighter-inverted);
    border-color: var(--tom-color-interaction-lighter-inverted)
}

.tag-primary-inverted,
.tag-primary-lighter {
    color: var(--tom-color-on-interaction-darker-inverted)
}

.tag-primary-inverted {
    background-color: var(--tom-color-interaction-default-inverted);
    border-color: var(--tom-color-interaction-default-inverted)
}

.tag-success.tag-border {
    border-width: var(--tom-border-thin)
}

.tag-success,
.tag-success.tag-border {
    border-color: var(--tom-color-success-default)
}

.tag-success {
    background-color: var(--tom-color-success-default);
    color: var(--tom-color-on-success-default)
}

.tag-success-lighter.tag-border {
    border-width: var(--tom-border-thin);
    border-color: var(--tom-color-success-default)
}

.tag-success-lighter {
    background-color: var(--tom-color-success-lighter-inverted);
    border-color: var(--tom-color-success-lighter-inverted);
    color: var(--tom-color-on-success-darker-inverted)
}

.tag-success-inverted.tag-border {
    border-width: var(--tom-border-thin);
    border-color: var(--tom-color-success-default)
}

.tag-success-inverted {
    background-color: var(--tom-color-success-default-inverted);
    border-color: var(--tom-color-success-default-inverted);
    color: var(--tom-color-on-success-darker-inverted)
}

.tag-danger.tag-border {
    border-width: var(--tom-border-thin)
}

.tag-danger,
.tag-danger.tag-border {
    border-color: var(--tom-color-danger-default)
}

.tag-danger {
    background-color: var(--tom-color-danger-default);
    color: var(--tom-color-on-danger-default)
}

.tag-danger-lighter.tag-border {
    border-width: var(--tom-border-thin);
    border-color: var(--tom-color-danger-default)
}

.tag-danger-lighter {
    background-color: var(--tom-color-danger-lighter-inverted);
    border-color: var(--tom-color-danger-lighter-inverted);
    color: var(--tom-color-on-danger-darker-inverted)
}

.tag-danger-inverted.tag-border {
    border-width: var(--tom-border-thin);
    border-color: var(--tom-color-danger-default)
}

.tag-danger-inverted {
    background-color: var(--tom-color-danger-default-inverted);
    border-color: var(--tom-color-danger-default-inverted);
    color: var(--tom-color-on-danger-darker-inverted)
}

.tag-warning.tag-border {
    border-width: var(--tom-border-thin)
}

.tag-warning,
.tag-warning.tag-border {
    border-color: var(--tom-color-warning-default)
}

.tag-warning {
    background-color: var(--tom-color-warning-default);
    color: var(--tom-color-on-warning-default)
}

.tag-warning-lighter.tag-border {
    border-width: var(--tom-border-thin);
    border-color: var(--tom-color-warning-default)
}

.tag-warning-lighter {
    background-color: var(--tom-color-warning-lighter-inverted);
    border-color: var(--tom-color-warning-lighter-inverted);
    color: var(--tom-color-on-warning-darker-inverted)
}

.tag-warning-inverted.tag-border {
    border-width: var(--tom-border-thin);
    border-color: var(--tom-color-warning-default)
}

.tag-warning-inverted {
    background-color: var(--tom-color-warning-default-inverted);
    border-color: var(--tom-color-warning-default-inverted);
    color: var(--tom-color-on-warning-darker-inverted)
}

.rating {
    border: none;
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
    flex-direction: row-reverse
}

.rating>input {
    display: none
}

.rating>.rating-item:before {
    font: var(--tom-font-lg-regular);
    font-family: tom-icons;
    display: inline-block;
    content: "\f1b4";
    line-height: 1
}

.rating>.rating-half:before {
    content: "\f1b5";
    position: absolute;
    color: transparent
}

.rating:not(.no-hover)>.rating-full:hover:before {
    content: "\f1b7"
}

.rating:not(:checked):not(.no-hover)>.rating-item:hover:before,
.rating>.checked:before,
.rating>.checked~.rating-item:before,
.rating>input:checked~.rating-item:before {
    color: var(--tom-color-warning-lighter)
}

.rating:not(:checked):not(.no-hover)>.rating-item:hover~.rating-full:before,
.rating>.checked.rating-full:before,
.rating>.checked~.rating-full:before,
.rating>input:checked~.rating-full:before {
    content: "\f1b7"
}

.rating>.rating-item {
    float: right;
    line-height: 1
}

.rating:not(:checked):not(.no-hover)>.rating-item:hover~.rating-item:before,
.rating:not(:checked):not(.no-hover)>label:hover,
.rating>.rating-item,
.rating>.rating-item:hover~input:checked~.rating-item,
.rating>input:checked+.rating-item:hover,
.rating>input:checked~.rating-item,
.rating>input:checked~.rating-item:hover,
.rating>input:checked~.rating-item:hover~.rating-item:before {
    color: var(--tom-color-warning-lighter)
}

.rating-sm>.rating-item:before {
    font: var(--tom-font-xsm-regular);
    font-family: tom-icons;
    line-height: 1
}

.rating-md>.rating-item:before {
    font: var(--tom-font-lg-regular);
    font-family: tom-icons;
    line-height: 1
}

.rating-lg>.rating-item:before {
    font: var(--tom-font-3xlg-regular);
    font-family: tom-icons;
    line-height: 1
}

.switch-group>.switch {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: absolute;
    display: block;
    width: 32px;
    height: 32px;
    border-radius: var(--tom-radius-2xlg);
    background-color: var(--tom-color-surface-container-lowest);
    border-color: var(--tom-color-surface-container-higher);
    border-width: var(--tom-spacing-2xsm);
    cursor: pointer
}

.switch-group>.switch:checked {
    right: 0;
    border-color: var(--tom-color-interaction-default)
}

.switch-group>.switch:checked~.switch-toggle {
    background-color: var(--tom-color-interaction-default)
}

.switch-group>.switch:checked:active,
.switch-group>.switch:checked:focus {
    border-color: var(--tom-color-interaction-darker)
}

.switch-group>.switch:checked:active~.switch-toggle,
.switch-group>.switch:checked:focus~.switch-toggle {
    background-color: var(--tom-color-interaction-darker)
}

.switch-group>.switch:active,
.switch-group>.switch:focus {
    border-color: var(--tom-color-surface-container-highest)
}

.switch-group>.switch:active~.switch-toggle,
.switch-group>.switch:focus~.switch-toggle {
    background-color: var(--tom-color-surface-container-highest)
}

.switch-group>.switch:disabled {
    cursor: not-allowed;
    border-color: var(--tom-color-surface-container-low);
    background-color: var(--tom-color-on-surface-6)
}

.switch-group>.switch:disabled~.switch-toggle {
    background-color: var(--tom-color-surface-container-low)
}

.switch-group>.switch:disabled:checked {
    border-color: var(--tom-color-surface-container-mid)
}

.switch-group>.switch:disabled:checked~.switch-toggle {
    background-color: var(--tom-color-surface-container-mid)
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0
}

.pointer-events-none {
    pointer-events: none
}

.visible {
    visibility: visible
}

.invisible {
    visibility: hidden
}

.static {
    position: static
}

.fixed {
    position: fixed
}

.absolute {
    position: absolute
}

.relative {
    position: relative
}

.sticky {
    position: sticky
}

.-top-3xsm {
    top: calc(var(--tom-spacing-3xsm)*-1)
}

.bottom-\[0\] {
    bottom: 0
}

.bottom-\[75px\] {
    bottom: 75px
}

.bottom-md {
    bottom: var(--tom-spacing-md)
}

.bottom-xlg {
    bottom: var(--tom-spacing-xlg)
}

.left-1\/2 {
    left: 50%
}

.left-\[0\] {
    left: 0
}

.left-md {
    left: var(--tom-spacing-md)
}

.right-\[0\],
.right-\[0px\] {
    right: 0
}

.right-\[26px\] {
    right: 26px
}

.right-lg {
    right: var(--tom-spacing-lg)
}

.right-md {
    right: var(--tom-spacing-md)
}

.top-1\/2 {
    top: 50%
}

.top-\[-25px\] {
    top: -25px
}

.top-\[0\] {
    top: 0
}

.top-\[110\%\] {
    top: 110%
}

.top-\[50\%\] {
    top: 50%
}

.top-lg {
    top: var(--tom-spacing-lg)
}

.\!z-10 {
    z-index: 10 !important
}

.z-0 {
    z-index: 0
}

.z-10 {
    z-index: 10
}

.z-20 {
    z-index: 20
}

.z-30 {
    z-index: 30
}

.z-40 {
    z-index: 40
}

.z-50 {
    z-index: 50
}

.z-\[1\] {
    z-index: 1
}

.z-\[2\] {
    z-index: 2
}

.z-\[9999999\] {
    z-index: 9999999
}

.col-start-2 {
    grid-column-start: 2
}

.row-span-1 {
    grid-row: span 1/span 1
}

.row-span-5 {
    grid-row: span 5/span 5
}

.m-\[-1px\] {
    margin: -1px
}

.m-\[0\],
.m-\[0px\] {
    margin: 0
}

.m-auto {
    margin: auto
}

.m-sm {
    margin: var(--tom-spacing-sm)
}

.m-xsm {
    margin: var(--tom-spacing-xsm)
}

.mx-2xlg {
    margin-left: var(--tom-spacing-2xlg);
    margin-right: var(--tom-spacing-2xlg)
}

.mx-auto {
    margin-left: auto;
    margin-right: auto
}

.mx-md {
    margin-left: var(--tom-spacing-md);
    margin-right: var(--tom-spacing-md)
}

.mx-sm {
    margin-left: var(--tom-spacing-sm);
    margin-right: var(--tom-spacing-sm)
}

.mx-xlg {
    margin-left: var(--tom-spacing-xlg);
    margin-right: var(--tom-spacing-xlg)
}

.mx-xsm {
    margin-left: var(--tom-spacing-xsm);
    margin-right: var(--tom-spacing-xsm)
}

.my-2xsm {
    margin-top: var(--tom-spacing-2xsm);
    margin-bottom: var(--tom-spacing-2xsm)
}

.my-auto {
    margin-top: auto;
    margin-bottom: auto
}

.my-lg {
    margin-top: var(--tom-spacing-lg);
    margin-bottom: var(--tom-spacing-lg)
}

.my-md {
    margin-top: var(--tom-spacing-md);
    margin-bottom: var(--tom-spacing-md)
}

.my-sm {
    margin-top: var(--tom-spacing-sm);
    margin-bottom: var(--tom-spacing-sm)
}

.my-xsm {
    margin-top: var(--tom-spacing-xsm);
    margin-bottom: var(--tom-spacing-xsm)
}

.\!mt-2xsm {
    margin-top: var(--tom-spacing-2xsm) !important
}

.\!mt-3xsm {
    margin-top: var(--tom-spacing-3xsm) !important
}

.-mt-lg {
    margin-top: calc(var(--tom-spacing-lg)*-1)
}

.mb-2xsm {
    margin-bottom: var(--tom-spacing-2xsm)
}

.mb-\[0px\] {
    margin-bottom: 0
}

.mb-lg {
    margin-bottom: var(--tom-spacing-lg)
}

.mb-md {
    margin-bottom: var(--tom-spacing-md)
}

.mb-sm {
    margin-bottom: var(--tom-spacing-sm)
}

.mb-xsm {
    margin-bottom: var(--tom-spacing-xsm)
}

.ml-2xsm {
    margin-left: var(--tom-spacing-2xsm)
}

.ml-auto {
    margin-left: auto
}

.ml-md {
    margin-left: var(--tom-spacing-md)
}

.ml-sm {
    margin-left: var(--tom-spacing-sm)
}

.ml-xsm {
    margin-left: var(--tom-spacing-xsm)
}

.mr-2xsm {
    margin-right: var(--tom-spacing-2xsm)
}

.mr-\[36px\] {
    margin-right: 36px
}

.mr-auto {
    margin-right: auto
}

.mr-md {
    margin-right: var(--tom-spacing-md)
}

.mr-sm {
    margin-right: var(--tom-spacing-sm)
}

.mr-xsm {
    margin-right: var(--tom-spacing-xsm)
}

.mt-2xsm {
    margin-top: var(--tom-spacing-2xsm)
}

.mt-\[-25px\] {
    margin-top: -25px
}

.mt-\[-5px\] {
    margin-top: -5px
}

.mt-\[0px\] {
    margin-top: 0
}

.mt-\[10px\] {
    margin-top: 10px
}

.mt-\[2px\] {
    margin-top: 2px
}

.mt-\[4px\] {
    margin-top: 4px
}

.mt-auto {
    margin-top: auto
}

.mt-lg {
    margin-top: var(--tom-spacing-lg)
}

.mt-md {
    margin-top: var(--tom-spacing-md)
}

.mt-sm {
    margin-top: var(--tom-spacing-sm)
}

.mt-xlg {
    margin-top: var(--tom-spacing-xlg)
}

.mt-xsm {
    margin-top: var(--tom-spacing-xsm)
}

.box-border {
    box-sizing: border-box
}

.line-clamp-2 {
    -webkit-line-clamp: 2
}

.line-clamp-2,
.line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical
}

.line-clamp-3 {
    -webkit-line-clamp: 3
}

.line-clamp-\[17\] {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 17
}

.block {
    display: block
}

.inline-block {
    display: inline-block
}

.inline {
    display: inline
}

.flex {
    display: flex
}

.inline-flex {
    display: inline-flex
}

.table {
    display: table
}

.table-cell {
    display: table-cell
}

.grid {
    display: grid
}

.contents {
    display: contents
}

.list-item {
    display: list-item
}

.hidden {
    display: none
}

.aspect-auto {
    aspect-ratio: auto
}

.aspect-square {
    aspect-ratio: 1/1
}

.aspect-video {
    aspect-ratio: 16/9
}

.h-2xlg {
    height: var(--tom-spacing-2xlg)
}

.h-2xsm {
    height: var(--tom-spacing-2xsm)
}

.h-3xlg {
    height: var(--tom-spacing-3xlg)
}

.h-\[100\%\] {
    height: 100%
}

.h-\[100vh\] {
    height: 100vh
}

.h-\[110px\] {
    height: 110px
}

.h-\[12px\] {
    height: 12px
}

.h-\[137px\] {
    height: 137px
}

.h-\[14px\] {
    height: 14px
}

.h-\[16px\] {
    height: 16px
}

.h-\[1px\] {
    height: 1px
}

.h-\[20px\] {
    height: 20px
}

.h-\[26px\] {
    height: 26px
}

.h-\[30-px\] {
    height: 30-px
}

.h-\[32px\] {
    height: 32px
}

.h-\[36px\] {
    height: 36px
}

.h-\[40px\] {
    height: 40px
}

.h-\[42px\] {
    height: 42px
}

.h-\[48px\] {
    height: 48px
}

.h-\[50vh\] {
    height: 50vh
}

.h-\[52px\] {
    height: 52px
}

.h-\[60px\] {
    height: 60px
}

.h-\[63px\] {
    height: 63px
}

.h-\[64px\] {
    height: 64px
}

.h-\[6px\] {
    height: 6px
}

.h-\[88px\] {
    height: 88px
}

.h-\[90px\] {
    height: 90px
}

.h-\[auto\],
.h-auto {
    height: auto
}

.h-fit {
    height: -moz-fit-content;
    height: fit-content
}

.h-full {
    height: 100%
}

.h-screen {
    height: 100vh
}

.h-sm {
    height: var(--tom-spacing-sm)
}

.h-xlg {
    height: var(--tom-spacing-xlg)
}

.h-xsm {
    height: var(--tom-spacing-xsm)
}

.max-h-\[0px\] {
    max-height: 0
}

.max-h-\[120px\] {
    max-height: 120px
}

.max-h-\[40vh\] {
    max-height: 40vh
}

.max-h-\[42px\] {
    max-height: 42px
}

.max-h-\[445px\] {
    max-height: 445px
}

.max-h-\[54px\] {
    max-height: 54px
}

.max-h-\[90px\] {
    max-height: 90px
}

.max-h-full {
    max-height: 100%
}

.min-h-3xlg {
    min-height: var(--tom-spacing-3xlg)
}

.min-h-\[42px\] {
    min-height: 42px
}

.min-h-\[48px\] {
    min-height: 48px
}

.min-h-\[60px\] {
    min-height: 60px
}

.min-h-\[75px\] {
    min-height: 75px
}

.min-h-\[90px\] {
    min-height: 90px
}

.\!w-\[100\%\] {
    width: 100% !important
}

.\!w-\[150px\] {
    width: 150px !important
}

.\!w-\[170px\] {
    width: 170px !important
}

.\!w-auto {
    width: auto !important
}

.\!w-fit {
    width: -moz-fit-content !important;
    width: fit-content !important
}

.w-1\/2 {
    width: 50%
}

.w-3xlg {
    width: var(--tom-spacing-3xlg)
}

.w-\[100\%\] {
    width: 100%
}

.w-\[100vw\] {
    width: 100vw
}

.w-\[120px\] {
    width: 120px
}

.w-\[190px\] {
    width: 190px
}

.w-\[1px\] {
    width: 1px
}

.w-\[200px\] {
    width: 200px
}

.w-\[230px\] {
    width: 230px
}

.w-\[26px\] {
    width: 26px
}

.w-\[32px\] {
    width: 32px
}

.w-\[42px\] {
    width: 42px
}

.w-\[50px\] {
    width: 50px
}

.w-\[52px\] {
    width: 52px
}

.w-\[55px\] {
    width: 55px
}

.w-\[63px\] {
    width: 63px
}

.w-\[64px\] {
    width: 64px
}

.w-\[6px\] {
    width: 6px
}

.w-\[80\%\] {
    width: 80%
}

.w-\[85\%\] {
    width: 85%
}

.w-\[88px\] {
    width: 88px
}

.w-\[90px\] {
    width: 90px
}

.w-auto {
    width: auto
}

.w-fit {
    width: -moz-fit-content;
    width: fit-content
}

.w-full {
    width: 100%
}

.w-lg {
    width: var(--tom-spacing-lg)
}

.w-md {
    width: var(--tom-spacing-md)
}

.w-sm {
    width: var(--tom-spacing-sm)
}

.w-xlg {
    width: var(--tom-spacing-xlg)
}

.w-xsm {
    width: var(--tom-spacing-xsm)
}

.min-w-\[0px\] {
    min-width: 0
}

.min-w-\[240px\] {
    min-width: 240px
}

.min-w-\[280px\] {
    min-width: 280px
}

.min-w-\[40px\] {
    min-width: 40px
}

.min-w-\[42px\] {
    min-width: 42px
}

.min-w-\[48px\] {
    min-width: 48px
}

.min-w-\[60px\] {
    min-width: 60px
}

.max-w-\[260px\] {
    max-width: 260px
}

.max-w-\[32px\] {
    max-width: 32px
}

.max-w-\[42px\] {
    max-width: 42px
}

.max-w-\[690px\] {
    max-width: 690px
}

.flex-1 {
    flex: 1 1 0%
}

.flex-\[0_0_auto\] {
    flex: 0 0 auto
}

.flex-\[4\] {
    flex: 4
}

.shrink-0 {
    flex-shrink: 0
}

.flex-grow {
    flex-grow: 1
}

.flex-grow-0 {
    flex-grow: 0
}

.basis-1\/3 {
    flex-basis: 33.333333%
}

.basis-2\/3 {
    flex-basis: 66.666667%
}

.basis-full {
    flex-basis: 100%
}

.border-separate {
    border-collapse: separate
}

.border-spacing-y-3xsm {
    --tw-border-spacing-y: var(--tom-spacing-3xsm);
    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y)
}

.-translate-x-1\/2 {
    --tw-translate-x: -50%
}

.-translate-x-1\/2,
.-translate-x-\[0\] {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.-translate-x-\[0\] {
    --tw-translate-x: 0
}

.-translate-x-\[100\%\] {
    --tw-translate-x: -100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.-translate-y-1\/2,
.-translate-y-\[50\%\] {
    --tw-translate-y: -50%
}

.-translate-y-1\/2,
.-translate-y-\[50\%\],
.translate-x-\[100\%\] {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.translate-x-\[100\%\] {
    --tw-translate-x: 100%
}

.translate-y-full {
    --tw-translate-y: 100%
}

.transform,
.translate-y-full {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

@keyframes pulse {
    50% {
        opacity: .5
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite
}

@keyframes spin {
    to {
        transform: rotate(1turn)
    }
}

.animate-spin {
    animation: spin 1s linear infinite
}

.cursor-default {
    cursor: default
}

.cursor-none {
    cursor: none
}

.cursor-not-allowed {
    cursor: not-allowed
}

.cursor-pointer {
    cursor: pointer
}

.resize-none {
    resize: none
}

.snap-x {
    scroll-snap-type: x var(--tw-scroll-snap-strictness)
}

.snap-mandatory {
    --tw-scroll-snap-strictness: mandatory
}

.snap-start {
    scroll-snap-align: start
}

.scroll-m-\[40px\] {
    scroll-margin: 40px
}

.scroll-pl-md {
    scroll-padding-left: var(--tom-spacing-md)
}

.list-inside {
    list-style-position: inside
}

.list-outside {
    list-style-position: outside
}

.list-disc {
    list-style-type: disc
}

.list-none {
    list-style-type: none
}

.appearance-none {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.grid-flow-col {
    grid-auto-flow: column
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr))
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr))
}

.grid-cols-\[1fr_4fr_1fr\] {
    grid-template-columns: 1fr 4fr 1fr
}

.grid-cols-\[auto\2c 1fr\] {
    grid-template-columns: auto 1fr
}

.grid-cols-\[auto\] {
    grid-template-columns: auto
}

.grid-cols-\[max-content_minmax\(0\2c _1fr\)\] {
    grid-template-columns: max-content minmax(0, 1fr)
}

.grid-cols-\[min-content\] {
    grid-template-columns: min-content
}

.grid-cols-\[repeat\(auto-fit\2c _minmax\(30px\2c _max-content\)\)\] {
    grid-template-columns: repeat(auto-fit, minmax(30px, max-content))
}

.grid-cols-\[repeat\(auto-fit\2c _minmax\(40px\2c _max-content\)\)\] {
    grid-template-columns: repeat(auto-fit, minmax(40px, max-content))
}

.grid-rows-5 {
    grid-template-rows: repeat(5, minmax(0, 1fr))
}

.grid-rows-\[0fr\] {
    grid-template-rows: 0fr
}

.grid-rows-\[1fr\] {
    grid-template-rows: 1fr
}

.flex-row {
    flex-direction: row
}

.flex-col {
    flex-direction: column
}

.flex-wrap {
    flex-wrap: wrap
}

.flex-nowrap {
    flex-wrap: nowrap
}

.content-center {
    align-content: center
}

.content-between {
    align-content: space-between
}

.\!items-start {
    align-items: flex-start !important
}

.items-start {
    align-items: flex-start
}

.items-end {
    align-items: flex-end
}

.items-center {
    align-items: center
}

.items-baseline {
    align-items: baseline
}

.items-stretch {
    align-items: stretch
}

.justify-start {
    justify-content: flex-start
}

.justify-end {
    justify-content: flex-end
}

.justify-center {
    justify-content: center
}

.justify-between {
    justify-content: space-between
}

.justify-around {
    justify-content: space-around
}

.justify-items-start {
    justify-items: start
}

.gap-2xsm {
    gap: var(--tom-spacing-2xsm)
}

.gap-3xsm {
    gap: var(--tom-spacing-3xsm)
}

.gap-\[0\.6em\] {
    gap: .6em
}

.gap-lg {
    gap: var(--tom-spacing-lg)
}

.gap-md {
    gap: var(--tom-spacing-md)
}

.gap-sm {
    gap: var(--tom-spacing-sm)
}

.gap-xlg {
    gap: var(--tom-spacing-xlg)
}

.gap-xsm {
    gap: var(--tom-spacing-xsm)
}

.\!gap-x-2xsm {
    -moz-column-gap: var(--tom-spacing-2xsm) !important;
    column-gap: var(--tom-spacing-2xsm) !important
}

.gap-x-3xsm {
    -moz-column-gap: var(--tom-spacing-3xsm);
    column-gap: var(--tom-spacing-3xsm)
}

.gap-x-sm {
    -moz-column-gap: var(--tom-spacing-sm);
    column-gap: var(--tom-spacing-sm)
}

.gap-y-2xsm {
    row-gap: var(--tom-spacing-2xsm)
}

.divide-y-\[1px\]>:not([hidden])~:not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(1px*(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(1px*var(--tw-divide-y-reverse))
}

.divide-dashed>:not([hidden])~:not([hidden]) {
    border-style: dashed
}

.divide-on-surface-7>:not([hidden])~:not([hidden]) {
    border-color: var(--tom-color-on-surface-7)
}

.divide-on-surface-8>:not([hidden])~:not([hidden]) {
    border-color: var(--tom-color-on-surface-8)
}

.self-center {
    align-self: center
}

.self-stretch {
    align-self: stretch
}

.overflow-auto {
    overflow: auto
}

.overflow-hidden {
    overflow: hidden
}

.overflow-x-auto {
    overflow-x: auto
}

.overflow-y-auto {
    overflow-y: auto
}

.overflow-x-hidden {
    overflow-x: hidden
}

.overflow-x-scroll {
    overflow-x: scroll
}

.truncate {
    overflow: hidden;
    white-space: nowrap
}

.text-ellipsis,
.truncate {
    text-overflow: ellipsis
}



.break-normal {
    overflow-wrap: normal;
    word-break: normal
}

.break-words {
    overflow-wrap: break-word
}

.break-all {
    word-break: break-all
}

.rounded-2xlg {
    border-radius: var(--tom-radius-2xlg)
}

.rounded-\[0px\] {
    border-radius: 0
}

.rounded-\[50\%\] {
    border-radius: 50%
}

.rounded-full {
    border-radius: var(--tom-radius-full)
}

.rounded-lg {
    border-radius: var(--tom-radius-lg)
}

.rounded-md {
    border-radius: var(--tom-radius-md)
}

.rounded-sm {
    border-radius: var(--tom-radius-sm)
}

.rounded-xsm {
    border-radius: var(--tom-radius-xsm)
}

.rounded-l-md {
    border-top-left-radius: var(--tom-radius-md);
    border-bottom-left-radius: var(--tom-radius-md)
}

.rounded-r-md {
    border-bottom-right-radius: var(--tom-radius-md)
}

.rounded-r-md,
.rounded-t-md {
    border-top-right-radius: var(--tom-radius-md)
}

.rounded-t-md {
    border-top-left-radius: var(--tom-radius-md)
}

.rounded-ee-lg {
    border-end-end-radius: var(--tom-radius-lg)
}

.rounded-es-lg {
    border-end-start-radius: var(--tom-radius-lg)
}

.rounded-se-lg {
    border-start-end-radius: var(--tom-radius-lg)
}

.rounded-ss-lg {
    border-start-start-radius: var(--tom-radius-lg)
}

.border-medium {
    border-width: var(--tom-border-medium)
}

.border-thin {
    border-width: var(--tom-border-thin)
}

.border-b-medium {
    border-bottom-width: var(--tom-border-medium)
}

.border-b-thin {
    border-bottom-width: var(--tom-border-thin)
}

.border-t-\[1px\] {
    border-top-width: 1px
}

.border-t-medium {
    border-top-width: var(--tom-border-medium)
}

.border-t-thin {
    border-top-width: var(--tom-border-thin)
}

.border-solid {
    border-style: solid
}

.border-dashed {
    border-style: dashed
}

.border-none {
    border-style: none
}

.border-brand-lighter {
    border-color: var(--tom-color-brand-lighter)
}

.border-interaction-default {
    border-color: var(--tom-color-interaction-default)
}

.border-on-brand-default-inverted {
    border-color: var(--tom-color-on-brand-default-inverted)
}

.border-on-success-lighter-inverted {
    border-color: var(--tom-color-on-success-lighter-inverted)
}

.border-on-surface-5 {
    border-color: var(--tom-color-on-surface-5)
}

.border-on-surface-7 {
    border-color: var(--tom-color-on-surface-7)
}

.border-on-surface-8 {
    border-color: var(--tom-color-on-surface-8)
}

.border-surface-container-low {
    border-color: var(--tom-color-surface-container-low)
}

.border-surface-container-lower {
    border-color: var(--tom-color-surface-container-lower)
}

.border-b-on-surface-8 {
    border-bottom-color: var(--tom-color-on-surface-8)
}

.border-t-surface-container-low {
    border-top-color: var(--tom-color-surface-container-low)
}

.\!bg-surface-container-lower {
    background-color: var(--tom-color-surface-container-lower) !important
}

.bg-\[transparent\] {
    background-color: transparent
}

.bg-brand-darker {
    background-color: var(--tom-color-brand-darker)
}

.bg-brand-default {
    background-color: var(--tom-color-brand-default)
}

.bg-danger-lighter-inverted {
    background-color: var(--tom-color-danger-lighter-inverted)
}

.bg-green-100 {
    background-color: var(--tom-color-green-100)
}

.bg-info-lighter-inverted {
    background-color: var(--tom-color-info-lighter-inverted)
}

.bg-interaction-darker-inverted {
    background-color: var(--tom-color-interaction-darker-inverted)
}

.bg-interaction-default {
    background-color: var(--tom-color-interaction-default)
}

.bg-loyalty-darker-inverted {
    background-color: var(--tom-color-loyalty-darker-inverted)
}

.bg-on-brand-default {
    background-color: var(--tom-color-on-brand-default)
}

.bg-on-info-default {
    background-color: var(--tom-color-on-info-default)
}

.bg-on-interaction-lighter {
    background-color: var(--tom-color-on-interaction-lighter)
}

.bg-on-surface-1 {
    background-color: var(--tom-color-on-surface-1)
}

.bg-on-surface-2 {
    background-color: var(--tom-color-on-surface-2)
}

.bg-on-surface-6 {
    background-color: var(--tom-color-on-surface-6)
}

.bg-on-surface-7 {
    background-color: var(--tom-color-on-surface-7)
}

.bg-on-surface-9 {
    background-color: var(--tom-color-on-surface-9)
}

.bg-success-lighter-inverted {
    background-color: var(--tom-color-success-lighter-inverted)
}

.bg-surface-container-highest {
    background-color: var(--tom-color-surface-container-highest)
}

.bg-surface-container-low {
    background-color: var(--tom-color-surface-container-low)
}

.bg-surface-container-lower {
    background-color: var(--tom-color-surface-container-lower)
}

.bg-surface-container-lowest {
    background-color: var(--tom-color-surface-container-lowest)
}

.bg-surface-container-mid {
    background-color: var(--tom-color-surface-container-mid)
}

.bg-tangerine-400 {
    background-color: var(--tom-color-tangerine-400)
}

.bg-warning-lighter-inverted {
    background-color: var(--tom-color-warning-lighter-inverted)
}

.bg-contain {
    background-size: contain
}

.bg-cover {
    background-size: cover
}

.bg-center {
    background-position: 50%
}

.bg-repeat {
    background-repeat: repeat
}

.bg-no-repeat {
    background-repeat: no-repeat
}

.\!object-contain {
    -o-object-fit: contain !important;
    object-fit: contain !important
}

.object-contain {
    -o-object-fit: contain;
    object-fit: contain
}

.object-cover {
    -o-object-fit: cover;
    object-fit: cover
}

.p-2xsm {
    padding: var(--tom-spacing-2xsm)
}

.p-\[0px\] {
    padding: 0
}

.p-lg {
    padding: var(--tom-spacing-lg)
}

.p-md {
    padding: var(--tom-spacing-md)
}

.p-sm {
    padding: var(--tom-spacing-sm)
}

.p-xsm {
    padding: var(--tom-spacing-xsm)
}

.\!px-\[0px\] {
    padding-left: 0 !important;
    padding-right: 0 !important
}

.\!py-3xsm {
    padding-top: var(--tom-spacing-3xsm) !important;
    padding-bottom: var(--tom-spacing-3xsm) !important
}

.\!py-lg {
    padding-top: var(--tom-spacing-lg) !important;
    padding-bottom: var(--tom-spacing-lg) !important
}

.\!py-md {
    padding-top: var(--tom-spacing-md) !important;
    padding-bottom: var(--tom-spacing-md) !important
}

.px-2xlg {
    padding-left: var(--tom-spacing-2xlg);
    padding-right: var(--tom-spacing-2xlg)
}

.px-2xsm {
    padding-left: var(--tom-spacing-2xsm);
    padding-right: var(--tom-spacing-2xsm)
}

.px-\[0px\] {
    padding-left: 0;
    padding-right: 0
}

.px-md {
    padding-left: var(--tom-spacing-md);
    padding-right: var(--tom-spacing-md)
}

.px-sm {
    padding-left: var(--tom-spacing-sm);
    padding-right: var(--tom-spacing-sm)
}

.px-xsm {
    padding-left: var(--tom-spacing-xsm);
    padding-right: var(--tom-spacing-xsm)
}

.py-2xsm {
    padding-top: var(--tom-spacing-2xsm);
    padding-bottom: var(--tom-spacing-2xsm)
}

.py-\[0px\] {
    padding-top: 0;
    padding-bottom: 0
}

.py-lg {
    padding-top: var(--tom-spacing-lg);
    padding-bottom: var(--tom-spacing-lg)
}

.py-md {
    padding-top: var(--tom-spacing-md);
    padding-bottom: var(--tom-spacing-md)
}

.py-sm {
    padding-top: var(--tom-spacing-sm);
    padding-bottom: var(--tom-spacing-sm)
}

.py-xsm {
    padding-top: var(--tom-spacing-xsm);
    padding-bottom: var(--tom-spacing-xsm)
}

.pb-2xhg {
    padding-bottom: var(--tom-spacing-2xhg)
}

.pb-2xsm {
    padding-bottom: var(--tom-spacing-2xsm)
}

.pb-3xlg {
    padding-bottom: var(--tom-spacing-3xlg)
}

.pb-lg {
    padding-bottom: var(--tom-spacing-lg)
}

.pb-md {
    padding-bottom: var(--tom-spacing-md)
}

.pb-sm {
    padding-bottom: var(--tom-spacing-sm)
}

.pb-xlg {
    padding-bottom: var(--tom-spacing-xlg)
}

.pb-xsm {
    padding-bottom: var(--tom-spacing-xsm)
}

.pl-2xsm {
    padding-left: var(--tom-spacing-2xsm)
}

.pl-\[120px\] {
    padding-left: 120px
}

.pl-\[160px\] {
    padding-left: 160px
}

.pl-\[200px\] {
    padding-left: 200px
}

.pl-\[40px\] {
    padding-left: 40px
}

.pl-\[80px\] {
    padding-left: 80px
}

.pl-lg {
    padding-left: var(--tom-spacing-lg)
}

.pl-md {
    padding-left: var(--tom-spacing-md)
}

.pl-sm {
    padding-left: var(--tom-spacing-sm)
}

.pr-md {
    padding-right: var(--tom-spacing-md)
}

.pr-xsm {
    padding-right: var(--tom-spacing-xsm)
}

.pt-2xsm {
    padding-top: var(--tom-spacing-2xsm)
}

.pt-\[0\] {
    padding-top: 0
}

.pt-\[4px\] {
    padding-top: 4px
}

.pt-lg {
    padding-top: var(--tom-spacing-lg)
}

.pt-md {
    padding-top: var(--tom-spacing-md)
}

.pt-sm {
    padding-top: var(--tom-spacing-sm)
}

.pt-xlg {
    padding-top: var(--tom-spacing-xlg)
}

.pt-xsm {
    padding-top: var(--tom-spacing-xsm)
}

.text-left {
    text-align: left
}

.text-center {
    text-align: center
}

.text-right {
    text-align: right
}

.text-justify {
    text-align: justify
}

.align-top {
    vertical-align: top
}

.uppercase {
    text-transform: uppercase
}

.italic {
    font-style: italic
}

.\!text-trademark-color-whatsapp {
    color: var(--tom-color-trademark-color-whatsapp) !important
}

.text-\[\#5EBE09\] {
    --tw-text-opacity: 1;
    color: rgb(94 190 9/var(--tw-text-opacity, 1))
}

.text-\[\#A400E1\] {
    --tw-text-opacity: 1;
    color: rgb(164 0 225/var(--tw-text-opacity, 1))
}

.text-\[\#EEB510\] {
    --tw-text-opacity: 1;
    color: rgb(238 181 16/var(--tw-text-opacity, 1))
}

.text-\[\#F9C52E\] {
    --tw-text-opacity: 1;
    color: rgb(249 197 46/var(--tw-text-opacity, 1))
}

.text-\[\#FD8A25\] {
    --tw-text-opacity: 1;
    color: rgb(253 138 37/var(--tw-text-opacity, 1))
}

.text-brand-default {
    color: var(--tom-color-brand-default)
}

.text-danger-default {
    color: var(--tom-color-danger-default)
}

.text-danger-lighter {
    color: var(--tom-color-danger-lighter)
}

.text-interaction-default {
    color: var(--tom-color-interaction-default)
}

.text-on-brand-darker {
    color: var(--tom-color-on-brand-darker)
}

.text-on-brand-default {
    color: var(--tom-color-on-brand-default)
}

.text-on-brand-default-inverted {
    color: var(--tom-color-on-brand-default-inverted)
}

.text-on-danger-lighter-inverted {
    color: var(--tom-color-on-danger-lighter-inverted)
}

.text-on-info-default {
    color: var(--tom-color-on-info-default)
}

.text-on-info-lighter-inverted {
    color: var(--tom-color-on-info-lighter-inverted)
}

.text-on-interaction-darker-inverted {
    color: var(--tom-color-on-interaction-darker-inverted)
}

.text-on-interaction-default {
    color: var(--tom-color-on-interaction-default)
}

.text-on-interaction-default-inverted {
    color: var(--tom-color-on-interaction-default-inverted)
}

.text-on-loyalty-darker-inverted {
    color: var(--tom-color-on-loyalty-darker-inverted)
}

.text-on-success-darker-inverted {
    color: var(--tom-color-on-success-darker-inverted)
}

.text-on-success-default-inverted {
    color: var(--tom-color-on-success-default-inverted)
}

.text-on-success-lighter-inverted {
    color: var(--tom-color-on-success-lighter-inverted)
}

.text-on-surface-1 {
    color: var(--tom-color-on-surface-1)
}

.text-on-surface-10 {
    color: var(--tom-color-on-surface-10)
}

.text-on-surface-2 {
    color: var(--tom-color-on-surface-2)
}

.text-on-surface-3 {
    color: var(--tom-color-on-surface-3)
}

.text-on-surface-4 {
    color: var(--tom-color-on-surface-4)
}

.text-on-surface-5 {
    color: var(--tom-color-on-surface-5)
}

.text-on-surface-6 {
    color: var(--tom-color-on-surface-6)
}

.text-on-surface-8 {
    color: var(--tom-color-on-surface-8)
}

.text-on-warning-lighter-inverted {
    color: var(--tom-color-on-warning-lighter-inverted)
}

.text-success-darker {
    color: var(--tom-color-success-darker)
}

.text-success-default {
    color: var(--tom-color-success-default)
}

.text-surface-container-lowest {
    color: var(--tom-color-surface-container-lowest)
}

.text-trademark-color-aliexpress {
    color: var(--tom-color-trademark-color-aliexpress)
}

.text-warning-lighter {
    color: var(--tom-color-warning-lighter)
}

.underline {
    text-decoration-line: underline
}

.line-through {
    text-decoration-line: line-through
}

.no-underline {
    text-decoration-line: none
}

.opacity-30 {
    opacity: var(--tom-opacity-30)
}

.opacity-40 {
    opacity: var(--tom-opacity-40)
}

.opacity-50 {
    opacity: var(--tom-opacity-50)
}

.opacity-60 {
    opacity: var(--tom-opacity-60)
}

.opacity-70 {
    opacity: var(--tom-opacity-70)
}

.opacity-90 {
    opacity: var(--tom-opacity-90)
}

.mix-blend-multiply {
    mix-blend-mode: multiply
}

.shadow-on-surface-4 {
    --tw-shadow-color: var(--tom-color-on-surface-4);
    --tw-shadow: var(--tw-shadow-colored)
}

.outline-none {
    outline: 2px solid transparent;
    outline-offset: 2px
}

.outline {
    outline-style: solid
}

.ring-1 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)
}

.ring-1,
.ring-2 {
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.ring-2 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)
}

.ring-inset {
    --tw-ring-inset: inset
}

.ring-interaction-default {
    --tw-ring-color: var(--tom-color-interaction-default)
}

.ring-on-surface-7 {
    --tw-ring-color: var(--tom-color-on-surface-7)
}

.filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.backdrop-blur-sm {
    --tw-backdrop-blur: blur(4px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.transition-\[grid-template-rows\2c max-height\] {
    transition-property: grid-template-rows, max-height;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.transition-none {
    transition-property: none
}

.transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.delay-150 {
    transition-delay: .15s
}

.delay-300 {
    transition-delay: .3s
}

.duration-\[0\.3s\] {
    transition-duration: .3s
}

.ease-in-out {
    transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}

.ease-out {
    transition-timing-function: cubic-bezier(0, 0, .2, 1)
}

.area {
    min-width: var(--tom-screen-responsive-min);
    max-width: var(--tom-screen-responsive-max);
    margin-left: auto;
    margin-right: auto
}

.bg-rainbow-gradient {
    background-image: linear-gradient(90deg, #ffff4a 0, #fcd000 4%, #ffc112 8%, #ffc112 11%, #ff8a00 16%, #ff5f5f 22%, #ff253a 28%, #ff37a8 37%, #c739ff 49%, #a400e1 56%, #2eceff 72%, #0086ff 80%, #72f772 94%, #00d604)
}

.elevation-lg {
    box-shadow: var(--tom-elevation-lg)
}

.elevation-md {
    box-shadow: var(--tom-elevation-md)
}

.elevation-sm {
    box-shadow: var(--tom-elevation-sm)
}

.grid-areas-\[discount_discount\2c original_original_\2c final_method\2c installment_installment\] {
    grid-template-areas: "discount discount" "original original" "final method" "installment installment"
}

.grid-in-\[discount\] {
    grid-area: discount
}

.grid-in-\[final\] {
    grid-area: final
}

.grid-in-\[installment\] {
    grid-area: installment
}

.grid-in-\[method\] {
    grid-area: method
}

.grid-in-\[original\] {
    grid-area: original
}

.hidden-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none
}

.hidden-scrollbar::-webkit-scrollbar {
    display: none
}

.overflow-x-shadow {
    overflow-x: auto;
    display: flex;
    flex-wrap: nowrap;
    background-image: linear-gradient(to right, var(--tom-color-brand-default-inverted), var(--tom-color-brand-default-inverted)), linear-gradient(to right, var(--tom-color-brand-default-inverted), var(--tom-color-brand-default-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-brand-default-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-brand-default-inverted));
    background-repeat: no-repeat;
    background-position: 0, 100%, 0, 100%;
    background-size: 10px 100%, 10px 100%, 10px 100%, 10px 100%;
    background-attachment: local, local, scroll, scroll
}

.overflow-x-shadow.bg-brand-default {
    background-image: linear-gradient(to right, var(--tom-color-brand-default), var(--tom-color-brand-default)), linear-gradient(to right, var(--tom-color-brand-default), var(--tom-color-brand-default)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-brand-default)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-brand-default))
}

.overflow-x-shadow.bg-brand-darker {
    background-image: linear-gradient(to right, var(--tom-color-brand-darker), var(--tom-color-brand-darker)), linear-gradient(to right, var(--tom-color-brand-darker), var(--tom-color-brand-darker)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-brand-darker)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-brand-darker))
}

.overflow-x-shadow.bg-brand-lighter {
    background-image: linear-gradient(to right, var(--tom-color-brand-lighter), var(--tom-color-brand-lighter)), linear-gradient(to right, var(--tom-color-brand-lighter), var(--tom-color-brand-lighter)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-brand-lighter)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-brand-lighter))
}

.overflow-x-shadow.bg-brand-default-inverted {
    background-image: linear-gradient(to right, var(--tom-color-brand-default-inverted), var(--tom-color-brand-default-inverted)), linear-gradient(to right, var(--tom-color-brand-default-inverted), var(--tom-color-brand-default-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-brand-default-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-brand-default-inverted))
}

.overflow-x-shadow.bg-brand-darker-inverted {
    background-image: linear-gradient(to right, var(--tom-color-brand-darker-inverted), var(--tom-color-brand-darker-inverted)), linear-gradient(to right, var(--tom-color-brand-darker-inverted), var(--tom-color-brand-darker-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-brand-darker-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-brand-darker-inverted))
}

.overflow-x-shadow.bg-brand-lighter-inverted {
    background-image: linear-gradient(to right, var(--tom-color-brand-lighter-inverted), var(--tom-color-brand-lighter-inverted)), linear-gradient(to right, var(--tom-color-brand-lighter-inverted), var(--tom-color-brand-lighter-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-brand-lighter-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-brand-lighter-inverted))
}

.overflow-x-shadow.bg-on-brand-default {
    background-image: linear-gradient(to right, var(--tom-color-on-brand-default), var(--tom-color-on-brand-default)), linear-gradient(to right, var(--tom-color-on-brand-default), var(--tom-color-on-brand-default)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-brand-default)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-brand-default))
}

.overflow-x-shadow.bg-on-brand-darker {
    background-image: linear-gradient(to right, var(--tom-color-on-brand-darker), var(--tom-color-on-brand-darker)), linear-gradient(to right, var(--tom-color-on-brand-darker), var(--tom-color-on-brand-darker)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-brand-darker)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-brand-darker))
}

.overflow-x-shadow.bg-on-brand-lighter {
    background-image: linear-gradient(to right, var(--tom-color-on-brand-lighter), var(--tom-color-on-brand-lighter)), linear-gradient(to right, var(--tom-color-on-brand-lighter), var(--tom-color-on-brand-lighter)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-brand-lighter)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-brand-lighter))
}

.overflow-x-shadow.bg-on-brand-default-inverted {
    background-image: linear-gradient(to right, var(--tom-color-on-brand-default-inverted), var(--tom-color-on-brand-default-inverted)), linear-gradient(to right, var(--tom-color-on-brand-default-inverted), var(--tom-color-on-brand-default-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-brand-default-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-brand-default-inverted))
}

.overflow-x-shadow.bg-on-brand-darker-inverted {
    background-image: linear-gradient(to right, var(--tom-color-on-brand-darker-inverted), var(--tom-color-on-brand-darker-inverted)), linear-gradient(to right, var(--tom-color-on-brand-darker-inverted), var(--tom-color-on-brand-darker-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-brand-darker-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-brand-darker-inverted))
}

.overflow-x-shadow.bg-on-brand-lighter-inverted {
    background-image: linear-gradient(to right, var(--tom-color-on-brand-lighter-inverted), var(--tom-color-on-brand-lighter-inverted)), linear-gradient(to right, var(--tom-color-on-brand-lighter-inverted), var(--tom-color-on-brand-lighter-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-brand-lighter-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-brand-lighter-inverted))
}

.overflow-x-shadow.bg-on-danger-default {
    background-image: linear-gradient(to right, var(--tom-color-on-danger-default), var(--tom-color-on-danger-default)), linear-gradient(to right, var(--tom-color-on-danger-default), var(--tom-color-on-danger-default)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-danger-default)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-danger-default))
}

.overflow-x-shadow.bg-on-danger-darker {
    background-image: linear-gradient(to right, var(--tom-color-on-danger-darker), var(--tom-color-on-danger-darker)), linear-gradient(to right, var(--tom-color-on-danger-darker), var(--tom-color-on-danger-darker)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-danger-darker)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-danger-darker))
}

.overflow-x-shadow.bg-on-danger-lighter {
    background-image: linear-gradient(to right, var(--tom-color-on-danger-lighter), var(--tom-color-on-danger-lighter)), linear-gradient(to right, var(--tom-color-on-danger-lighter), var(--tom-color-on-danger-lighter)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-danger-lighter)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-danger-lighter))
}

.overflow-x-shadow.bg-on-danger-default-inverted {
    background-image: linear-gradient(to right, var(--tom-color-on-danger-default-inverted), var(--tom-color-on-danger-default-inverted)), linear-gradient(to right, var(--tom-color-on-danger-default-inverted), var(--tom-color-on-danger-default-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-danger-default-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-danger-default-inverted))
}

.overflow-x-shadow.bg-on-danger-darker-inverted {
    background-image: linear-gradient(to right, var(--tom-color-on-danger-darker-inverted), var(--tom-color-on-danger-darker-inverted)), linear-gradient(to right, var(--tom-color-on-danger-darker-inverted), var(--tom-color-on-danger-darker-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-danger-darker-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-danger-darker-inverted))
}

.overflow-x-shadow.bg-on-danger-lighter-inverted {
    background-image: linear-gradient(to right, var(--tom-color-on-danger-lighter-inverted), var(--tom-color-on-danger-lighter-inverted)), linear-gradient(to right, var(--tom-color-on-danger-lighter-inverted), var(--tom-color-on-danger-lighter-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-danger-lighter-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-danger-lighter-inverted))
}

.overflow-x-shadow.bg-on-info-default {
    background-image: linear-gradient(to right, var(--tom-color-on-info-default), var(--tom-color-on-info-default)), linear-gradient(to right, var(--tom-color-on-info-default), var(--tom-color-on-info-default)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-info-default)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-info-default))
}

.overflow-x-shadow.bg-on-info-darker {
    background-image: linear-gradient(to right, var(--tom-color-on-info-darker), var(--tom-color-on-info-darker)), linear-gradient(to right, var(--tom-color-on-info-darker), var(--tom-color-on-info-darker)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-info-darker)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-info-darker))
}

.overflow-x-shadow.bg-on-info-lighter {
    background-image: linear-gradient(to right, var(--tom-color-on-info-lighter), var(--tom-color-on-info-lighter)), linear-gradient(to right, var(--tom-color-on-info-lighter), var(--tom-color-on-info-lighter)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-info-lighter)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-info-lighter))
}

.overflow-x-shadow.bg-on-info-default-inverted {
    background-image: linear-gradient(to right, var(--tom-color-on-info-default-inverted), var(--tom-color-on-info-default-inverted)), linear-gradient(to right, var(--tom-color-on-info-default-inverted), var(--tom-color-on-info-default-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-info-default-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-info-default-inverted))
}

.overflow-x-shadow.bg-on-info-darker-inverted {
    background-image: linear-gradient(to right, var(--tom-color-on-info-darker-inverted), var(--tom-color-on-info-darker-inverted)), linear-gradient(to right, var(--tom-color-on-info-darker-inverted), var(--tom-color-on-info-darker-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-info-darker-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-info-darker-inverted))
}

.overflow-x-shadow.bg-on-info-lighter-inverted {
    background-image: linear-gradient(to right, var(--tom-color-on-info-lighter-inverted), var(--tom-color-on-info-lighter-inverted)), linear-gradient(to right, var(--tom-color-on-info-lighter-inverted), var(--tom-color-on-info-lighter-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-info-lighter-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-info-lighter-inverted))
}

.overflow-x-shadow.bg-on-interaction-default {
    background-image: linear-gradient(to right, var(--tom-color-on-interaction-default), var(--tom-color-on-interaction-default)), linear-gradient(to right, var(--tom-color-on-interaction-default), var(--tom-color-on-interaction-default)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-interaction-default)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-interaction-default))
}

.overflow-x-shadow.bg-on-interaction-darker {
    background-image: linear-gradient(to right, var(--tom-color-on-interaction-darker), var(--tom-color-on-interaction-darker)), linear-gradient(to right, var(--tom-color-on-interaction-darker), var(--tom-color-on-interaction-darker)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-interaction-darker)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-interaction-darker))
}

.overflow-x-shadow.bg-on-interaction-lighter {
    background-image: linear-gradient(to right, var(--tom-color-on-interaction-lighter), var(--tom-color-on-interaction-lighter)), linear-gradient(to right, var(--tom-color-on-interaction-lighter), var(--tom-color-on-interaction-lighter)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-interaction-lighter)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-interaction-lighter))
}

.overflow-x-shadow.bg-on-interaction-default-inverted {
    background-image: linear-gradient(to right, var(--tom-color-on-interaction-default-inverted), var(--tom-color-on-interaction-default-inverted)), linear-gradient(to right, var(--tom-color-on-interaction-default-inverted), var(--tom-color-on-interaction-default-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-interaction-default-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-interaction-default-inverted))
}

.overflow-x-shadow.bg-on-interaction-darker-inverted {
    background-image: linear-gradient(to right, var(--tom-color-on-interaction-darker-inverted), var(--tom-color-on-interaction-darker-inverted)), linear-gradient(to right, var(--tom-color-on-interaction-darker-inverted), var(--tom-color-on-interaction-darker-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-interaction-darker-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-interaction-darker-inverted))
}

.overflow-x-shadow.bg-on-interaction-lighter-inverted {
    background-image: linear-gradient(to right, var(--tom-color-on-interaction-lighter-inverted), var(--tom-color-on-interaction-lighter-inverted)), linear-gradient(to right, var(--tom-color-on-interaction-lighter-inverted), var(--tom-color-on-interaction-lighter-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-interaction-lighter-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-interaction-lighter-inverted))
}

.overflow-x-shadow.bg-on-loyalty-default {
    background-image: linear-gradient(to right, var(--tom-color-on-loyalty-default), var(--tom-color-on-loyalty-default)), linear-gradient(to right, var(--tom-color-on-loyalty-default), var(--tom-color-on-loyalty-default)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-loyalty-default)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-loyalty-default))
}

.overflow-x-shadow.bg-on-loyalty-darker {
    background-image: linear-gradient(to right, var(--tom-color-on-loyalty-darker), var(--tom-color-on-loyalty-darker)), linear-gradient(to right, var(--tom-color-on-loyalty-darker), var(--tom-color-on-loyalty-darker)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-loyalty-darker)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-loyalty-darker))
}

.overflow-x-shadow.bg-on-loyalty-lighter {
    background-image: linear-gradient(to right, var(--tom-color-on-loyalty-lighter), var(--tom-color-on-loyalty-lighter)), linear-gradient(to right, var(--tom-color-on-loyalty-lighter), var(--tom-color-on-loyalty-lighter)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-loyalty-lighter)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-loyalty-lighter))
}

.overflow-x-shadow.bg-on-loyalty-default-inverted {
    background-image: linear-gradient(to right, var(--tom-color-on-loyalty-default-inverted), var(--tom-color-on-loyalty-default-inverted)), linear-gradient(to right, var(--tom-color-on-loyalty-default-inverted), var(--tom-color-on-loyalty-default-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-loyalty-default-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-loyalty-default-inverted))
}

.overflow-x-shadow.bg-on-loyalty-darker-inverted {
    background-image: linear-gradient(to right, var(--tom-color-on-loyalty-darker-inverted), var(--tom-color-on-loyalty-darker-inverted)), linear-gradient(to right, var(--tom-color-on-loyalty-darker-inverted), var(--tom-color-on-loyalty-darker-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-loyalty-darker-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-loyalty-darker-inverted))
}

.overflow-x-shadow.bg-on-loyalty-lighter-inverted {
    background-image: linear-gradient(to right, var(--tom-color-on-loyalty-lighter-inverted), var(--tom-color-on-loyalty-lighter-inverted)), linear-gradient(to right, var(--tom-color-on-loyalty-lighter-inverted), var(--tom-color-on-loyalty-lighter-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-loyalty-lighter-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-loyalty-lighter-inverted))
}

.overflow-x-shadow.bg-on-success-default {
    background-image: linear-gradient(to right, var(--tom-color-on-success-default), var(--tom-color-on-success-default)), linear-gradient(to right, var(--tom-color-on-success-default), var(--tom-color-on-success-default)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-success-default)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-success-default))
}

.overflow-x-shadow.bg-on-success-darker {
    background-image: linear-gradient(to right, var(--tom-color-on-success-darker), var(--tom-color-on-success-darker)), linear-gradient(to right, var(--tom-color-on-success-darker), var(--tom-color-on-success-darker)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-success-darker)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-success-darker))
}

.overflow-x-shadow.bg-on-success-lighter {
    background-image: linear-gradient(to right, var(--tom-color-on-success-lighter), var(--tom-color-on-success-lighter)), linear-gradient(to right, var(--tom-color-on-success-lighter), var(--tom-color-on-success-lighter)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-success-lighter)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-success-lighter))
}

.overflow-x-shadow.bg-on-success-default-inverted {
    background-image: linear-gradient(to right, var(--tom-color-on-success-default-inverted), var(--tom-color-on-success-default-inverted)), linear-gradient(to right, var(--tom-color-on-success-default-inverted), var(--tom-color-on-success-default-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-success-default-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-success-default-inverted))
}

.overflow-x-shadow.bg-on-success-darker-inverted {
    background-image: linear-gradient(to right, var(--tom-color-on-success-darker-inverted), var(--tom-color-on-success-darker-inverted)), linear-gradient(to right, var(--tom-color-on-success-darker-inverted), var(--tom-color-on-success-darker-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-success-darker-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-success-darker-inverted))
}

.overflow-x-shadow.bg-on-success-lighter-inverted {
    background-image: linear-gradient(to right, var(--tom-color-on-success-lighter-inverted), var(--tom-color-on-success-lighter-inverted)), linear-gradient(to right, var(--tom-color-on-success-lighter-inverted), var(--tom-color-on-success-lighter-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-success-lighter-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-success-lighter-inverted))
}

.overflow-x-shadow.bg-on-surface-1 {
    background-image: linear-gradient(to right, var(--tom-color-on-surface-1), var(--tom-color-on-surface-1)), linear-gradient(to right, var(--tom-color-on-surface-1), var(--tom-color-on-surface-1)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-surface-1)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-surface-1))
}

.overflow-x-shadow.bg-on-surface-2 {
    background-image: linear-gradient(to right, var(--tom-color-on-surface-2), var(--tom-color-on-surface-2)), linear-gradient(to right, var(--tom-color-on-surface-2), var(--tom-color-on-surface-2)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-surface-2)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-surface-2))
}

.overflow-x-shadow.bg-on-surface-3 {
    background-image: linear-gradient(to right, var(--tom-color-on-surface-3), var(--tom-color-on-surface-3)), linear-gradient(to right, var(--tom-color-on-surface-3), var(--tom-color-on-surface-3)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-surface-3)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-surface-3))
}

.overflow-x-shadow.bg-on-surface-4 {
    background-image: linear-gradient(to right, var(--tom-color-on-surface-4), var(--tom-color-on-surface-4)), linear-gradient(to right, var(--tom-color-on-surface-4), var(--tom-color-on-surface-4)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-surface-4)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-surface-4))
}

.overflow-x-shadow.bg-on-surface-5 {
    background-image: linear-gradient(to right, var(--tom-color-on-surface-5), var(--tom-color-on-surface-5)), linear-gradient(to right, var(--tom-color-on-surface-5), var(--tom-color-on-surface-5)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-surface-5)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-surface-5))
}

.overflow-x-shadow.bg-on-surface-6 {
    background-image: linear-gradient(to right, var(--tom-color-on-surface-6), var(--tom-color-on-surface-6)), linear-gradient(to right, var(--tom-color-on-surface-6), var(--tom-color-on-surface-6)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-surface-6)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-surface-6))
}

.overflow-x-shadow.bg-on-surface-7 {
    background-image: linear-gradient(to right, var(--tom-color-on-surface-7), var(--tom-color-on-surface-7)), linear-gradient(to right, var(--tom-color-on-surface-7), var(--tom-color-on-surface-7)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-surface-7)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-surface-7))
}

.overflow-x-shadow.bg-on-surface-8 {
    background-image: linear-gradient(to right, var(--tom-color-on-surface-8), var(--tom-color-on-surface-8)), linear-gradient(to right, var(--tom-color-on-surface-8), var(--tom-color-on-surface-8)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-surface-8)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-surface-8))
}

.overflow-x-shadow.bg-on-surface-9 {
    background-image: linear-gradient(to right, var(--tom-color-on-surface-9), var(--tom-color-on-surface-9)), linear-gradient(to right, var(--tom-color-on-surface-9), var(--tom-color-on-surface-9)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-surface-9)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-surface-9))
}

.overflow-x-shadow.bg-on-surface-10 {
    background-image: linear-gradient(to right, var(--tom-color-on-surface-10), var(--tom-color-on-surface-10)), linear-gradient(to right, var(--tom-color-on-surface-10), var(--tom-color-on-surface-10)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-surface-10)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-surface-10))
}

.overflow-x-shadow.bg-on-warning-default {
    background-image: linear-gradient(to right, var(--tom-color-on-warning-default), var(--tom-color-on-warning-default)), linear-gradient(to right, var(--tom-color-on-warning-default), var(--tom-color-on-warning-default)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-warning-default)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-warning-default))
}

.overflow-x-shadow.bg-on-warning-darker {
    background-image: linear-gradient(to right, var(--tom-color-on-warning-darker), var(--tom-color-on-warning-darker)), linear-gradient(to right, var(--tom-color-on-warning-darker), var(--tom-color-on-warning-darker)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-warning-darker)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-warning-darker))
}

.overflow-x-shadow.bg-on-warning-lighter {
    background-image: linear-gradient(to right, var(--tom-color-on-warning-lighter), var(--tom-color-on-warning-lighter)), linear-gradient(to right, var(--tom-color-on-warning-lighter), var(--tom-color-on-warning-lighter)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-warning-lighter)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-warning-lighter))
}

.overflow-x-shadow.bg-on-warning-default-inverted {
    background-image: linear-gradient(to right, var(--tom-color-on-warning-default-inverted), var(--tom-color-on-warning-default-inverted)), linear-gradient(to right, var(--tom-color-on-warning-default-inverted), var(--tom-color-on-warning-default-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-warning-default-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-warning-default-inverted))
}

.overflow-x-shadow.bg-on-warning-darker-inverted {
    background-image: linear-gradient(to right, var(--tom-color-on-warning-darker-inverted), var(--tom-color-on-warning-darker-inverted)), linear-gradient(to right, var(--tom-color-on-warning-darker-inverted), var(--tom-color-on-warning-darker-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-warning-darker-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-warning-darker-inverted))
}

.overflow-x-shadow.bg-on-warning-lighter-inverted {
    background-image: linear-gradient(to right, var(--tom-color-on-warning-lighter-inverted), var(--tom-color-on-warning-lighter-inverted)), linear-gradient(to right, var(--tom-color-on-warning-lighter-inverted), var(--tom-color-on-warning-lighter-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-warning-lighter-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-warning-lighter-inverted))
}

.overflow-x-shadow.bg-on-artic-100 {
    background-image: linear-gradient(to right, var(--tom-color-on-artic-100), var(--tom-color-on-artic-100)), linear-gradient(to right, var(--tom-color-on-artic-100), var(--tom-color-on-artic-100)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-artic-100)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-artic-100))
}

.overflow-x-shadow.bg-on-artic-200 {
    background-image: linear-gradient(to right, var(--tom-color-on-artic-200), var(--tom-color-on-artic-200)), linear-gradient(to right, var(--tom-color-on-artic-200), var(--tom-color-on-artic-200)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-artic-200)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-artic-200))
}

.overflow-x-shadow.bg-on-artic-300 {
    background-image: linear-gradient(to right, var(--tom-color-on-artic-300), var(--tom-color-on-artic-300)), linear-gradient(to right, var(--tom-color-on-artic-300), var(--tom-color-on-artic-300)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-artic-300)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-artic-300))
}

.overflow-x-shadow.bg-on-artic-400 {
    background-image: linear-gradient(to right, var(--tom-color-on-artic-400), var(--tom-color-on-artic-400)), linear-gradient(to right, var(--tom-color-on-artic-400), var(--tom-color-on-artic-400)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-artic-400)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-artic-400))
}

.overflow-x-shadow.bg-on-artic-000 {
    background-image: linear-gradient(to right, var(--tom-color-on-artic-000), var(--tom-color-on-artic-000)), linear-gradient(to right, var(--tom-color-on-artic-000), var(--tom-color-on-artic-000)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-artic-000)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-artic-000))
}

.overflow-x-shadow.bg-on-blonde-100 {
    background-image: linear-gradient(to right, var(--tom-color-on-blonde-100), var(--tom-color-on-blonde-100)), linear-gradient(to right, var(--tom-color-on-blonde-100), var(--tom-color-on-blonde-100)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-blonde-100)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-blonde-100))
}

.overflow-x-shadow.bg-on-blonde-200 {
    background-image: linear-gradient(to right, var(--tom-color-on-blonde-200), var(--tom-color-on-blonde-200)), linear-gradient(to right, var(--tom-color-on-blonde-200), var(--tom-color-on-blonde-200)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-blonde-200)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-blonde-200))
}

.overflow-x-shadow.bg-on-blonde-300 {
    background-image: linear-gradient(to right, var(--tom-color-on-blonde-300), var(--tom-color-on-blonde-300)), linear-gradient(to right, var(--tom-color-on-blonde-300), var(--tom-color-on-blonde-300)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-blonde-300)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-blonde-300))
}

.overflow-x-shadow.bg-on-blonde-400 {
    background-image: linear-gradient(to right, var(--tom-color-on-blonde-400), var(--tom-color-on-blonde-400)), linear-gradient(to right, var(--tom-color-on-blonde-400), var(--tom-color-on-blonde-400)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-blonde-400)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-blonde-400))
}

.overflow-x-shadow.bg-on-blonde-000 {
    background-image: linear-gradient(to right, var(--tom-color-on-blonde-000), var(--tom-color-on-blonde-000)), linear-gradient(to right, var(--tom-color-on-blonde-000), var(--tom-color-on-blonde-000)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-blonde-000)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-blonde-000))
}

.overflow-x-shadow.bg-on-blue-100 {
    background-image: linear-gradient(to right, var(--tom-color-on-blue-100), var(--tom-color-on-blue-100)), linear-gradient(to right, var(--tom-color-on-blue-100), var(--tom-color-on-blue-100)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-blue-100)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-blue-100))
}

.overflow-x-shadow.bg-on-blue-200 {
    background-image: linear-gradient(to right, var(--tom-color-on-blue-200), var(--tom-color-on-blue-200)), linear-gradient(to right, var(--tom-color-on-blue-200), var(--tom-color-on-blue-200)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-blue-200)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-blue-200))
}

.overflow-x-shadow.bg-on-blue-300 {
    background-image: linear-gradient(to right, var(--tom-color-on-blue-300), var(--tom-color-on-blue-300)), linear-gradient(to right, var(--tom-color-on-blue-300), var(--tom-color-on-blue-300)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-blue-300)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-blue-300))
}

.overflow-x-shadow.bg-on-blue-400 {
    background-image: linear-gradient(to right, var(--tom-color-on-blue-400), var(--tom-color-on-blue-400)), linear-gradient(to right, var(--tom-color-on-blue-400), var(--tom-color-on-blue-400)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-blue-400)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-blue-400))
}

.overflow-x-shadow.bg-on-blue-000 {
    background-image: linear-gradient(to right, var(--tom-color-on-blue-000), var(--tom-color-on-blue-000)), linear-gradient(to right, var(--tom-color-on-blue-000), var(--tom-color-on-blue-000)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-blue-000)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-blue-000))
}

.overflow-x-shadow.bg-on-cyan-100 {
    background-image: linear-gradient(to right, var(--tom-color-on-cyan-100), var(--tom-color-on-cyan-100)), linear-gradient(to right, var(--tom-color-on-cyan-100), var(--tom-color-on-cyan-100)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-cyan-100)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-cyan-100))
}

.overflow-x-shadow.bg-on-cyan-200 {
    background-image: linear-gradient(to right, var(--tom-color-on-cyan-200), var(--tom-color-on-cyan-200)), linear-gradient(to right, var(--tom-color-on-cyan-200), var(--tom-color-on-cyan-200)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-cyan-200)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-cyan-200))
}

.overflow-x-shadow.bg-on-cyan-300 {
    background-image: linear-gradient(to right, var(--tom-color-on-cyan-300), var(--tom-color-on-cyan-300)), linear-gradient(to right, var(--tom-color-on-cyan-300), var(--tom-color-on-cyan-300)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-cyan-300)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-cyan-300))
}

.overflow-x-shadow.bg-on-cyan-400 {
    background-image: linear-gradient(to right, var(--tom-color-on-cyan-400), var(--tom-color-on-cyan-400)), linear-gradient(to right, var(--tom-color-on-cyan-400), var(--tom-color-on-cyan-400)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-cyan-400)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-cyan-400))
}

.overflow-x-shadow.bg-on-cyan-500 {
    background-image: linear-gradient(to right, var(--tom-color-on-cyan-500), var(--tom-color-on-cyan-500)), linear-gradient(to right, var(--tom-color-on-cyan-500), var(--tom-color-on-cyan-500)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-cyan-500)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-cyan-500))
}

.overflow-x-shadow.bg-on-cyan-000 {
    background-image: linear-gradient(to right, var(--tom-color-on-cyan-000), var(--tom-color-on-cyan-000)), linear-gradient(to right, var(--tom-color-on-cyan-000), var(--tom-color-on-cyan-000)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-cyan-000)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-cyan-000))
}

.overflow-x-shadow.bg-on-gold-100 {
    background-image: linear-gradient(to right, var(--tom-color-on-gold-100), var(--tom-color-on-gold-100)), linear-gradient(to right, var(--tom-color-on-gold-100), var(--tom-color-on-gold-100)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-gold-100)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-gold-100))
}

.overflow-x-shadow.bg-on-gold-200 {
    background-image: linear-gradient(to right, var(--tom-color-on-gold-200), var(--tom-color-on-gold-200)), linear-gradient(to right, var(--tom-color-on-gold-200), var(--tom-color-on-gold-200)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-gold-200)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-gold-200))
}

.overflow-x-shadow.bg-on-gold-300 {
    background-image: linear-gradient(to right, var(--tom-color-on-gold-300), var(--tom-color-on-gold-300)), linear-gradient(to right, var(--tom-color-on-gold-300), var(--tom-color-on-gold-300)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-gold-300)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-gold-300))
}

.overflow-x-shadow.bg-on-gold-400 {
    background-image: linear-gradient(to right, var(--tom-color-on-gold-400), var(--tom-color-on-gold-400)), linear-gradient(to right, var(--tom-color-on-gold-400), var(--tom-color-on-gold-400)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-gold-400)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-gold-400))
}

.overflow-x-shadow.bg-on-gold-500 {
    background-image: linear-gradient(to right, var(--tom-color-on-gold-500), var(--tom-color-on-gold-500)), linear-gradient(to right, var(--tom-color-on-gold-500), var(--tom-color-on-gold-500)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-gold-500)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-gold-500))
}

.overflow-x-shadow.bg-on-gold-000 {
    background-image: linear-gradient(to right, var(--tom-color-on-gold-000), var(--tom-color-on-gold-000)), linear-gradient(to right, var(--tom-color-on-gold-000), var(--tom-color-on-gold-000)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-gold-000)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-gold-000))
}

.overflow-x-shadow.bg-on-green-100 {
    background-image: linear-gradient(to right, var(--tom-color-on-green-100), var(--tom-color-on-green-100)), linear-gradient(to right, var(--tom-color-on-green-100), var(--tom-color-on-green-100)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-green-100)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-green-100))
}

.overflow-x-shadow.bg-on-green-200 {
    background-image: linear-gradient(to right, var(--tom-color-on-green-200), var(--tom-color-on-green-200)), linear-gradient(to right, var(--tom-color-on-green-200), var(--tom-color-on-green-200)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-green-200)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-green-200))
}

.overflow-x-shadow.bg-on-green-300 {
    background-image: linear-gradient(to right, var(--tom-color-on-green-300), var(--tom-color-on-green-300)), linear-gradient(to right, var(--tom-color-on-green-300), var(--tom-color-on-green-300)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-green-300)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-green-300))
}

.overflow-x-shadow.bg-on-green-400 {
    background-image: linear-gradient(to right, var(--tom-color-on-green-400), var(--tom-color-on-green-400)), linear-gradient(to right, var(--tom-color-on-green-400), var(--tom-color-on-green-400)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-green-400)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-green-400))
}

.overflow-x-shadow.bg-on-green-500 {
    background-image: linear-gradient(to right, var(--tom-color-on-green-500), var(--tom-color-on-green-500)), linear-gradient(to right, var(--tom-color-on-green-500), var(--tom-color-on-green-500)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-green-500)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-green-500))
}

.overflow-x-shadow.bg-on-green-000 {
    background-image: linear-gradient(to right, var(--tom-color-on-green-000), var(--tom-color-on-green-000)), linear-gradient(to right, var(--tom-color-on-green-000), var(--tom-color-on-green-000)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-green-000)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-green-000))
}

.overflow-x-shadow.bg-on-grey-100 {
    background-image: linear-gradient(to right, var(--tom-color-on-grey-100), var(--tom-color-on-grey-100)), linear-gradient(to right, var(--tom-color-on-grey-100), var(--tom-color-on-grey-100)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-grey-100)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-grey-100))
}

.overflow-x-shadow.bg-on-grey-200 {
    background-image: linear-gradient(to right, var(--tom-color-on-grey-200), var(--tom-color-on-grey-200)), linear-gradient(to right, var(--tom-color-on-grey-200), var(--tom-color-on-grey-200)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-grey-200)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-grey-200))
}

.overflow-x-shadow.bg-on-grey-300 {
    background-image: linear-gradient(to right, var(--tom-color-on-grey-300), var(--tom-color-on-grey-300)), linear-gradient(to right, var(--tom-color-on-grey-300), var(--tom-color-on-grey-300)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-grey-300)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-grey-300))
}

.overflow-x-shadow.bg-on-grey-400 {
    background-image: linear-gradient(to right, var(--tom-color-on-grey-400), var(--tom-color-on-grey-400)), linear-gradient(to right, var(--tom-color-on-grey-400), var(--tom-color-on-grey-400)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-grey-400)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-grey-400))
}

.overflow-x-shadow.bg-on-grey-500 {
    background-image: linear-gradient(to right, var(--tom-color-on-grey-500), var(--tom-color-on-grey-500)), linear-gradient(to right, var(--tom-color-on-grey-500), var(--tom-color-on-grey-500)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-grey-500)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-grey-500))
}

.overflow-x-shadow.bg-on-grey-600 {
    background-image: linear-gradient(to right, var(--tom-color-on-grey-600), var(--tom-color-on-grey-600)), linear-gradient(to right, var(--tom-color-on-grey-600), var(--tom-color-on-grey-600)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-grey-600)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-grey-600))
}

.overflow-x-shadow.bg-on-grey-700 {
    background-image: linear-gradient(to right, var(--tom-color-on-grey-700), var(--tom-color-on-grey-700)), linear-gradient(to right, var(--tom-color-on-grey-700), var(--tom-color-on-grey-700)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-grey-700)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-grey-700))
}

.overflow-x-shadow.bg-on-grey-800 {
    background-image: linear-gradient(to right, var(--tom-color-on-grey-800), var(--tom-color-on-grey-800)), linear-gradient(to right, var(--tom-color-on-grey-800), var(--tom-color-on-grey-800)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-grey-800)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-grey-800))
}

.overflow-x-shadow.bg-on-grey-900 {
    background-image: linear-gradient(to right, var(--tom-color-on-grey-900), var(--tom-color-on-grey-900)), linear-gradient(to right, var(--tom-color-on-grey-900), var(--tom-color-on-grey-900)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-grey-900)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-grey-900))
}

.overflow-x-shadow.bg-on-grey-000 {
    background-image: linear-gradient(to right, var(--tom-color-on-grey-000), var(--tom-color-on-grey-000)), linear-gradient(to right, var(--tom-color-on-grey-000), var(--tom-color-on-grey-000)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-grey-000)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-grey-000))
}

.overflow-x-shadow.bg-on-lime-100 {
    background-image: linear-gradient(to right, var(--tom-color-on-lime-100), var(--tom-color-on-lime-100)), linear-gradient(to right, var(--tom-color-on-lime-100), var(--tom-color-on-lime-100)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-lime-100)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-lime-100))
}

.overflow-x-shadow.bg-on-lime-200 {
    background-image: linear-gradient(to right, var(--tom-color-on-lime-200), var(--tom-color-on-lime-200)), linear-gradient(to right, var(--tom-color-on-lime-200), var(--tom-color-on-lime-200)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-lime-200)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-lime-200))
}

.overflow-x-shadow.bg-on-lime-300 {
    background-image: linear-gradient(to right, var(--tom-color-on-lime-300), var(--tom-color-on-lime-300)), linear-gradient(to right, var(--tom-color-on-lime-300), var(--tom-color-on-lime-300)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-lime-300)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-lime-300))
}

.overflow-x-shadow.bg-on-lime-400 {
    background-image: linear-gradient(to right, var(--tom-color-on-lime-400), var(--tom-color-on-lime-400)), linear-gradient(to right, var(--tom-color-on-lime-400), var(--tom-color-on-lime-400)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-lime-400)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-lime-400))
}

.overflow-x-shadow.bg-on-lime-000 {
    background-image: linear-gradient(to right, var(--tom-color-on-lime-000), var(--tom-color-on-lime-000)), linear-gradient(to right, var(--tom-color-on-lime-000), var(--tom-color-on-lime-000)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-lime-000)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-lime-000))
}

.overflow-x-shadow.bg-on-pink-100 {
    background-image: linear-gradient(to right, var(--tom-color-on-pink-100), var(--tom-color-on-pink-100)), linear-gradient(to right, var(--tom-color-on-pink-100), var(--tom-color-on-pink-100)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-pink-100)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-pink-100))
}

.overflow-x-shadow.bg-on-pink-200 {
    background-image: linear-gradient(to right, var(--tom-color-on-pink-200), var(--tom-color-on-pink-200)), linear-gradient(to right, var(--tom-color-on-pink-200), var(--tom-color-on-pink-200)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-pink-200)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-pink-200))
}

.overflow-x-shadow.bg-on-pink-300 {
    background-image: linear-gradient(to right, var(--tom-color-on-pink-300), var(--tom-color-on-pink-300)), linear-gradient(to right, var(--tom-color-on-pink-300), var(--tom-color-on-pink-300)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-pink-300)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-pink-300))
}

.overflow-x-shadow.bg-on-pink-400 {
    background-image: linear-gradient(to right, var(--tom-color-on-pink-400), var(--tom-color-on-pink-400)), linear-gradient(to right, var(--tom-color-on-pink-400), var(--tom-color-on-pink-400)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-pink-400)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-pink-400))
}

.overflow-x-shadow.bg-on-pink-000 {
    background-image: linear-gradient(to right, var(--tom-color-on-pink-000), var(--tom-color-on-pink-000)), linear-gradient(to right, var(--tom-color-on-pink-000), var(--tom-color-on-pink-000)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-pink-000)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-pink-000))
}

.overflow-x-shadow.bg-on-purple-100 {
    background-image: linear-gradient(to right, var(--tom-color-on-purple-100), var(--tom-color-on-purple-100)), linear-gradient(to right, var(--tom-color-on-purple-100), var(--tom-color-on-purple-100)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-purple-100)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-purple-100))
}

.overflow-x-shadow.bg-on-purple-200 {
    background-image: linear-gradient(to right, var(--tom-color-on-purple-200), var(--tom-color-on-purple-200)), linear-gradient(to right, var(--tom-color-on-purple-200), var(--tom-color-on-purple-200)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-purple-200)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-purple-200))
}

.overflow-x-shadow.bg-on-purple-300 {
    background-image: linear-gradient(to right, var(--tom-color-on-purple-300), var(--tom-color-on-purple-300)), linear-gradient(to right, var(--tom-color-on-purple-300), var(--tom-color-on-purple-300)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-purple-300)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-purple-300))
}

.overflow-x-shadow.bg-on-purple-400 {
    background-image: linear-gradient(to right, var(--tom-color-on-purple-400), var(--tom-color-on-purple-400)), linear-gradient(to right, var(--tom-color-on-purple-400), var(--tom-color-on-purple-400)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-purple-400)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-purple-400))
}

.overflow-x-shadow.bg-on-purple-000 {
    background-image: linear-gradient(to right, var(--tom-color-on-purple-000), var(--tom-color-on-purple-000)), linear-gradient(to right, var(--tom-color-on-purple-000), var(--tom-color-on-purple-000)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-purple-000)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-purple-000))
}

.overflow-x-shadow.bg-on-red-100 {
    background-image: linear-gradient(to right, var(--tom-color-on-red-100), var(--tom-color-on-red-100)), linear-gradient(to right, var(--tom-color-on-red-100), var(--tom-color-on-red-100)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-red-100)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-red-100))
}

.overflow-x-shadow.bg-on-red-200 {
    background-image: linear-gradient(to right, var(--tom-color-on-red-200), var(--tom-color-on-red-200)), linear-gradient(to right, var(--tom-color-on-red-200), var(--tom-color-on-red-200)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-red-200)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-red-200))
}

.overflow-x-shadow.bg-on-red-300 {
    background-image: linear-gradient(to right, var(--tom-color-on-red-300), var(--tom-color-on-red-300)), linear-gradient(to right, var(--tom-color-on-red-300), var(--tom-color-on-red-300)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-red-300)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-red-300))
}

.overflow-x-shadow.bg-on-red-400 {
    background-image: linear-gradient(to right, var(--tom-color-on-red-400), var(--tom-color-on-red-400)), linear-gradient(to right, var(--tom-color-on-red-400), var(--tom-color-on-red-400)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-red-400)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-red-400))
}

.overflow-x-shadow.bg-on-red-500 {
    background-image: linear-gradient(to right, var(--tom-color-on-red-500), var(--tom-color-on-red-500)), linear-gradient(to right, var(--tom-color-on-red-500), var(--tom-color-on-red-500)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-red-500)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-red-500))
}

.overflow-x-shadow.bg-on-red-000 {
    background-image: linear-gradient(to right, var(--tom-color-on-red-000), var(--tom-color-on-red-000)), linear-gradient(to right, var(--tom-color-on-red-000), var(--tom-color-on-red-000)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-red-000)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-red-000))
}

.overflow-x-shadow.bg-on-scarlet-100 {
    background-image: linear-gradient(to right, var(--tom-color-on-scarlet-100), var(--tom-color-on-scarlet-100)), linear-gradient(to right, var(--tom-color-on-scarlet-100), var(--tom-color-on-scarlet-100)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-scarlet-100)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-scarlet-100))
}

.overflow-x-shadow.bg-on-scarlet-200 {
    background-image: linear-gradient(to right, var(--tom-color-on-scarlet-200), var(--tom-color-on-scarlet-200)), linear-gradient(to right, var(--tom-color-on-scarlet-200), var(--tom-color-on-scarlet-200)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-scarlet-200)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-scarlet-200))
}

.overflow-x-shadow.bg-on-scarlet-300 {
    background-image: linear-gradient(to right, var(--tom-color-on-scarlet-300), var(--tom-color-on-scarlet-300)), linear-gradient(to right, var(--tom-color-on-scarlet-300), var(--tom-color-on-scarlet-300)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-scarlet-300)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-scarlet-300))
}

.overflow-x-shadow.bg-on-scarlet-400 {
    background-image: linear-gradient(to right, var(--tom-color-on-scarlet-400), var(--tom-color-on-scarlet-400)), linear-gradient(to right, var(--tom-color-on-scarlet-400), var(--tom-color-on-scarlet-400)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-scarlet-400)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-scarlet-400))
}

.overflow-x-shadow.bg-on-scarlet-000 {
    background-image: linear-gradient(to right, var(--tom-color-on-scarlet-000), var(--tom-color-on-scarlet-000)), linear-gradient(to right, var(--tom-color-on-scarlet-000), var(--tom-color-on-scarlet-000)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-scarlet-000)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-scarlet-000))
}

.overflow-x-shadow.bg-on-tangerine-100 {
    background-image: linear-gradient(to right, var(--tom-color-on-tangerine-100), var(--tom-color-on-tangerine-100)), linear-gradient(to right, var(--tom-color-on-tangerine-100), var(--tom-color-on-tangerine-100)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-tangerine-100)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-tangerine-100))
}

.overflow-x-shadow.bg-on-tangerine-200 {
    background-image: linear-gradient(to right, var(--tom-color-on-tangerine-200), var(--tom-color-on-tangerine-200)), linear-gradient(to right, var(--tom-color-on-tangerine-200), var(--tom-color-on-tangerine-200)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-tangerine-200)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-tangerine-200))
}

.overflow-x-shadow.bg-on-tangerine-300 {
    background-image: linear-gradient(to right, var(--tom-color-on-tangerine-300), var(--tom-color-on-tangerine-300)), linear-gradient(to right, var(--tom-color-on-tangerine-300), var(--tom-color-on-tangerine-300)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-tangerine-300)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-tangerine-300))
}

.overflow-x-shadow.bg-on-tangerine-400 {
    background-image: linear-gradient(to right, var(--tom-color-on-tangerine-400), var(--tom-color-on-tangerine-400)), linear-gradient(to right, var(--tom-color-on-tangerine-400), var(--tom-color-on-tangerine-400)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-tangerine-400)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-tangerine-400))
}

.overflow-x-shadow.bg-on-tangerine-000 {
    background-image: linear-gradient(to right, var(--tom-color-on-tangerine-000), var(--tom-color-on-tangerine-000)), linear-gradient(to right, var(--tom-color-on-tangerine-000), var(--tom-color-on-tangerine-000)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-tangerine-000)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-tangerine-000))
}

.overflow-x-shadow.bg-on-yellow-100 {
    background-image: linear-gradient(to right, var(--tom-color-on-yellow-100), var(--tom-color-on-yellow-100)), linear-gradient(to right, var(--tom-color-on-yellow-100), var(--tom-color-on-yellow-100)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-yellow-100)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-yellow-100))
}

.overflow-x-shadow.bg-on-yellow-200 {
    background-image: linear-gradient(to right, var(--tom-color-on-yellow-200), var(--tom-color-on-yellow-200)), linear-gradient(to right, var(--tom-color-on-yellow-200), var(--tom-color-on-yellow-200)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-yellow-200)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-yellow-200))
}

.overflow-x-shadow.bg-on-yellow-300 {
    background-image: linear-gradient(to right, var(--tom-color-on-yellow-300), var(--tom-color-on-yellow-300)), linear-gradient(to right, var(--tom-color-on-yellow-300), var(--tom-color-on-yellow-300)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-yellow-300)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-yellow-300))
}

.overflow-x-shadow.bg-on-yellow-400 {
    background-image: linear-gradient(to right, var(--tom-color-on-yellow-400), var(--tom-color-on-yellow-400)), linear-gradient(to right, var(--tom-color-on-yellow-400), var(--tom-color-on-yellow-400)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-yellow-400)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-yellow-400))
}

.overflow-x-shadow.bg-on-yellow-500 {
    background-image: linear-gradient(to right, var(--tom-color-on-yellow-500), var(--tom-color-on-yellow-500)), linear-gradient(to right, var(--tom-color-on-yellow-500), var(--tom-color-on-yellow-500)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-yellow-500)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-yellow-500))
}

.overflow-x-shadow.bg-on-yellow-000 {
    background-image: linear-gradient(to right, var(--tom-color-on-yellow-000), var(--tom-color-on-yellow-000)), linear-gradient(to right, var(--tom-color-on-yellow-000), var(--tom-color-on-yellow-000)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-yellow-000)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-yellow-000))
}

.overflow-x-shadow.bg-danger-default {
    background-image: linear-gradient(to right, var(--tom-color-danger-default), var(--tom-color-danger-default)), linear-gradient(to right, var(--tom-color-danger-default), var(--tom-color-danger-default)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-danger-default)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-danger-default))
}

.overflow-x-shadow.bg-danger-darker {
    background-image: linear-gradient(to right, var(--tom-color-danger-darker), var(--tom-color-danger-darker)), linear-gradient(to right, var(--tom-color-danger-darker), var(--tom-color-danger-darker)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-danger-darker)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-danger-darker))
}

.overflow-x-shadow.bg-danger-lighter {
    background-image: linear-gradient(to right, var(--tom-color-danger-lighter), var(--tom-color-danger-lighter)), linear-gradient(to right, var(--tom-color-danger-lighter), var(--tom-color-danger-lighter)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-danger-lighter)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-danger-lighter))
}

.overflow-x-shadow.bg-danger-default-inverted {
    background-image: linear-gradient(to right, var(--tom-color-danger-default-inverted), var(--tom-color-danger-default-inverted)), linear-gradient(to right, var(--tom-color-danger-default-inverted), var(--tom-color-danger-default-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-danger-default-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-danger-default-inverted))
}

.overflow-x-shadow.bg-danger-darker-inverted {
    background-image: linear-gradient(to right, var(--tom-color-danger-darker-inverted), var(--tom-color-danger-darker-inverted)), linear-gradient(to right, var(--tom-color-danger-darker-inverted), var(--tom-color-danger-darker-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-danger-darker-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-danger-darker-inverted))
}

.overflow-x-shadow.bg-danger-lighter-inverted {
    background-image: linear-gradient(to right, var(--tom-color-danger-lighter-inverted), var(--tom-color-danger-lighter-inverted)), linear-gradient(to right, var(--tom-color-danger-lighter-inverted), var(--tom-color-danger-lighter-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-danger-lighter-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-danger-lighter-inverted))
}

.overflow-x-shadow.bg-info-default {
    background-image: linear-gradient(to right, var(--tom-color-info-default), var(--tom-color-info-default)), linear-gradient(to right, var(--tom-color-info-default), var(--tom-color-info-default)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-info-default)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-info-default))
}

.overflow-x-shadow.bg-info-darker {
    background-image: linear-gradient(to right, var(--tom-color-info-darker), var(--tom-color-info-darker)), linear-gradient(to right, var(--tom-color-info-darker), var(--tom-color-info-darker)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-info-darker)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-info-darker))
}

.overflow-x-shadow.bg-info-lighter {
    background-image: linear-gradient(to right, var(--tom-color-info-lighter), var(--tom-color-info-lighter)), linear-gradient(to right, var(--tom-color-info-lighter), var(--tom-color-info-lighter)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-info-lighter)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-info-lighter))
}

.overflow-x-shadow.bg-info-default-inverted {
    background-image: linear-gradient(to right, var(--tom-color-info-default-inverted), var(--tom-color-info-default-inverted)), linear-gradient(to right, var(--tom-color-info-default-inverted), var(--tom-color-info-default-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-info-default-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-info-default-inverted))
}

.overflow-x-shadow.bg-info-darker-inverted {
    background-image: linear-gradient(to right, var(--tom-color-info-darker-inverted), var(--tom-color-info-darker-inverted)), linear-gradient(to right, var(--tom-color-info-darker-inverted), var(--tom-color-info-darker-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-info-darker-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-info-darker-inverted))
}

.overflow-x-shadow.bg-info-lighter-inverted {
    background-image: linear-gradient(to right, var(--tom-color-info-lighter-inverted), var(--tom-color-info-lighter-inverted)), linear-gradient(to right, var(--tom-color-info-lighter-inverted), var(--tom-color-info-lighter-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-info-lighter-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-info-lighter-inverted))
}

.overflow-x-shadow.bg-interaction-default {
    background-image: linear-gradient(to right, var(--tom-color-interaction-default), var(--tom-color-interaction-default)), linear-gradient(to right, var(--tom-color-interaction-default), var(--tom-color-interaction-default)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-interaction-default)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-interaction-default))
}

.overflow-x-shadow.bg-interaction-darker {
    background-image: linear-gradient(to right, var(--tom-color-interaction-darker), var(--tom-color-interaction-darker)), linear-gradient(to right, var(--tom-color-interaction-darker), var(--tom-color-interaction-darker)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-interaction-darker)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-interaction-darker))
}

.overflow-x-shadow.bg-interaction-lighter {
    background-image: linear-gradient(to right, var(--tom-color-interaction-lighter), var(--tom-color-interaction-lighter)), linear-gradient(to right, var(--tom-color-interaction-lighter), var(--tom-color-interaction-lighter)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-interaction-lighter)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-interaction-lighter))
}

.overflow-x-shadow.bg-interaction-default-inverted {
    background-image: linear-gradient(to right, var(--tom-color-interaction-default-inverted), var(--tom-color-interaction-default-inverted)), linear-gradient(to right, var(--tom-color-interaction-default-inverted), var(--tom-color-interaction-default-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-interaction-default-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-interaction-default-inverted))
}

.overflow-x-shadow.bg-interaction-darker-inverted {
    background-image: linear-gradient(to right, var(--tom-color-interaction-darker-inverted), var(--tom-color-interaction-darker-inverted)), linear-gradient(to right, var(--tom-color-interaction-darker-inverted), var(--tom-color-interaction-darker-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-interaction-darker-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-interaction-darker-inverted))
}

.overflow-x-shadow.bg-interaction-lighter-inverted {
    background-image: linear-gradient(to right, var(--tom-color-interaction-lighter-inverted), var(--tom-color-interaction-lighter-inverted)), linear-gradient(to right, var(--tom-color-interaction-lighter-inverted), var(--tom-color-interaction-lighter-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-interaction-lighter-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-interaction-lighter-inverted))
}

.overflow-x-shadow.bg-loyalty-default {
    background-image: linear-gradient(to right, var(--tom-color-loyalty-default), var(--tom-color-loyalty-default)), linear-gradient(to right, var(--tom-color-loyalty-default), var(--tom-color-loyalty-default)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-loyalty-default)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-loyalty-default))
}

.overflow-x-shadow.bg-loyalty-darker {
    background-image: linear-gradient(to right, var(--tom-color-loyalty-darker), var(--tom-color-loyalty-darker)), linear-gradient(to right, var(--tom-color-loyalty-darker), var(--tom-color-loyalty-darker)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-loyalty-darker)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-loyalty-darker))
}

.overflow-x-shadow.bg-loyalty-lighter {
    background-image: linear-gradient(to right, var(--tom-color-loyalty-lighter), var(--tom-color-loyalty-lighter)), linear-gradient(to right, var(--tom-color-loyalty-lighter), var(--tom-color-loyalty-lighter)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-loyalty-lighter)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-loyalty-lighter))
}

.overflow-x-shadow.bg-loyalty-default-inverted {
    background-image: linear-gradient(to right, var(--tom-color-loyalty-default-inverted), var(--tom-color-loyalty-default-inverted)), linear-gradient(to right, var(--tom-color-loyalty-default-inverted), var(--tom-color-loyalty-default-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-loyalty-default-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-loyalty-default-inverted))
}

.overflow-x-shadow.bg-loyalty-darker-inverted {
    background-image: linear-gradient(to right, var(--tom-color-loyalty-darker-inverted), var(--tom-color-loyalty-darker-inverted)), linear-gradient(to right, var(--tom-color-loyalty-darker-inverted), var(--tom-color-loyalty-darker-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-loyalty-darker-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-loyalty-darker-inverted))
}

.overflow-x-shadow.bg-loyalty-lighter-inverted {
    background-image: linear-gradient(to right, var(--tom-color-loyalty-lighter-inverted), var(--tom-color-loyalty-lighter-inverted)), linear-gradient(to right, var(--tom-color-loyalty-lighter-inverted), var(--tom-color-loyalty-lighter-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-loyalty-lighter-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-loyalty-lighter-inverted))
}

.overflow-x-shadow.bg-success-default {
    background-image: linear-gradient(to right, var(--tom-color-success-default), var(--tom-color-success-default)), linear-gradient(to right, var(--tom-color-success-default), var(--tom-color-success-default)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-success-default)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-success-default))
}

.overflow-x-shadow.bg-success-darker {
    background-image: linear-gradient(to right, var(--tom-color-success-darker), var(--tom-color-success-darker)), linear-gradient(to right, var(--tom-color-success-darker), var(--tom-color-success-darker)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-success-darker)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-success-darker))
}

.overflow-x-shadow.bg-success-lighter {
    background-image: linear-gradient(to right, var(--tom-color-success-lighter), var(--tom-color-success-lighter)), linear-gradient(to right, var(--tom-color-success-lighter), var(--tom-color-success-lighter)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-success-lighter)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-success-lighter))
}

.overflow-x-shadow.bg-success-default-inverted {
    background-image: linear-gradient(to right, var(--tom-color-success-default-inverted), var(--tom-color-success-default-inverted)), linear-gradient(to right, var(--tom-color-success-default-inverted), var(--tom-color-success-default-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-success-default-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-success-default-inverted))
}

.overflow-x-shadow.bg-success-darker-inverted {
    background-image: linear-gradient(to right, var(--tom-color-success-darker-inverted), var(--tom-color-success-darker-inverted)), linear-gradient(to right, var(--tom-color-success-darker-inverted), var(--tom-color-success-darker-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-success-darker-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-success-darker-inverted))
}

.overflow-x-shadow.bg-success-lighter-inverted {
    background-image: linear-gradient(to right, var(--tom-color-success-lighter-inverted), var(--tom-color-success-lighter-inverted)), linear-gradient(to right, var(--tom-color-success-lighter-inverted), var(--tom-color-success-lighter-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-success-lighter-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-success-lighter-inverted))
}

.overflow-x-shadow.bg-surface-low {
    background-image: linear-gradient(to right, var(--tom-color-surface-low), var(--tom-color-surface-low)), linear-gradient(to right, var(--tom-color-surface-low), var(--tom-color-surface-low)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-surface-low)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-surface-low))
}

.overflow-x-shadow.bg-surface-high {
    background-image: linear-gradient(to right, var(--tom-color-surface-high), var(--tom-color-surface-high)), linear-gradient(to right, var(--tom-color-surface-high), var(--tom-color-surface-high)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-surface-high)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-surface-high))
}

.overflow-x-shadow.bg-surface-container-lowest {
    background-image: linear-gradient(to right, var(--tom-color-surface-container-lowest), var(--tom-color-surface-container-lowest)), linear-gradient(to right, var(--tom-color-surface-container-lowest), var(--tom-color-surface-container-lowest)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-surface-container-lowest)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-surface-container-lowest))
}

.overflow-x-shadow.bg-surface-container-lower {
    background-image: linear-gradient(to right, var(--tom-color-surface-container-lower), var(--tom-color-surface-container-lower)), linear-gradient(to right, var(--tom-color-surface-container-lower), var(--tom-color-surface-container-lower)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-surface-container-lower)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-surface-container-lower))
}

.overflow-x-shadow.\!bg-surface-container-lower {
    background-image: linear-gradient(to right, var(--tom-color-surface-container-lower), var(--tom-color-surface-container-lower)), linear-gradient(to right, var(--tom-color-surface-container-lower), var(--tom-color-surface-container-lower)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-surface-container-lower)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-surface-container-lower)) !important
}

.overflow-x-shadow.bg-surface-container-low {
    background-image: linear-gradient(to right, var(--tom-color-surface-container-low), var(--tom-color-surface-container-low)), linear-gradient(to right, var(--tom-color-surface-container-low), var(--tom-color-surface-container-low)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-surface-container-low)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-surface-container-low))
}

.overflow-x-shadow.bg-surface-container-mid {
    background-image: linear-gradient(to right, var(--tom-color-surface-container-mid), var(--tom-color-surface-container-mid)), linear-gradient(to right, var(--tom-color-surface-container-mid), var(--tom-color-surface-container-mid)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-surface-container-mid)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-surface-container-mid))
}

.overflow-x-shadow.bg-surface-container-high {
    background-image: linear-gradient(to right, var(--tom-color-surface-container-high), var(--tom-color-surface-container-high)), linear-gradient(to right, var(--tom-color-surface-container-high), var(--tom-color-surface-container-high)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-surface-container-high)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-surface-container-high))
}

.overflow-x-shadow.bg-surface-container-higher {
    background-image: linear-gradient(to right, var(--tom-color-surface-container-higher), var(--tom-color-surface-container-higher)), linear-gradient(to right, var(--tom-color-surface-container-higher), var(--tom-color-surface-container-higher)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-surface-container-higher)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-surface-container-higher))
}

.overflow-x-shadow.bg-surface-container-highest {
    background-image: linear-gradient(to right, var(--tom-color-surface-container-highest), var(--tom-color-surface-container-highest)), linear-gradient(to right, var(--tom-color-surface-container-highest), var(--tom-color-surface-container-highest)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-surface-container-highest)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-surface-container-highest))
}

.overflow-x-shadow.bg-warning-default {
    background-image: linear-gradient(to right, var(--tom-color-warning-default), var(--tom-color-warning-default)), linear-gradient(to right, var(--tom-color-warning-default), var(--tom-color-warning-default)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-warning-default)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-warning-default))
}

.overflow-x-shadow.bg-warning-darker {
    background-image: linear-gradient(to right, var(--tom-color-warning-darker), var(--tom-color-warning-darker)), linear-gradient(to right, var(--tom-color-warning-darker), var(--tom-color-warning-darker)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-warning-darker)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-warning-darker))
}

.overflow-x-shadow.bg-warning-lighter {
    background-image: linear-gradient(to right, var(--tom-color-warning-lighter), var(--tom-color-warning-lighter)), linear-gradient(to right, var(--tom-color-warning-lighter), var(--tom-color-warning-lighter)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-warning-lighter)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-warning-lighter))
}

.overflow-x-shadow.bg-warning-default-inverted {
    background-image: linear-gradient(to right, var(--tom-color-warning-default-inverted), var(--tom-color-warning-default-inverted)), linear-gradient(to right, var(--tom-color-warning-default-inverted), var(--tom-color-warning-default-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-warning-default-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-warning-default-inverted))
}

.overflow-x-shadow.bg-warning-darker-inverted {
    background-image: linear-gradient(to right, var(--tom-color-warning-darker-inverted), var(--tom-color-warning-darker-inverted)), linear-gradient(to right, var(--tom-color-warning-darker-inverted), var(--tom-color-warning-darker-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-warning-darker-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-warning-darker-inverted))
}

.overflow-x-shadow.bg-warning-lighter-inverted {
    background-image: linear-gradient(to right, var(--tom-color-warning-lighter-inverted), var(--tom-color-warning-lighter-inverted)), linear-gradient(to right, var(--tom-color-warning-lighter-inverted), var(--tom-color-warning-lighter-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-warning-lighter-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-warning-lighter-inverted))
}

.overflow-x-shadow.bg-artic-100 {
    background-image: linear-gradient(to right, var(--tom-color-artic-100), var(--tom-color-artic-100)), linear-gradient(to right, var(--tom-color-artic-100), var(--tom-color-artic-100)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-artic-100)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-artic-100))
}

.overflow-x-shadow.bg-artic-200 {
    background-image: linear-gradient(to right, var(--tom-color-artic-200), var(--tom-color-artic-200)), linear-gradient(to right, var(--tom-color-artic-200), var(--tom-color-artic-200)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-artic-200)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-artic-200))
}

.overflow-x-shadow.bg-artic-300 {
    background-image: linear-gradient(to right, var(--tom-color-artic-300), var(--tom-color-artic-300)), linear-gradient(to right, var(--tom-color-artic-300), var(--tom-color-artic-300)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-artic-300)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-artic-300))
}

.overflow-x-shadow.bg-artic-400 {
    background-image: linear-gradient(to right, var(--tom-color-artic-400), var(--tom-color-artic-400)), linear-gradient(to right, var(--tom-color-artic-400), var(--tom-color-artic-400)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-artic-400)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-artic-400))
}

.overflow-x-shadow.bg-artic-000 {
    background-image: linear-gradient(to right, var(--tom-color-artic-000), var(--tom-color-artic-000)), linear-gradient(to right, var(--tom-color-artic-000), var(--tom-color-artic-000)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-artic-000)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-artic-000))
}

.overflow-x-shadow.bg-blonde-100 {
    background-image: linear-gradient(to right, var(--tom-color-blonde-100), var(--tom-color-blonde-100)), linear-gradient(to right, var(--tom-color-blonde-100), var(--tom-color-blonde-100)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-blonde-100)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-blonde-100))
}

.overflow-x-shadow.bg-blonde-200 {
    background-image: linear-gradient(to right, var(--tom-color-blonde-200), var(--tom-color-blonde-200)), linear-gradient(to right, var(--tom-color-blonde-200), var(--tom-color-blonde-200)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-blonde-200)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-blonde-200))
}

.overflow-x-shadow.bg-blonde-300 {
    background-image: linear-gradient(to right, var(--tom-color-blonde-300), var(--tom-color-blonde-300)), linear-gradient(to right, var(--tom-color-blonde-300), var(--tom-color-blonde-300)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-blonde-300)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-blonde-300))
}

.overflow-x-shadow.bg-blonde-400 {
    background-image: linear-gradient(to right, var(--tom-color-blonde-400), var(--tom-color-blonde-400)), linear-gradient(to right, var(--tom-color-blonde-400), var(--tom-color-blonde-400)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-blonde-400)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-blonde-400))
}

.overflow-x-shadow.bg-blonde-000 {
    background-image: linear-gradient(to right, var(--tom-color-blonde-000), var(--tom-color-blonde-000)), linear-gradient(to right, var(--tom-color-blonde-000), var(--tom-color-blonde-000)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-blonde-000)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-blonde-000))
}

.overflow-x-shadow.bg-blue-100 {
    background-image: linear-gradient(to right, var(--tom-color-blue-100), var(--tom-color-blue-100)), linear-gradient(to right, var(--tom-color-blue-100), var(--tom-color-blue-100)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-blue-100)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-blue-100))
}

.overflow-x-shadow.bg-blue-200 {
    background-image: linear-gradient(to right, var(--tom-color-blue-200), var(--tom-color-blue-200)), linear-gradient(to right, var(--tom-color-blue-200), var(--tom-color-blue-200)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-blue-200)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-blue-200))
}

.overflow-x-shadow.bg-blue-300 {
    background-image: linear-gradient(to right, var(--tom-color-blue-300), var(--tom-color-blue-300)), linear-gradient(to right, var(--tom-color-blue-300), var(--tom-color-blue-300)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-blue-300)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-blue-300))
}

.overflow-x-shadow.bg-blue-400 {
    background-image: linear-gradient(to right, var(--tom-color-blue-400), var(--tom-color-blue-400)), linear-gradient(to right, var(--tom-color-blue-400), var(--tom-color-blue-400)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-blue-400)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-blue-400))
}

.overflow-x-shadow.bg-blue-000 {
    background-image: linear-gradient(to right, var(--tom-color-blue-000), var(--tom-color-blue-000)), linear-gradient(to right, var(--tom-color-blue-000), var(--tom-color-blue-000)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-blue-000)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-blue-000))
}

.overflow-x-shadow.bg-cyan-100 {
    background-image: linear-gradient(to right, var(--tom-color-cyan-100), var(--tom-color-cyan-100)), linear-gradient(to right, var(--tom-color-cyan-100), var(--tom-color-cyan-100)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-cyan-100)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-cyan-100))
}

.overflow-x-shadow.bg-cyan-200 {
    background-image: linear-gradient(to right, var(--tom-color-cyan-200), var(--tom-color-cyan-200)), linear-gradient(to right, var(--tom-color-cyan-200), var(--tom-color-cyan-200)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-cyan-200)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-cyan-200))
}

.overflow-x-shadow.bg-cyan-300 {
    background-image: linear-gradient(to right, var(--tom-color-cyan-300), var(--tom-color-cyan-300)), linear-gradient(to right, var(--tom-color-cyan-300), var(--tom-color-cyan-300)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-cyan-300)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-cyan-300))
}

.overflow-x-shadow.bg-cyan-400 {
    background-image: linear-gradient(to right, var(--tom-color-cyan-400), var(--tom-color-cyan-400)), linear-gradient(to right, var(--tom-color-cyan-400), var(--tom-color-cyan-400)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-cyan-400)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-cyan-400))
}

.overflow-x-shadow.bg-cyan-500 {
    background-image: linear-gradient(to right, var(--tom-color-cyan-500), var(--tom-color-cyan-500)), linear-gradient(to right, var(--tom-color-cyan-500), var(--tom-color-cyan-500)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-cyan-500)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-cyan-500))
}

.overflow-x-shadow.bg-cyan-000 {
    background-image: linear-gradient(to right, var(--tom-color-cyan-000), var(--tom-color-cyan-000)), linear-gradient(to right, var(--tom-color-cyan-000), var(--tom-color-cyan-000)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-cyan-000)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-cyan-000))
}

.overflow-x-shadow.bg-gold-100 {
    background-image: linear-gradient(to right, var(--tom-color-gold-100), var(--tom-color-gold-100)), linear-gradient(to right, var(--tom-color-gold-100), var(--tom-color-gold-100)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-gold-100)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-gold-100))
}

.overflow-x-shadow.bg-gold-200 {
    background-image: linear-gradient(to right, var(--tom-color-gold-200), var(--tom-color-gold-200)), linear-gradient(to right, var(--tom-color-gold-200), var(--tom-color-gold-200)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-gold-200)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-gold-200))
}

.overflow-x-shadow.bg-gold-300 {
    background-image: linear-gradient(to right, var(--tom-color-gold-300), var(--tom-color-gold-300)), linear-gradient(to right, var(--tom-color-gold-300), var(--tom-color-gold-300)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-gold-300)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-gold-300))
}

.overflow-x-shadow.bg-gold-400 {
    background-image: linear-gradient(to right, var(--tom-color-gold-400), var(--tom-color-gold-400)), linear-gradient(to right, var(--tom-color-gold-400), var(--tom-color-gold-400)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-gold-400)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-gold-400))
}

.overflow-x-shadow.bg-gold-500 {
    background-image: linear-gradient(to right, var(--tom-color-gold-500), var(--tom-color-gold-500)), linear-gradient(to right, var(--tom-color-gold-500), var(--tom-color-gold-500)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-gold-500)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-gold-500))
}

.overflow-x-shadow.bg-gold-000 {
    background-image: linear-gradient(to right, var(--tom-color-gold-000), var(--tom-color-gold-000)), linear-gradient(to right, var(--tom-color-gold-000), var(--tom-color-gold-000)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-gold-000)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-gold-000))
}

.overflow-x-shadow.bg-green-100 {
    background-image: linear-gradient(to right, var(--tom-color-green-100), var(--tom-color-green-100)), linear-gradient(to right, var(--tom-color-green-100), var(--tom-color-green-100)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-green-100)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-green-100))
}

.overflow-x-shadow.bg-green-200 {
    background-image: linear-gradient(to right, var(--tom-color-green-200), var(--tom-color-green-200)), linear-gradient(to right, var(--tom-color-green-200), var(--tom-color-green-200)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-green-200)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-green-200))
}

.overflow-x-shadow.bg-green-300 {
    background-image: linear-gradient(to right, var(--tom-color-green-300), var(--tom-color-green-300)), linear-gradient(to right, var(--tom-color-green-300), var(--tom-color-green-300)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-green-300)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-green-300))
}

.overflow-x-shadow.bg-green-400 {
    background-image: linear-gradient(to right, var(--tom-color-green-400), var(--tom-color-green-400)), linear-gradient(to right, var(--tom-color-green-400), var(--tom-color-green-400)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-green-400)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-green-400))
}

.overflow-x-shadow.bg-green-500 {
    background-image: linear-gradient(to right, var(--tom-color-green-500), var(--tom-color-green-500)), linear-gradient(to right, var(--tom-color-green-500), var(--tom-color-green-500)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-green-500)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-green-500))
}

.overflow-x-shadow.bg-green-000 {
    background-image: linear-gradient(to right, var(--tom-color-green-000), var(--tom-color-green-000)), linear-gradient(to right, var(--tom-color-green-000), var(--tom-color-green-000)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-green-000)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-green-000))
}

.overflow-x-shadow.bg-grey-100 {
    background-image: linear-gradient(to right, var(--tom-color-grey-100), var(--tom-color-grey-100)), linear-gradient(to right, var(--tom-color-grey-100), var(--tom-color-grey-100)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-grey-100)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-grey-100))
}

.overflow-x-shadow.bg-grey-200 {
    background-image: linear-gradient(to right, var(--tom-color-grey-200), var(--tom-color-grey-200)), linear-gradient(to right, var(--tom-color-grey-200), var(--tom-color-grey-200)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-grey-200)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-grey-200))
}

.overflow-x-shadow.bg-grey-300 {
    background-image: linear-gradient(to right, var(--tom-color-grey-300), var(--tom-color-grey-300)), linear-gradient(to right, var(--tom-color-grey-300), var(--tom-color-grey-300)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-grey-300)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-grey-300))
}

.overflow-x-shadow.bg-grey-400 {
    background-image: linear-gradient(to right, var(--tom-color-grey-400), var(--tom-color-grey-400)), linear-gradient(to right, var(--tom-color-grey-400), var(--tom-color-grey-400)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-grey-400)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-grey-400))
}

.overflow-x-shadow.bg-grey-500 {
    background-image: linear-gradient(to right, var(--tom-color-grey-500), var(--tom-color-grey-500)), linear-gradient(to right, var(--tom-color-grey-500), var(--tom-color-grey-500)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-grey-500)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-grey-500))
}

.overflow-x-shadow.bg-grey-600 {
    background-image: linear-gradient(to right, var(--tom-color-grey-600), var(--tom-color-grey-600)), linear-gradient(to right, var(--tom-color-grey-600), var(--tom-color-grey-600)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-grey-600)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-grey-600))
}

.overflow-x-shadow.bg-grey-700 {
    background-image: linear-gradient(to right, var(--tom-color-grey-700), var(--tom-color-grey-700)), linear-gradient(to right, var(--tom-color-grey-700), var(--tom-color-grey-700)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-grey-700)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-grey-700))
}

.overflow-x-shadow.bg-grey-800 {
    background-image: linear-gradient(to right, var(--tom-color-grey-800), var(--tom-color-grey-800)), linear-gradient(to right, var(--tom-color-grey-800), var(--tom-color-grey-800)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-grey-800)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-grey-800))
}

.overflow-x-shadow.bg-grey-900 {
    background-image: linear-gradient(to right, var(--tom-color-grey-900), var(--tom-color-grey-900)), linear-gradient(to right, var(--tom-color-grey-900), var(--tom-color-grey-900)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-grey-900)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-grey-900))
}

.overflow-x-shadow.bg-grey-000 {
    background-image: linear-gradient(to right, var(--tom-color-grey-000), var(--tom-color-grey-000)), linear-gradient(to right, var(--tom-color-grey-000), var(--tom-color-grey-000)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-grey-000)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-grey-000))
}

.overflow-x-shadow.bg-lime-100 {
    background-image: linear-gradient(to right, var(--tom-color-lime-100), var(--tom-color-lime-100)), linear-gradient(to right, var(--tom-color-lime-100), var(--tom-color-lime-100)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-lime-100)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-lime-100))
}

.overflow-x-shadow.bg-lime-200 {
    background-image: linear-gradient(to right, var(--tom-color-lime-200), var(--tom-color-lime-200)), linear-gradient(to right, var(--tom-color-lime-200), var(--tom-color-lime-200)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-lime-200)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-lime-200))
}

.overflow-x-shadow.bg-lime-300 {
    background-image: linear-gradient(to right, var(--tom-color-lime-300), var(--tom-color-lime-300)), linear-gradient(to right, var(--tom-color-lime-300), var(--tom-color-lime-300)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-lime-300)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-lime-300))
}

.overflow-x-shadow.bg-lime-400 {
    background-image: linear-gradient(to right, var(--tom-color-lime-400), var(--tom-color-lime-400)), linear-gradient(to right, var(--tom-color-lime-400), var(--tom-color-lime-400)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-lime-400)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-lime-400))
}

.overflow-x-shadow.bg-lime-000 {
    background-image: linear-gradient(to right, var(--tom-color-lime-000), var(--tom-color-lime-000)), linear-gradient(to right, var(--tom-color-lime-000), var(--tom-color-lime-000)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-lime-000)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-lime-000))
}

.overflow-x-shadow.bg-pink-100 {
    background-image: linear-gradient(to right, var(--tom-color-pink-100), var(--tom-color-pink-100)), linear-gradient(to right, var(--tom-color-pink-100), var(--tom-color-pink-100)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-pink-100)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-pink-100))
}

.overflow-x-shadow.bg-pink-200 {
    background-image: linear-gradient(to right, var(--tom-color-pink-200), var(--tom-color-pink-200)), linear-gradient(to right, var(--tom-color-pink-200), var(--tom-color-pink-200)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-pink-200)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-pink-200))
}

.overflow-x-shadow.bg-pink-300 {
    background-image: linear-gradient(to right, var(--tom-color-pink-300), var(--tom-color-pink-300)), linear-gradient(to right, var(--tom-color-pink-300), var(--tom-color-pink-300)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-pink-300)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-pink-300))
}

.overflow-x-shadow.bg-pink-400 {
    background-image: linear-gradient(to right, var(--tom-color-pink-400), var(--tom-color-pink-400)), linear-gradient(to right, var(--tom-color-pink-400), var(--tom-color-pink-400)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-pink-400)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-pink-400))
}

.overflow-x-shadow.bg-pink-000 {
    background-image: linear-gradient(to right, var(--tom-color-pink-000), var(--tom-color-pink-000)), linear-gradient(to right, var(--tom-color-pink-000), var(--tom-color-pink-000)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-pink-000)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-pink-000))
}

.overflow-x-shadow.bg-purple-100 {
    background-image: linear-gradient(to right, var(--tom-color-purple-100), var(--tom-color-purple-100)), linear-gradient(to right, var(--tom-color-purple-100), var(--tom-color-purple-100)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-purple-100)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-purple-100))
}

.overflow-x-shadow.bg-purple-200 {
    background-image: linear-gradient(to right, var(--tom-color-purple-200), var(--tom-color-purple-200)), linear-gradient(to right, var(--tom-color-purple-200), var(--tom-color-purple-200)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-purple-200)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-purple-200))
}

.overflow-x-shadow.bg-purple-300 {
    background-image: linear-gradient(to right, var(--tom-color-purple-300), var(--tom-color-purple-300)), linear-gradient(to right, var(--tom-color-purple-300), var(--tom-color-purple-300)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-purple-300)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-purple-300))
}

.overflow-x-shadow.bg-purple-400 {
    background-image: linear-gradient(to right, var(--tom-color-purple-400), var(--tom-color-purple-400)), linear-gradient(to right, var(--tom-color-purple-400), var(--tom-color-purple-400)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-purple-400)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-purple-400))
}

.overflow-x-shadow.bg-purple-000 {
    background-image: linear-gradient(to right, var(--tom-color-purple-000), var(--tom-color-purple-000)), linear-gradient(to right, var(--tom-color-purple-000), var(--tom-color-purple-000)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-purple-000)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-purple-000))
}

.overflow-x-shadow.bg-red-100 {
    background-image: linear-gradient(to right, var(--tom-color-red-100), var(--tom-color-red-100)), linear-gradient(to right, var(--tom-color-red-100), var(--tom-color-red-100)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-red-100)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-red-100))
}

.overflow-x-shadow.bg-red-200 {
    background-image: linear-gradient(to right, var(--tom-color-red-200), var(--tom-color-red-200)), linear-gradient(to right, var(--tom-color-red-200), var(--tom-color-red-200)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-red-200)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-red-200))
}

.overflow-x-shadow.bg-red-300 {
    background-image: linear-gradient(to right, var(--tom-color-red-300), var(--tom-color-red-300)), linear-gradient(to right, var(--tom-color-red-300), var(--tom-color-red-300)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-red-300)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-red-300))
}

.overflow-x-shadow.bg-red-400 {
    background-image: linear-gradient(to right, var(--tom-color-red-400), var(--tom-color-red-400)), linear-gradient(to right, var(--tom-color-red-400), var(--tom-color-red-400)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-red-400)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-red-400))
}

.overflow-x-shadow.bg-red-500 {
    background-image: linear-gradient(to right, var(--tom-color-red-500), var(--tom-color-red-500)), linear-gradient(to right, var(--tom-color-red-500), var(--tom-color-red-500)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-red-500)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-red-500))
}

.overflow-x-shadow.bg-red-000 {
    background-image: linear-gradient(to right, var(--tom-color-red-000), var(--tom-color-red-000)), linear-gradient(to right, var(--tom-color-red-000), var(--tom-color-red-000)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-red-000)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-red-000))
}

.overflow-x-shadow.bg-scarlet-100 {
    background-image: linear-gradient(to right, var(--tom-color-scarlet-100), var(--tom-color-scarlet-100)), linear-gradient(to right, var(--tom-color-scarlet-100), var(--tom-color-scarlet-100)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-scarlet-100)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-scarlet-100))
}

.overflow-x-shadow.bg-scarlet-200 {
    background-image: linear-gradient(to right, var(--tom-color-scarlet-200), var(--tom-color-scarlet-200)), linear-gradient(to right, var(--tom-color-scarlet-200), var(--tom-color-scarlet-200)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-scarlet-200)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-scarlet-200))
}

.overflow-x-shadow.bg-scarlet-300 {
    background-image: linear-gradient(to right, var(--tom-color-scarlet-300), var(--tom-color-scarlet-300)), linear-gradient(to right, var(--tom-color-scarlet-300), var(--tom-color-scarlet-300)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-scarlet-300)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-scarlet-300))
}

.overflow-x-shadow.bg-scarlet-400 {
    background-image: linear-gradient(to right, var(--tom-color-scarlet-400), var(--tom-color-scarlet-400)), linear-gradient(to right, var(--tom-color-scarlet-400), var(--tom-color-scarlet-400)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-scarlet-400)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-scarlet-400))
}

.overflow-x-shadow.bg-scarlet-000 {
    background-image: linear-gradient(to right, var(--tom-color-scarlet-000), var(--tom-color-scarlet-000)), linear-gradient(to right, var(--tom-color-scarlet-000), var(--tom-color-scarlet-000)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-scarlet-000)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-scarlet-000))
}

.overflow-x-shadow.bg-tangerine-100 {
    background-image: linear-gradient(to right, var(--tom-color-tangerine-100), var(--tom-color-tangerine-100)), linear-gradient(to right, var(--tom-color-tangerine-100), var(--tom-color-tangerine-100)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-tangerine-100)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-tangerine-100))
}

.overflow-x-shadow.bg-tangerine-200 {
    background-image: linear-gradient(to right, var(--tom-color-tangerine-200), var(--tom-color-tangerine-200)), linear-gradient(to right, var(--tom-color-tangerine-200), var(--tom-color-tangerine-200)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-tangerine-200)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-tangerine-200))
}

.overflow-x-shadow.bg-tangerine-300 {
    background-image: linear-gradient(to right, var(--tom-color-tangerine-300), var(--tom-color-tangerine-300)), linear-gradient(to right, var(--tom-color-tangerine-300), var(--tom-color-tangerine-300)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-tangerine-300)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-tangerine-300))
}

.overflow-x-shadow.bg-tangerine-400 {
    background-image: linear-gradient(to right, var(--tom-color-tangerine-400), var(--tom-color-tangerine-400)), linear-gradient(to right, var(--tom-color-tangerine-400), var(--tom-color-tangerine-400)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-tangerine-400)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-tangerine-400))
}

.overflow-x-shadow.bg-tangerine-000 {
    background-image: linear-gradient(to right, var(--tom-color-tangerine-000), var(--tom-color-tangerine-000)), linear-gradient(to right, var(--tom-color-tangerine-000), var(--tom-color-tangerine-000)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-tangerine-000)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-tangerine-000))
}

.overflow-x-shadow.bg-yellow-100 {
    background-image: linear-gradient(to right, var(--tom-color-yellow-100), var(--tom-color-yellow-100)), linear-gradient(to right, var(--tom-color-yellow-100), var(--tom-color-yellow-100)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-yellow-100)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-yellow-100))
}

.overflow-x-shadow.bg-yellow-200 {
    background-image: linear-gradient(to right, var(--tom-color-yellow-200), var(--tom-color-yellow-200)), linear-gradient(to right, var(--tom-color-yellow-200), var(--tom-color-yellow-200)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-yellow-200)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-yellow-200))
}

.overflow-x-shadow.bg-yellow-300 {
    background-image: linear-gradient(to right, var(--tom-color-yellow-300), var(--tom-color-yellow-300)), linear-gradient(to right, var(--tom-color-yellow-300), var(--tom-color-yellow-300)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-yellow-300)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-yellow-300))
}

.overflow-x-shadow.bg-yellow-400 {
    background-image: linear-gradient(to right, var(--tom-color-yellow-400), var(--tom-color-yellow-400)), linear-gradient(to right, var(--tom-color-yellow-400), var(--tom-color-yellow-400)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-yellow-400)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-yellow-400))
}

.overflow-x-shadow.bg-yellow-500 {
    background-image: linear-gradient(to right, var(--tom-color-yellow-500), var(--tom-color-yellow-500)), linear-gradient(to right, var(--tom-color-yellow-500), var(--tom-color-yellow-500)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-yellow-500)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-yellow-500))
}

.overflow-x-shadow.bg-yellow-000 {
    background-image: linear-gradient(to right, var(--tom-color-yellow-000), var(--tom-color-yellow-000)), linear-gradient(to right, var(--tom-color-yellow-000), var(--tom-color-yellow-000)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-yellow-000)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-yellow-000))
}

.overflow-x-shadow.bg-trademark-color-whatsapp {
    background-image: linear-gradient(to right, var(--tom-color-trademark-color-whatsapp), var(--tom-color-trademark-color-whatsapp)), linear-gradient(to right, var(--tom-color-trademark-color-whatsapp), var(--tom-color-trademark-color-whatsapp)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-trademark-color-whatsapp)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-trademark-color-whatsapp))
}

.overflow-x-shadow.bg-trademark-color-aliexpress {
    background-image: linear-gradient(to right, var(--tom-color-trademark-color-aliexpress), var(--tom-color-trademark-color-aliexpress)), linear-gradient(to right, var(--tom-color-trademark-color-aliexpress), var(--tom-color-trademark-color-aliexpress)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-trademark-color-aliexpress)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-trademark-color-aliexpress))
}

.\!font-2xsm-regular {
    font: var(--tom-font-2xsm-regular) !important
}

.\!font-3xsm-regular {
    font: var(--tom-font-3xsm-regular) !important
}

.\!font-xsm-regular {
    font: var(--tom-font-xsm-regular) !important
}

.font {
    font: var(--tom-font-DEFAULT)
}

.font-2xlg-bold {
    font: var(--tom-font-2xlg-bold)
}

.font-2xlg-medium {
    font: var(--tom-font-2xlg-medium)
}

.font-2xlg-regular {
    font: var(--tom-font-2xlg-regular)
}

.font-2xsm-bold {
    font: var(--tom-font-2xsm-bold)
}

.font-2xsm-medium {
    font: var(--tom-font-2xsm-medium)
}

.font-2xsm-regular {
    font: var(--tom-font-2xsm-regular)
}

.font-3xlg-bold {
    font: var(--tom-font-3xlg-bold)
}

.font-3xlg-regular {
    font: var(--tom-font-3xlg-regular)
}

.font-3xsm-bold {
    font: var(--tom-font-3xsm-bold)
}

.font-3xsm-medium {
    font: var(--tom-font-3xsm-medium)
}

.font-3xsm-regular {
    font: var(--tom-font-3xsm-regular)
}

.font-\[inherit\] {
    font: inherit
}

.font-lg-bold {
    font: var(--tom-font-lg-bold)
}

.font-lg-medium {
    font: var(--tom-font-lg-medium)
}

.font-lg-regular {
    font: var(--tom-font-lg-regular)
}

.font-md-bold {
    font: var(--tom-font-md-bold)
}

.font-md-medium {
    font: var(--tom-font-md-medium)
}

.font-md-regular {
    font: var(--tom-font-md-regular)
}

.font-sm-bold {
    font: var(--tom-font-sm-bold)
}

.font-sm-medium {
    font: var(--tom-font-sm-medium)
}

.font-sm-regular {
    font: var(--tom-font-sm-regular)
}

.font-xlg-bold {
    font: var(--tom-font-xlg-bold)
}

.font-xlg-regular {
    font: var(--tom-font-xlg-regular)
}

.font-xsm-bold {
    font: var(--tom-font-xsm-bold)
}

.font-xsm-medium {
    font: var(--tom-font-xsm-medium)
}

.font-xsm-regular {
    font: var(--tom-font-xsm-regular)
}

.\[font-weight\:bold\] {
    font-weight: 700
}

.\[line-height\:1\.5\] {
    line-height: 1.5
}

.\[line-height\:2\] {
    line-height: 2
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
ol,
p,
ul {
    margin: 0;
    padding: 0;
    font-weight: 400
}

* {
    box-sizing: border-box
}

.ti {
    min-width: 1em;
    min-height: 1em
}

.first-letter\:uppercase:first-letter {
    text-transform: uppercase
}

.before\:absolute:before {
    content: var(--tw-content);
    position: absolute
}

.before\:z-10:before {
    content: var(--tw-content);
    z-index: 10
}

.before\:block:before {
    content: var(--tw-content);
    display: block
}

.before\:contents:before {
    content: var(--tw-content);
    display: contents
}

.before\:h-full:before {
    content: var(--tw-content);
    height: 100%
}

.before\:w-full:before {
    content: var(--tw-content);
    width: 100%
}

.before\:bg-brand-default-inverted:before {
    content: var(--tw-content);
    background-color: var(--tom-color-brand-default-inverted)
}

.before\:opacity-70:before {
    content: var(--tw-content);
    opacity: var(--tom-opacity-70)
}

.before\:bg-brand-default-inverted.overflow-x-shadow:before {
    content: var(--tw-content);
    background-image: linear-gradient(to right, var(--tom-color-brand-default-inverted), var(--tom-color-brand-default-inverted)), linear-gradient(to right, var(--tom-color-brand-default-inverted), var(--tom-color-brand-default-inverted)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-brand-default-inverted)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-brand-default-inverted))
}

.after\:pointer-events-none:after {
    content: var(--tw-content);
    pointer-events: none
}

.after\:absolute:after {
    content: var(--tw-content);
    position: absolute
}

.after\:bottom-\[0\]:after {
    content: var(--tw-content);
    bottom: 0
}

.after\:left-\[0\]:after {
    content: var(--tw-content);
    left: 0
}

.after\:right-\[-36px\]:after {
    content: var(--tw-content);
    right: -36px
}

.after\:top-\[30\%\]:after {
    content: var(--tw-content);
    top: 30%
}

.after\:h-\[1px\]:after {
    content: var(--tw-content);
    height: 1px
}

.after\:h-\[72px\]:after {
    content: var(--tw-content);
    height: 72px
}

.after\:w-\[36px\]:after {
    content: var(--tw-content);
    width: 36px
}

.after\:w-full:after {
    content: var(--tw-content);
    width: 100%
}

.after\:cursor-default:after {
    content: var(--tw-content);
    cursor: default
}

.after\:border-\[0\.5px\]:after {
    content: var(--tw-content);
    border-width: .5px
}

.after\:border-solid:after {
    content: var(--tw-content);
    border-style: solid
}

.after\:border-on-brand-default-inverted:after {
    content: var(--tw-content);
    border-color: var(--tom-color-on-brand-default-inverted)
}

.after\:border-on-success-lighter-inverted:after {
    content: var(--tw-content);
    border-color: var(--tom-color-on-success-lighter-inverted)
}

.after\:border-on-surface-5:after {
    content: var(--tw-content);
    border-color: var(--tom-color-on-surface-5)
}

.after\:bg-gradient-to-b:after {
    content: var(--tw-content);
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops))
}

.after\:from-\[\#FFFFFF00\]:after {
    content: var(--tw-content);
    --tw-gradient-from: #ffffff00 var(--tw-gradient-from-position);
    --tw-gradient-to: hsla(0, 0%, 100%, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.after\:to-\[\#FFFFFF\]:after {
    content: var(--tw-content);
    --tw-gradient-to: #fff var(--tw-gradient-to-position)
}

.after\:text-on-info-lighter:after {
    content: var(--tw-content);
    color: var(--tom-color-on-info-lighter)
}

.after\:content-\[\"\"\]:after {
    --tw-content: "";
    content: var(--tw-content)
}

.after\:content-\[\"_\/_\"\]:after {
    --tw-content: " / ";
    content: var(--tw-content)
}

.last\:mr-\[0px\]:last-child {
    margin-right: 0
}

.last\:border-none:last-child {
    border-style: none
}

.last\:after\:hidden:last-child:after {
    content: var(--tw-content);
    display: none
}

.odd\:bg-surface-container-lower:nth-child(odd) {
    background-color: var(--tom-color-surface-container-lower)
}

.odd\:bg-surface-container-lower:nth-child(odd).overflow-x-shadow {
    background-image: linear-gradient(to right, var(--tom-color-surface-container-lower), var(--tom-color-surface-container-lower)), linear-gradient(to right, var(--tom-color-surface-container-lower), var(--tom-color-surface-container-lower)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-surface-container-lower)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-surface-container-lower))
}

.first-of-type\:scroll-ms-md:first-of-type {
    scroll-margin-inline-start: var(--tom-spacing-md)
}

.last-of-type\:pr-md:last-of-type {
    padding-right: var(--tom-spacing-md)
}

.hover\:scale-125:hover {
    --tw-scale-x: 1.25;
    --tw-scale-y: 1.25;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.hover\:bg-surface-container-highest:hover {
    background-color: var(--tom-color-surface-container-highest)
}

.hover\:bg-surface-container-lowest:hover {
    background-color: var(--tom-color-surface-container-lowest)
}

.hover\:bg-surface-container-mid:hover {
    background-color: var(--tom-color-surface-container-mid)
}

.hover\:text-interaction-darker:hover {
    color: var(--tom-color-interaction-darker)
}

.hover\:text-interaction-default:hover {
    color: var(--tom-color-interaction-default)
}

.hover\:text-on-surface-3:hover {
    color: var(--tom-color-on-surface-3)
}

.hover\:underline:hover {
    text-decoration-line: underline
}

.hover\:ring-2:hover {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.hover\:ring-interaction-default:hover {
    --tw-ring-color: var(--tom-color-interaction-default)
}

.hover\:bg-surface-container-lowest:hover.overflow-x-shadow {
    background-image: linear-gradient(to right, var(--tom-color-surface-container-lowest), var(--tom-color-surface-container-lowest)), linear-gradient(to right, var(--tom-color-surface-container-lowest), var(--tom-color-surface-container-lowest)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-surface-container-lowest)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-surface-container-lowest))
}

.hover\:bg-surface-container-mid:hover.overflow-x-shadow {
    background-image: linear-gradient(to right, var(--tom-color-surface-container-mid), var(--tom-color-surface-container-mid)), linear-gradient(to right, var(--tom-color-surface-container-mid), var(--tom-color-surface-container-mid)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-surface-container-mid)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-surface-container-mid))
}

.hover\:bg-surface-container-highest:hover.overflow-x-shadow {
    background-image: linear-gradient(to right, var(--tom-color-surface-container-highest), var(--tom-color-surface-container-highest)), linear-gradient(to right, var(--tom-color-surface-container-highest), var(--tom-color-surface-container-highest)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-surface-container-highest)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-surface-container-highest))
}

.disabled\:opacity-50:disabled {
    opacity: var(--tom-opacity-50)
}

@media (min-width:360px) {
    .sm\:max-h-\[160px\] {
        max-height: 160px
    }

    .sm\:p-sm {
        padding: var(--tom-spacing-sm)
    }

    .sm\:font-2xsm-bold {
        font: var(--tom-font-2xsm-bold)
    }

    .sm\:font-2xsm-regular {
        font: var(--tom-font-2xsm-regular)
    }

    .sm\:font-md-medium {
        font: var(--tom-font-md-medium)
    }

    .sm\:font-sm-regular {
        font: var(--tom-font-sm-regular)
    }
}

@media (min-width:744px) {
    .md\:mx-md {
        margin-left: var(--tom-spacing-md);
        margin-right: var(--tom-spacing-md)
    }

    .md\:line-clamp-none {
        overflow: visible;
        display: block;
        -webkit-box-orient: horizontal;
        -webkit-line-clamp: none
    }

    .md\:flex {
        display: flex
    }

    .md\:h-hg {
        height: var(--tom-spacing-hg)
    }

    .md\:h-md {
        height: var(--tom-spacing-md)
    }

    .md\:max-h-\[320px\] {
        max-height: 320px
    }

    .md\:w-\[200px\] {
        width: 200px
    }

    .md\:w-\[61px\] {
        width: 61px
    }

    .md\:w-full {
        width: 100%
    }

    .md\:w-hg {
        width: var(--tom-spacing-hg)
    }

    .md\:w-md {
        width: var(--tom-spacing-md)
    }

    .md\:flex-row {
        flex-direction: row
    }

    .md\:flex-col {
        flex-direction: column
    }

    .md\:items-center {
        align-items: center
    }

    .md\:justify-start {
        justify-content: flex-start
    }

    .md\:justify-center {
        justify-content: center
    }

    .md\:justify-between {
        justify-content: space-between
    }

    .md\:gap-lg {
        gap: var(--tom-spacing-lg)
    }

    .md\:gap-md {
        gap: var(--tom-spacing-md)
    }

    .md\:p-md {
        padding: var(--tom-spacing-md)
    }

    .md\:p-sm {
        padding: var(--tom-spacing-sm)
    }

    .md\:px-hg {
        padding-left: var(--tom-spacing-hg);
        padding-right: var(--tom-spacing-hg)
    }

    .md\:px-lg {
        padding-left: var(--tom-spacing-lg);
        padding-right: var(--tom-spacing-lg)
    }

    .md\:py-sm {
        padding-top: var(--tom-spacing-sm);
        padding-bottom: var(--tom-spacing-sm)
    }

    .md\:font-lg-medium {
        font: var(--tom-font-lg-medium)
    }

    .md\:font-lg-regular {
        font: var(--tom-font-lg-regular)
    }

    .md\:font-md-regular {
        font: var(--tom-font-md-regular)
    }

    .md\:font-sm-bold {
        font: var(--tom-font-sm-bold)
    }

    .md\:font-sm-regular {
        font: var(--tom-font-sm-regular)
    }

    .md\:font-xlg-bold {
        font: var(--tom-font-xlg-bold)
    }

    .md\:font-xsm-regular {
        font: var(--tom-font-xsm-regular)
    }

    .after\:md\:top-\[37\%\]:after {
        content: var(--tw-content);
        top: 37%
    }
}

@media (min-width:1024px) {
    .lg\:max-h-\[480px\] {
        max-height: 480px
    }

    .lg\:p-lg {
        padding: var(--tom-spacing-lg)
    }
}

@media (min-width:1280px) {
    .xl\:max-h-\[640px\] {
        max-height: 640px
    }
}

.\[\&\+\&\]\:mt-2xsm+.\[\&\+\&\]\:mt-2xsm {
    margin-top: var(--tom-spacing-2xsm)
}

.\[\&\:\:-moz-progress-bar\]\:rounded-lg::-moz-progress-bar {
    border-radius: var(--tom-radius-lg)
}

.\[\&\:\:-moz-progress-bar\]\:bg-\[\#5EBE09\]::-moz-progress-bar {
    --tw-bg-opacity: 1;
    background-color: rgb(94 190 9/var(--tw-bg-opacity, 1))
}

.\[\&\:\:-moz-progress-bar\]\:bg-\[\#EEB510\]::-moz-progress-bar {
    --tw-bg-opacity: 1;
    background-color: rgb(238 181 16/var(--tw-bg-opacity, 1))
}

.\[\&\:\:-moz-progress-bar\]\:bg-\[\#F9C52E\]::-moz-progress-bar {
    --tw-bg-opacity: 1;
    background-color: rgb(249 197 46/var(--tw-bg-opacity, 1))
}

.\[\&\:\:-moz-progress-bar\]\:bg-\[\#FD8A25\]::-moz-progress-bar {
    --tw-bg-opacity: 1;
    background-color: rgb(253 138 37/var(--tw-bg-opacity, 1))
}

.\[\&\:\:-moz-progress-bar\]\:bg-danger-lighter::-moz-progress-bar {
    background-color: var(--tom-color-danger-lighter)
}

.\[\&\:\:-moz-progress-bar\]\:bg-interaction-default::-moz-progress-bar {
    background-color: var(--tom-color-interaction-default)
}

.\[\&\:\:-moz-progress-bar\]\:bg-success-default::-moz-progress-bar {
    background-color: var(--tom-color-success-default)
}

.\[\&\:\:-moz-progress-bar\]\:bg-danger-lighter.overflow-x-shadow::-moz-progress-bar {
    background-image: linear-gradient(to right, var(--tom-color-danger-lighter), var(--tom-color-danger-lighter)), linear-gradient(to right, var(--tom-color-danger-lighter), var(--tom-color-danger-lighter)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-danger-lighter)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-danger-lighter))
}

.\[\&\:\:-moz-progress-bar\]\:bg-interaction-default.overflow-x-shadow::-moz-progress-bar {
    background-image: linear-gradient(to right, var(--tom-color-interaction-default), var(--tom-color-interaction-default)), linear-gradient(to right, var(--tom-color-interaction-default), var(--tom-color-interaction-default)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-interaction-default)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-interaction-default))
}

.\[\&\:\:-moz-progress-bar\]\:bg-success-default.overflow-x-shadow::-moz-progress-bar {
    background-image: linear-gradient(to right, var(--tom-color-success-default), var(--tom-color-success-default)), linear-gradient(to right, var(--tom-color-success-default), var(--tom-color-success-default)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-success-default)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-success-default))
}

.\[\&\:\:-webkit-progress-bar\]\:rounded-lg::-webkit-progress-bar {
    border-radius: var(--tom-radius-lg)
}

.\[\&\:\:-webkit-progress-bar\]\:bg-on-surface-8::-webkit-progress-bar {
    background-color: var(--tom-color-on-surface-8)
}

.\[\&\:\:-webkit-progress-bar\]\:bg-on-surface-8.overflow-x-shadow::-webkit-progress-bar {
    background-image: linear-gradient(to right, var(--tom-color-on-surface-8), var(--tom-color-on-surface-8)), linear-gradient(to right, var(--tom-color-on-surface-8), var(--tom-color-on-surface-8)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-on-surface-8)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-on-surface-8))
}

.\[\&\:\:-webkit-progress-value\]\:rounded-lg::-webkit-progress-value {
    border-radius: var(--tom-radius-lg)
}

.\[\&\:\:-webkit-progress-value\]\:bg-\[\#5EBE09\]::-webkit-progress-value {
    --tw-bg-opacity: 1;
    background-color: rgb(94 190 9/var(--tw-bg-opacity, 1))
}

.\[\&\:\:-webkit-progress-value\]\:bg-\[\#EEB510\]::-webkit-progress-value {
    --tw-bg-opacity: 1;
    background-color: rgb(238 181 16/var(--tw-bg-opacity, 1))
}

.\[\&\:\:-webkit-progress-value\]\:bg-\[\#F9C52E\]::-webkit-progress-value {
    --tw-bg-opacity: 1;
    background-color: rgb(249 197 46/var(--tw-bg-opacity, 1))
}

.\[\&\:\:-webkit-progress-value\]\:bg-\[\#FD8A25\]::-webkit-progress-value {
    --tw-bg-opacity: 1;
    background-color: rgb(253 138 37/var(--tw-bg-opacity, 1))
}

.\[\&\:\:-webkit-progress-value\]\:bg-danger-lighter::-webkit-progress-value {
    background-color: var(--tom-color-danger-lighter)
}

.\[\&\:\:-webkit-progress-value\]\:bg-interaction-default::-webkit-progress-value {
    background-color: var(--tom-color-interaction-default)
}

.\[\&\:\:-webkit-progress-value\]\:bg-success-default::-webkit-progress-value {
    background-color: var(--tom-color-success-default)
}

.\[\&\:\:-webkit-progress-value\]\:bg-danger-lighter.overflow-x-shadow::-webkit-progress-value {
    background-image: linear-gradient(to right, var(--tom-color-danger-lighter), var(--tom-color-danger-lighter)), linear-gradient(to right, var(--tom-color-danger-lighter), var(--tom-color-danger-lighter)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-danger-lighter)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-danger-lighter))
}

.\[\&\:\:-webkit-progress-value\]\:bg-interaction-default.overflow-x-shadow::-webkit-progress-value {
    background-image: linear-gradient(to right, var(--tom-color-interaction-default), var(--tom-color-interaction-default)), linear-gradient(to right, var(--tom-color-interaction-default), var(--tom-color-interaction-default)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-interaction-default)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-interaction-default))
}

.\[\&\:\:-webkit-progress-value\]\:bg-success-default.overflow-x-shadow::-webkit-progress-value {
    background-image: linear-gradient(to right, var(--tom-color-success-default), var(--tom-color-success-default)), linear-gradient(to right, var(--tom-color-success-default), var(--tom-color-success-default)), linear-gradient(to right, rgba(0, 0, 0, .2), var(--tom-color-success-default)), linear-gradient(to left, rgba(0, 0, 0, .2), var(--tom-color-success-default))
}

.\[\&\:\:-webkit-search-cancel-button\]\:appearance-none::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none
}

.first\:\[\&\:first-child\>td\]\:rounded-ss-lg:first-child>td:first-child {
    border-start-start-radius: var(--tom-radius-lg)
}

.last\:\[\&\:first-child\>td\]\:rounded-se-lg:first-child>td:last-child {
    border-start-end-radius: var(--tom-radius-lg)
}

.first\:\[\&\:last-child\>td\]\:rounded-es-lg:last-child>td:first-child {
    border-end-start-radius: var(--tom-radius-lg)
}

.last\:\[\&\:last-child\>td\]\:rounded-ee-lg:last-child>td:last-child {
    border-end-end-radius: var(--tom-radius-lg)
}

.\[\&\>\*\:first-child\]\:mt-xsm>:first-child {
    margin-top: var(--tom-spacing-xsm)
}

.\[\&\>\*\:nth-child\(n\+11\)\]\:hidden>:nth-child(n+11),
.\[\&\>\*\:nth-child\(n\+13\)\]\:hidden>:nth-child(n+13),
.\[\&\>\*\:nth-child\(n\+16\)\]\:hidden>:nth-child(n+16),
.\[\&\>\*\:nth-child\(n\+21\)\]\:hidden>:nth-child(n+21),
.\[\&\>\*\:nth-child\(n\+6\)\]\:hidden>:nth-child(n+6) {
    display: none
}

.\[\&\>svg\]\:w-\[16px\]>svg {
    width: 16px
}

.bwlMNH {
    color: rgb(252, 208, 0);
    fill: rgb(252, 208, 0);
    width: 24px;
    height: 24px;
}



div.flex.items-center.pb-xsm {
    padding-top: 30px;
    padding-bottom: 15px;
}


div.sc-iGgWBj.eWtIHQ {
    margin-bottom: 30px;
}


div.sc-bpUBKd.egCvLp { 
    display: none !important;

}

 
p.sc-dcJsrY.gpvSbZ.sc-ijtseF.hzpKaK {
    margin-right: 5px;
    margin-left: 5px;
}


div.sc-iGgWBj.ewkEZp.sc-gZfzYS.jvtSKA {
    color: #51585c;
    margin-top: 10px;
}

div[data-testid="gallery-without-carousel"] {
    display: none !important;
}

span.sc-cXPBUD.SkEmc {
    color: #343b3f !important; 
}


.sc-ezreuY.iXPaYi {
    
    display: flex;
}

.sc-fqkvVR.byzlMR.sc-bHvAfQ.fTaoYa {
    display: flex;
    margin-bottom: 10px;
}

p.sc-dcJsrY.gpvSbZ.sc-dxlmjS.laBmHt {
    margin-left: 5px;
    margin-right: 5px;
}


.sc-eonqix.bUqNpr {
    display: none;
}


h1.sc-dcJsrY.ljnWlX {
    display: none;
}

.sc-fqkvVR.eFVmLK.sc-iBIrxy.hrRKsx {
    margin-bottom: 30px;
}