/*!********************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./node_modules/@fontsource/manrope/latin-400.css ***! \********************************************************************************************************************************************************************************************************************************************************************************************/ /* manrope-latin-400-normal */ @font-face { font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 400; src: url(/_next/static/media/manrope-latin-400-normal.b69ff29f.woff2) format('woff2'), url(/_next/static/media/manrope-latin-400-normal.3f370876.woff) format('woff'); } /*!********************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./node_modules/@fontsource/manrope/latin-500.css ***! \********************************************************************************************************************************************************************************************************************************************************************************************/ /* manrope-latin-500-normal */ @font-face { font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 500; src: url(/_next/static/media/manrope-latin-500-normal.1439e66f.woff2) format('woff2'), url(/_next/static/media/manrope-latin-500-normal.f0da4735.woff) format('woff'); } /*!********************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./node_modules/@fontsource/manrope/latin-600.css ***! \********************************************************************************************************************************************************************************************************************************************************************************************/ /* manrope-latin-600-normal */ @font-face { font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 600; src: url(/_next/static/media/manrope-latin-600-normal.ef413a9e.woff2) format('woff2'), url(/_next/static/media/manrope-latin-600-normal.bdb77099.woff) format('woff'); } /*!********************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./node_modules/@fontsource/manrope/latin-700.css ***! \********************************************************************************************************************************************************************************************************************************************************************************************/ /* manrope-latin-700-normal */ @font-face { font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 700; src: url(/_next/static/media/manrope-latin-700-normal.4fc2723e.woff2) format('woff2'), url(/_next/static/media/manrope-latin-700-normal.91396a4b.woff) format('woff'); } /*!********************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./node_modules/@fontsource/manrope/latin-800.css ***! \********************************************************************************************************************************************************************************************************************************************************************************************/ /* manrope-latin-800-normal */ @font-face { font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 800; src: url(/_next/static/media/manrope-latin-800-normal.121cd4c5.woff2) format('woff2'), url(/_next/static/media/manrope-latin-800-normal.c245ae3d.woff) format('woff'); } /*!*******************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./node_modules/@fontsource/cormorant-garamond/latin-400.css ***! \*******************************************************************************************************************************************************************************************************************************************************************************************************/ /* cormorant-garamond-latin-400-normal */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-display: swap; font-weight: 400; src: url(/_next/static/media/cormorant-garamond-latin-400-normal.92f9a759.woff2) format('woff2'), url(/_next/static/media/cormorant-garamond-latin-400-normal.753a0e70.woff) format('woff'); } /*!**************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./node_modules/@fontsource/cormorant-garamond/latin-400-italic.css ***! \**************************************************************************************************************************************************************************************************************************************************************************************************************/ /* cormorant-garamond-latin-400-italic */ @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-display: swap; font-weight: 400; src: url(/_next/static/media/cormorant-garamond-latin-400-italic.235349d9.woff2) format('woff2'), url(/_next/static/media/cormorant-garamond-latin-400-italic.7b42a9ec.woff) format('woff'); } /*!*******************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./node_modules/@fontsource/cormorant-garamond/latin-500.css ***! \*******************************************************************************************************************************************************************************************************************************************************************************************************/ /* cormorant-garamond-latin-500-normal */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-display: swap; font-weight: 500; src: url(/_next/static/media/cormorant-garamond-latin-500-normal.37a9a8cd.woff2) format('woff2'), url(/_next/static/media/cormorant-garamond-latin-500-normal.5a368ae3.woff) format('woff'); } /*!**************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./node_modules/@fontsource/cormorant-garamond/latin-500-italic.css ***! \**************************************************************************************************************************************************************************************************************************************************************************************************************/ /* cormorant-garamond-latin-500-italic */ @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-display: swap; font-weight: 500; src: url(/_next/static/media/cormorant-garamond-latin-500-italic.7dc561f0.woff2) format('woff2'), url(/_next/static/media/cormorant-garamond-latin-500-italic.51431b49.woff) format('woff'); } /*!*******************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./node_modules/@fontsource/cormorant-garamond/latin-600.css ***! \*******************************************************************************************************************************************************************************************************************************************************************************************************/ /* cormorant-garamond-latin-600-normal */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-display: swap; font-weight: 600; src: url(/_next/static/media/cormorant-garamond-latin-600-normal.0e4e8436.woff2) format('woff2'), url(/_next/static/media/cormorant-garamond-latin-600-normal.7a726ec1.woff) format('woff'); } /*!**************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./node_modules/@fontsource/cormorant-garamond/latin-600-italic.css ***! \**************************************************************************************************************************************************************************************************************************************************************************************************************/ /* cormorant-garamond-latin-600-italic */ @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-display: swap; font-weight: 600; src: url(/_next/static/media/cormorant-garamond-latin-600-italic.5865568f.woff2) format('woff2'), url(/_next/static/media/cormorant-garamond-latin-600-italic.e2210050.woff) format('woff'); } /*!*******************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./node_modules/@fontsource/cormorant-garamond/latin-700.css ***! \*******************************************************************************************************************************************************************************************************************************************************************************************************/ /* cormorant-garamond-latin-700-normal */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-display: swap; font-weight: 700; src: url(/_next/static/media/cormorant-garamond-latin-700-normal.cdf2c76d.woff2) format('woff2'), url(/_next/static/media/cormorant-garamond-latin-700-normal.de97daf3.woff) format('woff'); } /*!**************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./node_modules/@fontsource/cormorant-garamond/latin-700-italic.css ***! \**************************************************************************************************************************************************************************************************************************************************************************************************************/ /* cormorant-garamond-latin-700-italic */ @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-display: swap; font-weight: 700; src: url(/_next/static/media/cormorant-garamond-latin-700-italic.c5e23c4c.woff2) format('woff2'), url(/_next/static/media/cormorant-garamond-latin-700-italic.7d396bf2.woff) format('woff'); } /*!************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./node_modules/@shopify/polaris/build/esm/styles.css ***! \************************************************************************************************************************************************************************************************************************************************************************************************/ @charset "UTF-8"; :root,.p-theme-light{--p-border-radius-0:0rem;--p-border-radius-050:0.125rem;--p-border-radius-100:0.25rem;--p-border-radius-150:0.375rem;--p-border-radius-200:0.5rem;--p-border-radius-300:0.75rem;--p-border-radius-400:1rem;--p-border-radius-500:1.25rem;--p-border-radius-750:1.875rem;--p-border-radius-full:624.9375rem;--p-border-width-0:0rem;--p-border-width-0165:0.04125rem;--p-border-width-025:0.0625rem;--p-border-width-050:0.125rem;--p-border-width-100:0.25rem;--p-breakpoints-xs:0rem;--p-breakpoints-sm:30.625rem;--p-breakpoints-md:48rem;--p-breakpoints-lg:65rem;--p-breakpoints-xl:90rem;color-scheme:light;--p-color-bg:rgba(241, 241, 241, 1);--p-color-bg-inverse:rgba(26, 26, 26, 1);--p-color-bg-surface:rgba(255, 255, 255, 1);--p-color-bg-surface-hover:rgba(247, 247, 247, 1);--p-color-bg-surface-active:rgba(243, 243, 243, 1);--p-color-bg-surface-selected:rgba(241, 241, 241, 1);--p-color-bg-surface-disabled:rgba(0, 0, 0, 0.05);--p-color-bg-surface-secondary:rgba(247, 247, 247, 1);--p-color-bg-surface-secondary-hover:rgba(241, 241, 241, 1);--p-color-bg-surface-secondary-active:rgba(235, 235, 235, 1);--p-color-bg-surface-secondary-selected:rgba(235, 235, 235, 1);--p-color-bg-surface-tertiary:rgba(243, 243, 243, 1);--p-color-bg-surface-tertiary-hover:rgba(235, 235, 235, 1);--p-color-bg-surface-tertiary-active:rgba(227, 227, 227, 1);--p-color-bg-surface-brand:rgba(227, 227, 227, 1);--p-color-bg-surface-brand-hover:rgba(235, 235, 235, 1);--p-color-bg-surface-brand-active:rgba(241, 241, 241, 1);--p-color-bg-surface-brand-selected:rgba(241, 241, 241, 1);--p-color-bg-surface-info:rgba(234, 244, 255, 1);--p-color-bg-surface-info-hover:rgba(224, 240, 255, 1);--p-color-bg-surface-info-active:rgba(202, 230, 255, 1);--p-color-bg-surface-success:rgba(205, 254, 212, 1);--p-color-bg-surface-success-hover:rgba(175, 254, 191, 1);--p-color-bg-surface-success-active:rgba(146, 252, 172, 1);--p-color-bg-surface-caution:rgba(255, 248, 219, 1);--p-color-bg-surface-caution-hover:rgba(255, 244, 191, 1);--p-color-bg-surface-caution-active:rgba(255, 239, 157, 1);--p-color-bg-surface-warning:rgba(255, 241, 227, 1);--p-color-bg-surface-warning-hover:rgba(255, 235, 213, 1);--p-color-bg-surface-warning-active:rgba(255, 228, 198, 1);--p-color-bg-surface-critical:rgba(254, 232, 235, 1);--p-color-bg-surface-critical-hover:rgba(254, 225, 230, 1);--p-color-bg-surface-critical-active:rgba(254, 217, 223, 1);--p-color-bg-surface-emphasis:rgba(240, 242, 255, 1);--p-color-bg-surface-emphasis-hover:rgba(234, 237, 255, 1);--p-color-bg-surface-emphasis-active:rgba(226, 231, 255, 1);--p-color-bg-surface-magic:rgba(248, 247, 255, 1);--p-color-bg-surface-magic-hover:rgba(243, 241, 255, 1);--p-color-bg-surface-magic-active:rgba(233, 229, 255, 1);--p-color-bg-surface-inverse:rgba(48, 48, 48, 1);--p-color-bg-surface-transparent:rgba(0, 0, 0, 0);--p-color-bg-fill:rgba(255, 255, 255, 1);--p-color-bg-fill-hover:rgba(250, 250, 250, 1);--p-color-bg-fill-active:rgba(247, 247, 247, 1);--p-color-bg-fill-selected:rgba(204, 204, 204, 1);--p-color-bg-fill-disabled:rgba(0, 0, 0, 0.05);--p-color-bg-fill-secondary:rgba(241, 241, 241, 1);--p-color-bg-fill-secondary-hover:rgba(235, 235, 235, 1);--p-color-bg-fill-secondary-active:rgba(227, 227, 227, 1);--p-color-bg-fill-secondary-selected:rgba(227, 227, 227, 1);--p-color-bg-fill-tertiary:rgba(227, 227, 227, 1);--p-color-bg-fill-tertiary-hover:rgba(212, 212, 212, 1);--p-color-bg-fill-tertiary-active:rgba(204, 204, 204, 1);--p-color-bg-fill-brand:rgba(48, 48, 48, 1);--p-color-bg-fill-brand-hover:rgba(26, 26, 26, 1);--p-color-bg-fill-brand-active:rgba(26, 26, 26, 1);--p-color-bg-fill-brand-selected:rgba(48, 48, 48, 1);--p-color-bg-fill-brand-disabled:rgba(0, 0, 0, 0.17);--p-color-bg-fill-info:rgba(145, 208, 255, 1);--p-color-bg-fill-info-hover:rgba(81, 192, 255, 1);--p-color-bg-fill-info-active:rgba(0, 148, 213, 1);--p-color-bg-fill-info-secondary:rgba(213, 235, 255, 1);--p-color-bg-fill-success:rgba(4, 123, 93, 1);--p-color-bg-fill-success-hover:rgba(3, 94, 76, 1);--p-color-bg-fill-success-active:rgba(1, 75, 64, 1);--p-color-bg-fill-success-secondary:rgba(175, 254, 191, 1);--p-color-bg-fill-warning:rgba(255, 184, 0, 1);--p-color-bg-fill-warning-hover:rgba(229, 165, 0, 1);--p-color-bg-fill-warning-active:rgba(178, 132, 0, 1);--p-color-bg-fill-warning-secondary:rgba(255, 214, 164, 1);--p-color-bg-fill-caution:rgba(255, 230, 0, 1);--p-color-bg-fill-caution-hover:rgba(234, 211, 0, 1);--p-color-bg-fill-caution-active:rgba(225, 203, 0, 1);--p-color-bg-fill-caution-secondary:rgba(255, 235, 120, 1);--p-color-bg-fill-critical:rgba(199, 10, 36, 1);--p-color-bg-fill-critical-hover:rgba(163, 10, 36, 1);--p-color-bg-fill-critical-active:rgba(142, 11, 33, 1);--p-color-bg-fill-critical-selected:rgba(142, 11, 33, 1);--p-color-bg-fill-critical-secondary:rgba(254, 209, 215, 1);--p-color-bg-fill-emphasis:rgba(0, 91, 211, 1);--p-color-bg-fill-emphasis-hover:rgba(0, 66, 153, 1);--p-color-bg-fill-emphasis-active:rgba(0, 46, 106, 1);--p-color-bg-fill-magic:rgba(128, 81, 255, 1);--p-color-bg-fill-magic-secondary:rgba(233, 229, 255, 1);--p-color-bg-fill-magic-secondary-hover:rgba(228, 222, 255, 1);--p-color-bg-fill-magic-secondary-active:rgba(223, 217, 255, 1);--p-color-bg-fill-inverse:rgba(48, 48, 48, 1);--p-color-bg-fill-inverse-hover:rgba(74, 74, 74, 1);--p-color-bg-fill-inverse-active:rgba(97, 97, 97, 1);--p-color-bg-fill-transparent:rgba(0, 0, 0, 0.02);--p-color-bg-fill-transparent-hover:rgba(0, 0, 0, 0.05);--p-color-bg-fill-transparent-active:rgba(0, 0, 0, 0.08);--p-color-bg-fill-transparent-selected:rgba(0, 0, 0, 0.08);--p-color-bg-fill-transparent-secondary:rgba(0, 0, 0, 0.06);--p-color-bg-fill-transparent-secondary-hover:rgba(0, 0, 0, 0.08);--p-color-bg-fill-transparent-secondary-active:rgba(0, 0, 0, 0.11);--p-color-text:rgba(48, 48, 48, 1);--p-color-text-secondary:rgba(97, 97, 97, 1);--p-color-text-disabled:rgba(181, 181, 181, 1);--p-color-text-link:rgba(0, 91, 211, 1);--p-color-text-link-hover:rgba(0, 66, 153, 1);--p-color-text-link-active:rgba(0, 46, 106, 1);--p-color-text-brand:rgba(74, 74, 74, 1);--p-color-text-brand-hover:rgba(48, 48, 48, 1);--p-color-text-brand-on-bg-fill:rgba(255, 255, 255, 1);--p-color-text-brand-on-bg-fill-hover:rgba(227, 227, 227, 1);--p-color-text-brand-on-bg-fill-active:rgba(204, 204, 204, 1);--p-color-text-brand-on-bg-fill-disabled:rgba(255, 255, 255, 1);--p-color-text-info:rgba(0, 58, 90, 1);--p-color-text-info-hover:rgba(0, 58, 90, 1);--p-color-text-info-active:rgba(0, 33, 51, 1);--p-color-text-info-secondary:rgba(0, 124, 180, 1);--p-color-text-info-on-bg-fill:rgba(0, 33, 51, 1);--p-color-text-success:rgba(1, 75, 64, 1);--p-color-text-success-hover:rgba(7, 54, 48, 1);--p-color-text-success-active:rgba(2, 38, 34, 1);--p-color-text-success-secondary:rgba(4, 123, 93, 1);--p-color-text-success-on-bg-fill:rgba(250, 255, 251, 1);--p-color-text-caution:rgba(79, 71, 0, 1);--p-color-text-caution-hover:rgba(51, 46, 0, 1);--p-color-text-caution-active:rgba(31, 28, 0, 1);--p-color-text-caution-secondary:rgba(130, 117, 0, 1);--p-color-text-caution-on-bg-fill:rgba(51, 46, 0, 1);--p-color-text-warning:rgba(94, 66, 0, 1);--p-color-text-warning-hover:rgba(65, 45, 0, 1);--p-color-text-warning-active:rgba(37, 26, 0, 1);--p-color-text-warning-secondary:rgba(149, 111, 0, 1);--p-color-text-warning-on-bg-fill:rgba(37, 26, 0, 1);--p-color-text-critical:rgba(142, 11, 33, 1);--p-color-text-critical-hover:rgba(95, 7, 22, 1);--p-color-text-critical-active:rgba(47, 4, 11, 1);--p-color-text-critical-secondary:rgba(199, 10, 36, 1);--p-color-text-critical-on-bg-fill:rgba(255, 250, 251, 1);--p-color-text-emphasis:rgba(0, 91, 211, 1);--p-color-text-emphasis-hover:rgba(0, 66, 153, 1);--p-color-text-emphasis-active:rgba(0, 46, 106, 1);--p-color-text-emphasis-on-bg-fill:rgba(252, 253, 255, 1);--p-color-text-emphasis-on-bg-fill-hover:rgba(226, 231, 255, 1);--p-color-text-emphasis-on-bg-fill-active:rgba(213, 220, 255, 1);--p-color-text-magic:rgba(87, 0, 209, 1);--p-color-text-magic-secondary:rgba(113, 38, 255, 1);--p-color-text-magic-on-bg-fill:rgba(253, 253, 255, 1);--p-color-text-inverse:rgba(227, 227, 227, 1);--p-color-text-inverse-secondary:rgba(181, 181, 181, 1);--p-color-text-link-inverse:rgba(197, 208, 255, 1);--p-color-border:rgba(227, 227, 227, 1);--p-color-border-hover:rgba(204, 204, 204, 1);--p-color-border-disabled:rgba(235, 235, 235, 1);--p-color-border-secondary:rgba(235, 235, 235, 1);--p-color-border-tertiary:rgba(204, 204, 204, 1);--p-color-border-focus:rgba(0, 91, 211, 1);--p-color-border-brand:rgba(227, 227, 227, 1);--p-color-border-info:rgba(168, 216, 255, 1);--p-color-border-success:rgba(146, 252, 172, 1);--p-color-border-caution:rgba(255, 235, 120, 1);--p-color-border-warning:rgba(255, 200, 121, 1);--p-color-border-critical:rgba(254, 193, 199, 1);--p-color-border-critical-secondary:rgba(142, 11, 33, 1);--p-color-border-emphasis:rgba(0, 91, 211, 1);--p-color-border-emphasis-hover:rgba(0, 66, 153, 1);--p-color-border-emphasis-active:rgba(0, 46, 106, 1);--p-color-border-magic:rgba(228, 222, 255, 1);--p-color-border-magic-secondary:rgba(148, 116, 255, 1);--p-color-border-magic-secondary-hover:rgba(128, 81, 255, 1);--p-color-border-inverse:rgba(97, 97, 97, 1);--p-color-border-inverse-hover:rgba(204, 204, 204, 1);--p-color-border-inverse-active:rgba(227, 227, 227, 1);--p-color-tooltip-tail-down-border:rgba(212, 212, 212, 1);--p-color-tooltip-tail-up-border:rgba(227, 227, 227, 1);--p-color-icon:rgba(74, 74, 74, 1);--p-color-icon-hover:rgba(48, 48, 48, 1);--p-color-icon-active:rgba(26, 26, 26, 1);--p-color-icon-disabled:rgba(204, 204, 204, 1);--p-color-icon-secondary:rgba(138, 138, 138, 1);--p-color-icon-secondary-hover:rgba(97, 97, 97, 1);--p-color-icon-secondary-active:rgba(74, 74, 74, 1);--p-color-icon-brand:rgba(26, 26, 26, 1);--p-color-icon-info:rgba(0, 148, 213, 1);--p-color-icon-success:rgba(4, 123, 93, 1);--p-color-icon-caution:rgba(153, 138, 0, 1);--p-color-icon-warning:rgba(178, 132, 0, 1);--p-color-icon-critical:rgba(226, 44, 56, 1);--p-color-icon-emphasis:rgba(0, 91, 211, 1);--p-color-icon-emphasis-hover:rgba(0, 66, 153, 1);--p-color-icon-emphasis-active:rgba(0, 46, 106, 1);--p-color-icon-magic:rgba(128, 81, 255, 1);--p-color-icon-inverse:rgba(227, 227, 227, 1);--p-color-avatar-bg-fill:rgba(181, 181, 181, 1);--p-color-avatar-five-bg-fill:rgba(253, 75, 146, 1);--p-color-avatar-five-text-on-bg-fill:rgba(255, 246, 248, 1);--p-color-avatar-four-bg-fill:rgba(81, 192, 255, 1);--p-color-avatar-four-text-on-bg-fill:rgba(0, 33, 51, 1);--p-color-avatar-one-bg-fill:rgba(197, 48, 197, 1);--p-color-avatar-one-text-on-bg-fill:rgba(253, 239, 253, 1);--p-color-avatar-seven-bg-fill:rgba(148, 116, 255, 1);--p-color-avatar-seven-text-on-bg-fill:rgba(248, 247, 255, 1);--p-color-avatar-six-bg-fill:rgba(37, 232, 43, 1);--p-color-avatar-six-text-on-bg-fill:rgba(3, 61, 5, 1);--p-color-avatar-text-on-bg-fill:rgba(255, 255, 255, 1);--p-color-avatar-three-bg-fill:rgba(44, 224, 212, 1);--p-color-avatar-three-text-on-bg-fill:rgba(3, 60, 57, 1);--p-color-avatar-two-bg-fill:rgba(82, 244, 144, 1);--p-color-avatar-two-text-on-bg-fill:rgba(1, 75, 64, 1);--p-color-backdrop-bg:rgba(0, 0, 0, 0.71);--p-color-button-gradient-bg-fill:linear-gradient(180deg, rgba(48, 48, 48, 0) 63.53%, rgba(255, 255, 255, 0.15) 100%);--p-color-checkbox-bg-surface-disabled:rgba(0, 0, 0, 0.08);--p-color-checkbox-icon-disabled:rgba(255, 255, 255, 1);--p-color-input-bg-surface:rgba(253, 253, 253, 1);--p-color-input-bg-surface-hover:rgba(250, 250, 250, 1);--p-color-input-bg-surface-active:rgba(247, 247, 247, 1);--p-color-input-border:rgba(138, 138, 138, 1);--p-color-input-border-hover:rgba(97, 97, 97, 1);--p-color-input-border-active:rgba(26, 26, 26, 1);--p-color-nav-bg:rgba(235, 235, 235, 1);--p-color-nav-bg-surface:rgba(0, 0, 0, 0.02);--p-color-nav-bg-surface-hover:rgba(241, 241, 241, 1);--p-color-nav-bg-surface-active:rgba(250, 250, 250, 1);--p-color-nav-bg-surface-selected:rgba(250, 250, 250, 1);--p-color-radio-button-bg-surface-disabled:rgba(0, 0, 0, 0.08);--p-color-radio-button-icon-disabled:rgba(255, 255, 255, 1);--p-color-video-thumbnail-play-button-bg-fill-hover:rgba(0, 0, 0, 0.81);--p-color-video-thumbnail-play-button-bg-fill:rgba(0, 0, 0, 0.71);--p-color-video-thumbnail-play-button-text-on-bg-fill:rgba(255, 255, 255, 1);--p-color-scrollbar-thumb-bg-hover:rgba(138, 138, 138, 1);--p-color-scrollbar-thumb-bg:rgba(181, 181, 181, 1);--p-font-family-sans:'Inter', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;--p-font-family-mono:ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;--p-font-size-275:0.6875rem;--p-font-size-300:0.75rem;--p-font-size-325:0.8125rem;--p-font-size-350:0.875rem;--p-font-size-400:1rem;--p-font-size-450:1.125rem;--p-font-size-500:1.25rem;--p-font-size-550:1.375rem;--p-font-size-600:1.5rem;--p-font-size-750:1.875rem;--p-font-size-800:2rem;--p-font-size-900:2.25rem;--p-font-size-1000:2.5rem;--p-font-weight-regular:450;--p-font-weight-medium:550;--p-font-weight-semibold:650;--p-font-weight-bold:700;--p-font-letter-spacing-densest:-0.03375rem;--p-font-letter-spacing-denser:-0.01875rem;--p-font-letter-spacing-dense:-0.0125rem;--p-font-letter-spacing-normal:0rem;--p-font-line-height-300:0.75rem;--p-font-line-height-400:1rem;--p-font-line-height-500:1.25rem;--p-font-line-height-600:1.5rem;--p-font-line-height-700:1.75rem;--p-font-line-height-800:2rem;--p-font-line-height-1000:2.5rem;--p-font-line-height-1200:3rem;--p-height-0:0rem;--p-height-025:0.0625rem;--p-height-050:0.125rem;--p-height-100:0.25rem;--p-height-150:0.375rem;--p-height-200:0.5rem;--p-height-300:0.75rem;--p-height-400:1rem;--p-height-500:1.25rem;--p-height-600:1.5rem;--p-height-700:1.75rem;--p-height-800:2rem;--p-height-900:2.25rem;--p-height-1000:2.5rem;--p-height-1200:3rem;--p-height-1600:4rem;--p-height-2000:5rem;--p-height-2400:6rem;--p-height-2800:7rem;--p-height-3200:8rem;--p-motion-duration-0:0ms;--p-motion-duration-50:50ms;--p-motion-duration-100:100ms;--p-motion-duration-150:150ms;--p-motion-duration-200:200ms;--p-motion-duration-250:250ms;--p-motion-duration-300:300ms;--p-motion-duration-350:350ms;--p-motion-duration-400:400ms;--p-motion-duration-450:450ms;--p-motion-duration-500:500ms;--p-motion-duration-5000:5000ms;--p-motion-ease:cubic-bezier(0.25, 0.1, 0.25, 1);--p-motion-ease-in:cubic-bezier(0.42, 0, 1, 1);--p-motion-ease-out:cubic-bezier(0.19, 0.91, 0.38, 1);--p-motion-ease-in-out:cubic-bezier(0.42, 0, 0.58, 1);--p-motion-linear:cubic-bezier(0, 0, 1, 1);--p-motion-keyframes-bounce:p-motion-keyframes-bounce;--p-motion-keyframes-fade-in:p-motion-keyframes-fade-in;--p-motion-keyframes-pulse:p-motion-keyframes-pulse;--p-motion-keyframes-spin:p-motion-keyframes-spin;--p-motion-keyframes-appear-above:p-motion-keyframes-appear-above;--p-motion-keyframes-appear-below:p-motion-keyframes-appear-below;--p-shadow-0:none;--p-shadow-100:0rem 0.0625rem 0rem 0rem rgba(26, 26, 26, 0.07);--p-shadow-200:0rem 0.1875rem 0.0625rem -0.0625rem rgba(26, 26, 26, 0.07);--p-shadow-300:0rem 0.25rem 0.375rem -0.125rem rgba(26, 26, 26, 0.20);--p-shadow-400:0rem 0.5rem 1rem -0.25rem rgba(26, 26, 26, 0.22);--p-shadow-500:0rem 0.75rem 1.25rem -0.5rem rgba(26, 26, 26, 0.24);--p-shadow-600:0rem 1.25rem 1.25rem -0.5rem rgba(26, 26, 26, 0.28);--p-shadow-bevel-100:0.0625rem 0rem 0rem 0rem rgba(0, 0, 0, 0.13) inset, -0.0625rem 0rem 0rem 0rem rgba(0, 0, 0, 0.13) inset, 0rem -0.0625rem 0rem 0rem rgba(0, 0, 0, 0.17) inset, 0rem 0.0625rem 0rem 0rem rgba(204, 204, 204, 0.5) inset;--p-shadow-inset-100:0rem 0.0625rem 0.125rem 0rem rgba(26, 26, 26, 0.15) inset, 0rem 0.0625rem 0.0625rem 0rem rgba(26, 26, 26, 0.15) inset;--p-shadow-inset-200:0rem 0.125rem 0.0625rem 0rem rgba(26, 26, 26, 0.20) inset, 0.0625rem 0rem 0.0625rem 0rem rgba(26, 26, 26, 0.12) inset, -0.0625rem 0rem 0.0625rem 0rem rgba(26, 26, 26, 0.12) inset;--p-shadow-button:0rem -0.0625rem 0rem 0rem #b5b5b5 inset, 0rem 0rem 0rem 0.0625rem rgba(0, 0, 0, 0.1) inset, 0rem 0.03125rem 0rem 0.09375rem #FFF inset;--p-shadow-button-hover:0rem 0.0625rem 0rem 0rem #EBEBEB inset, -0.0625rem 0rem 0rem 0rem #EBEBEB inset, 0.0625rem 0rem 0rem 0rem #EBEBEB inset, 0rem -0.0625rem 0rem 0rem #CCC inset;--p-shadow-button-inset:-0.0625rem 0rem 0.0625rem 0rem rgba(26, 26, 26, 0.122) inset, 0.0625rem 0rem 0.0625rem 0rem rgba(26, 26, 26, 0.122) inset, 0rem 0.125rem 0.0625rem 0rem rgba(26, 26, 26, 0.2) inset;--p-shadow-button-primary:0rem -0.0625rem 0rem 0.0625rem rgba(0, 0, 0, 0.8) inset, 0rem 0rem 0rem 0.0625rem rgba(48, 48, 48, 1) inset, 0rem 0.03125rem 0rem 0.09375rem rgba(255, 255, 255, 0.25) inset;--p-shadow-button-primary-hover:0rem 0.0625rem 0rem 0rem rgba(255, 255, 255, 0.24) inset, 0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.20) inset, -0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.20) inset, 0rem -0.0625rem 0rem 0rem #000 inset, 0rem -0.0625rem 0rem 0.0625rem #1A1A1A;--p-shadow-button-primary-inset:0rem 0.1875rem 0rem 0rem rgb(0, 0, 0) inset;--p-shadow-button-primary-critical:0rem -0.0625rem 0rem 0.0625rem rgba(142, 31, 11, 0.8) inset, 0rem 0rem 0rem 0.0625rem rgba(181, 38, 11, 0.8) inset, 0rem 0.03125rem 0rem 0.09375rem rgba(255, 255, 255, 0.349) inset;--p-shadow-button-primary-critical-hover:0rem 0.0625rem 0rem 0rem rgba(255, 255, 255, 0.48) inset, 0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.20) inset, -0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.20) inset, 0rem -0.09375rem 0rem 0rem rgba(0, 0, 0, 0.25) inset;--p-shadow-button-primary-critical-inset:-0.0625rem 0rem 0.0625rem 0rem rgba(0, 0, 0, 0.2) inset, 0.0625rem 0rem 0.0625rem 0rem rgba(0, 0, 0, 0.2) inset, 0rem 0.125rem 0rem 0rem rgba(0, 0, 0, 0.6) inset;--p-shadow-button-primary-success:0rem -0.0625rem 0rem 0.0625rem rgba(12, 81, 50, 0.8) inset, 0rem 0rem 0rem 0.0625rem rgba(19, 111, 69, 0.8) inset, 0rem 0.03125rem 0rem 0.09375rem rgba(255, 255, 255, 0.251) inset;--p-shadow-button-primary-success-hover:0rem 0.0625rem 0rem 0rem rgba(255, 255, 255, 0.48) inset, 0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.20) inset, -0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.20) inset, 0rem -0.09375rem 0rem 0rem rgba(0, 0, 0, 0.25) inset;--p-shadow-button-primary-success-inset:-0.0625rem 0rem 0.0625rem 0rem rgba(0, 0, 0, 0.2) inset, 0.0625rem 0rem 0.0625rem 0rem rgba(0, 0, 0, 0.2) inset, 0rem 0.125rem 0rem 0rem rgba(0, 0, 0, 0.6) inset;--p-shadow-border-inset:0rem 0rem 0rem 0.0625rem rgba(0, 0, 0, 0.08) inset;--p-space-0:0rem;--p-space-025:0.0625rem;--p-space-050:0.125rem;--p-space-100:0.25rem;--p-space-150:0.375rem;--p-space-200:0.5rem;--p-space-300:0.75rem;--p-space-400:1rem;--p-space-500:1.25rem;--p-space-600:1.5rem;--p-space-800:2rem;--p-space-1000:2.5rem;--p-space-1200:3rem;--p-space-1600:4rem;--p-space-2000:5rem;--p-space-2400:6rem;--p-space-2800:7rem;--p-space-3200:8rem;--p-space-button-group-gap:var(--p-space-200);--p-space-card-gap:var(--p-space-400);--p-space-card-padding:var(--p-space-400);--p-space-table-cell-padding:var(--p-space-150);--p-text-heading-3xl-font-family:var(--p-font-family-sans);--p-text-heading-3xl-font-size:var(--p-font-size-900);--p-text-heading-3xl-font-weight:var(--p-font-weight-bold);--p-text-heading-3xl-font-letter-spacing:var(--p-font-letter-spacing-densest);--p-text-heading-3xl-font-line-height:var(--p-font-line-height-1200);--p-text-heading-2xl-font-family:var(--p-font-family-sans);--p-text-heading-2xl-font-size:var(--p-font-size-750);--p-text-heading-2xl-font-weight:var(--p-font-weight-bold);--p-text-heading-2xl-font-letter-spacing:var(--p-font-letter-spacing-denser);--p-text-heading-2xl-font-line-height:var(--p-font-line-height-1000);--p-text-heading-xl-font-family:var(--p-font-family-sans);--p-text-heading-xl-font-size:var(--p-font-size-600);--p-text-heading-xl-font-weight:var(--p-font-weight-bold);--p-text-heading-xl-font-letter-spacing:var(--p-font-letter-spacing-dense);--p-text-heading-xl-font-line-height:var(--p-font-line-height-800);--p-text-heading-lg-font-family:var(--p-font-family-sans);--p-text-heading-lg-font-size:var(--p-font-size-500);--p-text-heading-lg-font-weight:var(--p-font-weight-semibold);--p-text-heading-lg-font-letter-spacing:var(--p-font-letter-spacing-dense);--p-text-heading-lg-font-line-height:var(--p-font-line-height-600);--p-text-heading-md-font-family:var(--p-font-family-sans);--p-text-heading-md-font-size:var(--p-font-size-350);--p-text-heading-md-font-weight:var(--p-font-weight-semibold);--p-text-heading-md-font-letter-spacing:var(--p-font-letter-spacing-normal);--p-text-heading-md-font-line-height:var(--p-font-line-height-500);--p-text-heading-sm-font-family:var(--p-font-family-sans);--p-text-heading-sm-font-size:var(--p-font-size-325);--p-text-heading-sm-font-weight:var(--p-font-weight-semibold);--p-text-heading-sm-font-letter-spacing:var(--p-font-letter-spacing-normal);--p-text-heading-sm-font-line-height:var(--p-font-line-height-500);--p-text-heading-xs-font-family:var(--p-font-family-sans);--p-text-heading-xs-font-size:var(--p-font-size-300);--p-text-heading-xs-font-weight:var(--p-font-weight-semibold);--p-text-heading-xs-font-letter-spacing:var(--p-font-letter-spacing-normal);--p-text-heading-xs-font-line-height:var(--p-font-line-height-400);--p-text-body-lg-font-family:var(--p-font-family-sans);--p-text-body-lg-font-size:var(--p-font-size-350);--p-text-body-lg-font-weight:var(--p-font-weight-regular);--p-text-body-lg-font-letter-spacing:var(--p-font-letter-spacing-normal);--p-text-body-lg-font-line-height:var(--p-font-line-height-500);--p-text-body-md-font-family:var(--p-font-family-sans);--p-text-body-md-font-size:var(--p-font-size-325);--p-text-body-md-font-weight:var(--p-font-weight-regular);--p-text-body-md-font-letter-spacing:var(--p-font-letter-spacing-normal);--p-text-body-md-font-line-height:var(--p-font-line-height-500);--p-text-body-sm-font-family:var(--p-font-family-sans);--p-text-body-sm-font-size:var(--p-font-size-300);--p-text-body-sm-font-weight:var(--p-font-weight-regular);--p-text-body-sm-font-letter-spacing:var(--p-font-letter-spacing-normal);--p-text-body-sm-font-line-height:var(--p-font-line-height-400);--p-text-body-xs-font-family:var(--p-font-family-sans);--p-text-body-xs-font-size:var(--p-font-size-275);--p-text-body-xs-font-weight:var(--p-font-weight-regular);--p-text-body-xs-font-letter-spacing:var(--p-font-letter-spacing-normal);--p-text-body-xs-font-line-height:var(--p-font-line-height-300);--p-width-0:0rem;--p-width-025:0.0625rem;--p-width-050:0.125rem;--p-width-100:0.25rem;--p-width-150:0.375rem;--p-width-200:0.5rem;--p-width-300:0.75rem;--p-width-400:1rem;--p-width-500:1.25rem;--p-width-600:1.5rem;--p-width-700:1.75rem;--p-width-800:2rem;--p-width-900:2.25rem;--p-width-1000:2.5rem;--p-width-1200:3rem;--p-width-1600:4rem;--p-width-2000:5rem;--p-width-2400:6rem;--p-width-2800:7rem;--p-width-3200:8rem;--p-z-index-0:auto;--p-z-index-1:100;--p-z-index-2:400;--p-z-index-3:510;--p-z-index-4:512;--p-z-index-5:513;--p-z-index-6:514;--p-z-index-7:515;--p-z-index-8:516;--p-z-index-9:517;--p-z-index-10:518;--p-z-index-11:519;--p-z-index-12:520;} .p-theme-light-mobile{--p-color-button-gradient-bg-fill:none;--p-shadow-100:none;--p-shadow-bevel-100:none;--p-shadow-button:0 0 0 var(--p-border-width-025) var(--p-color-border) inset;--p-shadow-button-hover:0 0 0 var(--p-border-width-025) var(--p-color-border) inset;--p-shadow-button-inset:0 0 0 var(--p-border-width-025) var(--p-color-border) inset;--p-shadow-button-primary:none;--p-shadow-button-primary-hover:none;--p-shadow-button-primary-inset:none;--p-shadow-button-primary-critical:none;--p-shadow-button-primary-critical-hover:none;--p-shadow-button-primary-critical-inset:none;--p-shadow-button-primary-success:none;--p-shadow-button-primary-success-hover:none;--p-shadow-button-primary-success-inset:none;--p-space-card-gap:var(--p-space-200);--p-text-heading-2xl-font-size:var(--p-font-size-800);--p-text-heading-xl-font-size:var(--p-font-size-550);--p-text-heading-xl-font-line-height:var(--p-font-line-height-700);--p-text-heading-lg-font-size:var(--p-font-size-450);--p-text-heading-md-font-size:var(--p-font-size-400);--p-text-heading-sm-font-size:var(--p-font-size-350);--p-text-body-lg-font-size:var(--p-font-size-450);--p-text-body-lg-font-line-height:var(--p-font-line-height-700);--p-text-body-md-font-size:var(--p-font-size-400);--p-text-body-md-font-line-height:var(--p-font-line-height-600);--p-text-body-sm-font-size:var(--p-font-size-350);--p-text-body-sm-font-line-height:var(--p-font-line-height-500);--p-text-body-xs-font-size:var(--p-font-size-300);--p-text-body-xs-font-line-height:var(--p-font-line-height-400);} .p-theme-light-high-contrast-experimental{--p-color-text:rgba(26, 26, 26, 1);--p-color-text-secondary:rgba(26, 26, 26, 1);--p-color-text-brand:rgba(26, 26, 26, 1);--p-color-icon-secondary:rgba(74, 74, 74, 1);--p-color-border:rgba(138, 138, 138, 1);--p-color-input-border:rgba(74, 74, 74, 1);--p-color-border-secondary:rgba(138, 138, 138, 1);--p-color-bg-surface-secondary:rgba(241, 241, 241, 1);--p-shadow-bevel-100:0rem 0.0625rem 0rem 0rem rgba(26, 26, 26, 0.07), 0rem 0.0625rem 0rem 0rem rgba(208, 208, 208, 0.40) inset, 0.0625rem 0rem 0rem 0rem #CCC inset, -0.0625rem 0rem 0rem 0rem #CCC inset, 0rem -0.0625rem 0rem 0rem #999 inset;} .p-theme-dark-experimental{color-scheme:dark;--p-color-bg:rgba(26, 26, 26, 1);--p-color-bg-surface:rgba(48, 48, 48, 1);--p-color-bg-fill:rgba(48, 48, 48, 1);--p-color-icon:rgba(227, 227, 227, 1);--p-color-icon-secondary:rgba(181, 181, 181, 1);--p-color-icon-disabled:rgba(74, 74, 74, 1);--p-color-text:rgba(227, 227, 227, 1);--p-color-text-secondary:rgba(181, 181, 181, 1);--p-color-text-disabled:rgba(74, 74, 74, 1);--p-color-bg-surface-secondary-active:rgba(255, 255, 255, 0.14);--p-color-bg-surface-secondary-hover:rgba(255, 255, 255, 0.06);--p-color-bg-fill-transparent:rgba(255, 255, 255, 0.11);--p-color-bg-fill-brand:rgba(255, 255, 255, 1);--p-color-text-brand-on-bg-fill:rgba(48, 48, 48, 1);--p-color-bg-surface-hover:rgba(74, 74, 74, 1);--p-color-bg-fill-hover:rgba(255, 255, 255, 0.05);--p-color-bg-fill-transparent-hover:rgba(255, 255, 255, 0.14);--p-color-bg-fill-brand-hover:rgba(243, 243, 243, 1);--p-color-bg-surface-selected:rgba(97, 97, 97, 1);--p-color-bg-fill-selected:rgba(97, 97, 97, 1);--p-color-bg-fill-transparent-selected:rgba(255, 255, 255, 0.22);--p-color-bg-fill-brand-selected:rgba(212, 212, 212, 1);--p-color-bg-surface-active:rgba(97, 97, 97, 1);--p-color-bg-fill-active:rgba(97, 97, 97, 1);--p-color-bg-fill-transparent-active:rgba(255, 255, 255, 0.17);--p-color-bg-fill-brand-active:rgba(247, 247, 247, 1);--p-color-bg-fill-secondary:rgba(255, 255, 255, 0.08);--p-color-bg-fill-secondary-hover:rgba(255, 255, 255, 0.11);--p-color-bg-fill-secondary-selected:rgba(255, 255, 255, 0.17);--p-color-bg-surface-brand-selected:rgba(74, 74, 74, 1);--p-color-border-secondary:rgba(74, 74, 74, 1);--p-color-bg-surface-tertiary:rgba(255, 255, 255, 0.08);--p-color-icon-brand:rgba(74, 74, 74, 1);--p-color-bg-fill-disabled:rgba(255, 255, 255, 0.05);--p-color-text-brand-on-bg-fill-disabled:rgba(138, 138, 138, 1);--p-color-bg-fill-brand-disabled:rgba(255, 255, 255, 0.22);--p-color-bg-fill-tertiary:rgba(48, 48, 48, 1);--p-color-tooltip-tail-down-border:rgba(60, 60, 60, 1);--p-color-tooltip-tail-up-border:rgba(71, 71, 71, 1);--p-shadow-bevel-100:0.0625rem 0rem 0rem 0rem rgba(204, 204, 204, 0.08) inset, -0.0625rem 0rem 0rem 0rem rgba(204, 204, 204, 0.08) inset, 0rem -0.0625rem 0rem 0rem rgba(204, 204, 204, 0.08) inset, 0rem 0.0625rem 0rem 0rem rgba(204, 204, 204, 0.16) inset;} @keyframes p-motion-keyframes-bounce{ from, 65%, 85%{ transform:scale(1) } 75%{ transform:scale(0.85) } 82.5%{ transform:scale(1.05) } } @keyframes p-motion-keyframes-fade-in{ to{ opacity:1 } } @keyframes p-motion-keyframes-pulse{ from, 75%{ transform:scale(0.85); opacity:1; } to{ transform:scale(2.5); opacity:0; } } @keyframes p-motion-keyframes-spin{ to{ transform:rotate(1turn) } } @keyframes p-motion-keyframes-appear-above{ from{ transform:translateY(var(--p-space-100)); opacity:0; } to{ transform:none; opacity:1; } } @keyframes p-motion-keyframes-appear-below{ from{ transform:translateY(calc(var(--p-space-100)*-1)); opacity:0; } to{ transform:none; opacity:1; } } :root{ --polaris-version-number:'13.9.5'; --pg-navigation-width:15rem; --pg-dangerous-magic-space-4:1rem; --pg-dangerous-magic-space-5:1.25rem; --pg-dangerous-magic-space-8:2rem; --pg-layout-width-primary-min:30rem; --pg-layout-width-primary-max:41.375rem; --pg-layout-width-secondary-min:15rem; --pg-layout-width-secondary-max:20rem; --pg-layout-width-one-half-width-base:28.125rem; --pg-layout-width-one-third-width-base:15rem; --pg-layout-width-nav-base:var(--pg-navigation-width); --pg-layout-width-page-content-partially-condensed:28.125rem; --pg-layout-width-inner-spacing-base:var(--pg-dangerous-magic-space-4); --pg-layout-width-outer-spacing-min:var(--pg-dangerous-magic-space-5); --pg-layout-width-outer-spacing-max:var(--pg-dangerous-magic-space-8); --pg-layout-relative-size:2; --pg-dismiss-icon-size:2rem; --pg-top-bar-height:3.5rem; --pg-mobile-nav-width:calc(100vw - var(--pg-dismiss-icon-size) - var(--pg-dangerous-magic-space-8)); --pg-control-height:2rem; --pg-control-vertical-padding:calc((2.25rem - var(--p-font-line-height-600) - var(--p-space-050))/2); } html, body{ font-size:var(--p-font-size-325); line-height:var(--p-font-line-height-500); font-weight:var(--p-font-weight-regular); font-feature-settings:'calt' 0; letter-spacing:initial; color:var(--p-color-text); -webkit-tap-highlight-color:transparent; } html, body, button{ font-family:var(--p-font-family-sans); } html{ position:relative; font-size:100%; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; -webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; text-size-adjust:100%; text-rendering:optimizeLegibility; scrollbar-width:thin; scrollbar-color:var(--p-color-bg) var(--p-color-bg); transition:scrollbar-color var(--p-motion-duration-100) var(--p-motion-ease-in); } html::-webkit-scrollbar{ width:0.6875rem; background-color:var(--p-color-bg); } html::-webkit-scrollbar-thumb{ background-color:var(--p-color-bg); border:var(--p-border-width-050) solid transparent; border-radius:var(--p-border-radius-300); background-clip:content-box; } html:hover{ scrollbar-color:var(--p-color-scrollbar-thumb-bg-hover) var(--p-color-bg); } html:hover::-webkit-scrollbar-thumb{ background-color:var(--p-color-scrollbar-thumb-bg-hover); } @supports (font: -apple-system-body){ @media (max-width: 30.6225em){ html{ font:-apple-system-body; } } } body{ min-height:100%; margin:0; padding:0; background-color:rgba(241, 242, 244, 1); scrollbar-color:var(--p-color-scrollbar-thumb-bg-hover) transparent; } @media print{ body{ background-color:transparent !important; } } *, *::before, *::after{ box-sizing:border-box; } h1, h2, h3, h4, h5, h6, p{ margin:0; font-size:1em; font-weight:var(--p-font-weight-regular); } button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner{ border-style:none; } html[class~='Polaris-Safari-16-Font-Optical-Sizing-Patch']{ font-variation-settings:'opsz' 14; } .Polaris-Avatar{ --pc-avatar-xs-size:1.25rem; --pc-avatar-sm-size:1.5rem; --pc-avatar-md-size:1.75rem; --pc-avatar-lg-size:2rem; --pc-avatar-xl-size:2.5rem; position:relative; display:block; overflow:hidden; min-width:var(--pc-avatar-xs-size); max-width:100%; background:var(--p-color-avatar-bg-fill); color:var(--p-color-avatar-text-on-bg-fill); -webkit-user-select:none; user-select:none; } .Polaris-Avatar.Polaris-Avatar--imageHasLoaded{ background:transparent; } @media (forced-colors: active){ .Polaris-Avatar{ border:var(--p-border-width-025) solid transparent; } } .Polaris-Avatar::after{ content:''; display:block; padding-bottom:100%; } .Polaris-Avatar__Text{ font-size:var(--p-font-size-400); font-weight:var(--p-font-weight-regular); } .Polaris-Avatar__Text.Polaris-Avatar--long{ font-size:var(--p-font-size-300); } .Polaris-Avatar--hidden{ visibility:hidden; } .Polaris-Avatar--sizeXs{ width:var(--pc-avatar-xs-size); border-radius:0.25rem; } .Polaris-Avatar--sizeSm{ width:var(--pc-avatar-sm-size); border-radius:0.375rem; } .Polaris-Avatar--sizeMd{ width:var(--pc-avatar-md-size); border-radius:0.375rem; } .Polaris-Avatar--sizeLg{ width:var(--pc-avatar-lg-size); border-radius:0.5rem; } .Polaris-Avatar--sizeXl{ width:var(--pc-avatar-xl-size); border-radius:0.5rem; } .Polaris-Avatar--styleOne{ background:var(--p-color-avatar-one-bg-fill); color:var(--p-color-avatar-one-text-on-bg-fill); } .Polaris-Avatar--styleOne svg, .Polaris-Avatar--styleOne text{ color:var(--p-color-avatar-one-text-on-bg-fill); } .Polaris-Avatar--styleTwo{ background:var(--p-color-avatar-two-bg-fill); color:var(--p-color-avatar-two-text-on-bg-fill); } .Polaris-Avatar--styleTwo svg, .Polaris-Avatar--styleTwo text{ color:var(--p-color-avatar-two-text-on-bg-fill); } .Polaris-Avatar--styleThree{ background:var(--p-color-avatar-three-bg-fill); color:var(--p-color-avatar-three-text-on-bg-fill); } .Polaris-Avatar--styleThree svg, .Polaris-Avatar--styleThree text{ color:var(--p-color-avatar-three-text-on-bg-fill); } .Polaris-Avatar--styleFour{ background:var(--p-color-avatar-four-bg-fill); color:var(--p-color-avatar-four-text-on-bg-fill); } .Polaris-Avatar--styleFour svg, .Polaris-Avatar--styleFour text{ color:var(--p-color-avatar-four-text-on-bg-fill); } .Polaris-Avatar--styleFive{ background:var(--p-color-avatar-five-bg-fill); color:var(--p-color-avatar-five-text-on-bg-fill); } .Polaris-Avatar--styleFive svg, .Polaris-Avatar--styleFive text{ color:var(--p-color-avatar-five-text-on-bg-fill); } .Polaris-Avatar--styleSix{ background:var(--p-color-avatar-six-bg-fill); color:var(--p-color-avatar-six-text-on-bg-fill); } .Polaris-Avatar--styleSix svg, .Polaris-Avatar--styleSix text{ color:var(--p-color-avatar-six-text-on-bg-fill); } .Polaris-Avatar--styleSeven{ background:var(--p-color-avatar-seven-bg-fill); color:var(--p-color-avatar-seven-text-on-bg-fill); } .Polaris-Avatar--styleSeven svg, .Polaris-Avatar--styleSeven text{ color:var(--p-color-avatar-seven-text-on-bg-fill); } .Polaris-Avatar--imageHasLoaded{ background:transparent; } .Polaris-Avatar__Image{ position:absolute; top:50%; left:50%; width:100%; height:100%; border-radius:inherit; transform:translate(-50%, -50%); object-fit:cover; } .Polaris-Avatar__Initials{ position:absolute; top:0; right:0; display:flex; align-items:center; justify-content:center; width:100%; height:100%; } .Polaris-Avatar__Svg{ width:100%; height:100%; } .Polaris-Text--root{ margin:0; text-align:inherit; } .Polaris-Text--block{ display:block; } .Polaris-Text--truncate{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .Polaris-Text--visuallyHidden{ position: absolute !important; top: 0; width: 0.0625rem !important; height: 0.0625rem !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; } .Polaris-Text--start{ text-align:start; } .Polaris-Text--center{ text-align:center; } .Polaris-Text--end{ text-align:end; } .Polaris-Text--justify{ text-align:justify; } .Polaris-Text--base{ color:var(--p-color-text); } .Polaris-Text--inherit{ color:inherit; } .Polaris-Text--disabled{ color:var(--p-color-text-disabled); } .Polaris-Text--success{ color:var(--p-color-text-success); } .Polaris-Text--critical{ color:var(--p-color-text-critical); } .Polaris-Text--caution{ color:var(--p-color-text-caution); } .Polaris-Text--subdued{ color:var(--p-color-text-secondary); } .Polaris-Text--magic{ color:var(--p-color-text-magic); } .Polaris-Text__magic--subdued{ color:var(--p-color-text-magic-secondary); } .Polaris-Text__text--inverse{ color:var(--p-color-text-inverse); } .Polaris-Text--textInverseSecondary{ color:var(--p-color-text-inverse-secondary); } .Polaris-Text--headingXs{ font-size:var(--p-text-heading-xs-font-size); font-weight:var(--p-text-heading-xs-font-weight); letter-spacing:var(--p-text-heading-xs-font-letter-spacing); line-height:var(--p-text-heading-xs-font-line-height); } .Polaris-Text--headingSm{ font-size:var(--p-text-heading-sm-font-size); font-weight:var(--p-text-heading-sm-font-weight); letter-spacing:var(--p-text-heading-sm-font-letter-spacing); line-height:var(--p-text-heading-sm-font-line-height); } .Polaris-Text--headingMd{ font-size:var(--p-text-heading-md-font-size); font-weight:var(--p-text-heading-md-font-weight); letter-spacing:var(--p-text-heading-md-font-letter-spacing); line-height:var(--p-text-heading-md-font-line-height); } .Polaris-Text--headingLg{ font-size:var(--p-text-heading-lg-font-size); font-weight:var(--p-text-heading-lg-font-weight); letter-spacing:var(--p-text-heading-lg-font-letter-spacing); line-height:var(--p-text-heading-lg-font-line-height); } .Polaris-Text--headingXl{ font-size:var(--p-font-size-500); font-weight:var(--p-font-weight-semibold); letter-spacing:var(--p-font-letter-spacing-dense); line-height:var(--p-font-line-height-600); } @media (min-width: 48em){ .Polaris-Text--headingXl{ font-size:var(--p-text-heading-xl-font-size); font-weight:var(--p-text-heading-xl-font-weight); letter-spacing:var(--p-text-heading-xl-font-letter-spacing); line-height:var(--p-text-heading-xl-font-line-height); } } .Polaris-Text--heading2xl{ font-size:var(--p-font-size-600); font-weight:var(--p-font-weight-bold); letter-spacing:var(--p-font-letter-spacing-dense); line-height:var(--p-font-line-height-800); } @media (min-width: 48em){ .Polaris-Text--heading2xl{ font-size:var(--p-text-heading-2xl-font-size); font-weight:var(--p-text-heading-2xl-font-weight); letter-spacing:var(--p-text-heading-2xl-font-letter-spacing); line-height:var(--p-text-heading-2xl-font-line-height); } } .Polaris-Text--heading3xl{ font-size:var(--p-font-size-750); font-weight:var(--p-font-weight-bold); letter-spacing:var(--p-font-letter-spacing-denser); line-height:var(--p-font-line-height-1000); } @media (min-width: 48em){ .Polaris-Text--heading3xl{ font-size:var(--p-text-heading-3xl-font-size); font-weight:var(--p-text-heading-3xl-font-weight); letter-spacing:var(--p-text-heading-3xl-font-letter-spacing); line-height:var(--p-text-heading-3xl-font-line-height); } } .Polaris-Text--bodyXs{ font-size:var(--p-text-body-xs-font-size); font-weight:var(--p-text-body-xs-font-weight); letter-spacing:var(--p-text-body-xs-font-letter-spacing); line-height:var(--p-text-body-xs-font-line-height); } .Polaris-Text--bodySm{ font-size:var(--p-text-body-sm-font-size); font-weight:var(--p-text-body-sm-font-weight); letter-spacing:var(--p-text-body-sm-font-letter-spacing); line-height:var(--p-text-body-sm-font-line-height); } .Polaris-Text--bodyMd{ font-size:var(--p-text-body-md-font-size); font-weight:var(--p-text-body-sm-font-weight); letter-spacing:var(--p-text-body-md-font-letter-spacing); line-height:var(--p-text-body-md-font-line-height); } .Polaris-Text--bodyLg{ font-size:var(--p-text-body-lg-font-size); font-weight:var(--p-text-body-sm-font-weight); letter-spacing:var(--p-text-body-lg-font-letter-spacing); line-height:var(--p-text-body-lg-font-line-height); } .Polaris-Text--regular{ font-weight:var(--p-font-weight-regular); } .Polaris-Text--medium{ font-weight:var(--p-font-weight-medium); } .Polaris-Text--semibold{ font-weight:var(--p-font-weight-semibold); } .Polaris-Text--bold{ font-weight:var(--p-font-weight-bold); } .Polaris-Text--break{ overflow-wrap:anywhere; word-break:normal; } .Polaris-Text--numeric{ font-variant-numeric:tabular-nums lining-nums; } .Polaris-Text__line--through{ -webkit-text-decoration-line:line-through; text-decoration-line:line-through; } .Polaris-Icon{ display:block; height:1.25rem; width:1.25rem; max-height:100%; max-width:100%; margin:auto; } .Polaris-Icon svg{ fill:currentColor; } .Polaris-Icon--toneInherit svg{ color:inherit; } .Polaris-Icon--toneBase svg{ color:var(--p-color-icon); } .Polaris-Icon--toneSubdued svg{ color:var(--p-color-icon-secondary); } .Polaris-Icon--toneCaution svg{ color:var(--p-color-icon-caution); } .Polaris-Icon--toneWarning svg{ color:var(--p-color-icon-warning); } .Polaris-Icon--toneCritical svg{ color:var(--p-color-icon-critical); } .Polaris-Icon--toneInteractive svg{ color:var(--p-color-icon-emphasis); } .Polaris-Icon--toneInfo svg{ color:var(--p-color-icon-info); } .Polaris-Icon--toneSuccess svg{ color:var(--p-color-icon-success); } .Polaris-Icon--tonePrimary svg{ color:var(--p-color-icon-brand); } .Polaris-Icon--toneEmphasis svg{ color:var(--p-color-icon-emphasis); } .Polaris-Icon--toneMagic svg{ color:var(--p-color-icon-magic); } .Polaris-Icon--toneTextCaution svg{ color:var(--p-color-text-caution); } .Polaris-Icon--toneTextWarning svg{ color:var(--p-color-text-warning); } .Polaris-Icon--toneTextCritical svg{ color:var(--p-color-text-critical); } .Polaris-Icon--toneTextInfo svg{ color:var(--p-color-text-info); } .Polaris-Icon--toneTextPrimary svg{ color:var(--p-color-text-brand); } .Polaris-Icon--toneTextSuccess svg{ color:var(--p-color-text-success); } .Polaris-Icon--toneTextMagic svg{ color:var(--p-color-text-magic); } .Polaris-Icon__Svg, .Polaris-Icon__Img{ position:relative; display:block; width:100%; max-width:100%; max-height:100%; } .Polaris-Icon__Placeholder{ padding-bottom:100%; background:var(--p-color-bg-fill-tertiary); border-radius:var(--p-border-radius-100); } .Polaris-Spinner svg{ animation:var(--p-motion-keyframes-spin) var(--p-motion-duration-500) linear infinite; fill:var(--p-color-bg-fill-brand); } .Polaris-Spinner--sizeSmall svg{ height:1.25rem; width:1.25rem; } .Polaris-Spinner--sizeLarge svg{ height:2.75rem; width:2.75rem; } .Polaris-Button{ --pc-button-gap:var(--p-space-050); --pc-button-bg:transparent; --pc-button-bg_hover:var(--pc-button-bg); --pc-button-bg_active:var(--pc-button-bg); --pc-button-bg_pressed:var(--pc-button-bg_active); --pc-button-bg_disabled:var(--p-color-bg-fill-disabled); --pc-button-color:inherit; --pc-button-color_hover:var(--pc-button-color); --pc-button-color_active:var(--pc-button-color); --pc-button-color_pressed:var(--pc-button-color_active); --pc-button-color_disabled:var(--p-color-text-disabled); --pc-button-box-shadow:transparent; --pc-button-box-shadow_hover:var(--pc-button-box-shadow); --pc-button-box-shadow_active:var(--pc-button-box-shadow); --pc-button-box-shadow_pressed:var(--pc-button-box-shadow_active); --pc-button-box-shadow_disabled:var(--pc-button-box-shadow); --pc-button-icon-fill:currentColor; --pc-button-icon-fill_hover:var(--pc-button-icon-fill); --pc-button-icon-fill_active:var(--pc-button-icon-fill); --pc-button-icon-fill_pressed:var(--pc-button-icon-fill_active); --pc-button-icon-fill_disabled:var(--p-color-icon-disabled); all:unset; position:relative; box-sizing:border-box; display:inline-flex; align-items:center; gap:var(--pc-button-gap); padding:var(--pc-button-padding-block) var(--pc-button-padding-inline); background:var(--pc-button-bg); border:none; border-radius:var(--p-border-radius-200); box-shadow:var(--pc-button-box-shadow); color:var(--pc-button-color); cursor:pointer; -webkit-user-select:none; user-select:none; touch-action:manipulation; -webkit-tap-highlight-color:transparent; } .Polaris-Button.Polaris-Button svg{ fill:var(--pc-button-icon-fill); } .Polaris-Button.Polaris-Button:hover svg{ fill:var(--pc-button-icon-fill_hover); } .Polaris-Button.Polaris-Button:active, .Polaris-Button.Polaris-Button[data-state='open'] svg{ fill:var(--pc-button-icon-fill_active); } .Polaris-Button.Polaris-Button:disabled, .Polaris-Button.Polaris-Button[disabled], .Polaris-Button--disabled.Polaris-Button--disabled svg{ fill:var(--pc-button-icon-fill_disabled); } .Polaris-Button--pressed.Polaris-Button--pressed, .Polaris-Button--pressed.Polaris-Button--pressed:hover, .Polaris-Button--pressed.Polaris-Button--pressed:active, .Polaris-Button--pressed.Polaris-Button--pressed:focus-visible svg{ fill:var(--pc-button-icon-fill_pressed); } .Polaris-Button:hover{ background:var(--pc-button-bg_hover); color:var(--pc-button-color_hover); box-shadow:var(--pc-button-box-shadow_hover); } .Polaris-Button:active, .Polaris-Button[data-state='open']{ background:var(--pc-button-bg_active); color:var(--pc-button-color_active); box-shadow:var(--pc-button-box-shadow_active); } .Polaris-Button:focus-visible{ background:var(--pc-button-bg_hover); color:var(--pc-button-color_hover); outline:var(--p-border-width-050) solid var(--p-color-border-focus); outline-offset:var(--p-space-025); } .Polaris-Button:focus-visible::after{ content:none; } .Polaris-Button:disabled, .Polaris-Button[disabled], .Polaris-Button--disabled{ background:var(--pc-button-bg_disabled); color:var(--pc-button-color_disabled); box-shadow:none; -webkit-user-select:none; user-select:none; pointer-events:none; } .Polaris-Button--pressed, .Polaris-Button--pressed:hover, .Polaris-Button--pressed:active, .Polaris-Button--pressed:focus-visible{ background:var(--pc-button-bg_pressed); color:var(--pc-button-color_pressed); box-shadow:var(--pc-button-box-shadow_pressed); } .Polaris-Button--variantPrimary{ --pc-button-bg-gradient:var(--p-color-button-gradient-bg-fill); --pc-button-box-shadow:var(--p-shadow-button-primary); --pc-button-box-shadow_active:var(--p-shadow-button-primary-inset); --pc-button-bg:var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand); --pc-button-bg_hover:var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand-hover); --pc-button-bg_active:var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand-active); --pc-button-bg_disabled:var(--p-color-bg-fill-brand-disabled); --pc-button-color:var(--p-color-text-brand-on-bg-fill); --pc-button-color_disabled:var(--p-color-text-brand-on-bg-fill-disabled); --pc-button-icon-fill:var(--p-color-text-brand-on-bg-fill); --pc-button-icon-fill_disabled:var(--p-color-text-brand-on-bg-fill-disabled); } .Polaris-Button--variantSecondary{ --pc-button-box-shadow:var(--p-shadow-button); --pc-button-box-shadow_active:var(--p-shadow-button-inset); --pc-button-bg:var(--p-color-bg-fill); --pc-button-bg_hover:var(--p-color-bg-fill-hover); --pc-button-bg_active:var(--p-color-bg-fill-active); --pc-button-bg_pressed:var(--p-color-bg-fill-selected); --pc-button-color:var(--p-color-text); --pc-button-icon-fill:var(--p-color-icon); } .Polaris-Button--variantTertiary{ --pc-button-bg_hover:var(--p-color-bg-fill-transparent-hover); --pc-button-bg_active:var(--p-color-bg-fill-transparent-active); --pc-button-bg_pressed:var(--p-color-bg-fill-selected); --pc-button-bg_disabled:transparent; --pc-button-color:var(--p-color-text); --pc-button-icon-fill:var(--p-color-icon); } .Polaris-Button--variantPlain{ --pc-button-color:var(--p-color-text-link); --pc-button-color_hover:var(--p-color-text-link-hover); --pc-button-color_active:var(--p-color-text-link-active); } .Polaris-Button--variantPlain:is(:hover, :active, :focus-visible):not(.Polaris-Button--removeUnderline){ text-decoration:underline; } .Polaris-Button--variantMonochromePlain{ --pc-button-icon-fill:currentColor; } .Polaris-Button--variantPlain, .Polaris-Button--variantMonochromePlain{ --pc-button-bg_disabled:transparent; margin:calc(var(--pc-button-padding-block)*-1) calc(var(--pc-button-padding-inline)*-1); } .Polaris-Button--variantPlain:focus-visible, .Polaris-Button--variantMonochromePlain:focus-visible{ border-radius:var(--p-border-radius-300); outline-offset:calc(var(--pc-button-padding-block)*-1); } .Polaris-Button--toneSuccess:is(.Polaris-Button--variantSecondary, .Polaris-Button--variantTertiary, .Polaris-Button--variantPlain){ --pc-button-color:var(--p-color-text-success); --pc-button-color_hover:var(--p-color-text-success-hover); --pc-button-color_active:var(--p-color-text-success-active); --pc-button-icon-fill:currentColor; } .Polaris-Button--toneCritical:is(.Polaris-Button--variantSecondary, .Polaris-Button--variantTertiary, .Polaris-Button--variantPlain){ --pc-button-color:var(--p-color-text-critical); --pc-button-color_hover:var(--p-color-text-critical-hover); --pc-button-color_active:var(--p-color-text-critical-active); --pc-button-icon-fill:currentColor; } .Polaris-Button--toneSuccess:is(.Polaris-Button--variantPrimary){ --pc-button-box-shadow:var(--p-shadow-button-primary-success); --pc-button-box-shadow_active:var(--p-shadow-button-primary-success-inset); --pc-button-bg:var(--p-color-bg-fill-success); --pc-button-bg_hover:var(--p-color-bg-fill-success-hover); --pc-button-bg_active:var(--p-color-bg-fill-success-active); --pc-button-bg_pressed:var(--p-color-bg-fill-success-selected); } .Polaris-Button--toneCritical:is(.Polaris-Button--variantPrimary){ --pc-button-box-shadow:var(--p-shadow-button-primary-critical); --pc-button-box-shadow_active:var(--p-shadow-button-primary-critical-inset); --pc-button-bg:var(--p-color-bg-fill-critical); --pc-button-bg_hover:var(--p-color-bg-fill-critical-hover); --pc-button-bg_active:var(--p-color-bg-fill-critical-active); --pc-button-bg_pressed:var(--p-color-bg-fill-critical-selected); } .Polaris-Button--sizeMicro{ --pc-button-padding-block:var(--p-space-100); --pc-button-padding-inline:var(--p-space-200); min-height:var(--p-height-700); min-width:var(--p-width-700); } @media (min-width: 48em){ .Polaris-Button--sizeMicro{ min-height:var(--p-height-600); min-width:var(--p-width-600); } } .Polaris-Button--sizeSlim, .Polaris-Button--sizeMedium{ --pc-button-padding-block:var(--p-space-150); --pc-button-padding-inline:var(--p-space-300); min-height:var(--p-height-800); min-width:var(--p-width-800); } @media (min-width: 48em){ .Polaris-Button--sizeSlim, .Polaris-Button--sizeMedium{ min-height:var(--p-height-700); min-width:var(--p-width-700); } } .Polaris-Button--sizeLarge{ --pc-button-padding-block:var(--p-space-150); --pc-button-padding-inline:var(--p-space-300); min-height:var(--p-height-900); min-width:var(--p-height-900); } @media (min-width: 48em){ .Polaris-Button--sizeLarge{ min-height:var(--p-height-800); min-width:var(--p-width-800); } } .Polaris-Button--textAlignCenter{ justify-content:center; text-align:center; } .Polaris-Button--textAlignStart, .Polaris-Button--textAlignLeft{ justify-content:start; text-align:start; } .Polaris-Button--textAlignEnd, .Polaris-Button--textAlignRight{ justify-content:end; text-align:end; } .Polaris-Button--fullWidth{ width:100%; } .Polaris-Button--iconOnly{ --pc-button-padding-block:var(--p-space-100); --pc-button-padding-inline:var(--p-space-100); } .Polaris-Button--iconOnly:is(.Polaris-Button--sizeLarge){ --pc-button-padding-block:var(--p-space-150); --pc-button-padding-inline:var(--p-space-150); } .Polaris-Button--iconOnly:is(.Polaris-Button--sizeMicro){ --pc-button-padding-block:var(--p-space-050); --pc-button-padding-inline:var(--p-space-050); } .Polaris-Button--iconOnly:is(.Polaris-Button--variantTertiary){ margin:calc(var(--pc-button-padding-block)*-1) calc(var(--pc-button-padding-inline)*-1); } .Polaris-Button--iconOnly:is(.Polaris-Button--variantTertiary, .Polaris-Button--variantPlain):not(.Polaris-Button--toneCritical){ --pc-button-icon-fill:var(--p-color-icon-secondary); --pc-button-icon-fill_hover:var(--p-color-icon-secondary-hover); --pc-button-icon-fill_active:var(--p-color-icon-secondary-active); --pc-button-icon-fill_disabled:var(--p-color-icon-disabled); } .Polaris-Button--iconOnly:is(.Polaris-Button--variantMonochromePlain){ --pc-button-icon-fill:currentColor; --pc-button-icon-fill_hover:var(--p-color-icon-secondary-hover); --pc-button-icon-fill_active:var(--p-color-icon-secondary-active); --pc-button-icon-fill_disabled:var(--p-color-icon-disabled); } .Polaris-Button--iconOnly:is(.Polaris-Button--variantPlain, .Polaris-Button--variantMonochromePlain){ --pc-button-padding-block:0; --pc-button-padding-inline:0; margin:0; min-height:var(--p-height-500); min-width:var(--p-width-500); } .Polaris-Button--iconWithText:not(.Polaris-Button--variantPlain, .Polaris-Button--variantMonochromePlain){ padding-left:calc(var(--pc-button-padding-inline)*0.5); } .Polaris-Button--disclosure:not(.Polaris-Button--variantPlain, .Polaris-Button--variantMonochromePlain){ padding-right:calc(var(--pc-button-padding-inline)*0.5); } .Polaris-Button--disclosure:is(.Polaris-Button--textAlignStart, .Polaris-Button--textAlignLeft){ justify-content:space-between; } .Polaris-Button--loading{ color:transparent; } .Polaris-Button--pressable:active:not(.Polaris-Button--variantTertiary, .Polaris-Button--variantPlain, .Polaris-Button--variantMonochromePlain) > *{ transform:translate3d(0, 0.0625rem, 0); } .Polaris-Button--hidden{ visibility:hidden; } .Polaris-Button__Icon{ margin:calc(var(--p-space-050)*-1) 0; } .Polaris-Button__Spinner{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); } .Polaris-Button__Spinner svg{ fill:var(--pc-button-icon-fill_disabled); vertical-align:middle; } [data-buttongroup-variant='segmented'] > *:not(:first-child) .Polaris-Button:is(.Polaris-Button--variantPrimary){ margin-left:calc(var(--p-space-025)*-1); } [data-buttongroup-variant='segmented'] > *:not(:first-child) .Polaris-Button{ border-top-left-radius:var(--p-border-radius-0); border-bottom-left-radius:var(--p-border-radius-0); } [data-buttongroup-variant='segmented'] > *:not(:last-child) .Polaris-Button{ border-top-right-radius:var(--p-border-radius-0); border-bottom-right-radius:var(--p-border-radius-0); } [data-buttongroup-full-width='true'] .Polaris-Button{ width:100%; } @media (min-width: 48em){ [data-buttongroup-full-width='true'] .Polaris-Button{ white-space:nowrap; } } [data-buttongroup-connected-top='true'] > *:first-child .Polaris-Button{ border-top-left-radius:var(--p-border-radius-0); } [data-buttongroup-connected-top='true'] > *:last-child .Polaris-Button{ border-top-right-radius:var(--p-border-radius-0); } .Polaris-SettingAction{ display:flex; flex-wrap:wrap; align-items:center; margin-top:calc(var(--p-space-400)*-1); margin-left:calc(var(--p-space-400)*-1); } .Polaris-SettingAction__Setting, .Polaris-SettingAction__Action{ flex:0 0 auto; margin-top:var(--p-space-400); margin-left:var(--p-space-400); max-width:calc(100% - var(--p-space-400)); min-width:0; } .Polaris-SettingAction__Setting{ flex:1 0 21.875rem; } @media (min-width: 48em){ .Polaris-SettingAction__Action{ margin-top:var(--p-space-600); } } .Polaris-Box--listReset{ list-style-type:none; margin-block-start:0; margin-block-end:0; outline:none; padding-inline-start:0; } .Polaris-Box{ --pc-box-padding-block-end-xs: initial; --pc-box-padding-block-end-sm: initial; --pc-box-padding-block-end-md: initial; --pc-box-padding-block-end-lg: initial; --pc-box-padding-block-end-xl: initial; padding-block-end: var(--pc-box-padding-block-end-xs); --pc-box-padding-block-start-xs: initial; --pc-box-padding-block-start-sm: initial; --pc-box-padding-block-start-md: initial; --pc-box-padding-block-start-lg: initial; --pc-box-padding-block-start-xl: initial; padding-block-start: var(--pc-box-padding-block-start-xs); --pc-box-padding-inline-start-xs: initial; --pc-box-padding-inline-start-sm: initial; --pc-box-padding-inline-start-md: initial; --pc-box-padding-inline-start-lg: initial; --pc-box-padding-inline-start-xl: initial; padding-inline-start: var(--pc-box-padding-inline-start-xs); --pc-box-padding-inline-end-xs: initial; --pc-box-padding-inline-end-sm: initial; --pc-box-padding-inline-end-md: initial; --pc-box-padding-inline-end-lg: initial; --pc-box-padding-inline-end-xl: initial; padding-inline-end: var(--pc-box-padding-inline-end-xs); --pc-box-shadow:initial; --pc-box-background:initial; --pc-box-border-radius:initial; --pc-box-border-end-start-radius:var(--pc-box-border-radius); --pc-box-border-end-end-radius:var(--pc-box-border-radius); --pc-box-border-start-start-radius:var(--pc-box-border-radius); --pc-box-border-start-end-radius:var(--pc-box-border-radius); --pc-box-color:initial; --pc-box-min-height:initial; --pc-box-min-width:initial; --pc-box-max-width:initial; --pc-box-outline-color:initial; --pc-box-outline-style:initial; --pc-box-outline-width:initial; --pc-box-overflow-x:initial; --pc-box-overflow-y:initial; --pc-box-width:initial; --pc-box-border-style:initial; --pc-box-border-color:initial; --pc-box-border-width:0; --pc-box-border-block-start-width:var(--pc-box-border-width); --pc-box-border-block-end-width:var(--pc-box-border-width); --pc-box-border-inline-start-width:var(--pc-box-border-width); --pc-box-border-inline-end-width:var(--pc-box-border-width); --pc-box-inset-block-start:initial; --pc-box-inset-block-end:initial; --pc-box-inset-inline-start:initial; --pc-box-inset-inline-end:initial; inset-block-start:var(--pc-box-inset-block-start); inset-block-end:var(--pc-box-inset-block-end); inset-inline-start:var(--pc-box-inset-inline-start); inset-inline-end:var(--pc-box-inset-inline-end); background-color:var(--pc-box-background); box-shadow:var(--pc-box-shadow); border-end-start-radius:var(--pc-box-border-end-start-radius); border-end-end-radius:var(--pc-box-border-end-end-radius); border-start-start-radius:var(--pc-box-border-start-start-radius); border-start-end-radius:var(--pc-box-border-start-end-radius); border-color:var(--pc-box-border-color); border-style:var(--pc-box-border-style); border-block-start-width:var(--pc-box-border-block-start-width); border-block-end-width:var(--pc-box-border-block-end-width); border-inline-start-width:var(--pc-box-border-inline-start-width); border-inline-end-width:var(--pc-box-border-inline-end-width); color:var(--pc-box-color); min-height:var(--pc-box-min-height); min-width:var(--pc-box-min-width); max-width:var(--pc-box-max-width); outline-color:var(--pc-box-outline-color); outline-style:var(--pc-box-outline-style); outline-width:var(--pc-box-outline-width); overflow-x:var(--pc-box-overflow-x); overflow-y:var(--pc-box-overflow-y); width:var(--pc-box-width); -webkit-overflow-scrolling:touch; } @media (min-width: 30.625em) { .Polaris-Box{ padding-block-end: var( --pc-box-padding-block-end-sm, var(--pc-box-padding-block-end-xs) ); } } @media (min-width: 48em) { .Polaris-Box{ padding-block-end: var( --pc-box-padding-block-end-md, var( --pc-box-padding-block-end-sm, var(--pc-box-padding-block-end-xs) ) ); } } @media (min-width: 65em) { .Polaris-Box{ padding-block-end: var( --pc-box-padding-block-end-lg, var( --pc-box-padding-block-end-md, var( --pc-box-padding-block-end-sm, var(--pc-box-padding-block-end-xs) ) ) ); } } @media (min-width: 90em) { .Polaris-Box{ padding-block-end: var( --pc-box-padding-block-end-xl, var( --pc-box-padding-block-end-lg, var( --pc-box-padding-block-end-md, var( --pc-box-padding-block-end-sm, var(--pc-box-padding-block-end-xs) ) ) ) ); } } @media (min-width: 30.625em) { .Polaris-Box{ padding-block-start: var( --pc-box-padding-block-start-sm, var(--pc-box-padding-block-start-xs) ); } } @media (min-width: 48em) { .Polaris-Box{ padding-block-start: var( --pc-box-padding-block-start-md, var( --pc-box-padding-block-start-sm, var(--pc-box-padding-block-start-xs) ) ); } } @media (min-width: 65em) { .Polaris-Box{ padding-block-start: var( --pc-box-padding-block-start-lg, var( --pc-box-padding-block-start-md, var( --pc-box-padding-block-start-sm, var(--pc-box-padding-block-start-xs) ) ) ); } } @media (min-width: 90em) { .Polaris-Box{ padding-block-start: var( --pc-box-padding-block-start-xl, var( --pc-box-padding-block-start-lg, var( --pc-box-padding-block-start-md, var( --pc-box-padding-block-start-sm, var(--pc-box-padding-block-start-xs) ) ) ) ); } } @media (min-width: 30.625em) { .Polaris-Box{ padding-inline-start: var( --pc-box-padding-inline-start-sm, var(--pc-box-padding-inline-start-xs) ); } } @media (min-width: 48em) { .Polaris-Box{ padding-inline-start: var( --pc-box-padding-inline-start-md, var( --pc-box-padding-inline-start-sm, var(--pc-box-padding-inline-start-xs) ) ); } } @media (min-width: 65em) { .Polaris-Box{ padding-inline-start: var( --pc-box-padding-inline-start-lg, var( --pc-box-padding-inline-start-md, var( --pc-box-padding-inline-start-sm, var(--pc-box-padding-inline-start-xs) ) ) ); } } @media (min-width: 90em) { .Polaris-Box{ padding-inline-start: var( --pc-box-padding-inline-start-xl, var( --pc-box-padding-inline-start-lg, var( --pc-box-padding-inline-start-md, var( --pc-box-padding-inline-start-sm, var(--pc-box-padding-inline-start-xs) ) ) ) ); } } @media (min-width: 30.625em) { .Polaris-Box{ padding-inline-end: var( --pc-box-padding-inline-end-sm, var(--pc-box-padding-inline-end-xs) ); } } @media (min-width: 48em) { .Polaris-Box{ padding-inline-end: var( --pc-box-padding-inline-end-md, var( --pc-box-padding-inline-end-sm, var(--pc-box-padding-inline-end-xs) ) ); } } @media (min-width: 65em) { .Polaris-Box{ padding-inline-end: var( --pc-box-padding-inline-end-lg, var( --pc-box-padding-inline-end-md, var( --pc-box-padding-inline-end-sm, var(--pc-box-padding-inline-end-xs) ) ) ); } } @media (min-width: 90em) { .Polaris-Box{ padding-inline-end: var( --pc-box-padding-inline-end-xl, var( --pc-box-padding-inline-end-lg, var( --pc-box-padding-inline-end-md, var( --pc-box-padding-inline-end-sm, var(--pc-box-padding-inline-end-xs) ) ) ) ); } } .Polaris-Box--visuallyHidden{ position: absolute !important; top: 0; width: 0.0625rem !important; height: 0.0625rem !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; } @media print{ .Polaris-Box--printHidden{ display:none !important; } } .Polaris-ShadowBevel{ overflow:clip; z-index:0; --pc-shadow-bevel-z-index: initial; --pc-shadow-bevel-box-shadow-xs: initial; --pc-shadow-bevel-box-shadow-sm: initial; --pc-shadow-bevel-box-shadow-md: initial; --pc-shadow-bevel-box-shadow-lg: initial; --pc-shadow-bevel-box-shadow-xl: initial; --pc-shadow-bevel-box-shadow: var(--pc-shadow-bevel-box-shadow-xs); --pc-shadow-bevel-border-radius-xs: initial; --pc-shadow-bevel-border-radius-sm: initial; --pc-shadow-bevel-border-radius-md: initial; --pc-shadow-bevel-border-radius-lg: initial; --pc-shadow-bevel-border-radius-xl: initial; --pc-shadow-bevel-border-radius: var(--pc-shadow-bevel-border-radius-xs); --pc-shadow-bevel-content-xs: initial; --pc-shadow-bevel-content-sm: initial; --pc-shadow-bevel-content-md: initial; --pc-shadow-bevel-content-lg: initial; --pc-shadow-bevel-content-xl: initial; --pc-shadow-bevel-content: var(--pc-shadow-bevel-content-xs); position: relative; box-shadow: var(--pc-shadow-bevel-box-shadow); border-radius: var(--pc-shadow-bevel-border-radius); } @media (min-width: 30.625em) { .Polaris-ShadowBevel{ --pc-shadow-bevel-box-shadow: var( --pc-shadow-bevel-box-shadow-sm, var(--pc-shadow-bevel-box-shadow-xs) ); } } @media (min-width: 48em) { .Polaris-ShadowBevel{ --pc-shadow-bevel-box-shadow: var( --pc-shadow-bevel-box-shadow-md, var( --pc-shadow-bevel-box-shadow-sm, var(--pc-shadow-bevel-box-shadow-xs) ) ); } } @media (min-width: 65em) { .Polaris-ShadowBevel{ --pc-shadow-bevel-box-shadow: var( --pc-shadow-bevel-box-shadow-lg, var( --pc-shadow-bevel-box-shadow-md, var( --pc-shadow-bevel-box-shadow-sm, var(--pc-shadow-bevel-box-shadow-xs) ) ) ); } } @media (min-width: 90em) { .Polaris-ShadowBevel{ --pc-shadow-bevel-box-shadow: var( --pc-shadow-bevel-box-shadow-xl, var( --pc-shadow-bevel-box-shadow-lg, var( --pc-shadow-bevel-box-shadow-md, var( --pc-shadow-bevel-box-shadow-sm, var(--pc-shadow-bevel-box-shadow-xs) ) ) ) ); } } @media (min-width: 30.625em) { .Polaris-ShadowBevel{ --pc-shadow-bevel-border-radius: var( --pc-shadow-bevel-border-radius-sm, var(--pc-shadow-bevel-border-radius-xs) ); } } @media (min-width: 48em) { .Polaris-ShadowBevel{ --pc-shadow-bevel-border-radius: var( --pc-shadow-bevel-border-radius-md, var( --pc-shadow-bevel-border-radius-sm, var(--pc-shadow-bevel-border-radius-xs) ) ); } } @media (min-width: 65em) { .Polaris-ShadowBevel{ --pc-shadow-bevel-border-radius: var( --pc-shadow-bevel-border-radius-lg, var( --pc-shadow-bevel-border-radius-md, var( --pc-shadow-bevel-border-radius-sm, var(--pc-shadow-bevel-border-radius-xs) ) ) ); } } @media (min-width: 90em) { .Polaris-ShadowBevel{ --pc-shadow-bevel-border-radius: var( --pc-shadow-bevel-border-radius-xl, var( --pc-shadow-bevel-border-radius-lg, var( --pc-shadow-bevel-border-radius-md, var( --pc-shadow-bevel-border-radius-sm, var(--pc-shadow-bevel-border-radius-xs) ) ) ) ); } } @media (min-width: 30.625em) { .Polaris-ShadowBevel{ --pc-shadow-bevel-content: var( --pc-shadow-bevel-content-sm, var(--pc-shadow-bevel-content-xs) ); } } @media (min-width: 48em) { .Polaris-ShadowBevel{ --pc-shadow-bevel-content: var( --pc-shadow-bevel-content-md, var( --pc-shadow-bevel-content-sm, var(--pc-shadow-bevel-content-xs) ) ); } } @media (min-width: 65em) { .Polaris-ShadowBevel{ --pc-shadow-bevel-content: var( --pc-shadow-bevel-content-lg, var( --pc-shadow-bevel-content-md, var( --pc-shadow-bevel-content-sm, var(--pc-shadow-bevel-content-xs) ) ) ); } } @media (min-width: 90em) { .Polaris-ShadowBevel{ --pc-shadow-bevel-content: var( --pc-shadow-bevel-content-xl, var( --pc-shadow-bevel-content-lg, var( --pc-shadow-bevel-content-md, var( --pc-shadow-bevel-content-sm, var(--pc-shadow-bevel-content-xs) ) ) ) ); } } .Polaris-ShadowBevel::before { content: var(--pc-shadow-bevel-content); position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: var(--pc-shadow-bevel-z-index); box-shadow: var(--p-shadow-bevel-100); border-radius: var(--pc-shadow-bevel-border-radius); pointer-events: none; mix-blend-mode: luminosity; } .Polaris-InlineStack{ --pc-inline-stack-gap-xs: initial; --pc-inline-stack-gap-sm: initial; --pc-inline-stack-gap-md: initial; --pc-inline-stack-gap-lg: initial; --pc-inline-stack-gap-xl: initial; gap: var(--pc-inline-stack-gap-xs); --pc-inline-stack-flex-direction-xs: initial; --pc-inline-stack-flex-direction-sm: initial; --pc-inline-stack-flex-direction-md: initial; --pc-inline-stack-flex-direction-lg: initial; --pc-inline-stack-flex-direction-xl: initial; flex-direction: var(--pc-inline-stack-flex-direction-xs); display:flex; flex-wrap:var(--pc-inline-stack-wrap); align-items:var(--pc-inline-stack-block-align); justify-content:var(--pc-inline-stack-align); } @media (min-width: 30.625em) { .Polaris-InlineStack{ gap: var( --pc-inline-stack-gap-sm, var(--pc-inline-stack-gap-xs) ); } } @media (min-width: 48em) { .Polaris-InlineStack{ gap: var( --pc-inline-stack-gap-md, var( --pc-inline-stack-gap-sm, var(--pc-inline-stack-gap-xs) ) ); } } @media (min-width: 65em) { .Polaris-InlineStack{ gap: var( --pc-inline-stack-gap-lg, var( --pc-inline-stack-gap-md, var( --pc-inline-stack-gap-sm, var(--pc-inline-stack-gap-xs) ) ) ); } } @media (min-width: 90em) { .Polaris-InlineStack{ gap: var( --pc-inline-stack-gap-xl, var( --pc-inline-stack-gap-lg, var( --pc-inline-stack-gap-md, var( --pc-inline-stack-gap-sm, var(--pc-inline-stack-gap-xs) ) ) ) ); } } @media (min-width: 30.625em) { .Polaris-InlineStack{ flex-direction: var( --pc-inline-stack-flex-direction-sm, var(--pc-inline-stack-flex-direction-xs) ); } } @media (min-width: 48em) { .Polaris-InlineStack{ flex-direction: var( --pc-inline-stack-flex-direction-md, var( --pc-inline-stack-flex-direction-sm, var(--pc-inline-stack-flex-direction-xs) ) ); } } @media (min-width: 65em) { .Polaris-InlineStack{ flex-direction: var( --pc-inline-stack-flex-direction-lg, var( --pc-inline-stack-flex-direction-md, var( --pc-inline-stack-flex-direction-sm, var(--pc-inline-stack-flex-direction-xs) ) ) ); } } @media (min-width: 90em) { .Polaris-InlineStack{ flex-direction: var( --pc-inline-stack-flex-direction-xl, var( --pc-inline-stack-flex-direction-lg, var( --pc-inline-stack-flex-direction-md, var( --pc-inline-stack-flex-direction-sm, var(--pc-inline-stack-flex-direction-xs) ) ) ) ); } } .Polaris-BlockStack{ --pc-block-stack-gap-xs: initial; --pc-block-stack-gap-sm: initial; --pc-block-stack-gap-md: initial; --pc-block-stack-gap-lg: initial; --pc-block-stack-gap-xl: initial; gap: var(--pc-block-stack-gap-xs); --pc-block-stack-align:initial; --pc-block-stack-inline-align:initial; --pc-block-stack-order:initial; display:flex; flex-direction:var(--pc-block-stack-order); align-items:var(--pc-block-stack-inline-align); justify-content:var(--pc-block-stack-align); } @media (min-width: 30.625em) { .Polaris-BlockStack{ gap: var( --pc-block-stack-gap-sm, var(--pc-block-stack-gap-xs) ); } } @media (min-width: 48em) { .Polaris-BlockStack{ gap: var( --pc-block-stack-gap-md, var( --pc-block-stack-gap-sm, var(--pc-block-stack-gap-xs) ) ); } } @media (min-width: 65em) { .Polaris-BlockStack{ gap: var( --pc-block-stack-gap-lg, var( --pc-block-stack-gap-md, var( --pc-block-stack-gap-sm, var(--pc-block-stack-gap-xs) ) ) ); } } @media (min-width: 90em) { .Polaris-BlockStack{ gap: var( --pc-block-stack-gap-xl, var( --pc-block-stack-gap-lg, var( --pc-block-stack-gap-md, var( --pc-block-stack-gap-sm, var(--pc-block-stack-gap-xs) ) ) ) ); } } .Polaris-BlockStack--listReset{ list-style-type:none; margin-block-start:0; margin-block-end:0; padding-inline-start:0; } .Polaris-BlockStack--fieldsetReset{ border:none; margin:0; padding:0; } .Polaris-Label{ -webkit-tap-highlight-color:transparent; } .Polaris-Label--hidden{ position: absolute !important; top: 0; width: 0.0625rem !important; height: 0.0625rem !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; } .Polaris-Label__Text{ display:block; flex:1 1 auto; color:currentColor; -webkit-tap-highlight-color:transparent; } .Polaris-Label__RequiredIndicator::after{ content:'*'; color:var(--p-color-text-critical); margin-left:var(--p-space-100); } .Polaris-InlineError{ display:flex; color:var(--p-color-text-critical); fill:var(--p-color-text-critical); } .Polaris-InlineError__Icon{ fill:var(--p-color-text-critical); margin-left:calc(var(--p-space-100)*-1); margin-right:var(--p-space-200); } .Polaris-InlineError__Icon svg{ margin-left:var(--p-space-050); margin-right:var(--p-space-050); } .Polaris-Labelled--hidden > .Polaris-Labelled__LabelWrapper{ position: absolute !important; top: 0; width: 0.0625rem !important; height: 0.0625rem !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; } .Polaris-Labelled--disabled > .Polaris-Labelled__LabelWrapper{ color:var(--p-color-text-disabled); } .Polaris-Labelled--disabled > .Polaris-Labelled__HelpText > span{ color:var(--p-color-text-disabled); } .Polaris-Labelled--readOnly > .Polaris-Labelled__LabelWrapper{ color:var(--p-color-text-secondary); } .Polaris-Labelled__LabelWrapper{ word-wrap:break-word; word-break:break-word; overflow-wrap:break-word; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; margin-bottom:var(--p-space-100); } .Polaris-Labelled__HelpText{ margin-top:var(--p-space-100); } .Polaris-Labelled__Error{ word-wrap:break-word; word-break:break-word; overflow-wrap:break-word; margin-top:var(--p-space-100); } .Polaris-Labelled__Action{ flex:0 0 auto; } .Polaris-Connected{ --pc-connected-item:10; --pc-connected-primary:20; --pc-connected-focused:30; position:relative; display:flex; align-items:center; } .Polaris-Connected__Item{ position:relative; z-index:var(--pc-connected-item); flex:0 0 auto; } .Polaris-Connected__Item:not(:first-child){ margin-left:var(--p-space-100); } .Polaris-Connected__Item--primary{ z-index:var(--pc-connected-primary); flex:1 1 auto; } .Polaris-Connected__Item--focused{ z-index:var(--pc-connected-focused); } .Polaris-TextField{ --pc-text-field-contents:20; --pc-text-field-backdrop:10; font-size:var(--p-font-size-325); font-weight:var(--p-font-weight-regular); line-height:var(--p-font-line-height-500); border:none; letter-spacing:initial; position:relative; display:flex; align-items:center; color:var(--p-color-text); cursor:text; } .Polaris-TextField svg{ fill:var(--p-color-icon-secondary); } .Polaris-TextField:focus-within .Polaris-TextField__ClearButton{ visibility:visible; opacity:1; } .Polaris-TextField:focus-within .Polaris-TextField__Loading:has(+ .Polaris-TextField__ClearButton){ margin-right:0; } .Polaris-TextField:not(:focus-within) .Polaris-TextField__ClearButton{ visibility:hidden; opacity:0; position:absolute; right:0; } .Polaris-TextField:not(.Polaris-TextField--disabled):not(.Polaris-TextField--error):not(.Polaris-TextField--readOnly) > .Polaris-TextField__Input:hover:not(:focus-visible) ~ .Polaris-TextField__Backdrop{ border-color:var(--p-color-input-border-hover); background-color:var(--p-color-input-bg-surface-hover); } .Polaris-TextField--multiline{ padding:0; flex-wrap:wrap; } .Polaris-TextField--multiline > .Polaris-TextField__Input{ overflow:auto; padding-left:var(--p-space-300); padding-right:var(--p-space-300); resize:none; } .Polaris-TextField--hasValue{ color:var(--p-color-text); } .Polaris-TextField--focus > .Polaris-TextField__Input, .Polaris-TextField--focus > .Polaris-TextField__VerticalContent, .Polaris-TextField--focus > .Polaris-TextField__InputAndSuffixWrapper, .Polaris-TextField:focus-within > .Polaris-TextField__Input, .Polaris-TextField__Input:focus-visible{ outline:none; } .Polaris-TextField--focus > .Polaris-TextField__Input ~ .Polaris-TextField__Backdrop, .Polaris-TextField--focus > .Polaris-TextField__VerticalContent ~ .Polaris-TextField__Backdrop, .Polaris-TextField--focus > .Polaris-TextField__InputAndSuffixWrapper ~ .Polaris-TextField__Backdrop, .Polaris-TextField:focus-within > .Polaris-TextField__Input ~ .Polaris-TextField__Backdrop, .Polaris-TextField__Input:focus-visible ~ .Polaris-TextField__Backdrop{ border-color:var(--p-color-input-border-active); border-width:var(--p-border-width-025); background-color:var(--p-color-input-bg-surface-active); outline:var(--p-border-width-050) solid var(--p-color-border-focus); outline-offset:var(--p-space-025); } .Polaris-TextField--focus > .Polaris-TextField__Input ~ .Polaris-TextField__Backdrop::after, .Polaris-TextField--focus > .Polaris-TextField__VerticalContent ~ .Polaris-TextField__Backdrop::after, .Polaris-TextField--focus > .Polaris-TextField__InputAndSuffixWrapper ~ .Polaris-TextField__Backdrop::after, .Polaris-TextField:focus-within > .Polaris-TextField__Input ~ .Polaris-TextField__Backdrop::after, .Polaris-TextField__Input:focus-visible ~ .Polaris-TextField__Backdrop::after{ content:none; } .Polaris-TextField--error .Polaris-TextField__Input:hover ~ .Polaris-TextField__Backdrop, .Polaris-TextField--error .Polaris-TextField__Input:focus-visible ~ .Polaris-TextField__Backdrop{ border-color:var(--p-color-border-critical-secondary); background-color:var(--p-color-bg-surface-critical); } .Polaris-TextField--error .Polaris-TextField__Input:active ~ .Polaris-TextField__Backdrop, .Polaris-TextField--error .Polaris-TextField__Input:focus-visible ~ .Polaris-TextField__Backdrop{ border-width:var(--p-border-width-025); } .Polaris-TextField--error > .Polaris-TextField__Input ~ .Polaris-TextField__Backdrop, .Polaris-TextField--error > .Polaris-TextField__InputAndSuffixWrapper ~ .Polaris-TextField__Backdrop{ background-color:var(--p-color-bg-surface-critical); border-color:var(--p-color-border-critical-secondary); } .Polaris-TextField--error > .Polaris-TextField__Input ~ .Polaris-TextField__Backdrop::after, .Polaris-TextField--error > .Polaris-TextField__InputAndSuffixWrapper ~ .Polaris-TextField__Backdrop::after{ border-color:var(--p-color-border-focus); } .Polaris-TextField--readOnly.Polaris-TextField--readOnly > .Polaris-TextField__Input{ color:var(--p-color-text-secondary); } .Polaris-TextField--readOnly.Polaris-TextField--readOnly > .Polaris-TextField__Backdrop{ background-color:var(--p-color-bg-surface-disabled); border-color:transparent; } .Polaris-TextField--readOnly.Polaris-TextField--readOnly.Polaris-TextField--focus > .Polaris-TextField__Backdrop{ background-color:var(--p-color-bg-surface-disabled); border-color:transparent; } .Polaris-TextField--toneMagic .Polaris-TextField__Prefix, .Polaris-TextField--toneMagic .Polaris-TextField__Suffix{ color:var(--p-color-text-magic-secondary); } .Polaris-TextField--toneMagic > .Polaris-TextField__Input{ color:var(--p-color-text-magic); } .Polaris-TextField--toneMagic > .Polaris-TextField__Backdrop{ background-color:var(--p-color-bg-surface-magic); border-color:var(--p-color-border-magic-secondary); } .Polaris-TextField--toneMagic svg{ fill:var(--p-color-icon-magic); } .Polaris-TextField--toneMagic:not(.Polaris-TextField--disabled):not(.Polaris-TextField--error):not(.Polaris-TextField--readOnly) > .Polaris-TextField__Input:hover:not(:focus-visible) ~ .Polaris-TextField__Backdrop{ background-color:var(--p-color-bg-surface-magic-hover); border-color:var(--p-color-border-magic-secondary-hover); } .Polaris-TextField--toneMagic.Polaris-TextField--focus > .Polaris-TextField__Input, .Polaris-TextField--toneMagic.Polaris-TextField--focus > .Polaris-TextField__VerticalContent, .Polaris-TextField--toneMagic.Polaris-TextField:focus-within > .Polaris-TextField__Input, .Polaris-TextField--toneMagic.Polaris-TextField__Input:focus-visible{ color:var(--p-color-text); } .Polaris-TextField--toneMagic.Polaris-TextField--focus .Polaris-TextField__Prefix, .Polaris-TextField--toneMagic.Polaris-TextField--focus .Polaris-TextField__Suffix{ color:var(--p-color-text-secondary); } .Polaris-TextField--toneMagic.Polaris-TextField--focus svg{ fill:var(--p-color-icon-secondary); } .Polaris-TextField--disabled{ color:var(--p-color-text-disabled); cursor:initial; } .Polaris-TextField--disabled > .Polaris-TextField__Backdrop{ border:none; background-color:var(--p-color-bg-surface-disabled); } .Polaris-TextField--disabled svg{ fill:var(--p-color-icon-disabled); } .Polaris-TextField__InputAndSuffixWrapper{ display:flex; align-items:center; flex:1 1; width:100%; } .Polaris-TextField__AutoSizeWrapper{ position:relative; display:inline-grid; align-items:center; } .Polaris-TextField__AutoSizeWrapper::after{ content:attr(data-auto-size-value); visibility:hidden; white-space:pre-wrap; max-height:var(--pg-control-height); } .Polaris-TextField__AutoSizeWrapper::after, .Polaris-TextField__AutoSizeWrapper input, .Polaris-TextField__AutoSizeWrapper textarea{ width:auto; min-width:1em; grid-area:1 / 2; padding:0 var(--p-space-300); font-size:var(--p-font-size-400); font-weight:var(--p-font-weight-regular); line-height:var(--p-font-line-height-600); } @media (min-width: 48em){ .Polaris-TextField__AutoSizeWrapper::after, .Polaris-TextField__AutoSizeWrapper input, .Polaris-TextField__AutoSizeWrapper textarea{ font-size:var(--p-font-size-325); line-height:var(--p-font-line-height-500); } } .Polaris-TextField__Prefix + .Polaris-TextField__InputAndSuffixWrapper .Polaris-TextField__AutoSizeWrapper::after, .Polaris-TextField__Prefix + .Polaris-TextField__InputAndSuffixWrapper input, .Polaris-TextField__Prefix + .Polaris-TextField__InputAndSuffixWrapper textarea{ padding-left:0; } .Polaris-TextField__AutoSizeWrapperWithSuffix::after, .Polaris-TextField__AutoSizeWrapperWithSuffix input, .Polaris-TextField__AutoSizeWrapperWithSuffix textarea{ padding-right:0; } .Polaris-TextField__Input{ font-size:var(--p-font-size-400); font-weight:var(--p-font-weight-regular); line-height:var(--p-font-line-height-600); letter-spacing:initial; position:relative; z-index:var(--pc-text-field-contents); display:flex; flex:1 1; width:100%; min-width:0; min-height:var(--pg-control-height); padding:var(--p-space-150) var(--p-space-300); background:none; border:none; font-family:var(--p-font-family-sans); -webkit-appearance:none; appearance:none; caret-color:var(--p-color-text); color:var(--p-color-text); align-items:center; } @media (min-width: 48em){ .Polaris-TextField__Input{ font-size:var(--p-font-size-325); line-height:var(--p-font-line-height-500); } } .Polaris-TextField__Prefix + .Polaris-TextField__Input{ padding-left:0; } .Polaris-TextField__Input:disabled{ opacity:1; background:none; color:var(--p-color-text-disabled); -webkit-text-fill-color:var(--p-color-text-disabled); } .Polaris-TextField__Input:invalid{ box-shadow:none; } .Polaris-TextField__Input::placeholder{ color:var(--p-color-text-secondary); } .Polaris-TextField__Input[type='number']{ -webkit-appearance:textfield; appearance:textfield; } .Polaris-TextField__Input[type='number']::-webkit-outer-spin-button, .Polaris-TextField__Input[type='number']::-webkit-inner-spin-button{ -webkit-appearance:none; appearance:none; margin:0; } .Polaris-TextField__Input:-webkit-autofill{ border-radius:var(--p-border-radius-100); } .Polaris-TextField__Input.Polaris-TextField--suggestion::selection{ color:var(--p-color-text-disabled); background:transparent; } .Polaris-TextField--borderless .Polaris-TextField__Input, .Polaris-TextField--borderless .Polaris-TextField__Backdrop{ border:none; min-height:var(--p-space-800); } .Polaris-TextField--slim .Polaris-TextField__Input, .Polaris-TextField--slim .Polaris-TextField__Backdrop{ min-height:1.75rem; padding-block:var(--p-space-050); } .Polaris-TextField--slim.Polaris-TextField--borderless.Polaris-TextField--slim.Polaris-TextField--borderless .Polaris-TextField__Input, .Polaris-TextField--slim.Polaris-TextField--borderless.Polaris-TextField--slim.Polaris-TextField--borderless .Polaris-TextField__Backdrop{ outline-offset:0; } .Polaris-TextField__Input--hasClearButton[type='search']::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; } .Polaris-TextField__Input--suffixed{ padding-right:0; } .Polaris-TextField__Input--alignRight{ text-align:right; } .Polaris-TextField__Input--alignLeft{ text-align:left; } .Polaris-TextField__Input--alignCenter{ text-align:center; } .Polaris-TextField__Input--autoSize{ flex:initial; width:auto; } .Polaris-TextField__Backdrop{ position: relative; position:absolute; z-index:var(--pc-text-field-backdrop); top:0; right:0; bottom:0; left:0; background-color:var(--p-color-input-bg-surface); border:var(--p-border-width-0165) solid var(--p-color-input-border); border-top-color:#898f94; border-radius:var(--p-border-radius-200); pointer-events:none; } .Polaris-TextField__Backdrop::after { content: ''; position: absolute; z-index: 1; top: -0.125rem; right: -0.125rem; bottom: -0.125rem; left: -0.125rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.125rem var(--p-color-border-focus); border-radius: var(--p-border-radius-100); } .Polaris-TextField__Prefix, .Polaris-TextField__Suffix{ position:relative; z-index:var(--pc-text-field-contents); flex:0 0 auto; color:var(--p-color-text-secondary); -webkit-user-select:none; user-select:none; } .Polaris-TextField__Prefix{ margin-left:var(--p-space-300); margin-right:var(--p-space-150); } .Polaris-TextField__PrefixIcon{ margin-left:var(--p-space-200); margin-right:var(--p-space-100); } .Polaris-TextField__Suffix{ margin-left:var(--p-space-100); margin-right:var(--p-space-300); } .Polaris-TextField__VerticalContent{ position:relative; z-index:var(--pc-text-field-contents); color:var(--p-color-text-secondary); padding:var(--p-space-200) var(--p-space-200) 0 var(--p-space-200); max-height:8.75rem; overflow:auto; border:var(--p-border-width-025) solid transparent; width:100%; } .Polaris-TextField__VerticalContent > .Polaris-TextField__Input{ padding-left:0; padding-right:0; } @media (min-width: 30.625em){ .Polaris-TextField__VerticalContent{ max-height:20.5rem; } } .Polaris-TextField__Loading{ z-index:var(--pc-text-field-contents); margin-right:var(--p-space-300); } .Polaris-TextField__Loading svg{ display:block; } .Polaris-TextField__CharacterCount{ color:var(--p-color-text-secondary); z-index:var(--pc-text-field-contents); margin:0 var(--p-space-300) 0 var(--p-space-100); pointer-events:none; text-align:right; } .Polaris-TextField__AlignFieldBottom{ align-self:flex-end; width:100%; padding-bottom:var(--p-space-200); } .Polaris-TextField__ClearButton{ position: relative; -webkit-appearance:none; appearance:none; margin:0; padding:0; background:none; border:none; font-size:inherit; line-height:inherit; color:inherit; cursor:pointer; z-index:var(--pc-text-field-contents); margin:0 var(--p-space-300) 0 var(--p-space-100); transition:visibility var(--p-motion-duration-100) var(--p-motion-ease-out), opacity var(--p-motion-duration-100) var(--p-motion-ease-out); } .Polaris-TextField__ClearButton::after { content: ''; position: absolute; z-index: 1; top: -0.0625rem; right: -0.0625rem; bottom: -0.0625rem; left: -0.0625rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus); border-radius: var(--p-border-radius-100); } .Polaris-TextField__ClearButton:focus{ outline:none; } .Polaris-TextField__ClearButton:focus-visible:enabled::after { box-shadow: 0 0 0 0.125rem var(--p-color-border-focus); outline: var(--p-border-width-025) solid transparent; } .Polaris-TextField__ClearButton:disabled{ cursor:default; } .Polaris-TextField__Spinner{ z-index:var(--pc-text-field-contents); margin:var(--p-space-100); color:var(--p-color-icon); display:flex; visibility:hidden; align-self:stretch; flex-direction:column; width:1.375rem; cursor:pointer; justify-content:center; } .Polaris-TextField--focus .Polaris-TextField__Spinner, .Polaris-TextField:hover .Polaris-TextField__Spinner{ visibility:visible; } .Polaris-TextField__SpinnerIcon{ position:absolute; -webkit-user-select:none; user-select:none; } .Polaris-TextField__SpinnerIcon svg{ fill:var(--p-color-icon); } .Polaris-TextField__Resizer{ position:absolute; bottom:0; left:0; right:0; height:0; visibility:hidden; overflow:hidden; } .Polaris-TextField__DummyInput{ font-size:var(--p-font-size-325); font-weight:var(--p-font-weight-regular); line-height:var(--p-font-line-height-500); border:none; letter-spacing:initial; padding:var(--pg-control-vertical-padding) var(--p-space-300); word-wrap:break-word; word-break:break-word; overflow-wrap:break-word; white-space:pre-wrap; } .Polaris-TextField__Segment{ background:var(--p-color-bg-fill-tertiary); border-radius:var(--p-border-radius-100); display:flex; flex:1 1; justify-content:center; align-items:center; -webkit-appearance:none; appearance:none; border:none; } .Polaris-TextField__Segment:hover{ background:var(--p-color-bg-fill-tertiary-hover); } .Polaris-TextField__Segment:focus{ outline:none; } .Polaris-TextField__Segment:active{ background:var(--p-color-bg-fill-tertiary-active); } .Polaris-TextField__Segment:first-child{ margin-bottom:0; border-bottom-left-radius:0; border-bottom-right-radius:0; } .Polaris-TextField__Segment:last-child{ border-top-left-radius:0; border-top-right-radius:0; } .Polaris-TextField__Segment:not(:first-child){ margin-top:0; } .Polaris-TextField--monospaced{ font-family:var(--p-font-family-mono); } .Polaris-Scrollable{ --pc-scrollable-shadow-size:var(--p-space-500); --pc-scrollable-shadow-color:rgba(0, 0, 0, 0.15); --pc-scrollable-shadow-bottom:0 var(--pc-scrollable-shadow-size) var(--pc-scrollable-shadow-size) var(--pc-scrollable-shadow-size) var(--pc-scrollable-shadow-color); --pc-scrollable-shadow-top:0 calc(var(--pc-scrollable-shadow-size)*-1) var(--pc-scrollable-shadow-size) var(--pc-scrollable-shadow-size) var(--pc-scrollable-shadow-color); --pc-scrollable-max-height:none; -webkit-overflow-scrolling:touch; position:relative; max-height:var(--pc-scrollable-max-height); overflow-x:hidden; overflow-y:hidden; isolation:isolate; } .Polaris-Scrollable:focus{ outline:var(--p-border-width-050) solid var(--p-color-border-focus); outline-offset:var(--p-space-050); } .Polaris-Scrollable.Polaris-Scrollable--hasTopShadow::before, .Polaris-Scrollable.Polaris-Scrollable--hasBottomShadow::before, .Polaris-Scrollable.Polaris-Scrollable--hasTopShadow::after, .Polaris-Scrollable.Polaris-Scrollable--hasBottomShadow::after{ content:''; position:sticky; left:0; display:block; pointer-events:none; height:var(--p-space-0); width:100%; z-index:32; } .Polaris-Scrollable.Polaris-Scrollable--hasTopShadow::before, .Polaris-Scrollable.Polaris-Scrollable--hasBottomShadow::before{ top:0; } .Polaris-Scrollable.Polaris-Scrollable--hasTopShadow::after, .Polaris-Scrollable.Polaris-Scrollable--hasBottomShadow::after{ bottom:0; } .Polaris-Scrollable.Polaris-Scrollable--hasTopShadow::before{ box-shadow:var(--pc-scrollable-shadow-top); } .Polaris-Scrollable.Polaris-Scrollable--hasBottomShadow::after{ box-shadow:var(--pc-scrollable-shadow-bottom); } .Polaris-Scrollable--horizontal{ overflow-x:auto; } .Polaris-Scrollable--vertical{ overflow-y:auto; } .Polaris-Scrollable--scrollbarWidthThin{ scrollbar-width:thin; } .Polaris-Scrollable--scrollbarWidthNone{ scrollbar-width:none; } .Polaris-Scrollable--scrollbarWidthAuto{ scrollbar-width:auto; } .Polaris-Scrollable--scrollbarGutterStable{ scrollbar-gutter:stable; } .Polaris-Scrollable__scrollbarGutterStableboth--edges{ scrollbar-gutter:stable both-edges; } .Polaris-Badge{ --pc-badge-horizontal-padding:var(--p-space-200); --pc-badge-vertical-padding:var(--p-space-050); display:inline-flex; align-items:center; padding:var(--pc-badge-vertical-padding) var(--pc-badge-horizontal-padding); background-color:var(--p-color-bg-fill-transparent-secondary); border-radius:var(--p-border-radius-200); color:var(--p-color-text-secondary); font-weight:var(--p-font-weight-medium); } .Polaris-Badge svg{ fill:var(--p-color-text-secondary); } @media print{ .Polaris-Badge{ border:solid var(--p-border-width-025) var(--p-color-border); } } .Polaris-Badge--toneSuccess{ background-color:var(--p-color-bg-fill-success-secondary); color:var(--p-color-text-success); } .Polaris-Badge--toneSuccess svg{ fill:var(--p-color-icon-success); } .Polaris-Badge__toneSuccess--strong{ color:var(--p-color-text-success-on-bg-fill); background-color:var(--p-color-bg-fill-success); } .Polaris-Badge__toneSuccess--strong svg{ fill:var(--p-color-text-success-on-bg-fill); } .Polaris-Badge--toneInfo{ background-color:var(--p-color-bg-fill-info-secondary); color:var(--p-color-text-info); } .Polaris-Badge--toneInfo svg{ fill:var(--p-color-icon-info); } .Polaris-Badge__toneInfo--strong{ color:var(--p-color-text-info-on-bg-fill); background-color:var(--p-color-bg-fill-info); } .Polaris-Badge__toneInfo--strong svg{ fill:var(--p-color-text-info-on-bg-fill); } .Polaris-Badge--toneAttention{ background-color:var(--p-color-bg-fill-caution-secondary); color:var(--p-color-text-caution); } .Polaris-Badge--toneAttention svg{ fill:var(--p-color-icon-caution); } .Polaris-Badge__toneAttention--strong{ color:var(--p-color-text-caution-on-bg-fill); background-color:var(--p-color-bg-fill-caution); } .Polaris-Badge__toneAttention--strong svg{ fill:var(--p-color-text-caution-on-bg-fill); } .Polaris-Badge--toneWarning{ background-color:var(--p-color-bg-fill-warning-secondary); color:var(--p-color-text-warning); } .Polaris-Badge--toneWarning svg{ fill:var(--p-color-icon-warning); } .Polaris-Badge__toneWarning--strong{ color:var(--p-color-text-warning-on-bg-fill); background-color:var(--p-color-bg-fill-warning); } .Polaris-Badge__toneWarning--strong svg{ fill:var(--p-color-text-warning-on-bg-fill); } .Polaris-Badge--toneCritical{ background-color:var(--p-color-bg-fill-critical-secondary); color:var(--p-color-text-critical); } .Polaris-Badge--toneCritical svg{ fill:var(--p-color-icon-critical); } .Polaris-Badge__toneCritical--strong{ color:var(--p-color-text-critical-on-bg-fill); background-color:var(--p-color-bg-fill-critical); } .Polaris-Badge__toneCritical--strong svg{ fill:var(--p-color-text-critical-on-bg-fill); } .Polaris-Badge--toneNew{ border:none; background-color:var(--p-color-bg-fill-transparent-secondary); color:var(--p-color-text-secondary); font-weight:var(--p-font-weight-bold); border-radius:var(--p-border-radius-200); } .Polaris-Badge--toneNew svg{ fill:var(--p-color-text-secondary); } .Polaris-Badge--toneMagic{ background-color:var(--p-color-bg-fill-magic-secondary); color:var(--p-color-text-magic); } .Polaris-Badge--toneMagic svg{ fill:var(--p-color-text-magic); } .Polaris-Badge__toneRead--only{ color:var(--p-color-text-secondary); background-color:transparent; } .Polaris-Badge__toneRead--only svg{ fill:var(--p-color-icon-secondary); } .Polaris-Badge--toneEnabled{ color:var(--p-color-text); } .Polaris-Badge--toneEnabled svg{ fill:var(--p-color-icon-success); } .Polaris-Badge--sizeLarge{ padding:var(--p-space-100) var(--p-space-200); } .Polaris-Badge--withinFilter{ border-radius:var(--p-border-radius-100); } .Polaris-Badge__Icon{ margin:calc(var(--p-space-050)*-1) 0 calc(var(--p-space-050)*-1) calc(var(--p-space-200)*-1); } .Polaris-Badge__Icon svg{ display:inline-block; vertical-align:top; } .Polaris-Badge--sizeLarge .Polaris-Badge__Icon{ margin:0 var(--p-space-100) 0 calc(var(--p-space-050)*-1); } .Polaris-Badge__Icon + *{ margin-left:0; } .Polaris-Badge__PipContainer{ display:grid; align-items:center; margin-left:calc(var(--p-space-050)*-1); margin-right:var(--p-space-100); } .Polaris-Badge-Pip{ --pc-pip-size:var(--p-space-200); --pc-pip-color:var(--p-color-text-secondary); --pc-border-width:0.07813rem; display:inline-block; color:var(--pc-pip-color); height:var(--pc-pip-size); width:var(--pc-pip-size); border:var(--p-border-width-050) solid var(--pc-pip-color); flex-shrink:0; border-radius:0.1875rem; border-width:var(--pc-border-width); } .Polaris-Badge-Pip--toneInfo{ --pc-pip-color:var(--p-color-icon-info); } .Polaris-Badge-Pip--toneSuccess{ --pc-pip-color:var(--p-color-icon-success); } .Polaris-Badge-Pip--toneNew{ --pc-pip-color:var(--p-color-text-secondary); } .Polaris-Badge-Pip--toneAttention{ --pc-pip-color:var(--p-color-icon-caution); } .Polaris-Badge-Pip--toneWarning{ --pc-pip-color:var(--p-color-icon-warning); } .Polaris-Badge-Pip--toneCritical{ --pc-pip-color:var(--p-color-icon-critical); } .Polaris-Badge-Pip--progressIncomplete{ background:transparent; } .Polaris-Badge-Pip--progressPartiallyComplete{ background:linear-gradient( to top, currentColor, currentColor 50%, transparent 50%, transparent ); } .Polaris-Badge-Pip--progressPartiallyComplete.Polaris-Badge-Pip{ background:none; position:relative; overflow:hidden; } .Polaris-Badge-Pip--progressPartiallyComplete.Polaris-Badge-Pip::after{ content:''; position:absolute; top:calc(var(--pc-border-width)*-1); left:calc(var(--pc-border-width)*-1); width:0.25rem; height:0.5rem; margin:0 0.1275rem; border-right:var(--pc-border-width) solid currentColor; border-left:var(--pc-border-width) solid currentColor; font-size:0; transform:rotate(-45deg); } @media print{ .Polaris-Badge-Pip--progressPartiallyComplete{ background:none; box-shadow:0 -6.375rem 0 -6.25rem currentColor inset; } } .Polaris-Badge-Pip--progressComplete{ background:currentColor; } @media print{ .Polaris-Badge-Pip--progressComplete{ background:none; box-shadow:0 0 0 6.25rem currentColor inset; } } .Polaris-ActionList__Item{ -webkit-appearance:none; appearance:none; margin:0; padding:0; background:none; border:none; font-size:inherit; line-height:inherit; color:inherit; cursor:pointer; position: relative; --pc-action-list-item-min-height:var(--p-space-800); --pc-action-list-indented-item-margin:calc(var(--p-space-500) + var(--p-space-050)); --pc-action-list-indented-item-width:calc(100% - var(--pc-action-list-indented-item-margin)); --pc-action-list-item-vertical-padding:calc((var(--pc-action-list-item-min-height) - var(--p-font-line-height-500))/2); display:flex; align-items:center; width:100%; min-height:var(--pc-action-list-item-min-height); text-align:left; text-decoration:none; cursor:pointer; padding:var(--p-space-100) var(--p-space-150); border-radius:var(--p-border-radius-200); border-top:var(--p-border-width-025) solid transparent; color:inherit; } .Polaris-ActionList__Item:focus{ outline:none; } .Polaris-ActionList__Item::after { content: ''; position: absolute; z-index: 1; top: -0.0625rem; right: -0.0625rem; bottom: -0.0625rem; left: -0.0625rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus); border-radius: var(--p-border-radius-200); } .Polaris-ActionList__Item.Polaris-ActionList--default{ --pc-action-list-image-size:1.25rem; } @media (forced-colors: active){ .Polaris-ActionList__Item{ border:var(--p-border-width-025) solid transparent; } } .Polaris-ActionList__Item:hover{ background-color:var(--p-color-bg-surface-secondary-hover); text-decoration:none; outline:var(--p-border-width-050) solid transparent; } .Polaris-ActionList__Item:active{ background-color:var(--p-color-bg-surface-secondary-active); } .Polaris-ActionList__Item:active svg{ fill:var(--p-color-icon); } .Polaris-ActionList__Item:focus-visible:not(:active){ background-color:var(--p-color-bg-surface); outline:var(--p-border-width-050) solid var(--p-color-border-focus); } .Polaris-ActionList__Item:focus-visible:not(:active)::after{ content:none; } .Polaris-ActionList__Item:visited{ color:inherit; } .Polaris-ActionList__Item.Polaris-ActionList--active{ background-color:var(--p-color-bg-surface-secondary-selected); font-weight:var(--p-font-weight-semibold); } .Polaris-ActionList__Item.Polaris-ActionList--active svg{ fill:var(--p-color-icon-active); } .Polaris-ActionList__Item.Polaris-ActionList--active::before{ content:''; background-color:var(--p-color-bg-fill-brand); position:absolute; top:0; left:calc(var(--p-space-200)*-1); height:100%; display:block; width:var(--p-border-width-050); border-top-right-radius:var(--p-border-radius-100); border-bottom-right-radius:var(--p-border-radius-100); display:none; } .Polaris-ActionList__Item.Polaris-ActionList--destructive{ color:var(--p-color-text-critical); } .Polaris-ActionList__Item.Polaris-ActionList--destructive svg{ fill:var(--p-color-text-critical); } .Polaris-ActionList__Item.Polaris-ActionList--destructive:hover{ background-color:var(--p-color-bg-surface-critical-hover); } .Polaris-ActionList__Item.Polaris-ActionList--destructive:active, .Polaris-ActionList__Item.Polaris-ActionList--destructive.Polaris-ActionList--active{ background-color:var(--p-color-bg-surface-critical-active); } .Polaris-ActionList__Item.Polaris-ActionList--disabled{ background-image:none; color:var(--p-color-text-disabled); cursor:default; } .Polaris-ActionList__Item.Polaris-ActionList--disabled:hover{ background-color:unset; } .Polaris-ActionList__Item.Polaris-ActionList--disabled .Polaris-ActionList__Prefix svg, .Polaris-ActionList__Item.Polaris-ActionList--disabled .Polaris-ActionList__Suffix svg{ fill:var(--p-color-icon-disabled); } .Polaris-ActionList__Item.Polaris-ActionList--indented{ --pc-action-list-image-size:1.5rem; position:relative; margin-left:var(--pc-action-list-indented-item-margin); max-width:var(--pc-action-list-indented-item-width); } .Polaris-ActionList__Item.Polaris-ActionList--indented::before{ content:''; position:absolute; top:calc(var(--p-space-300)*-1); bottom:0; left:0; border-left:var(--p-border-width-025) solid var(--p-color-border); margin-left:calc(var(--p-space-150)*-1); } .Polaris-ActionList__Item.Polaris-ActionList--menu{ --pc-action-list-image-size:1.5rem; } .Polaris-ActionList__Prefix{ display:flex; flex:0 0 auto; justify-content:center; align-items:center; height:var(--pc-action-list-image-size); width:var(--pc-action-list-image-size); border-radius:var(--p-border-radius-100); margin:calc(var(--pc-action-list-image-size)*-0.5) 0 calc(var(--pc-action-list-image-size)*-0.5) 0; background-size:cover; background-position:center center; } .Polaris-ActionList__Prefix svg{ fill:var(--p-color-icon); } .Polaris-ActionList__Suffix svg{ fill:var(--p-color-icon); } .Polaris-ActionList__Text{ min-width:0; max-width:100%; flex:1 1 auto; } .Polaris-ThemeProvider--themeContainer{ color:var(--p-color-text); } .Polaris-PositionedOverlay{ position:absolute; z-index:var(--p-z-index-2); } .Polaris-PositionedOverlay--fixed{ position:fixed; } .Polaris-PositionedOverlay--calculating{ visibility:hidden; } .Polaris-PositionedOverlay--preventInteraction{ pointer-events:none; } .Polaris-Tooltip-TooltipOverlay{ --pc-tooltip-chevron-x-pos: initial; --pc-tooltip-border-radius: initial; --pc-tooltip-padding: initial; --pc-tooltip-overlay-offset:var(--p-space-300); --pc-tooltip-shadow-bevel-z-index:1; --pc-tooltip-tail-z-index:calc(var(--pc-tooltip-shadow-bevel-z-index) + 1); position:relative; margin:var(--pc-tooltip-overlay-offset) var(--p-space-100) var(--p-space-100); opacity:1; box-shadow:var(--p-shadow-400); border-radius:var(--pc-tooltip-border-radius); pointer-events:none; -webkit-backface-visibility:hidden; backface-visibility:hidden; will-change:opacity, left, top, transform; transform:none; transition:none; min-width:4ch; position: relative; box-shadow: var(--p-shadow-300); border-radius: var(--pc-tooltip-border-radius); } .Polaris-Tooltip-TooltipOverlay::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: var(--pc-tooltip-shadow-bevel-z-index); box-shadow: var(--p-shadow-bevel-100); border-radius: var(--pc-tooltip-border-radius); pointer-events: none; mix-blend-mode: luminosity; } @media screen and (-ms-high-contrast: active){ .Polaris-Tooltip-TooltipOverlay{ border:var(--p-border-width-050) solid windowText; } } .Polaris-Tooltip-TooltipOverlay .Polaris-Tooltip-TooltipOverlay__Tail{ position:absolute; top:calc(var(--p-space-200)*-1 + 0.05rem); left:calc(var(--pc-tooltip-chevron-x-pos) - var(--p-space-150) - var(--p-space-400)); z-index:var(--pc-tooltip-tail-z-index); } .Polaris-Tooltip-TooltipOverlay.Polaris-Tooltip-TooltipOverlay--positionedAbove::after{ top:auto; bottom:calc(var(--p-space-400)*-1); border-color:var(--p-color-bg-surface) transparent transparent transparent; } .Polaris-Tooltip-TooltipOverlay.Polaris-Tooltip-TooltipOverlay--positionedAbove .Polaris-Tooltip-TooltipOverlay__Tail{ top:unset; bottom:calc(var(--p-space-200)*-1); filter:drop-shadow(0 0.1875rem 0.125rem rgba(26, 26, 26, 0.1)); } .Polaris-Tooltip-TooltipOverlay--measuring{ opacity:0; } .Polaris-Tooltip-TooltipOverlay--measured:not(.Polaris-Tooltip-TooltipOverlay--instant){ animation:var(--p-motion-keyframes-appear-below) var(--p-motion-duration-50) var(--p-motion-ease-out) var(--p-motion-duration-100) 1 both; } @media (prefers-reduced-motion){ .Polaris-Tooltip-TooltipOverlay--measured:not(.Polaris-Tooltip-TooltipOverlay--instant){ animation:none; } } .Polaris-Tooltip-TooltipOverlay--measured.Polaris-Tooltip-TooltipOverlay--positionedAbove:not(.Polaris-Tooltip-TooltipOverlay--instant){ animation:var(--p-motion-keyframes-appear-above) var(--p-motion-duration-50) var(--p-motion-ease-out) var(--p-motion-duration-100) 1 both; } @media (prefers-reduced-motion){ .Polaris-Tooltip-TooltipOverlay--measured.Polaris-Tooltip-TooltipOverlay--positionedAbove:not(.Polaris-Tooltip-TooltipOverlay--instant){ animation:none; } } .Polaris-Tooltip-TooltipOverlay--positionedAbove{ margin:var(--p-space-100) var(--p-space-100) var(--pc-tooltip-overlay-offset); } .Polaris-Tooltip-TooltipOverlay__Content{ position:relative; background-color:var(--p-color-bg-surface); color:var(--p-color-text); word-break:break-word; border-radius:var(--pc-tooltip-border-radius); padding:var(--pc-tooltip-padding); } .Polaris-Tooltip-TooltipOverlay--default{ max-width:12.5rem; } .Polaris-Tooltip-TooltipOverlay--wide{ max-width:17.1875rem; } [data-polaris-tooltip-activator]{ outline:0; position: relative; } [data-polaris-tooltip-activator]::after { content: ''; position: absolute; z-index: 1; top: -0.0625rem; right: -0.0625rem; bottom: -0.0625rem; left: -0.0625rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus); border-radius: var(--p-border-radius-100); } [data-polaris-tooltip-activator]:focus-visible::after { box-shadow: 0 0 0 0.125rem var(--p-color-border-focus); outline: var(--p-border-width-025) solid transparent; } .Polaris-Tooltip__TooltipContainer{ display:flex; } .Polaris-Tooltip__HasUnderline{ border-bottom:var(--p-border-width-050) dotted var(--p-color-border); } .Polaris-Popover{ --pc-popover-visible-portion-of-arrow:0.3125rem; --pc-popover-vertical-motion-offset:-0.3125rem; max-width:calc(100vw - var(--p-space-800)); margin:var(--pc-popover-visible-portion-of-arrow) var(--p-space-200) var(--p-space-400); -webkit-backface-visibility:hidden; backface-visibility:hidden; will-change:left, top; position: relative; box-shadow: var(--p-shadow-300); border-radius: var(--p-border-radius-300); } .Polaris-Popover::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; box-shadow: var(--p-shadow-bevel-100); border-radius: var(--p-border-radius-300); pointer-events: none; mix-blend-mode: luminosity; } .Polaris-Popover__PopoverOverlay{ opacity:0; transition:opacity var(--p-motion-duration-100) var(--p-motion-ease), transform var(--p-motion-duration-100) var(--p-motion-ease); transform:translateY(var(--pc-popover-vertical-motion-offset)); } .Polaris-Popover__PopoverOverlay--noAnimation{ transition:opacity var(--p-motion-duration-100) var(--p-motion-ease); } .Polaris-Popover__PopoverOverlay--entering{ opacity:1; transform:translateY(0); } .Polaris-Popover__PopoverOverlay--open{ opacity:1; transform:none; } .Polaris-Popover--measuring:not(.Polaris-Popover__PopoverOverlay--exiting){ opacity:0; transform:translateY(var(--pc-popover-vertical-motion-offset)); } .Polaris-Popover--fullWidth{ margin:var(--pc-popover-visible-portion-of-arrow) auto 0 auto; } .Polaris-Popover--fullWidth .Polaris-Popover__Content{ max-width:none; } .Polaris-Popover--positionedAbove{ margin:var(--p-space-400) var(--p-space-200) var(--pc-popover-visible-portion-of-arrow); } .Polaris-Popover--positionedAbove.Polaris-Popover--fullWidth{ margin:0 auto var(--pc-popover-visible-portion-of-arrow) auto; } .Polaris-Popover--positionedCover{ margin:0; } .Polaris-Popover--positionedCover::before{ border-radius:var(--p-border-radius-200); } .Polaris-Popover--positionedCover .Polaris-Popover__ContentContainer{ border-radius:var(--p-border-radius-200); } .Polaris-Popover__ContentContainer{ position:relative; overflow:hidden; background:var(--p-color-bg-surface); border-radius:var(--p-space-300); isolation:isolate; } .Polaris-Popover__Content{ position:relative; display:flex; flex-direction:column; border-radius:var(--p-border-radius-100); max-width:25rem; max-height:31.25rem; } .Polaris-Popover__Content:focus{ outline:none; } .Polaris-Popover__Content--fullHeight{ max-height:100vh; } .Polaris-Popover__Content--fluidContent{ max-height:none; max-width:none; } .Polaris-Popover__Pane{ flex:1 1 auto; max-width:100%; } .Polaris-Popover__Pane:focus{ outline:none; } .Polaris-Popover__Pane--fixed{ overflow:visible; flex:0 0 auto; } .Polaris-Popover__Pane--subdued{ background-color:var(--p-color-bg-surface-secondary); } .Polaris-Popover__Pane--captureOverscroll{ overscroll-behavior:contain; } .Polaris-Popover__Section + .Polaris-Popover__Section{ border-top:var(--p-border-width-025) solid var(--p-color-border-secondary); } .Polaris-Popover__FocusTracker{ position: absolute !important; top: 0; width: 0.0625rem !important; height: 0.0625rem !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; } @media print{ .Polaris-Popover__PopoverOverlay--hideOnPrint{ display:none !important; } } .Polaris-ActionMenu-SecondaryAction{ --pc-secondary-action-button-spacing:var(--p-space-300); } .Polaris-ActionMenu-SecondaryAction a, .Polaris-ActionMenu-SecondaryAction button{ position: relative; --pc-button-padding-block:var(--p-space-100); --pc-button-padding-inline:var(--p-space-300); background:var(--p-color-bg-fill-tertiary) !important; box-shadow:none !important; border:none; border-radius:var(--p-border-radius-200) !important; min-height:1.75rem; } .Polaris-ActionMenu-SecondaryAction a::after, .Polaris-ActionMenu-SecondaryAction button::after { content: ''; position: absolute; z-index: 1; top: -0.125rem; right: -0.125rem; bottom: -0.125rem; left: -0.125rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.125rem var(--p-color-border-focus); border-radius: var(--p-border-radius-100); } .Polaris-ActionMenu-SecondaryAction a:is(:hover, :focus), .Polaris-ActionMenu-SecondaryAction button:is(:hover, :focus){ background-color:var(--p-color-bg-fill-tertiary-hover) !important; } .Polaris-ActionMenu-SecondaryAction a:active, .Polaris-ActionMenu-SecondaryAction button:active, .Polaris-ActionMenu-SecondaryAction a[aria-expanded='true'], .Polaris-ActionMenu-SecondaryAction button[aria-expanded='true']{ background-color:var(--p-color-bg-fill-tertiary-active) !important; box-shadow:var(--p-shadow-inset-200) !important; } .Polaris-ActionMenu-SecondaryAction a:focus-visible, .Polaris-ActionMenu-SecondaryAction button:focus-visible{ outline:var(--p-border-width-050) solid var(--p-color-border-focus); outline-offset:var(--p-space-050); } .Polaris-ActionMenu-SecondaryAction a:focus-visible::after, .Polaris-ActionMenu-SecondaryAction button:focus-visible::after{ content:none; } .Polaris-ActionMenu-SecondaryAction a[aria-disabled='true'], .Polaris-ActionMenu-SecondaryAction button[aria-disabled='true']{ background-color:var(--p-color-bg-fill-disabled) !important; } @media (min-width: 48em){ .Polaris-ActionMenu-SecondaryAction a, .Polaris-ActionMenu-SecondaryAction button{ border:none !important; position: relative; } .Polaris-ActionMenu-SecondaryAction a::after, .Polaris-ActionMenu-SecondaryAction button::after { content: ''; position: absolute; z-index: 1; top: -0.0625rem; right: -0.0625rem; bottom: -0.0625rem; left: -0.0625rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus); border-radius: var(--p-border-radius-100); } } .Polaris-ActionMenu-SecondaryAction.Polaris-ActionMenu-SecondaryAction--critical a, .Polaris-ActionMenu-SecondaryAction.Polaris-ActionMenu-SecondaryAction--critical button{ color:var(--p-color-text-critical) !important; } .Polaris-ActionMenu-SecondaryAction.Polaris-ActionMenu-SecondaryAction--critical a svg, .Polaris-ActionMenu-SecondaryAction.Polaris-ActionMenu-SecondaryAction--critical button svg{ fill:var(--p-color-text-critical); } .Polaris-ActionMenu-SecondaryAction.Polaris-ActionMenu-SecondaryAction--critical a:is(:hover, :focus), .Polaris-ActionMenu-SecondaryAction.Polaris-ActionMenu-SecondaryAction--critical button:is(:hover, :focus){ background-color:var(--p-color-bg-fill-tertiary-hover) !important; } .Polaris-ActionMenu-SecondaryAction.Polaris-ActionMenu-SecondaryAction--critical a:active, .Polaris-ActionMenu-SecondaryAction.Polaris-ActionMenu-SecondaryAction--critical button:active{ background-color:var(--p-color-bg-fill-tertiary-active) !important; } .Polaris-ActionMenu-MenuGroup__Details{ margin-top:calc(var(--p-space-400)*-1); padding:var(--p-space-400); } .Polaris-ActionMenu-Actions__ActionsLayoutOuter{ position:relative; width:100%; } .Polaris-ActionMenu-Actions__ActionsLayout{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; flex:1 1 auto; gap:var(--p-space-200); } .Polaris-ActionMenu-Actions__ActionsLayout > *{ flex:0 0 auto; } .Polaris-ActionMenu-Actions--actionsLayoutMeasuring{ visibility:hidden; height:0; } .Polaris-ActionMenu-Actions__ActionsLayoutMeasurer{ position:absolute; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; flex:1 1 auto; gap:0; padding:0; visibility:hidden; height:0; } .Polaris-ActionMenu-Actions__ActionsLayoutMeasurer > *{ flex:0 0 auto; } .Polaris-ActionMenu-RollupActions__RollupActivator{ text-align:right; } .Polaris-ActionMenu-RollupActions__RollupActivator button[type='button']{ background:var(--p-color-bg-fill-tertiary); border-radius:var(--p-border-radius-200); border:none; box-shadow:none; margin:0; } .Polaris-ActionMenu-RollupActions__RollupActivator button[type='button']:active{ background:var(--p-color-bg-fill-tertiary-active); } .Polaris-ActionMenu-RollupActions__RollupActivator button[type='button']:focus:not(:active){ outline:var(--p-border-width-050) solid var(--p-color-border-focus); outline-offset:var(--p-space-050); background:var(--p-color-bg-fill-tertiary-active); } .Polaris-ActionMenu-RollupActions__RollupActivator button[type='button']:focus:not(:active)::after{ content:none; } .Polaris-ActionMenu-RollupActions__RollupActivator button[type='button']:hover{ background:var(--p-color-bg-fill-tertiary-hover); } .Polaris-ActionMenu{ width:100%; display:flex; justify-content:flex-end; } @media print{ .Polaris-ActionMenu{ display:none !important; } } .Polaris-Combobox__Listbox{ padding:var(--p-space-200) 0; overflow:visible; } .Polaris-Listbox-Section__SectionGroup{ list-style-type:none; padding:0; margin:0; border-bottom:var(--p-border-width-025) solid var(--p-color-border-secondary); } .Polaris-Listbox-Section--noDivider{ border-bottom:none; } .Polaris-Choice{ --pc-choice-space-0:0rem; --pc-choice-bleed-block-start-xs: initial; --pc-choice-bleed-block-start-sm: initial; --pc-choice-bleed-block-start-md: initial; --pc-choice-bleed-block-start-lg: initial; --pc-choice-bleed-block-start-xl: initial; --pc-choice-bleed-block-start: var(--pc-choice-bleed-block-start-xs); --pc-choice-bleed-block-end-xs: initial; --pc-choice-bleed-block-end-sm: initial; --pc-choice-bleed-block-end-md: initial; --pc-choice-bleed-block-end-lg: initial; --pc-choice-bleed-block-end-xl: initial; --pc-choice-bleed-block-end: var(--pc-choice-bleed-block-end-xs); --pc-choice-bleed-inline-start-xs: initial; --pc-choice-bleed-inline-start-sm: initial; --pc-choice-bleed-inline-start-md: initial; --pc-choice-bleed-inline-start-lg: initial; --pc-choice-bleed-inline-start-xl: initial; --pc-choice-bleed-inline-start: var(--pc-choice-bleed-inline-start-xs); --pc-choice-bleed-inline-end-xs: initial; --pc-choice-bleed-inline-end-sm: initial; --pc-choice-bleed-inline-end-md: initial; --pc-choice-bleed-inline-end-lg: initial; --pc-choice-bleed-inline-end-xl: initial; --pc-choice-bleed-inline-end: var(--pc-choice-bleed-inline-end-xs); --pc-choice-fill-xs: initial; --pc-choice-fill-sm: initial; --pc-choice-fill-md: initial; --pc-choice-fill-lg: initial; --pc-choice-fill-xl: initial; --pc-choice-fill: var(--pc-choice-fill-xs); display:inline-flex; align-items:center; justify-content:flex-start; cursor:pointer; padding-block-start:calc(var(--pc-choice-bleed-block-start, var(--pc-choice-space-0)) + var(--p-space-100)); padding-block-end:calc(var(--pc-choice-bleed-block-end, var(--pc-choice-space-0)) + var(--p-space-100)); padding-inline-start:var( --pc-choice-bleed-inline-start, var(--pc-choice-space-0) ); padding-inline-end:var( --pc-choice-bleed-inline-end, var(--pc-choice-space-0) ); margin-block-start:calc(var(--pc-choice-bleed-block-start, var(--pc-choice-space-0))*-1); margin-block-end:calc(var(--pc-choice-bleed-block-end, var(--pc-choice-space-0))*-1); margin-inline-start:calc(var(--pc-choice-bleed-inline-start, var(--pc-choice-space-0))*-1); margin-inline-end:calc(var(--pc-choice-bleed-inline-end, var(--pc-choice-space-0))*-1); inline-size:calc(var(--pc-choice-fill, auto) + var(--pc-choice-bleed-inline-start, var(--pc-choice-space-0)) + var(--pc-choice-bleed-inline-end, var(--pc-choice-space-0))); block-size:calc(var(--pc-choice-fill, auto) + var(--pc-choice-bleed-block-start, var(--pc-choice-space-0)) + var(--pc-choice-bleed-block-end, var(--pc-choice-space-0))); } @media (min-width: 30.625em) { .Polaris-Choice{ --pc-choice-bleed-block-start: var( --pc-choice-bleed-block-start-sm, var(--pc-choice-bleed-block-start-xs) ); } } @media (min-width: 48em) { .Polaris-Choice{ --pc-choice-bleed-block-start: var( --pc-choice-bleed-block-start-md, var( --pc-choice-bleed-block-start-sm, var(--pc-choice-bleed-block-start-xs) ) ); } } @media (min-width: 65em) { .Polaris-Choice{ --pc-choice-bleed-block-start: var( --pc-choice-bleed-block-start-lg, var( --pc-choice-bleed-block-start-md, var( --pc-choice-bleed-block-start-sm, var(--pc-choice-bleed-block-start-xs) ) ) ); } } @media (min-width: 90em) { .Polaris-Choice{ --pc-choice-bleed-block-start: var( --pc-choice-bleed-block-start-xl, var( --pc-choice-bleed-block-start-lg, var( --pc-choice-bleed-block-start-md, var( --pc-choice-bleed-block-start-sm, var(--pc-choice-bleed-block-start-xs) ) ) ) ); } } @media (min-width: 30.625em) { .Polaris-Choice{ --pc-choice-bleed-block-end: var( --pc-choice-bleed-block-end-sm, var(--pc-choice-bleed-block-end-xs) ); } } @media (min-width: 48em) { .Polaris-Choice{ --pc-choice-bleed-block-end: var( --pc-choice-bleed-block-end-md, var( --pc-choice-bleed-block-end-sm, var(--pc-choice-bleed-block-end-xs) ) ); } } @media (min-width: 65em) { .Polaris-Choice{ --pc-choice-bleed-block-end: var( --pc-choice-bleed-block-end-lg, var( --pc-choice-bleed-block-end-md, var( --pc-choice-bleed-block-end-sm, var(--pc-choice-bleed-block-end-xs) ) ) ); } } @media (min-width: 90em) { .Polaris-Choice{ --pc-choice-bleed-block-end: var( --pc-choice-bleed-block-end-xl, var( --pc-choice-bleed-block-end-lg, var( --pc-choice-bleed-block-end-md, var( --pc-choice-bleed-block-end-sm, var(--pc-choice-bleed-block-end-xs) ) ) ) ); } } @media (min-width: 30.625em) { .Polaris-Choice{ --pc-choice-bleed-inline-start: var( --pc-choice-bleed-inline-start-sm, var(--pc-choice-bleed-inline-start-xs) ); } } @media (min-width: 48em) { .Polaris-Choice{ --pc-choice-bleed-inline-start: var( --pc-choice-bleed-inline-start-md, var( --pc-choice-bleed-inline-start-sm, var(--pc-choice-bleed-inline-start-xs) ) ); } } @media (min-width: 65em) { .Polaris-Choice{ --pc-choice-bleed-inline-start: var( --pc-choice-bleed-inline-start-lg, var( --pc-choice-bleed-inline-start-md, var( --pc-choice-bleed-inline-start-sm, var(--pc-choice-bleed-inline-start-xs) ) ) ); } } @media (min-width: 90em) { .Polaris-Choice{ --pc-choice-bleed-inline-start: var( --pc-choice-bleed-inline-start-xl, var( --pc-choice-bleed-inline-start-lg, var( --pc-choice-bleed-inline-start-md, var( --pc-choice-bleed-inline-start-sm, var(--pc-choice-bleed-inline-start-xs) ) ) ) ); } } @media (min-width: 30.625em) { .Polaris-Choice{ --pc-choice-bleed-inline-end: var( --pc-choice-bleed-inline-end-sm, var(--pc-choice-bleed-inline-end-xs) ); } } @media (min-width: 48em) { .Polaris-Choice{ --pc-choice-bleed-inline-end: var( --pc-choice-bleed-inline-end-md, var( --pc-choice-bleed-inline-end-sm, var(--pc-choice-bleed-inline-end-xs) ) ); } } @media (min-width: 65em) { .Polaris-Choice{ --pc-choice-bleed-inline-end: var( --pc-choice-bleed-inline-end-lg, var( --pc-choice-bleed-inline-end-md, var( --pc-choice-bleed-inline-end-sm, var(--pc-choice-bleed-inline-end-xs) ) ) ); } } @media (min-width: 90em) { .Polaris-Choice{ --pc-choice-bleed-inline-end: var( --pc-choice-bleed-inline-end-xl, var( --pc-choice-bleed-inline-end-lg, var( --pc-choice-bleed-inline-end-md, var( --pc-choice-bleed-inline-end-sm, var(--pc-choice-bleed-inline-end-xs) ) ) ) ); } } @media (min-width: 30.625em) { .Polaris-Choice{ --pc-choice-fill: var( --pc-choice-fill-sm, var(--pc-choice-fill-xs) ); } } @media (min-width: 48em) { .Polaris-Choice{ --pc-choice-fill: var( --pc-choice-fill-md, var( --pc-choice-fill-sm, var(--pc-choice-fill-xs) ) ); } } @media (min-width: 65em) { .Polaris-Choice{ --pc-choice-fill: var( --pc-choice-fill-lg, var( --pc-choice-fill-md, var( --pc-choice-fill-sm, var(--pc-choice-fill-xs) ) ) ); } } @media (min-width: 90em) { .Polaris-Choice{ --pc-choice-fill: var( --pc-choice-fill-xl, var( --pc-choice-fill-lg, var( --pc-choice-fill-md, var( --pc-choice-fill-sm, var(--pc-choice-fill-xs) ) ) ) ); } } .Polaris-Choice--labelHidden{ padding-block-start:var( --pc-choice-bleed-block-start, var(--pc-choice-space-0) ); padding-block-end:var(--pc-choice-bleed-block-end, var(--pc-choice-space-0)); } .Polaris-Choice--labelHidden > .Polaris-Choice__Label{ position: absolute !important; top: 0; width: 0.0625rem !important; height: 0.0625rem !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; } .Polaris-Choice--labelHidden .Polaris-Choice__Control{ margin-top:0; margin-right:0; } .Polaris-Choice--disabled{ cursor:default; } .Polaris-Choice--disabled > .Polaris-Choice__Label{ color:var(--p-color-text-disabled); } .Polaris-Choice--disabled > .Polaris-Choice__Label:hover{ cursor:default; } @media (-ms-high-contrast: active){ .Polaris-Choice--disabled > .Polaris-Choice__Label{ color:grayText; } } .Polaris-Choice--toneMagic > .Polaris-Choice__Label{ color:var(--p-color-text-magic); } .Polaris-Choice--disabled + .Polaris-Choice__Descriptions{ color:var(--p-color-text-disabled); } .Polaris-Choice__Control{ --pc-choice-size:1.125rem; display:flex; flex:0 0 auto; align-items:stretch; width:var(--pc-choice-size); height:var(--pc-choice-size); margin-right:var(--p-space-200); } @media (max-width: 47.9975em){ .Polaris-Choice__Control{ --pc-choice-size:1.25rem; } } .Polaris-Choice__Control > *{ width:100%; } .Polaris-Choice__Label{ -webkit-tap-highlight-color:transparent; } .Polaris-Choice__Label:hover{ cursor:pointer; } .Polaris-Choice__Descriptions{ --pc-choice-size:1.125rem; padding-left:calc(var(--p-space-200) + var(--pc-choice-size)); } @media (max-width: 47.9975em){ .Polaris-Choice__Descriptions{ --pc-choice-size:1.25rem; } } .Polaris-Choice__HelpText{ margin-bottom:var(--p-space-100); } .Polaris-Checkbox{ position:relative; margin:var(--p-space-025); } .Polaris-Checkbox__ChoiceLabel .Polaris-Checkbox__Backdrop{ border-width:0; box-shadow:inset 0 0 0 var(--p-border-width-0165) var(--p-color-input-border); transition:border-color var(--p-motion-duration-100) var(--p-motion-ease-out), border-width var(--p-motion-duration-100) var(--p-motion-ease-out), box-shadow var(--p-motion-duration-100) var(--p-motion-ease-out); transform:translate3d(0, 0, 0); } .Polaris-Checkbox__ChoiceLabel:hover .Polaris-Checkbox__Backdrop{ border-color:var(--p-color-input-border-hover); box-shadow:inset 0 0 0 var(--p-border-width-0165) var(--p-color-input-border-hover); background-color:var(--p-color-input-bg-surface-hover); } .Polaris-Checkbox__ChoiceLabel:active .Polaris-Checkbox__Backdrop, .Polaris-Checkbox__ChoiceLabel:checked .Polaris-Checkbox__Backdrop{ border-color:var(--p-color-bg-fill-brand); border-width:0; box-shadow:inset 0 0 0 var(--p-space-050) var(--p-color-bg-fill-brand); } .Polaris-Checkbox__Input{ position:absolute; z-index:var(--p-z-index-1); width:100%; height:100%; opacity:0; margin:0; } .Polaris-Checkbox__Input:focus-visible + .Polaris-Checkbox__Backdrop{ outline:var(--p-border-width-050) solid var(--p-color-border-focus); outline-offset:var(--p-space-025); background-color:var(--p-color-input-bg-surface-hover); border-width:0; } .Polaris-Checkbox__Input:focus-visible + .Polaris-Checkbox__Backdrop::after { box-shadow: 0 0 0 0.125rem var(--p-color-border-focus); outline: var(--p-border-width-025) solid transparent; } .Polaris-Checkbox__Input:checked + .Polaris-Checkbox__Backdrop, .Polaris-Checkbox__Input.Polaris-Checkbox__Input--indeterminate + .Polaris-Checkbox__Backdrop{ border-color: var(--p-color-border-emphasis); border-color:var(--p-color-bg-fill-brand); background-color:var(--p-color-bg-fill-brand-selected); box-shadow:inset 0 0 0 var(--p-space-800) var(--p-color-bg-fill-brand-selected); } .Polaris-Checkbox__Input:checked + .Polaris-Checkbox__Backdrop::before, .Polaris-Checkbox__Input.Polaris-Checkbox__Input--indeterminate + .Polaris-Checkbox__Backdrop::before { opacity: 1; transform: scale(1); } @media (-ms-high-contrast: active) { .Polaris-Checkbox__Input:checked + .Polaris-Checkbox__Backdrop::before, .Polaris-Checkbox__Input.Polaris-Checkbox__Input--indeterminate + .Polaris-Checkbox__Backdrop::before { border: var(--p-border-width-050) solid windowText; } } .Polaris-Checkbox__Input:checked ~ .Polaris-Checkbox__Icon, .Polaris-Checkbox__Input.Polaris-Checkbox__Input--indeterminate ~ .Polaris-Checkbox__Icon{ transition:opacity var(--p-motion-duration-150) var(--p-motion-ease-out), transform var(--p-motion-duration-150) var(--p-motion-ease-out); opacity:1; } .Polaris-Checkbox__Input:checked ~ .Polaris-Checkbox__Icon svg, .Polaris-Checkbox__Input.Polaris-Checkbox__Input--indeterminate ~ .Polaris-Checkbox__Icon svg{ fill:var(--p-color-text-brand-on-bg-fill); } .Polaris-Checkbox__Input:checked ~ .Polaris-Checkbox__Icon.Polaris-Checkbox--animated, .Polaris-Checkbox__Input.Polaris-Checkbox__Input--indeterminate ~ .Polaris-Checkbox__Icon.Polaris-Checkbox--animated{ transition:initial; } .Polaris-Checkbox__Input:disabled + .Polaris-Checkbox__Backdrop{ border-color: var(--p-color-border-disabled); border-color:transparent; background-color:var(--p-color-checkbox-bg-surface-disabled); box-shadow:none; } .Polaris-Checkbox__Input:disabled + .Polaris-Checkbox__Backdrop::before { background-color: var(--p-color-bg-surface-disabled); } .Polaris-Checkbox__Input:disabled + .Polaris-Checkbox__Backdrop:hover { cursor: default; } .Polaris-Checkbox__Input:disabled + .Polaris-Checkbox__Backdrop::before{ background-color:transparent; } .Polaris-Checkbox__Input:disabled ~ .Polaris-Checkbox__Icon svg{ color:var(--p-color-checkbox-icon-disabled); } .Polaris-Checkbox__Input:disabled:checked + .Polaris-Checkbox__Backdrop, .Polaris-Checkbox__Input.Polaris-Checkbox__Input--indeterminate:disabled + .Polaris-Checkbox__Backdrop{ background-color:var(--p-color-checkbox-bg-surface-disabled); } .Polaris-Checkbox__Input:disabled:checked + .Polaris-Checkbox__Backdrop::before, .Polaris-Checkbox__Input.Polaris-Checkbox__Input--indeterminate:disabled + .Polaris-Checkbox__Backdrop::before{ background-color:transparent; } .Polaris-Checkbox__Input.Polaris-Checkbox--toneMagic + .Polaris-Checkbox__Backdrop{ background-color:var(--p-color-bg-surface-magic); box-shadow:inset 0 0 0 var(--p-border-width-0165) var(--p-color-border-magic-secondary); } .Polaris-Checkbox__ChoiceLabel:hover .Polaris-Checkbox__Input.Polaris-Checkbox--toneMagic + .Polaris-Checkbox__Backdrop{ background-color:var(--p-color-bg-surface-magic-hover); box-shadow:inset 0 0 0 var(--p-border-width-0165) var(--p-color-border-magic-secondary-hover); } .Polaris-Checkbox__Input.Polaris-Checkbox--toneMagic:checked + .Polaris-Checkbox__Backdrop, .Polaris-Checkbox__Input.Polaris-Checkbox--toneMagic.Polaris-Checkbox__Input--indeterminate + .Polaris-Checkbox__Backdrop{ border-color:var(--p-color-bg-fill-magic); background-color:var(--p-color-bg-fill-magic); box-shadow:inset 0 0 0 var(--p-space-800) var(--p-color-bg-fill-magic); } .Polaris-Checkbox__ChoiceLabel:hover .Polaris-Checkbox__Input.Polaris-Checkbox--toneMagic:checked + .Polaris-Checkbox__Backdrop, .Polaris-Checkbox__ChoiceLabel:hover .Polaris-Checkbox__Input.Polaris-Checkbox--toneMagic.Polaris-Checkbox__Input--indeterminate + .Polaris-Checkbox__Backdrop{ border-color:var(--p-color-bg-fill-magic); background-color:var(--p-color-bg-fill-magic); box-shadow:inset 0 0 0 var(--p-space-800) var(--p-color-bg-fill-magic); } .Polaris-Checkbox__Backdrop{ position: relative; border: var(--p-border-width-050) solid var(--p-color-input-border); background-color: var(--p-color-bg-surface); border-radius: var(--p-border-radius-100); position:relative; display:block; width:100%; height:100%; border:var(--p-border-width-0165) solid var(--p-color-input-border); } .Polaris-Checkbox__Backdrop.Polaris-Checkbox--hover,.Polaris-Checkbox__Backdrop:hover { cursor: pointer; border-color: var(--p-color-border-hover); } .Polaris-Checkbox__Backdrop:hover{ border-color:var(--p-color-input-border-hover); } .Polaris-Checkbox__Icon{ position:absolute; transform-origin:50% 50%; pointer-events:none; opacity:0; transition:opacity var(--p-motion-duration-100) var(--p-motion-ease-out), transform var(--p-motion-duration-100) var(--p-motion-ease-out); top:calc(var(--p-space-050)*-1); left:calc(var(--p-space-050)*-1); bottom:calc(var(--p-space-050)*-1); right:calc(var(--p-space-050)*-1); } .Polaris-Checkbox__Icon.Polaris-Checkbox--animated{ top:0; left:0; bottom:0; right:0; margin:var(--p-space-050); transition:initial; } .Polaris-Checkbox__Icon svg{ color:var(--p-color-text-brand-on-bg-fill); position:absolute; top:0; left:0; bottom:0; right:0; } @media (-ms-high-contrast: active){ .Polaris-Checkbox__Icon{ fill:windowText; } } .Polaris-Checkbox--error .Polaris-Checkbox__Icon svg{ color:var(--p-color-text-critical-on-bg-fill); } .Polaris-Checkbox--error .Polaris-Checkbox__Input + .Polaris-Checkbox__Backdrop{ border-color: var(--p-color-border-critical); background-color: var(--p-color-bg-fill-critical-secondary); background-color:var(--p-color-bg-surface-critical); box-shadow:inset 0 0 0 var(--p-border-width-0165) var(--p-color-bg-fill-critical-active); } .Polaris-Checkbox--error .Polaris-Checkbox__Input + .Polaris-Checkbox__Backdrop.Polaris-Checkbox--hover, .Polaris-Checkbox--error .Polaris-Checkbox__Input + .Polaris-Checkbox__Backdrop:hover { border-color: var(--p-color-border-critical); } .Polaris-Checkbox--error .Polaris-Checkbox__Input + .Polaris-Checkbox__Backdrop::before { background-color: var(--p-color-border-critical); } .Polaris-Checkbox--error .Polaris-Checkbox__Backdrop:active{ box-shadow:inset 0 0 0 var(--p-space-050) var(--p-color-bg-fill-critical-active); } .Polaris-Checkbox--error .Polaris-Checkbox__Input:checked + .Polaris-Checkbox__Backdrop, .Polaris-Checkbox--error .Polaris-Checkbox__Input.Polaris-Checkbox__Input--indeterminate + .Polaris-Checkbox__Backdrop{ background-color:var(--p-color-bg-fill-critical-selected); box-shadow:inset 0 0 0 var(--p-space-300) var(--p-color-bg-fill-critical-selected); } .Polaris-Checkbox--error .Polaris-Checkbox__Input:active + .Polaris-Checkbox__Backdrop{ background-color:var(--p-color-border-critical); box-shadow:inset 0 0 0 var(--p-space-050) var(--p-color-bg-fill-critical-active); } .Polaris-Checkbox--error .Polaris-Checkbox__Input:focus-visible + .Polaris-Checkbox__Backdrop, .Polaris-Checkbox__ChoiceLabel:hover .Polaris-Checkbox--error .Polaris-Checkbox__Input:focus-visible + .Polaris-Checkbox__Backdrop{ border-color:var(--p-color-border-critical-secondary); background-color:var(--p-color-bg-surface-critical); } .Polaris-Checkbox--animated svg > path{ stroke-dasharray:2; stroke-dashoffset:2; } .Polaris-Checkbox--animated svg > path.Polaris-Checkbox--checked{ animation-name:Polaris-Checkbox--pathAnimation; animation-duration:var(--p-motion-duration-150); animation-fill-mode:forwards; animation-timing-function:linear; animation-direction:normal; animation-iteration-count:1; opacity:1; } @keyframes Polaris-Checkbox--pathAnimation{ from{ stroke-dashoffset:2; } to{ stroke-dashoffset:0; } } .Polaris-Listbox-TextOption{ margin:var(--p-space-100) var(--p-space-200) 0; flex:1 1; border-radius:var(--p-border-radius-200); padding:var(--p-space-150) var(--p-space-300); cursor:pointer; display:flex; position: relative; } .Polaris-Listbox-TextOption::after { content: ''; position: absolute; z-index: 1; top: -0.0625rem; right: -0.0625rem; bottom: -0.0625rem; left: -0.0625rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus); border-radius: var(--p-border-radius-100); } .Polaris-Listbox-TextOption.Polaris-Listbox-TextOption--allowMultiple{ margin:var(--p-space-100) var(--p-space-200) 0; padding:var(--p-space-100) var(--p-space-200); } .Polaris-Listbox-TextOption.Polaris-Listbox-TextOption--isAction{ margin-top:var(--p-space-100); } .Polaris-Listbox-TextOption:hover{ background-color:var(--p-color-bg-surface-hover); } .Polaris-Listbox-TextOption:hover:not(.Polaris-Listbox-TextOption--disabled){ background-color:var(--p-color-bg-surface-secondary-hover); } .Polaris-Listbox-TextOption:focus{ outline:none; } .Polaris-Listbox-TextOption:active{ background-color:var(--p-color-bg-surface-active); } .Polaris-Listbox-TextOption:active:not(.Polaris-Listbox-TextOption--disabled){ background-color:var(--p-color-bg-surface-secondary-active); } .Polaris-Listbox-TextOption.Polaris-Listbox-TextOption--selected{ background-color:var(--p-color-bg-surface-secondary-selected); font-weight:var(--p-font-weight-semibold); } .Polaris-Listbox-TextOption.Polaris-Listbox-TextOption--selected svg{ fill:var(--p-color-icon-active); } .Polaris-Listbox-TextOption.Polaris-Listbox-TextOption--selected::before{ content:none; position:absolute; top:0; bottom:0; left:calc(var(--p-space-100)*-1); height:100%; width:var(--p-border-radius-100); background-color:var(--p-color-bg-fill-brand); border-top-right-radius:var(--p-border-radius-100); border-bottom-right-radius:var(--p-border-radius-100); transform:translateX(-100%); } .Polaris-Listbox-TextOption.Polaris-Listbox-TextOption--disabled{ background-color:transparent; color:var(--p-color-text-disabled); cursor:default; } li:first-of-type > .Polaris-Listbox-TextOption{ margin-top:0; } [data-focused] .Polaris-Listbox-TextOption:not(.Polaris-Listbox-TextOption--disabled){ outline:none; background-color:var(--p-color-bg-surface-secondary-selected); transition:background-color var(--p-motion-duration-400); } .Polaris-Listbox-TextOption__Content{ flex:1 1 auto; display:flex; } .Polaris-Listbox-TextOption__Checkbox{ pointer-events:none; } .Polaris-Listbox-Option{ display:flex; margin:0; padding:0; } .Polaris-Listbox-Option:focus{ outline:none; } .Polaris-Listbox-Option--divider{ border-bottom:var(--p-border-width-025) solid var(--p-color-border-secondary); } .Polaris-Listbox-Loading__ListItem{ padding:0; margin:0; } .Polaris-Listbox-Loading{ padding:var(--p-space-200) var(--p-space-400); display:grid; place-items:center; } .Polaris-Listbox-Action{ display:flex; flex:1 1; } .Polaris-Listbox-Action__ActionDivider{ margin-bottom:var(--p-space-100); } .Polaris-Listbox-Action__Icon{ padding-right:var(--p-space-200); } .Polaris-Listbox{ padding:0; margin:0; list-style:none; max-width:100%; } .Polaris-Listbox:focus{ outline:none; } .Polaris-Autocomplete-MappedOption__Content{ display:flex; flex:1 1; word-wrap:break-word; word-break:break-word; overflow-wrap:break-word; } .Polaris-Autocomplete-MappedOption__Media{ padding:0 var(--p-space-200); } .Polaris-Autocomplete-MappedOption__Media svg{ fill:var(--p-color-icon); } .Polaris-Autocomplete-MappedOption--singleSelectionMedia{ padding:0 var(--p-space-200) 0 0; } .Polaris-Autocomplete-MappedOption--disabledMedia svg{ fill:var(--p-color-icon-disabled); } .Polaris-Autocomplete-MappedAction__ActionContainer{ --pc-mapped-actions-image-size:1.25rem; --pc-mapped-actions-item-min-height:var(--p-space-1000); --pc-mapped-actions-item-vertical-padding:calc((var(--pc-mapped-actions-item-min-height) - var(--p-font-line-height-500))/2); margin-bottom:var(--p-space-300); } [data-focused] .Polaris-Autocomplete-MappedAction__Action svg{ fill:var(--p-color-icon); } [data-focused] .Polaris-Autocomplete-MappedAction__Action.Polaris-Autocomplete-MappedAction--destructive{ background-color:var(--p-color-bg-surface-critical-active); } [data-focused] .Polaris-Autocomplete-MappedAction__Action:hover{ background-color:transparent; } .Polaris-Autocomplete-MappedAction__Action{ position: relative; display:block; flex:1 1; min-height:var(--pc-mapped-actions-item-min-height); text-align:left; cursor:pointer; padding:var(--pc-mapped-actions-item-vertical-padding) var(--p-space-200); margin:calc(var(--pc-mapped-actions-item-vertical-padding)*-1) calc(var(--p-space-300)*-1); border-radius:var(--p-border-radius-200); } .Polaris-Autocomplete-MappedAction__Action::after { content: ''; position: absolute; z-index: 1; top: -0.0625rem; right: -0.0625rem; bottom: -0.0625rem; left: -0.0625rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus); border-radius: var(--p-border-radius-100); } .Polaris-Autocomplete-MappedAction__Action:hover{ background-color:var(--p-color-bg-surface-hover); text-decoration:none; } @media (-ms-high-contrast: active){ .Polaris-Autocomplete-MappedAction__Action:hover{ outline:var(--p-border-width-025) solid windowText; } } .Polaris-Autocomplete-MappedAction__Action.Polaris-Autocomplete-MappedAction--selected{ background-color:var(--p-color-bg-surface-brand-selected); } .Polaris-Autocomplete-MappedAction__Action.Polaris-Autocomplete-MappedAction--selected svg{ fill:var(--p-color-icon-emphasis); } .Polaris-Autocomplete-MappedAction__Action:active{ background-color:var(--p-color-bg-surface-active); } .Polaris-Autocomplete-MappedAction__Action:active svg{ fill:var(--p-color-icon-emphasis); } .Polaris-Autocomplete-MappedAction__Action:focus-visible:not(:active)::after { box-shadow: 0 0 0 0.125rem var(--p-color-border-focus); outline: var(--p-border-width-025) solid transparent; } .Polaris-Autocomplete-MappedAction__Action.Polaris-Autocomplete-MappedAction--destructive{ color:var(--p-color-text-critical); } .Polaris-Autocomplete-MappedAction__Action.Polaris-Autocomplete-MappedAction--destructive svg{ fill:var(--p-color-icon-critical); } .Polaris-Autocomplete-MappedAction__Action.Polaris-Autocomplete-MappedAction--destructive:hover{ background-color:var(--p-color-bg-surface-critical-hover); } .Polaris-Autocomplete-MappedAction__Action.Polaris-Autocomplete-MappedAction--destructive:active, .Polaris-Autocomplete-MappedAction__Action.Polaris-Autocomplete-MappedAction--destructive.Polaris-Autocomplete-MappedAction--selected{ background-color:var(--p-color-bg-surface-critical-active); } .Polaris-Autocomplete-MappedAction__Action.Polaris-Autocomplete-MappedAction--disabled{ background-image:none; color:var(--p-color-text-disabled); } .Polaris-Autocomplete-MappedAction__Action.Polaris-Autocomplete-MappedAction--disabled .Polaris-Autocomplete-MappedAction__Prefix svg, .Polaris-Autocomplete-MappedAction__Action.Polaris-Autocomplete-MappedAction--disabled .Polaris-Autocomplete-MappedAction__Suffix svg{ fill:var(--p-color-icon-disabled); } .Polaris-Autocomplete-MappedAction__Content{ display:flex; align-items:center; } .Polaris-Autocomplete-MappedAction__Prefix{ display:flex; flex:0 0 auto; justify-content:center; align-items:center; height:var(--pc-mapped-actions-image-size); width:var(--pc-mapped-actions-image-size); border-radius:var(--p-border-radius-100); margin:calc(var(--pc-mapped-actions-image-size)*-0.5) var(--p-space-400) calc(var(--pc-mapped-actions-image-size)*-0.5) 0; margin-right:var(--p-space-200); background-size:cover; background-position:center center; } .Polaris-Autocomplete-MappedAction__Prefix svg{ fill:var(--p-color-icon); } .Polaris-Autocomplete-MappedAction__Suffix{ margin-left:var(--p-space-400); } .Polaris-Autocomplete-MappedAction__Suffix svg{ fill:var(--p-color-icon); } .Polaris-Autocomplete-MappedAction__Text{ min-width:0; max-width:100%; flex:1 1 auto; } .Polaris-Autocomplete__Loading{ display:flex; justify-content:center; align-items:center; width:100%; padding:var(--p-space-200) var(--p-space-400); } .Polaris-Autocomplete__SectionWrapper > *:not(:first-child){ margin-top:var(--p-space-200); } [data-lock-scrolling]{ overflow-y:scroll; margin:0; } [data-lock-scrolling][data-lock-scrolling-hidden]{ overflow-y:hidden; } [data-lock-scrolling] [data-lock-scrolling-wrapper]{ overflow:hidden; height:100%; } .Polaris-Backdrop{ position:fixed; z-index:var(--p-z-index-10); top:0; right:0; bottom:0; left:0; display:block; background-color:rgba(0, 0, 0, 0.5); animation:var(--p-motion-keyframes-fade-in) var(--p-motion-duration-200) 1 forwards; opacity:0; -webkit-backface-visibility:hidden; backface-visibility:hidden; will-change:opacity; } .Polaris-Backdrop--transparent{ background-color:transparent; } .Polaris-Backdrop--belowNavigation{ z-index:var(--p-z-index-7); } .Polaris-ButtonGroup{ --pc-button-group-item:10; --pc-button-group-focused:20; display:flex; flex-wrap:wrap; align-items:center; margin-top:calc(var(--p-space-200)*-1); margin-left:calc(var(--p-space-200)*-1); } .Polaris-ButtonGroup__Item{ margin-top:var(--p-space-200); margin-left:var(--p-space-200); } .Polaris-ButtonGroup__Item--plain:not(:first-child){ margin-left:var(--p-space-200); } .Polaris-ButtonGroup__Item--plain:not(:last-child){ margin-right:var(--p-space-200); } .Polaris-ButtonGroup--variantSegmented{ display:flex; flex-wrap:nowrap; margin-top:0; margin-left:0; } .Polaris-ButtonGroup--variantSegmented .Polaris-ButtonGroup__Item{ position:relative; margin-top:0; margin-left:0; line-height:1; } .Polaris-ButtonGroup--variantSegmented .Polaris-ButtonGroup__Item:not(:first-child){ margin-left:calc(var(--p-space-025)*-1); } .Polaris-ButtonGroup--variantSegmented [aria-pressed='true']{ z-index:var(--pc-button-group-item); } .Polaris-ButtonGroup--variantSegmented .Polaris-ButtonGroup__Item--focused{ z-index:var(--pc-button-group-focused); } .Polaris-ButtonGroup--fullWidth .Polaris-ButtonGroup__Item{ flex:1 1 auto; } .Polaris-ButtonGroup--extraTight{ margin-top:calc(var(--p-space-100)*-1); margin-left:calc(var(--p-space-100)*-1); } .Polaris-ButtonGroup--extraTight .Polaris-ButtonGroup__Item{ margin-top:var(--p-space-100); margin-left:var(--p-space-100); } .Polaris-ButtonGroup--tight{ margin-top:calc(var(--p-space-200)*-1); margin-left:calc(var(--p-space-200)*-1); } .Polaris-ButtonGroup--tight .Polaris-ButtonGroup__Item{ margin-top:var(--p-space-200); margin-left:var(--p-space-200); } .Polaris-ButtonGroup--loose{ margin-top:calc(var(--p-space-500)*-1); margin-left:calc(var(--p-space-500)*-1); } .Polaris-ButtonGroup--loose .Polaris-ButtonGroup__Item{ margin-top:var(--p-space-500); margin-left:var(--p-space-500); } .Polaris-ButtonGroup--noWrap{ display:flex; flex-wrap:nowrap; } .Polaris-Banner{ background-color:var(--p-color-bg-surface); position:relative; display:flex; } .Polaris-Banner:focus{ outline:none; } .Polaris-Banner.Polaris-Banner--keyFocused{ outline:var(--p-border-width-050) solid var(--p-color-border-focus); } .Polaris-Banner--withinContentContainer{ border-radius:var(--p-border-radius-200); } .Polaris-Banner--withinContentContainer + .Polaris-Banner{ margin-top:var(--p-space-200); } .Polaris-Banner--withinPage{ position: relative; box-shadow: var(--p-shadow-200); border-radius: var(--p-border-radius-0); } .Polaris-Banner--withinPage::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; box-shadow: var(--p-shadow-bevel-100); border-radius: var(--p-border-radius-0); pointer-events: none; mix-blend-mode: luminosity; } @media (min-width: 30.625em){ .Polaris-Banner--withinPage{ position: relative; box-shadow: var(--p-shadow-200); border-radius: var(--p-border-radius-300); } .Polaris-Banner--withinPage::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; box-shadow: var(--p-shadow-bevel-100); border-radius: var(--p-border-radius-300); pointer-events: none; mix-blend-mode: luminosity; } } .Polaris-Banner--withinPage + .Polaris-Banner{ margin-top:var(--p-space-400); } .Polaris-Banner__DismissIcon{ display:flex; } .Polaris-Banner--textSuccessOnBgFill.Polaris-Banner--textSuccessOnBgFill.Polaris-Banner--textSuccessOnBgFill svg, .Polaris-Banner--textSuccessOnBgFill.Polaris-Banner--textSuccessOnBgFill.Polaris-Banner--textSuccessOnBgFill path{ fill:var(--p-color-text-success-on-bg-fill); } .Polaris-Banner__text--success.Polaris-Banner__text--success.Polaris-Banner__text--success svg, .Polaris-Banner__text--success.Polaris-Banner__text--success.Polaris-Banner__text--success path{ fill:var(--p-color-text-success); } .Polaris-Banner--textWarningOnBgFill.Polaris-Banner--textWarningOnBgFill.Polaris-Banner--textWarningOnBgFill svg, .Polaris-Banner--textWarningOnBgFill.Polaris-Banner--textWarningOnBgFill.Polaris-Banner--textWarningOnBgFill path{ fill:var(--p-color-text-warning-on-bg-fill); } .Polaris-Banner__text--warning.Polaris-Banner__text--warning.Polaris-Banner__text--warning svg, .Polaris-Banner__text--warning.Polaris-Banner__text--warning.Polaris-Banner__text--warning path{ fill:var(--p-color-text-warning); } .Polaris-Banner--textCriticalOnBgFill.Polaris-Banner--textCriticalOnBgFill.Polaris-Banner--textCriticalOnBgFill svg, .Polaris-Banner--textCriticalOnBgFill.Polaris-Banner--textCriticalOnBgFill.Polaris-Banner--textCriticalOnBgFill path{ fill:var(--p-color-text-critical-on-bg-fill); } .Polaris-Banner__text--critical.Polaris-Banner__text--critical.Polaris-Banner__text--critical svg, .Polaris-Banner__text--critical.Polaris-Banner__text--critical.Polaris-Banner__text--critical path{ fill:var(--p-color-text-critical); } .Polaris-Banner--textInfoOnBgFill.Polaris-Banner--textInfoOnBgFill.Polaris-Banner--textInfoOnBgFill svg, .Polaris-Banner--textInfoOnBgFill.Polaris-Banner--textInfoOnBgFill.Polaris-Banner--textInfoOnBgFill path{ fill:var(--p-color-text-info-on-bg-fill); } .Polaris-Banner__text--info.Polaris-Banner__text--info.Polaris-Banner__text--info svg, .Polaris-Banner__text--info.Polaris-Banner__text--info.Polaris-Banner__text--info path{ fill:var(--p-color-text-info); } .Polaris-Banner__icon--secondary.Polaris-Banner__icon--secondary.Polaris-Banner__icon--secondary svg, .Polaris-Banner__icon--secondary.Polaris-Banner__icon--secondary.Polaris-Banner__icon--secondary path{ fill:var(--p-color-icon-secondary); } .Polaris-Bleed{ --pc-bleed-margin-block-start-xs:initial; --pc-bleed-margin-block-start-sm:var(--pc-bleed-margin-block-start-xs); --pc-bleed-margin-block-start-md:var(--pc-bleed-margin-block-start-sm); --pc-bleed-margin-block-start-lg:var(--pc-bleed-margin-block-start-md); --pc-bleed-margin-block-start-xl:var(--pc-bleed-margin-block-start-lg); --pc-bleed-margin-block-end-xs:initial; --pc-bleed-margin-block-end-sm:var(--pc-bleed-margin-block-end-xs); --pc-bleed-margin-block-end-md:var(--pc-bleed-margin-block-end-sm); --pc-bleed-margin-block-end-lg:var(--pc-bleed-margin-block-end-md); --pc-bleed-margin-block-end-xl:var(--pc-bleed-margin-block-end-lg); --pc-bleed-margin-inline-start-xs:initial; --pc-bleed-margin-inline-start-sm:var(--pc-bleed-margin-inline-start-xs); --pc-bleed-margin-inline-start-md:var(--pc-bleed-margin-inline-start-sm); --pc-bleed-margin-inline-start-lg:var(--pc-bleed-margin-inline-start-md); --pc-bleed-margin-inline-start-xl:var(--pc-bleed-margin-inline-start-lg); --pc-bleed-margin-inline-end-xs:initial; --pc-bleed-margin-inline-end-sm:var(--pc-bleed-margin-inline-end-xs); --pc-bleed-margin-inline-end-md:var(--pc-bleed-margin-inline-end-sm); --pc-bleed-margin-inline-end-lg:var(--pc-bleed-margin-inline-end-md); --pc-bleed-margin-inline-end-xl:var(--pc-bleed-margin-inline-end-lg); margin-block-start:calc(var(--pc-bleed-margin-block-start-xs)*-1); margin-block-end:calc(var(--pc-bleed-margin-block-end-xs)*-1); margin-inline-start:calc(var(--pc-bleed-margin-inline-start-xs)*-1); margin-inline-end:calc(var(--pc-bleed-margin-inline-end-xs)*-1); } @media (min-width: 30.625em){ .Polaris-Bleed{ margin-block-start:calc(var(--pc-bleed-margin-block-start-sm)*-1); margin-block-end:calc(var(--pc-bleed-margin-block-end-sm)*-1); margin-inline-start:calc(var(--pc-bleed-margin-inline-start-sm)*-1); margin-inline-end:calc(var(--pc-bleed-margin-inline-end-sm)*-1); } } @media (min-width: 48em){ .Polaris-Bleed{ margin-block-start:calc(var(--pc-bleed-margin-block-start-md)*-1); margin-block-end:calc(var(--pc-bleed-margin-block-end-md)*-1); margin-inline-start:calc(var(--pc-bleed-margin-inline-start-md)*-1); margin-inline-end:calc(var(--pc-bleed-margin-inline-end-md)*-1); } } @media (min-width: 65em){ .Polaris-Bleed{ margin-block-start:calc(var(--pc-bleed-margin-block-start-lg)*-1); margin-block-end:calc(var(--pc-bleed-margin-block-end-lg)*-1); margin-inline-start:calc(var(--pc-bleed-margin-inline-start-lg)*-1); margin-inline-end:calc(var(--pc-bleed-margin-inline-end-lg)*-1); } } @media (min-width: 90em){ .Polaris-Bleed{ margin-block-start:calc(var(--pc-bleed-margin-block-start-xl)*-1); margin-block-end:calc(var(--pc-bleed-margin-block-end-xl)*-1); margin-inline-start:calc(var(--pc-bleed-margin-inline-start-xl)*-1); margin-inline-end:calc(var(--pc-bleed-margin-inline-end-xl)*-1); } } .Polaris-CheckableButton{ color:var(--p-color-text); display:flex; align-items:center; gap:calc(var(--p-space-300) + var(--p-space-025)); margin:0; cursor:pointer; -webkit-user-select:none; user-select:none; text-decoration:none; text-align:left; border-radius:var(--p-border-radius-100); width:auto; min-height:auto; min-width:auto; height:100%; } .Polaris-CheckableButton svg{ fill:var(--p-color-text-brand-on-bg-fill); } .Polaris-CheckableButton:hover, .Polaris-CheckableButton:active{ background:transparent; } .Polaris-CheckableButton:focus{ outline:none; } .Polaris-CheckableButton__Checkbox{ pointer-events:none; display:flex; } .Polaris-CheckableButton__Label{ display:flex; align-items:center; flex:1 1; white-space:nowrap; overflow:hidden; max-width:100%; text-overflow:ellipsis; padding:var(--p-space-025) 0; } .Polaris-Indicator{ --pc-indicator-size:0.625rem; --pc-indicator-base-position:calc(var(--p-space-100)*-1); } .Polaris-Indicator::before, .Polaris-Indicator::after{ content:''; position:absolute; background-color:var(--p-color-border-info); right:var(--pc-indicator-base-position); top:var(--pc-indicator-base-position); width:var(--pc-indicator-size); height:var(--pc-indicator-size); border-radius:var(--p-border-radius-full); border:calc(var(--pc-indicator-size)/2) solid transparent; } .Polaris-Indicator--pulseIndicator::before{ z-index:1; animation:var(--p-motion-keyframes-bounce) var(--p-motion-duration-5000) ease infinite; } .Polaris-Indicator--pulseIndicator::after{ right:var(--pc-indicator-base-position); top:var(--pc-indicator-base-position); animation:var(--p-motion-keyframes-pulse) var(--p-motion-duration-5000) ease infinite; } .Polaris-BulkActions__BulkActionsOuterLayout{ position:relative; flex:1 1; width:100%; } .Polaris-BulkActions__BulkActionsSelectAllWrapper{ min-height:1.5rem; display:flex; align-items:center; gap:var(--p-space-200); } .Polaris-BulkActions__BulkActionsPromotedActionsWrapper{ flex:1 1; } .Polaris-BulkActions__BulkActionsLayout{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; flex:1 1 auto; gap:var(--p-space-100); } .Polaris-BulkActions__BulkActionsLayout > *{ flex:0 0 auto; } .Polaris-BulkActions--bulkActionsLayoutMeasuring{ visibility:hidden; height:0; } .Polaris-BulkActions__BulkActionsMeasurerLayout{ position:absolute; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; flex:1 1 auto; gap:0; padding:0; visibility:hidden; height:0; width:100%; } .Polaris-BulkActions__BulkActionsMeasurerLayout > *{ flex:0 0 auto; } .Polaris-BulkActions__BulkActionButton{ white-space:nowrap; } .Polaris-BulkActions__BulkActionButton button{ display:flex; } .Polaris-BulkActions--disabled{ transition:none; box-shadow:none; border-color:var(--p-color-border-disabled); background:var(--p-color-bg-fill-disabled); color:var(--p-color-text-disabled); cursor:default; pointer-events:none; } .Polaris-BulkActions--disabled svg{ fill:var(--p-color-icon-disabled); } .Polaris-BulkActions__AllAction{ border:0; background:none; padding:0; cursor:pointer; color:var(--p-color-text-emphasis); outline:none; position: relative; } .Polaris-BulkActions__AllAction::after { content: ''; position: absolute; z-index: 1; top: -0.0625rem; right: -0.0625rem; bottom: -0.0625rem; left: -0.0625rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus); border-radius: var(--p-border-radius-100); } .Polaris-BulkActions__AllAction:hover, .Polaris-BulkActions__AllAction:focus{ color:var(--p-color-text-emphasis-hover); } .Polaris-BulkActions__AllAction:active{ color:var(--p-color-text-emphasis-active); } .Polaris-BulkActions__AllAction:focus-visible:not(:active)::after { box-shadow: 0 0 0 0.125rem var(--p-color-border-focus); outline: var(--p-border-width-025) solid transparent; } .Polaris-LegacyCard{ background-color:var(--p-color-bg-surface); box-shadow:var(--p-shadow-300); outline:var(--p-border-width-025) solid transparent; overflow:clip; position: relative; box-shadow: var(--p-shadow-100); border-radius: var(--p-border-radius-0); } .Polaris-LegacyCard::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 101; box-shadow: var(--p-shadow-bevel-100); border-radius: var(--p-border-radius-0); pointer-events: none; mix-blend-mode: luminosity; } .Polaris-LegacyCard + .Polaris-LegacyCard{ margin-top:var(--p-space-400); } @media print{ .Polaris-LegacyCard + .Polaris-LegacyCard{ margin-top:calc(var(--p-space-200)*-1); } } @media (min-width: 30.625em){ .Polaris-LegacyCard{ border-radius:var(--p-border-radius-200); position: relative; box-shadow: var(--p-shadow-100); border-radius: var(--p-border-radius-300); } .Polaris-LegacyCard::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 101; box-shadow: var(--p-shadow-bevel-100); border-radius: var(--p-border-radius-300); pointer-events: none; mix-blend-mode: luminosity; } .Polaris-LegacyCard .Polaris-LegacyCard__Section:first-child{ border-top-left-radius:var(--p-border-radius-300); border-top-right-radius:var(--p-border-radius-300); } .Polaris-LegacyCard .Polaris-LegacyCard__Section:last-child{ border-bottom-left-radius:var(--p-border-radius-300); border-bottom-right-radius:var(--p-border-radius-300); } } @media print{ .Polaris-LegacyCard{ box-shadow:none; position: relative; box-shadow: none; border-radius: var(--p-border-radius-0); border: none; } .Polaris-LegacyCard::before { content: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; box-shadow: var(--p-shadow-bevel-100); border-radius: var(--p-border-radius-0); pointer-events: none; mix-blend-mode: luminosity; } } .Polaris-LegacyCard--subdued{ background-color:var(--p-color-bg-surface-secondary); } @media print{ .Polaris-LegacyCard__Section--hideOnPrint, .Polaris-LegacyCard--hideOnPrint{ display:none !important; } } .Polaris-LegacyCard__Header{ padding:var(--p-space-400) var(--p-space-400) 0; } @media (min-width: 30.625em){ .Polaris-LegacyCard__Header{ padding:var(--p-space-200) var(--p-space-400) 0; } } @media print and (min-width: 30.625em){ .Polaris-LegacyCard__Header{ padding:var(--p-space-200) var(--p-space-400) 0; } } .Polaris-LegacyCard__Section{ padding:var(--p-space-200) var(--p-space-400); } @media (min-width: 30.625em){ .Polaris-LegacyCard__Section{ padding:var(--p-space-200) var(--p-space-400); } } .Polaris-LegacyCard__Section + .Polaris-LegacyCard__Section{ border-top:0; } @media print{ .Polaris-LegacyCard__Section + .Polaris-LegacyCard__Section{ border-top:0; } } @media print{ .Polaris-LegacyCard__Section{ padding-top:var(--p-space-100); padding-bottom:var(--p-space-100); } } .Polaris-LegacyCard__Section--fullWidth{ padding:var(--p-space-400) 0; } @media (min-width: 30.625em){ .Polaris-LegacyCard__Section--fullWidth{ padding:var(--p-space-400) 0; } } .Polaris-LegacyCard__Section--flush{ padding:0; } @media (min-width: 30.625em){ .Polaris-LegacyCard__Section--flush{ padding:0; } } .Polaris-LegacyCard__Section--subdued{ background-color:var(--p-color-bg-surface-secondary); padding:var(--p-space-300) var(--p-space-400); } @media (-ms-high-contrast: active){ .Polaris-LegacyCard__Section--subdued{ background-color:transparent; } } .Polaris-LegacyCard__Header + .Polaris-LegacyCard__Section--subdued{ border-top:0; margin-top:0; } .Polaris-LegacyCard__Section--subdued:last-child{ padding:var(--p-space-400); } @media print{ .Polaris-LegacyCard__Section--subdued:last-child{ padding-top:var(--p-space-200); padding-bottom:var(--p-space-200); } } .Polaris-LegacyCard__SectionHeader{ padding-bottom:var(--p-space-200); } .Polaris-LegacyCard__Section--fullWidth .Polaris-LegacyCard__SectionHeader{ padding-left:var(--p-space-400); padding-right:var(--p-space-400); } @media (min-width: 30.625em){ .Polaris-LegacyCard__Section--fullWidth .Polaris-LegacyCard__SectionHeader{ padding-left:var(--p-space-400); padding-right:var(--p-space-400); } } .Polaris-LegacyCard__Subsection + .Polaris-LegacyCard__Subsection{ border-top:0; margin-top:0; padding-top:var(--p-space-200); } @media print{ .Polaris-LegacyCard__Subsection + .Polaris-LegacyCard__Subsection{ border-top:0; } } @media print{ .Polaris-LegacyCard__Subsection{ padding-top:var(--p-space-100); padding-bottom:var(--p-space-100); } } .Polaris-LegacyCard__Footer{ display:flex; justify-content:flex-end; padding:0 var(--p-space-400) var(--p-space-400); } @media (min-width: 30.625em){ .Polaris-LegacyCard__Footer{ padding:0 var(--p-space-400) var(--p-space-400); } } .Polaris-LegacyCard__Footer.Polaris-LegacyCard__LeftJustified{ justify-content:flex-start; } .Polaris-LegacyCard__Section--subdued + .Polaris-LegacyCard__Footer{ padding:var(--p-space-400); border-top:0; } .Polaris-LegacyCard__FirstSectionPadding{ padding-top:var(--p-space-400); } .Polaris-LegacyCard__LastSectionPadding{ padding-bottom:var(--p-space-400); } .Polaris-LegacyStack{ --pc-stack-spacing:var(--p-space-400); display:flex; flex-wrap:wrap; align-items:stretch; margin-top:calc(var(--pc-stack-spacing)*-1); margin-left:calc(var(--pc-stack-spacing)*-1); } .Polaris-LegacyStack > .Polaris-LegacyStack__Item{ margin-top:var(--pc-stack-spacing); margin-left:var(--pc-stack-spacing); max-width:100%; } .Polaris-LegacyStack--noWrap{ flex-wrap:nowrap; } .Polaris-LegacyStack--spacingNone{ --pc-stack-spacing:0; } .Polaris-LegacyStack--spacingExtraTight{ --pc-stack-spacing:var(--p-space-100); } .Polaris-LegacyStack--spacingTight{ --pc-stack-spacing:var(--p-space-200); } .Polaris-LegacyStack--spacingBaseTight{ --pc-stack-spacing:var(--p-space-300); } .Polaris-LegacyStack--spacingLoose{ --pc-stack-spacing:var(--p-space-500); } .Polaris-LegacyStack--spacingExtraLoose{ --pc-stack-spacing:var(--p-space-800); } .Polaris-LegacyStack--distributionLeading{ justify-content:flex-start; } .Polaris-LegacyStack--distributionTrailing{ justify-content:flex-end; } .Polaris-LegacyStack--distributionCenter{ justify-content:center; } .Polaris-LegacyStack--distributionEqualSpacing{ justify-content:space-between; } .Polaris-LegacyStack--distributionFill > .Polaris-LegacyStack__Item{ flex:1 1 auto; } .Polaris-LegacyStack--distributionFillEvenly > .Polaris-LegacyStack__Item{ flex:1 1 auto; } @supports ((min-width: -webkit-fit-content) or (min-width: -moz-fit-content) or (min-width: fit-content)){ .Polaris-LegacyStack--distributionFillEvenly > .Polaris-LegacyStack__Item{ flex:1 0; min-width:-webkit-fit-content; min-width:-moz-fit-content; min-width:fit-content; } } .Polaris-LegacyStack--alignmentLeading{ align-items:flex-start; } .Polaris-LegacyStack--alignmentTrailing{ align-items:flex-end; } .Polaris-LegacyStack--alignmentCenter{ align-items:center; } .Polaris-LegacyStack--alignmentFill{ align-items:stretch; } .Polaris-LegacyStack--alignmentBaseline{ align-items:baseline; } .Polaris-LegacyStack--vertical{ flex-direction:column; margin-left:0; } .Polaris-LegacyStack--vertical > .Polaris-LegacyStack__Item{ margin-left:0; } .Polaris-LegacyStack__Item{ flex:0 0 auto; min-width:0; } .Polaris-LegacyStack__Item--fill{ flex:1 1 auto; } .Polaris-CalloutCard{ display:flex; align-items:center; } .Polaris-CalloutCard__Image{ display:none; flex:0 0 auto; width:6.25rem; } @media (min-width: 30.625em){ .Polaris-CalloutCard__Image{ display:block; margin-left:var(--p-space-500); } } .Polaris-CalloutCard__DismissImage{ margin-right:var(--p-space-500); } .Polaris-CalloutCard__Content{ flex:1 1 auto; } .Polaris-CalloutCard__Title{ margin-bottom:var(--p-space-200); } .Polaris-CalloutCard__Buttons{ margin-top:var(--p-space-200); } .Polaris-CalloutCard__Container{ position:relative; } .Polaris-CalloutCard__Dismiss{ right:var(--p-space-300); top:var(--p-space-400); position:absolute; } .Polaris-CalloutCard__Dismiss svg{ fill:var(--p-color-icon-secondary); } .Polaris-CalloutCard--hasDismiss{ padding-right:calc(var(--p-space-800) + var(--p-space-300)); } .Polaris-RadioButton{ position:relative; margin:var(--p-space-025); } .Polaris-RadioButton__Input{ position: absolute !important; top: 0; width: 0.0625rem !important; height: 0.0625rem !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; } .Polaris-RadioButton__Input:focus-visible + .Polaris-RadioButton__Backdrop{ outline:var(--p-border-width-050) solid var(--p-color-border-focus); outline-offset:var(--p-space-025); } .Polaris-RadioButton__Input:focus-visible + .Polaris-RadioButton__Backdrop::after{ border-radius:var(--p-border-radius-full); } .Polaris-RadioButton__Input:checked + .Polaris-RadioButton__Backdrop, .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input:checked + .Polaris-RadioButton__Backdrop{ border-color:var(--p-color-border-emphasis); } .Polaris-RadioButton__Input:checked + .Polaris-RadioButton__Backdrop::before, .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input:checked + .Polaris-RadioButton__Backdrop::before{ background-color:var(--p-color-text-brand-on-bg-fill); transition:opacity var(--p-motion-duration-150) var(--p-motion-ease-out), transform var(--p-motion-duration-150) var(--p-motion-ease-out); opacity:1; transform:translate(-50%, -50%) scale(1); } .Polaris-RadioButton__Input:checked:not([disabled]) + .Polaris-RadioButton__Backdrop, .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input:checked:not([disabled]) + .Polaris-RadioButton__Backdrop{ background-color:var(--p-color-bg-fill-brand-selected); border-color:var(--p-color-bg-fill-brand-selected); } .Polaris-RadioButton__Input.Polaris-RadioButton--toneMagic:checked:not([disabled]) + .Polaris-RadioButton__Backdrop, .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input.Polaris-RadioButton--toneMagic:checked:not([disabled]) + .Polaris-RadioButton__Backdrop{ background-color:var(--p-color-bg-fill-magic); border-color:var(--p-color-bg-fill-magic); } .Polaris-RadioButton__Input.Polaris-RadioButton--toneMagic:checked:not([disabled]) + .Polaris-RadioButton__Backdrop::before, .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input.Polaris-RadioButton--toneMagic:checked:not([disabled]) + .Polaris-RadioButton__Backdrop::before{ background-color:var(--p-color-text-magic-on-bg-fill); } .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input + .Polaris-RadioButton__Backdrop{ cursor:pointer; border-color:var(--p-color-input-border-hover); background:var(--p-color-input-bg-surface-hover); } .Polaris-RadioButton__ChoiceLabel:active .Polaris-RadioButton__Input + .Polaris-RadioButton__Backdrop{ border-color:var(--p-color-bg-fill-brand); border-width:var(--p-border-width-050); } .Polaris-RadioButton__Input:disabled + .Polaris-RadioButton__Backdrop, .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input:disabled + .Polaris-RadioButton__Backdrop{ cursor:default; background-color:var(--p-color-radio-button-bg-surface-disabled); border:none; } .Polaris-RadioButton__Input:disabled + .Polaris-RadioButton__Backdrop::before, .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input:disabled + .Polaris-RadioButton__Backdrop::before{ background-color:var(--p-color-border-disabled); } .Polaris-RadioButton__Input:disabled:checked + .Polaris-RadioButton__Backdrop::before, .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input:disabled:checked + .Polaris-RadioButton__Backdrop::before{ background-color:var(--p-color-radio-button-icon-disabled); } .Polaris-RadioButton__Backdrop{ --pc-icon-size-small:0.5rem; position:relative; top:0; left:0; display:block; width:100%; height:100%; border:var(--p-border-width-0165) solid var(--p-color-input-border); border-radius:var(--p-border-radius-full); background-color:var(--p-color-input-bg-surface); transition:border-color var(--p-motion-duration-100) var(--p-motion-ease-out); } @media (max-width: 47.9975em){ .Polaris-RadioButton__Backdrop{ --pc-icon-size-small:0.625rem; } } .Polaris-RadioButton__Backdrop::before{ content:''; position:absolute; top:50%; left:50%; opacity:0; transform:translate(-50%, -50%) scale(0.1); transform-origin:50% 50%; height:var(--pc-icon-size-small); width:var(--pc-icon-size-small); background-color:var(--p-color-bg-fill-brand); border-radius:var(--p-border-radius-full); transition:opacity var(--p-motion-duration-100) var(--p-motion-ease-out), transform var(--p-motion-duration-100) var(--p-motion-ease-out); } @media (forced-colors: active){ .Polaris-RadioButton__Backdrop::before{ border:var(--p-border-width-100) solid transparent; } } .Polaris-RadioButton__Backdrop{ position: relative; } .Polaris-RadioButton__Backdrop::after { content: ''; position: absolute; z-index: 1; top: calc(var(--p-border-width-050)*-1 + -0.0625rem); right: calc(var(--p-border-width-050)*-1 + -0.0625rem); bottom: calc(var(--p-border-width-050)*-1 + -0.0625rem); left: calc(var(--p-border-width-050)*-1 + -0.0625rem); display: block; pointer-events: none; box-shadow: 0 0 0 calc(var(--p-border-width-050)*-1 + -0.0625rem) var(--p-color-border-focus); border-radius: var(--p-border-radius-100); } .Polaris-RadioButton__Backdrop::after{ border-radius:var(--p-border-radius-full); } .Polaris-ChoiceList__ChoiceChildren{ padding-left:calc(var(--p-space-200) + 1.25rem); } .Polaris-Collapsible{ padding-top:0; padding-bottom:0; max-height:0; overflow:hidden; transition-property:max-height; transition-duration:var(--p-motion-duration-100); transition-timing-function:var(--p-motion-ease-out); } .Polaris-Collapsible--isFullyClosed{ display:none; } @media print{ .Polaris-Collapsible--expandOnPrint{ max-height:none !important; max-width:none !important; overflow:visible; display:block; } } .Polaris-Collapsible--inline{ max-height:none; transition-property:max-width; } .Polaris-Collapsible--inline.Polaris-Collapsible--animateIn{ max-width:0; } .Polaris-ColorPicker{ --pc-color-picker-size:10rem; --pc-color-picker-dragger-size:1.125rem; --pc-color-picker-z-index:10; --pc-color-picker-adjustments:20; --pc-color-picker-dragger:30; --pc-color-picker-inner-shadow:inset 0 0 0.125rem 0 rgba(0, 0, 0, 0.5); --pc-color-picker-dragger-shadow:inset 0 0.0625rem 0.125rem 0 rgba(33, 43, 54, 0.32), 0 0.0625rem 0.125rem 0 rgba(33, 43, 54, 0.32); --pc-color-picker-checkers:repeating-conic-gradient( var(--p-color-bg-surface) 0% 25%, var(--p-color-bg-surface-secondary) 0% 50% ) 50% / var(--p-space-400) var(--p-space-400); -webkit-user-select:none; user-select:none; display:flex; } .Polaris-ColorPicker__MainColor{ background:var(--pc-color-picker-checkers); position:relative; overflow:hidden; height:var(--pc-color-picker-size); width:var(--pc-color-picker-size); border-radius:var(--p-border-radius-100); cursor:pointer; } .Polaris-ColorPicker--fullWidth .Polaris-ColorPicker__MainColor{ width:auto; flex-grow:1; } .Polaris-ColorPicker__MainColor .Polaris-ColorPicker__Dragger{ right:calc(var(--pc-color-picker-dragger-size)*0.5); margin:0; box-shadow:var(--pc-color-picker-dragger-shadow); } .Polaris-ColorPicker__MainColor .Polaris-ColorPicker__ColorLayer{ border-radius:var(--p-border-radius-100); } .Polaris-ColorPicker__MainColor::after, .Polaris-ColorPicker__MainColor::before{ content:''; position:absolute; z-index:var(--pc-color-picker-adjustments); top:0; left:0; display:block; height:100%; width:100%; pointer-events:none; border-radius:var(--p-border-radius-100); } .Polaris-ColorPicker__MainColor::before{ background:linear-gradient(to right, white, transparent); } .Polaris-ColorPicker__MainColor::after{ background-image:linear-gradient(to top, black, transparent); box-shadow:var(--pc-color-picker-inner-shadow); } @media (-ms-high-contrast: active){ .Polaris-ColorPicker__MainColor{ outline:var(--p-border-width-025) solid windowText; } } .Polaris-ColorPicker__Dragger{ position:relative; z-index:var(--pc-color-picker-dragger); bottom:calc(var(--pc-color-picker-dragger-size)*0.5); transform:none; height:var(--pc-color-picker-dragger-size); width:var(--pc-color-picker-dragger-size); margin:0 auto; -webkit-backface-visibility:hidden; backface-visibility:hidden; will-change:transform; background:transparent; border:var(--p-border-radius-100) solid var(--p-color-bg-surface); border-radius:var(--p-border-radius-full); pointer-events:none; box-shadow:var(--pc-color-picker-dragger-shadow); } .Polaris-ColorPicker__HuePicker, .Polaris-ColorPicker__AlphaPicker{ --pc-color-picker-vertical-border-radius:calc(var(--pc-color-picker-size)*0.5); position:relative; overflow:hidden; height:var(--pc-color-picker-size); width:var(--p-space-600); margin-left:var(--p-space-200); border-width:var(--p-border-radius-100); border-radius:var(--pc-color-picker-vertical-border-radius); } .Polaris-ColorPicker__HuePicker::after, .Polaris-ColorPicker__AlphaPicker::after{ content:''; position:absolute; z-index:var(--pc-color-picker-adjustments); top:0; left:0; display:block; height:100%; width:100%; pointer-events:none; border-radius:var(--pc-color-picker-vertical-border-radius); box-shadow:var(--pc-color-picker-inner-shadow); } @media (-ms-high-contrast: active){ .Polaris-ColorPicker__HuePicker, .Polaris-ColorPicker__AlphaPicker{ outline:var(--p-border-width-025) solid windowText; } } .Polaris-ColorPicker__HuePicker{ background-image:linear-gradient( to bottom, red var(--pc-color-picker-dragger-size), yellow, lime, cyan, blue, magenta, red calc(var(--pc-color-picker-size) - var(--pc-color-picker-dragger-size)) ); } .Polaris-ColorPicker__AlphaPicker{ background:var(--pc-color-picker-checkers); } .Polaris-ColorPicker__ColorLayer{ position:absolute; z-index:var(--pc-color-picker-z-index); top:0; left:0; height:100%; width:100%; pointer-events:none; } .Polaris-ColorPicker__Slidable{ height:100%; width:100%; cursor:pointer; } .Polaris-InlineGrid{ --pc-inline-grid-gap-xs: initial; --pc-inline-grid-gap-sm: initial; --pc-inline-grid-gap-md: initial; --pc-inline-grid-gap-lg: initial; --pc-inline-grid-gap-xl: initial; gap: var(--pc-inline-grid-gap-xs); --pc-inline-grid-grid-template-columns-xs: initial; --pc-inline-grid-grid-template-columns-sm: initial; --pc-inline-grid-grid-template-columns-md: initial; --pc-inline-grid-grid-template-columns-lg: initial; --pc-inline-grid-grid-template-columns-xl: initial; grid-template-columns: var(--pc-inline-grid-grid-template-columns-xs); --pc-inline-grid-align-items:initial; display:grid; align-items:var(--pc-inline-grid-align-items); } @media (min-width: 30.625em) { .Polaris-InlineGrid{ gap: var( --pc-inline-grid-gap-sm, var(--pc-inline-grid-gap-xs) ); } } @media (min-width: 48em) { .Polaris-InlineGrid{ gap: var( --pc-inline-grid-gap-md, var( --pc-inline-grid-gap-sm, var(--pc-inline-grid-gap-xs) ) ); } } @media (min-width: 65em) { .Polaris-InlineGrid{ gap: var( --pc-inline-grid-gap-lg, var( --pc-inline-grid-gap-md, var( --pc-inline-grid-gap-sm, var(--pc-inline-grid-gap-xs) ) ) ); } } @media (min-width: 90em) { .Polaris-InlineGrid{ gap: var( --pc-inline-grid-gap-xl, var( --pc-inline-grid-gap-lg, var( --pc-inline-grid-gap-md, var( --pc-inline-grid-gap-sm, var(--pc-inline-grid-gap-xs) ) ) ) ); } } @media (min-width: 30.625em) { .Polaris-InlineGrid{ grid-template-columns: var( --pc-inline-grid-grid-template-columns-sm, var(--pc-inline-grid-grid-template-columns-xs) ); } } @media (min-width: 48em) { .Polaris-InlineGrid{ grid-template-columns: var( --pc-inline-grid-grid-template-columns-md, var( --pc-inline-grid-grid-template-columns-sm, var(--pc-inline-grid-grid-template-columns-xs) ) ); } } @media (min-width: 65em) { .Polaris-InlineGrid{ grid-template-columns: var( --pc-inline-grid-grid-template-columns-lg, var( --pc-inline-grid-grid-template-columns-md, var( --pc-inline-grid-grid-template-columns-sm, var(--pc-inline-grid-grid-template-columns-xs) ) ) ); } } @media (min-width: 90em) { .Polaris-InlineGrid{ grid-template-columns: var( --pc-inline-grid-grid-template-columns-xl, var( --pc-inline-grid-grid-template-columns-lg, var( --pc-inline-grid-grid-template-columns-md, var( --pc-inline-grid-grid-template-columns-sm, var(--pc-inline-grid-grid-template-columns-xs) ) ) ) ); } } .Polaris-Pagination button{ border:none !important; box-shadow:none !important; background-color:var(--p-color-bg-fill-tertiary); } .Polaris-Pagination button:hover{ background-color:var(--p-color-bg-fill-tertiary-hover); } .Polaris-Pagination button:active{ box-shadow:var(--p-shadow-inset-200) !important; } .Polaris-Pagination button:active, .Polaris-Pagination button:focus{ background-color:var(--p-color-bg-fill-tertiary-active); } .Polaris-Pagination.Polaris-Pagination--table{ border-top:0.0625rem solid var(--p-color-border); } .Polaris-Pagination.Polaris-Pagination--table button{ --button-min-height:var(--p-height-700); background-color:var(--p-color-bg-surface-secondary-selected); min-height:var(--button-min-height); min-width:var(--button-min-height); height:var(--button-min-height); width:var(--button-min-height); display:flex; padding:unset; } .Polaris-Pagination.Polaris-Pagination--table button:hover{ background-color:var(--p-color-bg-fill-tertiary-hover); } .Polaris-Pagination.Polaris-Pagination--table button:hover svg{ fill:var(--p-color-icon-hover); } .Polaris-Pagination.Polaris-Pagination--table button:active, .Polaris-Pagination.Polaris-Pagination--table button:focus{ background-color:var(--p-color-bg-fill-tertiary-active); } .Polaris-Pagination.Polaris-Pagination--table button:active svg, .Polaris-Pagination.Polaris-Pagination--table button:focus svg{ fill:var(--p-color-icon-active); } .Polaris-Pagination.Polaris-Pagination--table button:disabled svg{ fill:var(--p-color-icon-disabled); } .Polaris-Pagination__TablePaginationActions{ display:flex; gap:var(--p-space-025); align-items:center; justify-content:center; } .Polaris-DataTable{ --pc-data-table-first-column-width:9.0625rem; position:relative; max-width:100vw; background-color:var(--p-color-bg-surface); border-radius:0; overflow:hidden; } @media (min-width: 30.625em){ .Polaris-DataTable{ border-radius:var(--p-border-radius-300); } } .Polaris-DataTable--condensed .Polaris-DataTable__Navigation{ display:flex; align-items:center; justify-content:center; width:100%; padding:var(--p-space-400) var(--p-space-300); } @media (min-width: 48em){ .Polaris-DataTable--condensed .Polaris-DataTable__Navigation{ justify-content:flex-end; } } .Polaris-DataTable__Navigation{ display:none; } .Polaris-DataTable__Pip{ height:0.375rem; width:0.375rem; background:var(--p-color-icon-secondary); border-radius:var(--p-border-radius-100); } .Polaris-DataTable__Pip:not(:last-of-type){ margin-right:var(--p-space-100); } .Polaris-DataTable__Pip:first-of-type{ margin-left:var(--p-space-100); } .Polaris-DataTable__Pip:last-of-type{ margin-right:var(--p-space-100); } .Polaris-DataTable__Pip--visible{ background:var(--p-color-icon); } .Polaris-DataTable__ScrollContainer{ overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-behavior:smooth; background-color:inherit; } .Polaris-DataTable__Table{ width:100%; border-spacing:0; } .Polaris-DataTable__TableRow + .Polaris-DataTable__TableRow .Polaris-DataTable__Cell{ border-top:var(--p-border-width-025) solid var(--p-color-border-secondary); } .Polaris-DataTable__Cell{ font-weight:var(--p-font-weight-regular); color:var(--p-color-text); white-space:nowrap; text-align:left; transition:background-color var(--p-motion-duration-200) var(--p-motion-ease-in-out); padding:var(--p-space-200) var(--p-space-150); } .Polaris-DataTable__Cell:first-child{ padding-left:var(--p-space-300); } .Polaris-DataTable__Cell:last-child{ padding-right:var(--p-space-300); } .Polaris-DataTable__IncreasedTableDensity .Polaris-DataTable__Cell{ padding:var(--p-space-150); } .Polaris-DataTable__IncreasedTableDensity .Polaris-DataTable__Cell:first-child{ padding-left:var(--p-space-300); } .Polaris-DataTable__IncreasedTableDensity .Polaris-DataTable__Cell:last-child{ padding-right:var(--p-space-300); } .Polaris-DataTable__ZebraStripingOnData .Polaris-DataTable__TableRow:nth-child(2n + 1) .Polaris-DataTable__Cell, .Polaris-DataTable__ZebraStripingOnData.Polaris-DataTable__RowCountIsEven .Polaris-DataTable__TableRow:nth-child(2n) .Polaris-DataTable__Cell, .Polaris-DataTable__ZebraStripingOnData.Polaris-DataTable__ShowTotalsInFooter .Polaris-DataTable__TableRow:nth-child(2n) .Polaris-DataTable__Cell, .Polaris-DataTable__ZebraStripingOnData.Polaris-DataTable__ShowTotalsInFooter.Polaris-DataTable__RowCountIsEven .Polaris-DataTable__TableRow:nth-child(2n + 1) .Polaris-DataTable__Cell{ background:none; } .Polaris-DataTable__ZebraStripingOnData .Polaris-DataTable__TableRow:nth-child(2n) .Polaris-DataTable__Cell, .Polaris-DataTable__ZebraStripingOnData.Polaris-DataTable__RowCountIsEven .Polaris-DataTable__TableRow:nth-child(2n + 1) .Polaris-DataTable__Cell, .Polaris-DataTable__ZebraStripingOnData.Polaris-DataTable__ShowTotalsInFooter .Polaris-DataTable__TableRow:nth-child(2n + 1) .Polaris-DataTable__Cell, .Polaris-DataTable__ZebraStripingOnData.Polaris-DataTable__ShowTotalsInFooter.Polaris-DataTable__RowCountIsEven .Polaris-DataTable__TableRow:nth-child(2n) .Polaris-DataTable__Cell{ background:var(--p-color-bg-surface-secondary); } .Polaris-DataTable__Cell--separate::after{ content:''; position:absolute; top:0; right:0; bottom:0; border-right:var(--p-border-width-025) solid var(--p-color-border); } .Polaris-DataTable__Cell--firstColumn{ text-align:left; white-space:normal; } .Polaris-DataTable__Cell--numeric{ text-align:right; } .Polaris-DataTable__Cell--truncated{ white-space:nowrap; overflow-x:hidden; text-overflow:ellipsis; max-width:var(--pc-data-table-first-column-width); } .Polaris-DataTable__Cell--header{ font-weight:var(--p-font-weight-regular); color:var(--p-color-text); border-bottom:var(--p-border-width-025) solid var(--p-color-border); border-top:0; padding-top:var(--p-space-300); padding-bottom:var(--p-space-300); } .Polaris-DataTable__IncreasedTableDensity .Polaris-DataTable__Cell--header{ font-weight:var(--p-font-weight-regular); } .Polaris-DataTable__Cell--sortable{ padding:0; } .Polaris-DataTable__Cell--sortable:first-child{ padding-left:var(--p-space-200); } .Polaris-DataTable__Cell--sortable:last-child{ padding-right:var(--p-space-200); } .Polaris-DataTable__IncreasedTableDensity .Polaris-DataTable__Cell--sortable{ padding:0; } .Polaris-DataTable__IncreasedTableDensity .Polaris-DataTable__Cell--sortable:first-child{ padding-left:var(--p-space-200); } .Polaris-DataTable__IncreasedTableDensity .Polaris-DataTable__Cell--sortable:last-child{ padding-right:var(--p-space-200); } .Polaris-DataTable__IncreasedTableDensity .Polaris-DataTable__Cell--sortable .Polaris-DataTable__Heading--left{ padding-right:0; padding-left:var(--p-space-100); } .Polaris-DataTable__Cell--verticalAlignTop{ vertical-align:top; } .Polaris-DataTable__Cell--verticalAlignBottom{ vertical-align:bottom; } .Polaris-DataTable__Cell--verticalAlignMiddle{ vertical-align:middle; } .Polaris-DataTable__Cell--verticalAlignBaseline{ vertical-align:baseline; } @media (min-width: 48em){ .Polaris-DataTable--hoverable .Polaris-DataTable__Cell--hovered{ background:var(--p-color-bg-surface-hover); } } .Polaris-DataTable__Icon{ display:flex; align-self:flex-end; opacity:0; transition:opacity var(--p-motion-duration-200) var(--p-motion-ease); } .Polaris-DataTable__Heading{ -webkit-appearance:none; appearance:none; margin:0; padding:0; background:none; border:none; font-size:inherit; line-height:inherit; color:inherit; cursor:pointer; position: relative; position:relative; display:inline-flex; justify-content:flex-end; align-items:baseline; color:var(--p-color-text); transition:color var(--p-motion-duration-200) var(--p-motion-ease); cursor:pointer; margin:0.1875rem; padding:0.5625rem 0.1875rem; } .Polaris-DataTable__Heading:focus{ outline:none; } .Polaris-DataTable__Heading::after { content: ''; position: absolute; z-index: 1; top: -0.0625rem; right: -0.0625rem; bottom: -0.0625rem; left: -0.0625rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus); border-radius: var(--p-border-radius-100); } .Polaris-DataTable__Heading svg{ fill:var(--p-color-icon-disabled); } .Polaris-DataTable__StickyHeaderEnabled [data-sticky-active] .Polaris-DataTable__Heading{ visibility:hidden; } .Polaris-DataTable__StickyHeaderEnabled [data-sticky-active] .Polaris-DataTable__StickyHeaderWrapper .Polaris-DataTable__Heading{ visibility:visible; } .Polaris-DataTable__IncreasedTableDensity .Polaris-DataTable__Heading{ margin:0.1875rem; padding:0.1875rem; } .Polaris-DataTable__Heading:hover .Polaris-DataTable__Icon{ opacity:1; } .Polaris-DataTable__Heading:focus-visible:not(:active)::after { box-shadow: 0 0 0 0.125rem var(--p-color-border-focus); outline: var(--p-border-width-025) solid transparent; } .Polaris-DataTable__Heading:focus-visible:not(:active) .Polaris-DataTable__Icon{ opacity:1; } .Polaris-DataTable__Heading:focus-visible:not(:active) .Polaris-DataTable__Icon svg{ fill:var(--p-color-icon-disabled); } .Polaris-DataTable__Heading--left{ justify-content:flex-start; flex-direction:row-reverse; } .Polaris-DataTable__Cell--sorted .Polaris-DataTable__Icon{ opacity:1; } .Polaris-DataTable__Cell--sorted .Polaris-DataTable__Icon svg{ fill:var(--p-color-icon); } .Polaris-DataTable__Cell--sorted:hover svg{ fill:var(--p-color-icon); } .Polaris-DataTable__Cell--sorted .Polaris-DataTable__Heading:focus:not(:active) svg{ fill:var(--p-color-icon); } .Polaris-DataTable__Cell--total{ font-weight:var(--p-font-weight-semibold); background:var(--p-color-bg-surface-secondary); border-bottom:var(--p-border-width-025) solid var(--p-color-border); } .Polaris-DataTable__ZebraStripingOnData.Polaris-DataTable__ShowTotals .Polaris-DataTable__Cell--total{ background:var(--p-color-bg-surface-secondary); } .Polaris-DataTable__ZebraStripingOnData.Polaris-DataTable__ShowTotals.Polaris-DataTable__RowCountIsEven .Polaris-DataTable__Cell--total, .Polaris-DataTable__ZebraStripingOnData.Polaris-DataTable__ShowTotalsInFooter .Polaris-DataTable__Cell--total{ background:none; } .Polaris-DataTable--cellTotalFooter{ border-top:var(--p-border-width-025) solid var(--p-color-border); border-bottom:none; } .Polaris-DataTable__Footer{ padding:var(--p-space-200) var(--p-space-300); background:var(--p-color-bg-surface-secondary); color:var(--p-color-text-secondary); text-align:center; border-top:var(--p-border-width-025) solid var(--p-color-border); } .Polaris-DataTable__IncreasedTableDensity .Polaris-DataTable__Footer{ padding:var(--p-space-150) var(--p-space-300); } .Polaris-DataTable__ZebraStripingOnData .Polaris-DataTable__Footer{ background:none; } .Polaris-DataTable__StickyHeaderEnabled .Polaris-DataTable__StickyHeaderWrapper{ position:relative; top:0; left:0; right:0; visibility:hidden; z-index:var(--p-z-index-1); } .Polaris-DataTable__StickyHeaderEnabled .Polaris-DataTable__StickyHeaderInner{ position:absolute; display:flex; flex-direction:column; width:100%; overflow:hidden; border-spacing:0; } .Polaris-DataTable__StickyHeaderEnabled .Polaris-DataTable__StickyHeaderInner:not(.Polaris-DataTable__StickyHeaderInner--isSticky){ top:-624.9375rem; left:-624.9375rem; } .Polaris-DataTable__StickyHeaderEnabled .Polaris-DataTable__StickyHeaderTable{ border-collapse:collapse; display:block; overflow-x:auto; width:100%; scrollbar-width:none; } .Polaris-DataTable__StickyHeaderEnabled .Polaris-DataTable__StickyHeaderTable::-webkit-scrollbar{ -webkit-appearance:none; appearance:none; height:0; width:0; } .Polaris-DataTable__StickyHeaderEnabled .Polaris-DataTable__StickyHeaderTable .Polaris-DataTable__FixedFirstColumn{ bottom:0; top:auto; padding-left:var(--p-space-300); } .Polaris-DataTable__StickyHeaderEnabled .Polaris-DataTable__StickyTableHeadingsRow{ background-color:var(--p-color-bg-surface); } .Polaris-DataTable__StickyHeaderEnabled .Polaris-DataTable__StickyHeaderInner--isSticky{ visibility:visible; background-color:var(--p-color-bg-surface); box-shadow:var(--p-shadow-100); } .Polaris-DataTable__FixedFirstColumn{ position:absolute; background:inherit; z-index:3; border-spacing:0; top:0; left:0; } @media (max-width: 47.9975em){ .Polaris-DataTable__FixedFirstColumn{ z-index:1; } } .Polaris-DataTable__TooltipContent{ display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .Polaris-DatePicker{ --pc-date-picker-range-end-border-radius:var(--p-border-radius-200); position:relative; } .Polaris-DatePicker__MonthLayout{ display:flex; flex-wrap:wrap; margin-top:calc(var(--p-space-400)*-1); margin-left:calc(var(--p-space-400)*-1); } .Polaris-DatePicker__MonthContainer{ flex:1 1 14.375rem; margin-top:var(--p-space-400); margin-left:var(--p-space-400); max-width:calc(100% - var(--p-space-400)); min-width:14.375rem; } .Polaris-DatePicker__Month{ width:100%; table-layout:fixed; border-collapse:collapse; border:none; border-spacing:0; } .Polaris-DatePicker__DayCell{ width:14.28571%; background:transparent; margin:0; padding:0; border-radius:var(--p-border-radius-100); } .Polaris-DatePicker__DayCell--inRange{ border-radius:0; } .Polaris-DatePicker__Day{ display:block; height:100%; width:100%; margin:0; padding:var(--p-space-200); background:transparent; border:none; border-radius:var(--p-border-radius-200); outline:none; color:var(--p-color-text); cursor:pointer; } .Polaris-DatePicker__Day:hover{ background:var(--p-color-bg-fill-brand-hover); color:var(--p-color-text-brand-on-bg-fill); outline:var(--p-border-width-025) solid transparent; } .Polaris-DatePicker__Day{ position: relative; } .Polaris-DatePicker__Day::after { content: ''; position: absolute; z-index: 1; top: -0.0625rem; right: -0.0625rem; bottom: -0.0625rem; left: -0.0625rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus); border-radius: var(--p-border-radius-100); } .Polaris-DatePicker__Day:focus-visible:not(:active)::after { box-shadow: 0 0 0 0.125rem var(--p-color-border-focus); outline: var(--p-border-width-025) solid transparent; } .Polaris-DatePicker__Day--inRange{ background:var(--p-color-bg-surface-brand-selected); border-radius:0; } @media (-ms-high-contrast: active){ .Polaris-DatePicker__Day--inRange{ -ms-high-contrast-adjust:none; background-color:Highlight; color:HighlightText; } .Polaris-DatePicker__Day--inRange:hover{ background-color:HighlightText; color:Highlight; outline:var(--p-border-width-050) solid Highlight; } } .Polaris-DatePicker__Day--selected{ background:var(--p-color-bg-fill-brand-selected); color:var(--p-color-text-brand-on-bg-fill); } @media (-ms-high-contrast: active){ .Polaris-DatePicker__Day--selected{ -ms-high-contrast-adjust:none; background-color:Highlight; color:HighlightText; } .Polaris-DatePicker__Day--selected:hover{ background-color:HighlightText; color:Highlight; outline:var(--p-border-width-050) solid Highlight; } } .Polaris-DatePicker__Day--disabled{ background-color:transparent; color:var(--p-color-text-disabled); } .Polaris-DatePicker__Day--disabled:hover{ background-color:transparent; color:var(--p-color-text-disabled); } @media (-ms-high-contrast){ .Polaris-DatePicker__Day--disabled{ -ms-high-contrast-adjust:none; color:grayText; } .Polaris-DatePicker__Day--disabled:hover{ color:grayText; outline:none; } } .Polaris-DatePicker__Day--disabled:focus::after{ content:none; } .Polaris-DatePicker__EmptyDayCell{ width:14.28571%; margin:0; padding:0; } .Polaris-DatePicker__Weekday{ padding:var(--p-space-200); background:transparent; } .Polaris-DatePicker__Header{ position:absolute; top:var(--p-space-400); display:flex; justify-content:space-between; width:100%; } .Polaris-DatePicker__Title{ flex:1 1 auto; padding-bottom:var(--p-space-100); } .Polaris-DatePicker__Day--firstInRange{ border-radius:var(--p-border-radius-200); } .Polaris-DatePicker__Day--firstInRange.Polaris-DatePicker__Day--hasRange, .Polaris-DatePicker__Day--firstInRange.Polaris-DatePicker__Day--hoverRight{ border-radius:var(--pc-date-picker-range-end-border-radius) 0 0 var(--pc-date-picker-range-end-border-radius); } .Polaris-DatePicker__Day--firstInRange.Polaris-DatePicker__Day--hasRange::after, .Polaris-DatePicker__Day--firstInRange.Polaris-DatePicker__Day--hoverRight::after{ border-radius:var(--pc-date-picker-range-end-border-radius) 0 0 var(--pc-date-picker-range-end-border-radius); } .Polaris-DatePicker__Day--lastInRange{ border-radius:0 var(--pc-date-picker-range-end-border-radius) var(--pc-date-picker-range-end-border-radius) 0; } .Polaris-DatePicker__Day--lastInRange::after{ border-radius:0 var(--pc-date-picker-range-end-border-radius) var(--pc-date-picker-range-end-border-radius) 0; } .Polaris-DatePicker__Week{ margin-bottom:var(--p-space-050); } .Polaris-DatePicker__Week > .Polaris-DatePicker__Day--inRange:first-child:not(.Polaris-DatePicker__Day--firstInRange):not(.Polaris-DatePicker__Day--lastInRange){ border-radius:var(--p-border-radius-100) 0 0 var(--p-border-radius-100); } .Polaris-DatePicker__Week > .Polaris-DatePicker__Day--inRange:last-child:not(.Polaris-DatePicker__Day--firstInRange):not(.Polaris-DatePicker__Day--lastInRange){ border-radius:0 var(--p-border-radius-100) var(--p-border-radius-100) 0; } .Polaris-DatePicker__Day--inRange::after, .Polaris-DatePicker__Day--inRange:not(:hover) + .Polaris-DatePicker__Day::after{ border-radius:0 var(--pc-date-picker-range-end-border-radius) var(--pc-date-picker-range-end-border-radius) 0; } .Polaris-DescriptionList{ margin:0; padding:0; word-break:break-word; } @media (min-width: 30.625em){ .Polaris-DescriptionList{ display:flex; flex-wrap:wrap; align-items:flex-start; } } .Polaris-DescriptionList__Term{ font-weight:var(--p-font-weight-semibold); padding:var(--p-space-400) 0 var(--p-space-200); } .Polaris-DescriptionList--spacingTight .Polaris-DescriptionList__Term{ padding:var(--p-space-200) 0 var(--p-space-100); } @media (min-width: 30.625em){ .Polaris-DescriptionList__Term{ flex:0 1 25%; padding:var(--p-space-400) var(--p-space-400) var(--p-space-400) 0; } .Polaris-DescriptionList--spacingTight .Polaris-DescriptionList__Term{ padding:var(--p-space-200) var(--p-space-200) var(--p-space-200) 0; } .Polaris-DescriptionList__Description + .Polaris-DescriptionList__Term + .Polaris-DescriptionList__Description{ border-top:var(--p-border-width-025) solid var(--p-color-border-secondary); } } .Polaris-DescriptionList__Description{ margin-left:0; padding:0 0 var(--p-space-400); } .Polaris-DescriptionList--spacingTight .Polaris-DescriptionList__Description{ padding:0 0 var(--p-space-200); } .Polaris-DescriptionList__Description + .Polaris-DescriptionList__Term{ border-top:var(--p-border-width-025) solid var(--p-color-border-secondary); } @media (min-width: 30.625em){ .Polaris-DescriptionList__Description{ flex:1 1 51%; padding:var(--p-space-400) 0; } .Polaris-DescriptionList--spacingTight .Polaris-DescriptionList__Description{ padding:var(--p-space-200) 0; } .Polaris-DescriptionList__Description + .Polaris-DescriptionList__Term + .Polaris-DescriptionList__Description{ border-top:var(--p-border-width-025) solid var(--p-color-border-secondary); } } .Polaris-Divider{ border:0; margin:0; } .Polaris-DropZone-FileUpload{ padding:var(--p-space-300); text-align:center; display:flex; align-items:center; justify-content:center; height:100%; } .Polaris-DropZone-FileUpload--large{ padding:var(--p-space-800); } .Polaris-DropZone-FileUpload--small{ padding:var(--p-space-200); } .Polaris-DropZone-FileUpload img{ vertical-align:bottom; } .Polaris-DropZone-FileUpload__ActionTitle{ color:var(--p-color-text-emphasis); text-decoration:none; } .Polaris-DropZone-FileUpload__ActionTitle:not(.Polaris-DropZone-FileUpload__ActionTitle--disabled){ cursor:pointer; } .Polaris-DropZone-FileUpload__ActionTitle:not(.Polaris-DropZone-FileUpload__ActionTitle--disabled):hover, .Polaris-DropZone-FileUpload__ActionTitle:not(.Polaris-DropZone-FileUpload__ActionTitle--disabled):active{ color:var(--p-color-text-emphasis-active); text-decoration:underline; } .Polaris-DropZone-FileUpload__ActionTitle--focused{ text-decoration:underline; } .Polaris-DropZone-FileUpload__ActionTitle--disabled{ color:var(--p-color-text-disabled); } .Polaris-DropZone-FileUpload__UploadIcon{ fill:var(--p-color-icon); } .Polaris-DropZone-FileUpload__UploadIcon.Polaris-DropZone-FileUpload--disabled{ fill:var(--p-color-icon-disabled); } .Polaris-DropZone{ --pc-drop-zone-outline:29; --pc-drop-zone-overlay:30; --pc-drop-zone-border-style:dashed; position:relative; display:flex; justify-content:center; background-color:var(--p-color-input-bg-surface); border-radius:var(--p-border-radius-200); } .Polaris-DropZone::after{ content:''; position:absolute; z-index:var(--pc-drop-zone-outline); top:0; right:0; bottom:0; left:0; border:var(--p-border-width-0165) var(--pc-drop-zone-border-style) transparent; border-radius:var(--p-border-radius-200); pointer-events:none; } .Polaris-DropZone:not(.Polaris-DropZone--focused)::after{ top:0; left:0; right:0; bottom:0; opacity:1; transform:scale(1); border:var(--p-border-width-025) var(--pc-drop-zone-border-style) transparent; } .Polaris-DropZone:hover{ outline:var(--p-border-width-025) solid transparent; } .Polaris-DropZone.Polaris-DropZone--noOutline{ background-color:transparent; } .Polaris-DropZone--hasOutline{ padding:var(--p-space-025); } .Polaris-DropZone--hasOutline:not(.Polaris-DropZone--isDisabled)::after{ border-width:var(--p-border-width-0165); border-color:var(--p-color-input-border); } .Polaris-DropZone--hasOutline:not(.Polaris-DropZone--isDisabled):hover{ cursor:pointer; background-color:var(--p-color-input-bg-surface-hover); } .Polaris-DropZone--hasOutline:not(.Polaris-DropZone--isDisabled):hover::after{ border-color:var(--p-color-input-border-hover); } .Polaris-DropZone--isDragging:not(.Polaris-DropZone--isDisabled){ background-color:var(--p-color-bg-surface-hover); } .Polaris-DropZone--isDisabled{ cursor:not-allowed; background-color:var(--p-color-bg-surface-disabled); color:var(--p-color-text-disabled); } .Polaris-DropZone--isDisabled::after{ border-color:var(--p-color-border-disabled); } .Polaris-DropZone--sizeLarge{ min-height:7.5rem; } .Polaris-DropZone--sizeMedium{ min-height:6.25rem; align-items:center; } .Polaris-DropZone--sizeSmall{ padding:0; align-items:center; min-height:2.5rem; } .Polaris-DropZone--sizeSmall::before{ content:''; padding-top:100%; } .Polaris-DropZone--measuring{ visibility:hidden; min-height:0; } .Polaris-DropZone__Container{ position: relative; flex:1 1; } .Polaris-DropZone__Container::after { content: ''; position: absolute; z-index: 1; top: calc(var(--p-border-width-025)*-1 + -0.0625rem); right: calc(var(--p-border-width-025)*-1 + -0.0625rem); bottom: calc(var(--p-border-width-025)*-1 + -0.0625rem); left: calc(var(--p-border-width-025)*-1 + -0.0625rem); display: block; pointer-events: none; box-shadow: 0 0 0 calc(var(--p-border-width-025)*-1 + -0.0625rem) var(--p-color-border-focus); border-radius: var(--p-border-radius-200); } .Polaris-DropZone__Overlay{ position:absolute; border-radius:var(--p-border-radius-200); z-index:var(--pc-drop-zone-overlay); top:0; right:0; bottom:0; left:0; display:flex; justify-content:center; align-items:center; padding:var(--p-space-400); border:var(--p-border-width-025) solid var(--p-color-input-border-active); text-align:center; color:var(--p-color-text); background-color:var(--p-color-input-bg-surface-active); pointer-events:none; } .Polaris-DropZone--sizeSmall .Polaris-DropZone__Overlay{ padding:0; } .Polaris-DropZone--hasError > .Polaris-DropZone__Overlay{ border-color:var(--p-color-border-critical-secondary); color:var(--p-color-text-critical); border-style:var(--pc-drop-zone-border-style); border-width:var(--p-border-width-0165); background-color:var(--p-color-bg-surface-critical); } .Polaris-DropZone--focused:not(.Polaris-DropZone--isDisabled) .Polaris-DropZone__Container::after { box-shadow: 0 0 0 0.125rem var(--p-color-border-focus); outline: var(--p-border-width-025) solid transparent; } .Polaris-EmptyState__ImageContainer{ position:relative; display:flex; align-items:center; justify-content:center; } .Polaris-EmptyState__Image{ opacity:0; transition:opacity var(--p-motion-duration-150) var(--p-motion-ease); z-index:var(--p-z-index-1); } .Polaris-EmptyState__Image.Polaris-EmptyState--loaded{ opacity:1; } @media (min-width: 48em){ .Polaris-EmptyState--imageContained{ position:initial; width:100%; } } .Polaris-EmptyState__SkeletonImageContainer{ --pc-empty-state-skeleton-image-container-size:14.125rem; height:var(--pc-empty-state-skeleton-image-container-size); width:var(--pc-empty-state-skeleton-image-container-size); display:flex; align-items:center; justify-content:center; } .Polaris-EmptyState__SkeletonImage{ position:absolute; z-index:var(--p-z-index-0); --pc-empty-state-skeleton-image-size:9.0625rem; height:var(--pc-empty-state-skeleton-image-size); width:var(--pc-empty-state-skeleton-image-size); background-color:var(--p-color-bg-fill-secondary); border-radius:var(--p-border-radius-full); opacity:1; transition:opacity var(--p-motion-duration-500) var(--p-motion-ease); } .Polaris-EmptyState__SkeletonImage.Polaris-EmptyState--loaded{ opacity:0; } @media screen and (-ms-high-contrast: active){ .Polaris-EmptyState__SkeletonImage{ background-color:grayText; } } .Polaris-Truncate{ display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .Polaris-ExceptionList{ margin:0; padding:0; list-style:none; } .Polaris-ExceptionList__Item{ position:relative; padding-left:var(--p-space-600); color:var(--p-color-text-secondary); } .Polaris-ExceptionList__Item + .Polaris-ExceptionList__Item{ margin-top:var(--p-space-100); } .Polaris-ExceptionList__Icon{ position:absolute; top:0; left:0; display:flex; align-items:center; justify-content:center; min-width:var(--p-space-500); height:var(--p-space-500); margin-right:var(--p-space-100); } .Polaris-ExceptionList__Icon svg{ fill:var(--p-color-icon-secondary); } .Polaris-ExceptionList--statusWarning .Polaris-ExceptionList__Icon svg{ fill:var(--p-color-text-caution); } .Polaris-ExceptionList--statusCritical .Polaris-ExceptionList__Icon svg{ fill:var(--p-color-text-critical); } .Polaris-ExceptionList__Bullet{ width:0.375rem; height:0.375rem; border-radius:var(--p-border-radius-full); background-color:var(--p-color-icon-secondary); } .Polaris-ExceptionList--statusWarning .Polaris-ExceptionList__Bullet{ background-color:var(--p-color-text-caution); } .Polaris-ExceptionList--statusCritical .Polaris-ExceptionList__Bullet{ background-color:var(--p-color-text-critical); } .Polaris-ExceptionList__Title + .Polaris-ExceptionList__Description::before{ content:'–'; margin:0 var(--p-space-100); } .Polaris-ExceptionList--statusWarning .Polaris-ExceptionList__Title, .Polaris-ExceptionList--statusCritical .Polaris-ExceptionList__Title{ font-weight:var(--p-font-weight-medium); } .Polaris-ExceptionList--statusWarning .Polaris-ExceptionList__Title{ color:var(--p-color-text-caution); } .Polaris-ExceptionList--statusCritical .Polaris-ExceptionList__Title{ color:var(--p-color-text-critical); } .Polaris-Filters-FilterPill__FilterButton{ background:var(--p-color-bg-surface); border-radius:var(--p-border-radius-200); border:var(--p-color-border) dashed var(--p-border-width-025); cursor:pointer; color:var(--p-color-text); position: relative; } .Polaris-Filters-FilterPill__FilterButton::after { content: ''; position: absolute; z-index: 1; top: calc(var(--p-border-width-025)*-1 + -0.0625rem); right: calc(var(--p-border-width-025)*-1 + -0.0625rem); bottom: calc(var(--p-border-width-025)*-1 + -0.0625rem); left: calc(var(--p-border-width-025)*-1 + -0.0625rem); display: block; pointer-events: none; box-shadow: 0 0 0 calc(var(--p-border-width-025)*-1 + -0.0625rem) var(--p-color-border-focus); border-radius: var(--p-border-radius-100); } .Polaris-Filters-FilterPill__FilterButton.Polaris-Filters-FilterPill--focusedFilterButton:focus-within:not(:active)::after { box-shadow: 0 0 0 0.125rem var(--p-color-border-focus); outline: var(--p-border-width-025) solid transparent; } .Polaris-Filters-FilterPill__FilterButton:hover, .Polaris-Filters-FilterPill__FilterButton:focus, .Polaris-Filters-FilterPill__FilterButton:active{ background:var(--p-color-bg-surface-hover); border-color:var(--p-color-border); } .Polaris-Filters-FilterPill__FilterButton:hover path, .Polaris-Filters-FilterPill__FilterButton:focus path, .Polaris-Filters-FilterPill__FilterButton:active path{ fill:var(--p-color-icon-hover); } .Polaris-Filters-FilterPill__FilterButton:hover, .Polaris-Filters-FilterPill__FilterButton:active{ border-style:solid; } .Polaris-Filters-FilterPill__FilterButton:hover, .Polaris-Filters-FilterPill__FilterButton:focus{ background:transparent; } .Polaris-Filters-FilterPill__FilterButton:active{ background:var(--p-color-bg-surface-secondary); } .Polaris-Filters-FilterPill__FilterButton.Polaris-Filters-FilterPill__ActiveFilterButton{ background:var(--p-color-bg-surface); border-style:solid; } .Polaris-Filters-FilterPill__FilterButton.Polaris-Filters-FilterPill__ActiveFilterButton:active{ background:var(--p-color-bg-surface-secondary); } .Polaris-Filters-FilterPill__FilterButton::after{ border-radius:var(--p-border-radius-200); } .Polaris-Filters-FilterPill__PlainButton{ background:none; color:inherit; border:none; padding:0; font:inherit; cursor:inherit; outline:inherit; } .Polaris-Filters-FilterPill__PlainButton path{ fill:var(--p-color-icon); } .Polaris-Filters-FilterPill__PlainButton[aria-disabled='true'] path{ fill:var(--p-color-icon-disabled); } .Polaris-Filters-FilterPill__ToggleButton{ padding:0 var(--p-space-200) 0 var(--p-space-300); height:1.625rem; } @media (min-width: 48em){ .Polaris-Filters-FilterPill__ToggleButton{ padding:0 var(--p-space-100) 0 var(--p-space-200); height:1.375rem; } } .Polaris-Filters-FilterPill__ActiveFilterButton .Polaris-Filters-FilterPill__ToggleButton{ padding-right:var(--p-space-050); } @media (min-width: 48em){ .Polaris-Filters-FilterPill__ActiveFilterButton .Polaris-Filters-FilterPill__ToggleButton{ padding-right:0; } } .Polaris-Filters-FilterPill--clearButton{ position: relative; margin-right:var(--p-space-200); } .Polaris-Filters-FilterPill--clearButton::after { content: ''; position: absolute; z-index: 1; top: -0.0625rem; right: -0.0625rem; bottom: -0.0625rem; left: -0.0625rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus); border-radius: var(--p-border-radius-100); } @media (min-width: 48em){ .Polaris-Filters-FilterPill--clearButton{ margin-right:var(--p-space-100); } } .Polaris-Filters-FilterPill--clearButton:focus-visible:not(:active)::after { box-shadow: 0 0 0 0.125rem var(--p-color-border-focus); outline: var(--p-border-width-025) solid transparent; } @media (min-width: 48em){ .Polaris-Filters-FilterPill__IconWrapper{ scale:0.8; } } .Polaris-Filters-FilterPill__PopoverWrapper{ min-width:11.5625rem; max-width:18.75rem; word-break:break-word; } .Polaris-Filters-FilterPill__ClearButtonWrapper button{ min-height:0; padding:0; margin:0; } .Polaris-Filters__Container{ position:relative; z-index:30; border-bottom:var(--p-border-width-025) solid var(--p-color-border-secondary); border-top-left-radius:var(--p-border-radius-200); border-top-right-radius:var(--p-border-radius-200); background:var(--p-color-bg-surface); } @media (max-width: 30.6225em){ .Polaris-Filters__Container{ border-top-left-radius:0; border-top-right-radius:0; } } .Polaris-Filters__SearchField{ flex:1 1; } .Polaris-Filters__FiltersWrapper{ border-bottom:var(--p-border-width-025) solid var(--p-color-border-secondary); height:3.3125rem; overflow:hidden; } @media (max-width: 30.6225em){ .Polaris-Filters__FiltersWrapper{ background:var(--p-color-bg-surface); } } @media (min-width: 48em){ .Polaris-Filters__FiltersWrapper{ height:auto; overflow:visible; } } .Polaris-Filters--hideQueryField .Polaris-Filters__FiltersWrapper{ display:flex; align-items:center; } .Polaris-Filters__FiltersInner{ overflow:auto; white-space:nowrap; padding:var(--p-space-300) var(--p-space-200) var(--p-space-500); } .Polaris-Filters--hideQueryField .Polaris-Filters__FiltersInner{ flex:1 1; padding:var(--p-space-300); } @media (min-width: 48em){ .Polaris-Filters__FiltersInner{ overflow:visible; flex-wrap:wrap; gap:var(--p-space-200); padding:0.375rem var(--p-space-200); } .Polaris-Filters--hideQueryField .Polaris-Filters__FiltersInner{ flex:1 1; padding:0.375rem var(--p-space-200); } } .Polaris-Filters__AddFilter{ background:var(--p-color-bg-surface); border-radius:var(--p-border-radius-200); border:var(--p-color-border) dashed var(--p-border-width-025); padding:0 var(--p-space-200) 0 var(--p-space-300); height:1.75rem; cursor:pointer; display:flex; align-items:center; justify-content:center; outline:inherit; position: relative; } .Polaris-Filters__AddFilter::after { content: ''; position: absolute; z-index: 1; top: calc(var(--p-border-width-025)*-1 + -0.0625rem); right: calc(var(--p-border-width-025)*-1 + -0.0625rem); bottom: calc(var(--p-border-width-025)*-1 + -0.0625rem); left: calc(var(--p-border-width-025)*-1 + -0.0625rem); display: block; pointer-events: none; box-shadow: 0 0 0 calc(var(--p-border-width-025)*-1 + -0.0625rem) var(--p-color-border-focus); border-radius: var(--p-border-radius-100); } .Polaris-Filters__AddFilter path{ fill:var(--p-color-icon); } @media (min-width: 48em){ .Polaris-Filters__AddFilter{ height:1.5rem; padding:0 0.375rem 0 var(--p-space-200); } } .Polaris-Filters__AddFilter:hover, .Polaris-Filters__AddFilter:focus{ background:transparent; border-color:var(--p-color-border-hover); } .Polaris-Filters__AddFilter:hover path, .Polaris-Filters__AddFilter:focus path{ fill:var(--p-color-icon-hover); } .Polaris-Filters__AddFilter:hover{ border-style:solid; } .Polaris-Filters__AddFilter:focus{ outline-offset:var(--p-border-width-050); } .Polaris-Filters__AddFilter:active{ background:var(--p-color-bg-surface-tertiary); border-color:var(--p-color-border-hover); } .Polaris-Filters__AddFilter[aria-disabled='true']{ background:var(--p-color-bg-fill-disabled); border-color:transparent; color:var(--p-color-text-disabled); cursor:default; } .Polaris-Filters__AddFilter[aria-disabled='true'] path{ fill:var(--p-color-icon-disabled); } .Polaris-Filters__AddFilter:focus-visible:not(:active)::after { box-shadow: 0 0 0 0.125rem var(--p-color-border-focus); outline: var(--p-border-width-025) solid transparent; } .Polaris-Filters__AddFilter::after{ border-radius:var(--p-border-radius-200); } .Polaris-Filters__AddFilter span{ margin-right:var(--p-space-050); } @media (min-width: 48em){ .Polaris-Filters__AddFilter span{ margin-right:var(--p-space-025); } } .Polaris-Filters__AddFilter svg{ width:var(--p-space-500); } @media (min-width: 48em){ .Polaris-Filters__AddFilter svg{ width:var(--p-space-400); } } @media (max-width: 47.9975em){ .Polaris-Filters__FiltersWrapperWithAddButton{ position:relative; } .Polaris-Filters__FiltersWrapperWithAddButton .Polaris-Filters__FiltersInner{ padding:var(--p-space-200); padding-right:0; } .Polaris-Filters__AddFilterActivatorMultiple{ position:sticky; z-index:var(--p-z-index-1); top:0; right:0; display:flex; padding:var(--p-space-100) var(--p-space-400) var(--p-space-100) 0; background:var(--p-color-bg-surface); margin-left:var(--p-space-200); } .Polaris-Filters__AddFilterActivatorMultiple::before{ content:''; position:absolute; top:0; left:-0.75rem; width:0.75rem; height:100%; pointer-events:none; background:linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, var(--p-color-bg-surface) 70%, var(--p-color-bg-surface) 100% ); } .Polaris-Filters__AddFilterActivatorMultiple .Polaris-Filters__AddFilter{ padding:var(--p-space-300) var(--p-space-200); } .Polaris-Filters__AddFilterActivatorMultiple .Polaris-Filters__AddFilter span{ display:none; } } .Polaris-Filters__FiltersStickyArea{ position:relative; display:flex; gap:var(--p-space-100); flex-wrap:nowrap; align-items:center; justify-content:flex-start; } @media (min-width: 48em){ .Polaris-Filters__FiltersStickyArea{ flex-wrap:wrap; } } .Polaris-Filters__ClearAll{ margin-left:var(--p-space-200); } @media (max-width: 47.9975em){ .Polaris-Filters__ClearAll{ margin-left:0; padding-right:var(--p-space-400); } .Polaris-Filters__MultiplePinnedFilterClearAll{ transform:translateX(-0.5rem); position:relative; z-index:var(--p-z-index-1); margin-left:0; padding-right:var(--p-space-400); } } .Polaris-FooterHelp{ display:flex; justify-content:var(--pc-footer-help-align); margin:var(--p-space-500); width:auto; } .Polaris-FormLayout__Item{ --pc-form-layout-item-min-size:13.75rem; flex:1 1; } .Polaris-FormLayout__Item.Polaris-FormLayout--grouped{ min-width:var(--pc-form-layout-item-min-size); } @media (min-width: 0em) and (max-width: 30.6225em){ .Polaris-FormLayout__Item.Polaris-FormLayout--grouped{ min-width:100%; } } .Polaris-FormLayout__Item.Polaris-FormLayout--condensed{ flex-basis:calc(var(--pc-form-layout-item-min-size)*0.5); min-width:calc(var(--pc-form-layout-item-min-size)*0.5); } .Polaris-Frame-Toast{ display:inline-flex; max-width:31.25rem; padding:var(--p-space-200) var(--p-space-300); border-radius:var(--p-border-radius-100); background:var(--p-color-bg-inverse); color:var(--p-color-text-inverse); margin-bottom:var(--p-space-500); box-shadow:var(--p-shadow-500); position: relative; box-shadow: var(--p-shadow-400); border-radius: var(--p-border-radius-200); } .Polaris-Frame-Toast::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; box-shadow: var(--p-shadow-bevel-100); border-radius: var(--p-border-radius-200); pointer-events: none; mix-blend-mode: luminosity; } @media (min-width: 30.625em){ .Polaris-Frame-Toast{ padding:var(--p-space-300); } } @media (forced-colors: active){ .Polaris-Frame-Toast{ border:var(--p-border-width-050) solid transparent; } } .Polaris-Frame-Toast__Action{ margin-left:var(--p-space-400); color:var(--p-color-text-inverse); } .Polaris-Frame-Toast--error{ background:var(--p-color-bg-fill-critical); color:var(--p-color-text-critical-on-bg-fill); } .Polaris-Frame-Toast--error .Polaris-Frame-Toast__CloseButton{ color:var(--p-color-text-critical-on-bg-fill); } .Polaris-Frame-Toast__LeadingIcon{ margin-right:var(--p-space-150); } .Polaris-Frame-Toast__CloseButton{ display:flex; align-self:center; flex-direction:column; justify-content:flex-start; padding:0; border:none; -webkit-appearance:none; appearance:none; background:transparent; color:var(--p-color-icon-inverse); cursor:pointer; margin-left:var(--p-space-200); } .Polaris-Frame-Toast__CloseButton:focus{ outline:none; } .Polaris-Frame-Toast__CloseButton:focus, .Polaris-Frame-Toast__CloseButton:hover{ color:var(--p-color-text-inverse); } .Polaris-Frame-Toast--toneMagic{ background-color:var(--p-color-bg-fill-magic-secondary); color:var(--p-color-text-magic); } .Polaris-Frame-Toast--toneMagic .Polaris-Frame-Toast__CloseButton{ color:var(--p-color-text-magic); } .Polaris-Frame-Toast--toneMagic .Polaris-Frame-Toast__Action{ color:var(--p-color-text-magic); } .Polaris-Frame-Toast__WithActionOnComponent{ border:none; cursor:pointer; padding-right:var(--p-space-500); } .Polaris-Frame-Toast__WithActionOnComponent.Polaris-Frame-Toast--toneMagic:focus, .Polaris-Frame-Toast__WithActionOnComponent.Polaris-Frame-Toast--toneMagic:hover{ background-color:var(--p-color-bg-fill-magic-secondary-hover); } .Polaris-Frame-Toast__WithActionOnComponent.Polaris-Frame-Toast--toneMagic:active{ background-color:var(--p-color-bg-fill-magic-secondary-active); } :root{ --pc-toast-manager-translate-y-out:9.375rem; --pc-toast-manager-translate-y-in:0; --pc-toast-manager-scale-in:1; --pc-toast-manager-scale-out:0.9; --pc-toast-manager-blur-in:0; --pc-toast-manager-transition-delay-in:0s; } .Polaris-Frame-ToastManager{ position:fixed; z-index:var(--p-z-index-12); right:0; left:0; text-align:center; bottom:var(--pc-frame-global-ribbon-height); display:flex; flex-direction:column; align-items:center; } .Polaris-Frame-ToastManager__ToastWrapper{ position:absolute; display:inline-flex; opacity:0; transition:transform var(--p-motion-duration-400) var(--p-motion-ease-out), opacity var(--p-motion-duration-400) var(--p-motion-ease-out); transform:translateY(var(--pc-toast-manager-translate-y-out)); } .Polaris-Frame-ToastManager__ToastWrapper--enter, .Polaris-Frame-ToastManager__ToastWrapper--exit{ transition-timing-function:var(--p-motion-ease-in); transform:translateY(var(--pc-toast-manager-translate-y-out)) scale(var(--pc-toast-manager-scale-out)); opacity:0; } .Polaris-Frame-ToastManager__ToastWrapper--exit{ transition-duration:var(--p-motion-duration-200); } .Polaris-Frame-ToastManager--toastWrapperEnterDone{ transform:translateY(var(--pc-toast-manager-translate-y-in)) scale(var(--pc-toast-manager-scale-in)); filter:blur(var(--pc-toast-manager-blur-in)); opacity:1; transition-delay:var(--pc-toast-manager-transition-delay-in); } .Polaris-Frame-ToastManager--toastWrapperHoverable{ cursor:pointer; } .Polaris-Frame-Loading{ overflow:hidden; height:0.1875rem; background-color:var(--p-color-bg-surface); opacity:1; } .Polaris-Frame-Loading__Level{ width:100%; height:100%; transform-origin:0; background-color:var(--p-color-bg-fill-brand); transition:transform var(--p-motion-duration-500) linear; } @media screen and (-ms-high-contrast: active){ .Polaris-Frame-Loading__Level{ background-color:highlight; } } .Polaris-Modal-Dialog__Container{ position:fixed; z-index:var(--p-z-index-11); top:0; right:0; bottom:0; left:0; display:flex; flex-direction:column; justify-content:flex-end; pointer-events:none; } @media (min-width: 48em){ .Polaris-Modal-Dialog__Container{ justify-content:center; } } .Polaris-Modal-Dialog:focus{ outline:0; } .Polaris-Modal-Dialog__Modal{ --pc-modal-dialog-vertical-spacing:3.75rem; pointer-events:initial; position:fixed; right:0; bottom:0; left:0; display:flex; flex-direction:column; width:100%; max-height:calc(100vh - var(--pc-modal-dialog-vertical-spacing)); background:var(--p-color-bg-surface); box-shadow:var(--p-shadow-600); overflow:hidden; } @media (forced-colors: active){ .Polaris-Modal-Dialog__Modal{ border:var(--p-border-width-025) solid transparent; } } @media (max-width: 47.9975em){ .Polaris-Modal-Dialog__Modal{ bottom:0; max-height:100%; } } @media (min-width: 48em){ .Polaris-Modal-Dialog__Modal{ position:relative; max-width:38.75rem; margin:0 auto; border-radius:var(--p-border-radius-400); } } @media (min-width: 48em) and (min-height: 41.25em){ .Polaris-Modal-Dialog__Modal.Polaris-Modal-Dialog--limitHeight{ max-height:37.5rem; } } @media (min-width: 48em){ .Polaris-Modal-Dialog__Modal.Polaris-Modal-Dialog--sizeSmall{ max-width:23.75rem; } } @media (min-width: 48em){ .Polaris-Modal-Dialog__Modal.Polaris-Modal-Dialog--sizeLarge{ max-width:calc(100% - var(--p-space-1600)); } } @media (min-width: 65em){ .Polaris-Modal-Dialog__Modal.Polaris-Modal-Dialog--sizeLarge{ max-width:61.25rem; } } .Polaris-Modal-Dialog__Modal.Polaris-Modal-Dialog--sizeFullScreen{ height:100%; } @media (min-width: 48em){ .Polaris-Modal-Dialog__Modal.Polaris-Modal-Dialog--sizeFullScreen{ height:unset; } } .Polaris-Modal-Dialog--animateFadeUp{ -webkit-backface-visibility:hidden; backface-visibility:hidden; will-change:transform, opacity; opacity:1; transform:translateY(0); transition:transform var(--p-motion-ease) var(--p-motion-duration-200), opacity var(--p-motion-ease) var(--p-motion-duration-200); } .Polaris-Modal-Dialog--animateFadeUp.Polaris-Modal-Dialog--entering, .Polaris-Modal-Dialog--animateFadeUp.Polaris-Modal-Dialog--exiting, .Polaris-Modal-Dialog--animateFadeUp.Polaris-Modal-Dialog--exited{ opacity:0; transform:translateY(12.5rem); } .Polaris-Modal-Dialog--animateFadeUp.Polaris-Modal-Dialog--entered{ opacity:1; transform:translateY(0); } .Polaris-Modal-Section{ flex:0 0 auto; } .Polaris-Modal-Section:not(:last-of-type){ border-bottom:var(--p-border-width-025) solid var(--p-color-border-secondary); } .Polaris-Modal-Section--titleHidden{ padding-right:calc(var(--p-space-1200) + var(--p-space-100) + var(--p-space-100)); } .Polaris-Modal__Body, .Polaris-Modal__NoScrollBody{ flex-grow:1; } @media (min-width: 48em){ .Polaris-Modal__Body, .Polaris-Modal__NoScrollBody{ flex-grow:unset; } } .Polaris-Modal__IFrame{ --pc-modal-frame-small-width:38.75rem; display:block; width:var(--pc-modal-frame-small-width); max-width:100vw; border:none; } @media (min-width: 48em){ .Polaris-Modal__IFrame{ max-width:var(--pc-modal-frame-small-width); } } .Polaris-Frame-ContextualSaveBar{ --p-color-bg-surface:var(--p-color-bg-inverse); --p-color-text:var(--p-color-text-inverse); --p-color-bg-surface-hover:var(--p-color-bg-fill-inverse-hover); --p-color-bg-surface-secondary-active:var(--p-color-bg-fill-inverse-active); display:flex; height:var(--pg-top-bar-height); background:var(--p-color-bg-inverse); box-shadow:0 0.125rem 0.25rem rgba(0, 0, 0, 0.15); } .Polaris-Frame-ContextualSaveBar .Polaris-Frame-ContextualSaveBar__LogoContainer{ border-right:none; } .Polaris-Frame-ContextualSaveBar .Polaris-Frame-ContextualSaveBar__ContextControl{ opacity:0.3; pointer-events:none; } @media (forced-colors: active){ .Polaris-Frame-ContextualSaveBar{ border:var(--p-border-width-025) solid transparent; } } .Polaris-Frame-ContextualSaveBar__LogoContainer{ display:none; } @media (min-width: 48em){ .Polaris-Frame-ContextualSaveBar__LogoContainer{ display:flex; flex:0 0 var(--pg-layout-width-nav-base); align-items:center; height:100%; padding:0 var(--p-space-500); background-color:transparent; } } .Polaris-Frame-ContextualSaveBar__Contents{ display:flex; flex:1 1 auto; align-items:center; justify-content:space-between; min-width:0.0625rem; max-width:calc(var(--pg-layout-width-primary-max) + var(--pg-layout-width-secondary-max) + var(--pg-layout-width-inner-spacing-base)); height:100%; margin:0 auto; padding:0 var(--p-space-400); } @media (min-width: 30.625em){ .Polaris-Frame-ContextualSaveBar__Contents{ padding:0 var(--p-space-500); } } @media (min-width: 48em){ .Polaris-Frame-ContextualSaveBar__Contents{ padding:0 var(--p-space-800); } } .Polaris-Frame-ContextualSaveBar--fullWidth{ max-width:none; padding:0 var(--p-space-400); } .Polaris-Frame-ContextualSaveBar__MessageContainer{ display:flex; flex-direction:row; gap:var(--p-space-200); overflow:hidden; margin-right:var(--p-space-200); } .Polaris-Frame-ContextualSaveBar__MessageContainer [class*='Polaris-Icon__Svg']{ fill:var(--p-color-text-inverse); } .Polaris-Frame-ContextualSaveBar__MessageContainer [class*='Polaris-Icon']{ flex-shrink:0; } .Polaris-Frame-ContextualSaveBar__ActionContainer{ flex-shrink:0; } .Polaris-Frame-ContextualSaveBar__ActionContainer [class*='Polaris-Button--variantPrimary'], .Polaris-Frame-ContextualSaveBar__ActionContainer [class*='Button-variantPrimary']{ --pc-button-color:rgba(48, 48, 48, 1); --pc-button-color_disabled:var(--p-color-text-secondary); --pc-button-bg:rgba(255, 255, 255, 1); --pc-button-bg_hover:rgba(250, 250, 250, 1); --pc-button-bg_active:rgba(247, 247, 247, 1); --pc-button-bg_pressed:rgba(247, 247, 247, 1); --pc-button-bg_disabled:rgba(255, 255, 255, 0.2); --pc-button-box-shadow:0 0.0625rem 0 0 rgba(255, 255, 255, 0.48) inset, -0.0625rem 0 0 0 rgba(255, 255, 255, 0.2) inset, 0.0625rem 0 0 0 rgba(255, 255, 255, 0.2) inset, 0 -0.09375rem 0 0 rgba(0, 0, 0, 0.25) inset; --pc-button-box-shadow_active:0 0.125rem 0.0625rem 0 rgba(26, 26, 26, 0.2) inset, 0.0625rem 0 0.0625rem 0 rgba(26, 26, 26, 0.12) inset, -0.0625rem 0 0.0625rem 0 rgba(26, 26, 26, 0.12) inset; } .Polaris-Frame-ContextualSaveBar__ActionContainer [class*='Polaris-Button--variantTertiary'], .Polaris-Frame-ContextualSaveBar__ActionContainer [class*='Button-variantTertiary']{ --pc-button-bg:var(--p-color-bg-fill-inverse); --pc-button-bg_hover:var(--p-color-bg-fill-inverse-hover); --pc-button-bg_active:var(--p-color-bg-fill-inverse-active); --pc-button-bg_disabled:var(--pc-button-bg); --pc-button-color:var(--p-color-text-inverse); --pc-button-color_disabled:var(--p-color-text-secondary); } .Polaris-Frame-ContextualSaveBar__Action{ margin-left:var(--p-space-200); } .Polaris-Frame-ContextualSaveBar__ContextControl{ display:none; } @media (min-width: 48em){ .Polaris-Frame-ContextualSaveBar__ContextControl{ display:block; width:var(--pg-layout-width-nav-base); } } .Polaris-Frame-CSSAnimation--startFade{ opacity:0; -webkit-backface-visibility:hidden; backface-visibility:hidden; will-change:opacity; transition:opacity var(--p-motion-duration-300) var(--p-motion-ease-out); pointer-events:none; } .Polaris-Frame-CSSAnimation--endFade{ opacity:1; pointer-events:auto; } .Polaris-Frame{ --pc-frame-button-size:var(--p-space-800); --pc-sidebar-width:calc(22.25rem + var(--p-space-400)); width:100%; min-height:100vh; min-height:100svh; display:flex; background-color:var(--p-color-bg); } @media print{ .Polaris-Frame{ background-color:transparent; } } @media (min-width: 48em){ .Polaris-Frame{ width:calc(100% - var(--pc-frame-offset, 0px)); margin-left:var(--pc-frame-offset); } } .Polaris-Frame__ScrollbarAlwaysVisible{ --pc-scrollbar-spacer:var(--p-space-050); } .Polaris-Frame__Navigation{ position:fixed; z-index:var(--p-z-index-8); top:0; left:0; display:none; flex:0 0 auto; align-items:stretch; height:100%; outline:none; transform:translateX(0%); } @media print{ .Polaris-Frame__Navigation{ display:none !important; } } @media (min-width: 48em){ .Polaris-Frame__Navigation{ z-index:1; left:var(--pc-frame-offset); display:flex; } .Polaris-Frame--hasTopBar .Polaris-Frame__Navigation{ top:var(--pg-top-bar-height); height:calc(100% - var(--pg-top-bar-height)); } } .Polaris-Frame__Navigation:focus{ outline:none; } .Polaris-Frame__Navigation--enter, .Polaris-Frame__Navigation--enterActive, .Polaris-Frame__Navigation--exit, .Polaris-Frame__Navigation--exitActive{ display:flex; } .Polaris-Frame__Navigation--enter{ transform:translateX(-100%); } .Polaris-Frame__Navigation--enterActive{ transform:translateX(0%); transition:transform var(--p-motion-duration-300) var(--p-motion-ease-out); } .Polaris-Frame__Navigation--exit{ transform:translateX(0%); } .Polaris-Frame__Navigation--exitActive{ transform:translateX(-100%); transition:transform var(--p-motion-duration-300) var(--p-motion-ease-out); } .Polaris-Frame__NavigationDismiss{ position: relative; position:absolute; top:0; left:100%; width:var(--pc-frame-button-size); height:var(--pc-frame-button-size); margin:var(--p-space-400); padding:0; border:none; border-radius:var(--p-border-radius-full); background:none; opacity:0; pointer-events:none; -webkit-backface-visibility:hidden; backface-visibility:hidden; will-change:opacity; cursor:pointer; transition:opacity var(--p-motion-duration-100) var(--p-motion-ease); } .Polaris-Frame__NavigationDismiss::after { content: ''; position: absolute; z-index: 1; top: -0.0625rem; right: -0.0625rem; bottom: -0.0625rem; left: -0.0625rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus); border-radius: var(--p-border-radius-100); } .Polaris-Frame__NavigationDismiss svg{ fill:var(--p-color-bg-surface); } @media print{ .Polaris-Frame__NavigationDismiss{ display:none !important; } } .Polaris-Frame__Navigation--visible .Polaris-Frame__NavigationDismiss{ pointer-events:all; opacity:1; } .Polaris-Frame__NavigationDismiss:focus{ position:absolute; border-radius:var(--p-border-radius-100); outline:none; } .Polaris-Frame__NavigationDismiss:focus::after { box-shadow: 0 0 0 0.125rem var(--p-color-border-focus); outline: var(--p-border-width-025) solid transparent; } @media (min-width: 48em){ .Polaris-Frame__NavigationDismiss{ display:none; } } .Polaris-Frame__NavigationDismiss:hover{ background-color:rgba(255, 255, 255, 0.5); } .Polaris-Frame__NavigationDismiss:active{ background-color:rgba(255, 255, 255, 0.5); } .Polaris-Frame__TopBar{ position:fixed; z-index:var(--p-z-index-4); top:0; left:0; width:100%; height:var(--pg-top-bar-height); } @media print{ .Polaris-Frame__TopBar{ display:none !important; } } @media (min-width: 48em){ .Polaris-Frame__TopBar{ left:var(--pc-frame-offset); width:calc(100% - var(--pc-frame-offset, 0px)); } } .Polaris-Frame__ContextualSaveBar{ position:fixed; z-index:var(--p-z-index-5); top:0; left:0; width:100%; } @media (min-width: 48em){ .Polaris-Frame__ContextualSaveBar{ left:var(--pc-frame-offset); width:calc(100% - var(--pc-frame-offset, 0px)); } } .Polaris-Frame__Main{ flex:1 1; display:flex; align-items:stretch; border-inline-end:var(--p-border-width-025) solid var(--p-color-border); min-width:0; } @media (min-width: 30.625em){ .Polaris-Frame__Main{ max-width:calc(100vw - var(--pc-app-provider-scrollbar-width)); } } .Polaris-Frame__Main{ padding-right: 0; padding-right: calc(constant(safe-area-inset-right)); padding-right: calc(env(safe-area-inset-right)); padding-left: 0; padding-left: calc(constant(safe-area-inset-left)); padding-left: calc(env(safe-area-inset-left)); padding-bottom: 0; padding-bottom: calc(constant(safe-area-inset-bottom)); padding-bottom: calc(env(safe-area-inset-bottom)); } @media (min-width: 48em){ .Polaris-Frame--hasNav .Polaris-Frame__Main{ padding-left:var(--pg-layout-width-nav-base); padding-left: var(--pg-layout-width-nav-base); padding-left: calc(var(--pg-layout-width-nav-base) + constant(safe-area-inset-left)); padding-left: calc(var(--pg-layout-width-nav-base) + env(safe-area-inset-left)); } } .Polaris-Frame--hasTopBar .Polaris-Frame__Main{ padding-top:var(--pg-top-bar-height); } @media print{ .Polaris-Frame--hasTopBar .Polaris-Frame__Main{ padding-top:0; } } @media print{ .Polaris-Frame--hasNav .Polaris-Frame__Main{ padding-left:0; } } .Polaris-Frame__Content{ position:relative; padding-bottom:var(--pc-frame-global-ribbon-height, 0); flex:1 1; min-width:0; max-width:100%; } @media screen and (min-width: 1200px){ .Polaris-Frame--hasSidebar .Polaris-Frame__Content{ margin-right:var(--pc-sidebar-width); } } .Polaris-Frame__GlobalRibbonContainer{ position:fixed; z-index:var(--p-z-index-3); bottom:0; width:100%; } @media (min-width: 48em){ .Polaris-Frame__GlobalRibbonContainer{ left:var(--pc-frame-offset); } .Polaris-Frame--hasNav .Polaris-Frame__GlobalRibbonContainer{ left:calc(var(--pg-layout-width-nav-base) + var(--pc-frame-offset)); left: calc(var(--pg-layout-width-nav-base) + var(--pc-frame-offset)); left: calc(var(--pg-layout-width-nav-base) + var(--pc-frame-offset) + constant(safe-area-inset-left)); left: calc(var(--pg-layout-width-nav-base) + var(--pc-frame-offset) + env(safe-area-inset-left)); width:calc(100% - var(--pg-layout-width-nav-base) - var(--pc-frame-offset, 0px)); } } .Polaris-Frame__LoadingBar{ position:fixed; z-index:var(--p-z-index-6); top:0; right:0; left:0; } @media print{ .Polaris-Frame__LoadingBar{ display:none !important; } } @media (min-width: 48em){ .Polaris-Frame--hasNav .Polaris-Frame__LoadingBar{ left:var(--pc-frame-offset); } .Polaris-Frame--hasTopBar .Polaris-Frame__LoadingBar{ z-index:var(--p-z-index-6); } } .Polaris-Frame__Skip{ --pc-frame-skip-vertical-offset:0.625rem; position:fixed; z-index:var(--p-z-index-9); top:var(--pc-frame-skip-vertical-offset); left:calc(var(--p-space-200) + var(--pc-frame-offset)); opacity:0; pointer-events:none; } .Polaris-Frame__Skip.Polaris-Frame--focused{ pointer-events:all; opacity:1; } .Polaris-Frame__Skip.Polaris-Frame--focused > a::after { box-shadow: 0 0 0 0.125rem var(--p-color-border-focus); outline: var(--p-border-width-025) solid transparent; } .Polaris-Frame__Skip > a{ position: relative; position:relative; display:inline-flex; align-items:center; justify-content:center; min-height:1.75rem; min-width:1.75rem; margin:0; padding:var(--p-space-150) var(--p-space-300); background:var(--p-color-bg-fill); box-shadow:var(--p-shadow-200); border-radius:var(--p-border-radius-200); color:var(--p-color-text); border:none; line-height:1; text-align:center; cursor:pointer; -webkit-user-select:none; user-select:none; text-decoration:none; -webkit-tap-highlight-color:transparent; position: relative; color:var(--p-color-text); } .Polaris-Frame__Skip > a::after { content: ''; position: absolute; z-index: 1; top: calc(var(--p-border-width-025)*-1 + -0.0625rem); right: calc(var(--p-border-width-025)*-1 + -0.0625rem); bottom: calc(var(--p-border-width-025)*-1 + -0.0625rem); left: calc(var(--p-border-width-025)*-1 + -0.0625rem); display: block; pointer-events: none; box-shadow: 0 0 0 calc(var(--p-border-width-025)*-1 + -0.0625rem) var(--p-color-border-focus); border-radius: var(--p-border-radius-100); } .Polaris-Frame__Skip > a svg{ fill:var(--p-color-icon); } .Polaris-Frame__Skip > a:hover{ background:var(--p-color-bg-fill-hover); outline:var(--p-border-width-025) solid transparent; } .Polaris-Frame__Skip > a:focus-visible{ box-shadow:var(--p-shadow-200); outline:var(--p-border-width-050) solid var(--p-color-border-focus); outline-offset:var(--p-space-025); } .Polaris-Frame__Skip > a:focus-visible::after{ content:none; } .Polaris-Frame__Skip > a:active::after{ border:none; box-shadow:none; } .Polaris-Frame__Skip > a.Polaris-Frame--pressed{ background:var(--p-color-bg-fill-selected); box-shadow:var(--p-shadow-inset-200); color:var(--p-color-text); border-color:var(--p-color-border-inverse); } .Polaris-Frame__Skip > a.Polaris-Frame--pressed svg{ fill:currentColor; } .Polaris-Frame__Skip > a.Polaris-Frame--pressed:hover{ background:var(--p-color-bg-fill-tertiary-hover); box-shadow:var(--p-shadow-inset-200); } .Polaris-Frame__Skip > a.Polaris-Frame--pressed:active{ background:var(--p-color-bg-fill-tertiary-active); box-shadow:var(--p-shadow-inset-200); } @media (-ms-high-contrast: active){ .Polaris-Frame__Skip > a{ border:var(--p-border-width-025) solid windowText; } } .Polaris-Frame__Skip > a::after { content: ''; position: absolute; z-index: 1; top: -0.125rem; right: -0.125rem; bottom: -0.125rem; left: -0.125rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.125rem var(--p-color-border-focus); border-radius: var(--p-border-radius-100); } .Polaris-Frame__Skip > a:focus{ border-color:none; box-shadow:none; } .Polaris-FullscreenBar{ position:relative; display:flex; height:var(--pg-top-bar-height); box-shadow:var(--p-shadow-100); background-color:var(--p-color-bg-surface); } .Polaris-FullscreenBar__BackAction{ display:flex; flex:0 1 auto; align-items:center; padding-left:var(--p-space-400); padding-right:var(--p-space-400); border-width:0; border-right:var(--p-border-width-025) solid var(--p-color-border-secondary); background-color:var(--p-color-bg-surface); font-weight:var(--p-font-weight-medium); cursor:pointer; } .Polaris-FullscreenBar__BackAction :first-child{ margin-right:var(--p-space-150); } .Polaris-Grid-Cell{ --pc-row-xs:initial; --pc-row-sm:var(--pc-row-xs); --pc-row-md:var(--pc-row-sm); --pc-row-lg:var(--pc-row-md); --pc-row-xl:var(--pc-row-lg); --pc-column-xs:initial; --pc-column-sm:var(--pc-column-xs); --pc-column-md:var(--pc-column-sm); --pc-column-lg:var(--pc-column-md); --pc-column-xl:var(--pc-column-lg); min-width:0; grid-row:var(--pc-row-xs); grid-column:var(--pc-column-xs); } @media (min-width: 30.625em){ .Polaris-Grid-Cell{ grid-row:var(--pc-row-sm); grid-column:var(--pc-column-sm); } } @media (min-width: 48em){ .Polaris-Grid-Cell{ grid-row:var(--pc-row-md); grid-column:var(--pc-column-md); } } @media (min-width: 65em){ .Polaris-Grid-Cell{ grid-row:var(--pc-row-lg); grid-column:var(--pc-column-lg); } } @media (min-width: 90em){ .Polaris-Grid-Cell{ grid-row:var(--pc-row-xl); grid-column:var(--pc-column-xl); } } .Polaris-Grid-Cell--cell_1ColumnXs { grid-column-end: span 1; } .Polaris-Grid-Cell--cell_2ColumnXs { grid-column-end: span 2; } .Polaris-Grid-Cell--cell_3ColumnXs { grid-column-end: span 3; } .Polaris-Grid-Cell--cell_4ColumnXs { grid-column-end: span 4; } .Polaris-Grid-Cell--cell_5ColumnXs { grid-column-end: span 5; } .Polaris-Grid-Cell--cell_6ColumnXs { grid-column-end: span 6; } @media (min-width: 30.625em) { .Polaris-Grid-Cell--cell_1ColumnSm { grid-column-end: span 1; } .Polaris-Grid-Cell--cell_2ColumnSm { grid-column-end: span 2; } .Polaris-Grid-Cell--cell_3ColumnSm { grid-column-end: span 3; } .Polaris-Grid-Cell--cell_4ColumnSm { grid-column-end: span 4; } .Polaris-Grid-Cell--cell_5ColumnSm { grid-column-end: span 5; } .Polaris-Grid-Cell--cell_6ColumnSm { grid-column-end: span 6; } } @media (min-width: 48em) { .Polaris-Grid-Cell--cell_1ColumnMd { grid-column-end: span 1; } .Polaris-Grid-Cell--cell_2ColumnMd { grid-column-end: span 2; } .Polaris-Grid-Cell--cell_3ColumnMd { grid-column-end: span 3; } .Polaris-Grid-Cell--cell_4ColumnMd { grid-column-end: span 4; } .Polaris-Grid-Cell--cell_5ColumnMd { grid-column-end: span 5; } .Polaris-Grid-Cell--cell_6ColumnMd { grid-column-end: span 6; } } @media (min-width: 65em) { .Polaris-Grid-Cell--cell_1ColumnLg { grid-column-end: span 1; } .Polaris-Grid-Cell--cell_2ColumnLg { grid-column-end: span 2; } .Polaris-Grid-Cell--cell_3ColumnLg { grid-column-end: span 3; } .Polaris-Grid-Cell--cell_4ColumnLg { grid-column-end: span 4; } .Polaris-Grid-Cell--cell_5ColumnLg { grid-column-end: span 5; } .Polaris-Grid-Cell--cell_6ColumnLg { grid-column-end: span 6; } .Polaris-Grid-Cell--cell_7ColumnLg { grid-column-end: span 7; } .Polaris-Grid-Cell--cell_8ColumnLg { grid-column-end: span 8; } .Polaris-Grid-Cell--cell_9ColumnLg { grid-column-end: span 9; } .Polaris-Grid-Cell--cell_10ColumnLg { grid-column-end: span 10; } .Polaris-Grid-Cell--cell_11ColumnLg { grid-column-end: span 11; } .Polaris-Grid-Cell--cell_12ColumnLg { grid-column-end: span 12; } } @media (min-width: 90em) { .Polaris-Grid-Cell--cell_1ColumnXl { grid-column-end: span 1; } .Polaris-Grid-Cell--cell_2ColumnXl { grid-column-end: span 2; } .Polaris-Grid-Cell--cell_3ColumnXl { grid-column-end: span 3; } .Polaris-Grid-Cell--cell_4ColumnXl { grid-column-end: span 4; } .Polaris-Grid-Cell--cell_5ColumnXl { grid-column-end: span 5; } .Polaris-Grid-Cell--cell_6ColumnXl { grid-column-end: span 6; } .Polaris-Grid-Cell--cell_7ColumnXl { grid-column-end: span 7; } .Polaris-Grid-Cell--cell_8ColumnXl { grid-column-end: span 8; } .Polaris-Grid-Cell--cell_9ColumnXl { grid-column-end: span 9; } .Polaris-Grid-Cell--cell_10ColumnXl { grid-column-end: span 10; } .Polaris-Grid-Cell--cell_11ColumnXl { grid-column-end: span 11; } .Polaris-Grid-Cell--cell_12ColumnXl { grid-column-end: span 12; } } .Polaris-Grid{ --pc-grid-areas-xs:initial; --pc-grid-areas-sm:var(--pc-grid-areas-xs); --pc-grid-areas-md:var(--pc-grid-areas-sm); --pc-grid-areas-lg:var(--pc-grid-areas-md); --pc-grid-areas-xl:var(--pc-grid-areas-lg); --pc-grid-columns-xs:6; --pc-grid-columns-sm:var(--pc-grid-columns-xs); --pc-grid-columns-md:var(--pc-grid-columns-sm); --pc-grid-columns-lg:12; --pc-grid-columns-xl:var(--pc-grid-columns-lg); display:grid; gap:var(--pc-grid-gap-xs, var(--p-space-400)); grid-template-areas:var(--pc-grid-areas-xs); grid-template-columns:repeat(var(--pc-grid-columns-xs), minmax(0, 1fr)); } @media (min-width: 30.625em){ .Polaris-Grid{ gap:var(--pc-grid-gap-sm, var(--p-space-400)); grid-template-areas:var(--pc-grid-areas-sm); grid-template-columns:repeat(var(--pc-grid-columns-sm), minmax(0, 1fr)); } } @media (min-width: 48em){ .Polaris-Grid{ gap:var(--pc-grid-gap-md, var(--p-space-400)); grid-template-areas:var(--pc-grid-areas-md); grid-template-columns:repeat(var(--pc-grid-columns-md), minmax(0, 1fr)); } } @media (min-width: 65em){ .Polaris-Grid{ gap:var(--pc-grid-gap-lg, var(--p-space-400)); grid-template-areas:var(--pc-grid-areas-lg); grid-template-columns:repeat(var(--pc-grid-columns-lg), minmax(0, 1fr)); } } @media (min-width: 90em){ .Polaris-Grid{ gap:var(--pc-grid-gap-xl, var(--p-space-400)); grid-template-areas:var(--pc-grid-areas-xl); grid-template-columns:repeat(var(--pc-grid-columns-xl), minmax(0, 1fr)); } } :root{ --item-min-height:var(--p-space-400); --item-min-width:3.125rem; --item-vertical-padding:var(--p-space-200); } @media (max-width: 47.9975em){ .Polaris-Tabs__Outer{ max-width:100%; overflow:hidden; height:unset; padding:0; } } @media (max-width: 47.9975em){ .Polaris-Tabs__Wrapper{ overflow:auto; -webkit-overflow-scrolling:touch; padding:var(--p-space-200); } } @media (min-width: 48em){ .Polaris-Tabs__WrapperWithNewButton{ position:relative; display:inline-flex; padding-right:var(--p-space-800); } } @media (max-width: 47.9975em){ .Polaris-Tabs__ButtonWrapper{ display:flex; align-items:center; justify-content:flex-start; } } .Polaris-Tabs{ display:flex; align-items:center; justify-content:flex-start; margin:0; padding:0; list-style:none; gap:var(--p-space-100); } @media (min-width: 48em){ .Polaris-Tabs{ padding:0 var(--p-space-100); flex-wrap:wrap; align-items:stretch; } } .Polaris-Tabs__Tab{ position: relative; -webkit-tap-highlight-color:rgba(0, 0, 0, 0); position:relative; display:inline-flex; justify-content:center; align-items:center; padding:var(--p-space-100) var(--p-space-300); border:0; border-radius:var(--p-border-radius-200); background-color:transparent; color:var(--p-color-text-brand); cursor:pointer; text-decoration:none; width:100%; height:var(--p-height-700); min-width:100%; margin-top:var(--p-space-025); margin-bottom:calc(var(--p-space-025)*-1); outline:none; text-align:center; white-space:nowrap; } .Polaris-Tabs__Tab::after { content: ''; position: absolute; z-index: 1; top: -0.0625rem; right: -0.0625rem; bottom: -0.0625rem; left: -0.0625rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus); border-radius: var(--p-border-radius-200); } .Polaris-Tabs__Tab[aria-disabled='true']{ cursor:default; color:var(--p-color-text-disabled); } .Polaris-Tabs__Tab[aria-disabled='true'] path{ fill:var(--p-color-icon-disabled); } .Polaris-Tabs__Tab:not([aria-disabled='true']):hover{ background-color:var(--p-color-bg-fill-transparent-hover); color:var(--p-color-text-brand); } .Polaris-Tabs__Tab:not([aria-disabled='true']):focus{ background-color:var(--p-color-bg-surface-hover); color:var(--p-color-text); } .Polaris-Tabs__Tab:not([aria-disabled='true']):focus-visible{ background-color:transparent; color:var(--p-color-text-brand); } .Polaris-Tabs__Tab:not([aria-disabled='true']):focus-visible::after { box-shadow: 0 0 0 0.125rem var(--p-color-border-focus); outline: var(--p-border-width-025) solid transparent; } .Polaris-Tabs__Tab:not([aria-disabled='true']):focus-visible:not(:active){ outline:0; } .Polaris-Tabs__Tab:not([aria-disabled='true']):focus-visible:not(:active)::after { box-shadow: 0 0 0 0.125rem var(--p-color-border-focus); outline: var(--p-border-width-025) solid transparent; } .Polaris-Tabs__Tab:not([aria-disabled='true']):active{ background-color:var(--p-color-bg-surface-tertiary); color:var(--p-color-text-brand); z-index:var(--p-z-index-1); } .Polaris-Tabs__Tab path{ fill:currentColor; } .Polaris-Tabs__Tab--active{ background:var(--p-color-bg-fill-transparent-selected); border-radius:var(--p-border-radius-200); color:var(--p-color-text); } .Polaris-Tabs__Tab--active[aria-disabled='true']{ background:var(--p-color-bg-surface-disabled); color:var(--p-color-text-disabled); } .Polaris-Tabs__Tab--active:not([aria-disabled='true']):hover, .Polaris-Tabs__Tab--active:not([aria-disabled='true']):focus{ background-color:var(--p-color-bg-fill-transparent-hover); color:var(--p-color-text-brand); } .Polaris-Tabs__Tab--active:not([aria-disabled='true']):active{ background-color:var(--p-color-bg-fill-transparent-selected); color:var(--p-color-text-brand); } .Polaris-Tabs__Tab--hasActions{ padding-right:var(--p-space-200); } .Polaris-Tabs__Tab--iconOnly{ padding-left:var(--p-space-100); padding-right:var(--p-space-100); width:var(--p-space-800); } .Polaris-Tabs--fillSpace .Polaris-Tabs__TabContainer{ flex:1 1 auto; } .Polaris-Tabs--fitted{ flex-wrap:nowrap; } .Polaris-Tabs--fitted .Polaris-Tabs__TabContainer{ flex:1 1 100%; } .Polaris-Tabs__TabContainer{ display:flex; margin:0; padding:0; } .Polaris-Tabs--titleWithIcon{ display:flex; } .Polaris-Tabs__List{ list-style:none; margin:0; padding:var(--p-space-200); } .Polaris-Tabs__Item{ -webkit-appearance:none; appearance:none; margin:0; padding:0; background:none; border:none; font-size:inherit; line-height:inherit; color:inherit; cursor:pointer; position: relative; display:block; width:100%; min-height:var(--item-min-height); padding:var(--item-vertical-padding) var(--p-space-400); text-align:left; text-decoration:none; cursor:pointer; border-radius:var(--p-border-radius-100); color:inherit; } .Polaris-Tabs__Item:focus{ outline:none; } .Polaris-Tabs__Item::after { content: ''; position: absolute; z-index: 1; top: -0.0625rem; right: -0.0625rem; bottom: -0.0625rem; left: -0.0625rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus); border-radius: var(--p-border-radius-100); } .Polaris-Tabs__Item::-moz-focus-inner{ border:none; } .Polaris-Tabs__Item:hover{ background-color:var(--p-color-bg-surface-hover); color:var(--p-color-text); } .Polaris-Tabs__Item:active{ background-color:var(--p-color-bg-surface-active); color:var(--p-color-text); } .Polaris-Tabs__Item:focus-visible:not(:active)::after { box-shadow: 0 0 0 0.125rem var(--p-color-border-focus); outline: var(--p-border-width-025) solid transparent; } .Polaris-Tabs__Item:visited{ color:inherit; } .Polaris-Tabs__DisclosureTab{ display:none; } .Polaris-Tabs__DisclosureTab--visible{ display:flex; } .Polaris-Tabs__DisclosureActivator{ position: relative; -webkit-appearance:none; appearance:none; margin:0; padding:0; background:none; border:none; font-size:inherit; line-height:inherit; color:inherit; cursor:pointer; height:100%; background-color:transparent; color:var(--p-color-text-brand); display:flex; align-items:center; justify-content:center; cursor:pointer; border-radius:var(--p-border-radius-200); padding:0 var(--p-space-200) 0 var(--p-space-300); margin-top:var(--p-space-025); border:none; outline:none; } .Polaris-Tabs__DisclosureActivator::after { content: ''; position: absolute; z-index: 1; top: -0.0625rem; right: -0.0625rem; bottom: -0.0625rem; left: -0.0625rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus); border-radius: var(--p-border-radius-100); } .Polaris-Tabs__DisclosureActivator:focus{ outline:none; } .Polaris-Tabs__DisclosureActivator svg{ fill:var(--p-color-icon); } .Polaris-Tabs__DisclosureActivator:hover svg, .Polaris-Tabs__DisclosureActivator:focus svg{ fill:var(--p-color-icon); } .Polaris-Tabs__DisclosureActivator:not([aria-disabled='true']):hover{ background-color:var(--p-color-bg-fill-transparent-hover); color:var(--p-color-text-brand); } .Polaris-Tabs__DisclosureActivator:not([aria-disabled='true']):focus{ background-color:transparent; color:var(--p-color-text-brand); } .Polaris-Tabs__DisclosureActivator:not([aria-disabled='true']):focus-visible{ outline:0; } .Polaris-Tabs__DisclosureActivator:not([aria-disabled='true']):focus-visible::after { box-shadow: 0 0 0 0.125rem var(--p-color-border-focus); outline: var(--p-border-width-025) solid transparent; } .Polaris-Tabs__DisclosureActivator:not([aria-disabled='true']):active{ background-color:var(--p-color-bg-surface-tertiary); z-index:var(--p-z-index-1); } .Polaris-Tabs__DisclosureActivator[aria-disabled='true']{ cursor:default; color:var(--p-color-text-disabled); background:var(--p-color-bg-surface-disabled); } .Polaris-Tabs__DisclosureActivator[aria-disabled='true'] path{ fill:var(--p-color-icon-disabled); } .Polaris-Tabs__TabsMeasurer{ display:flex; gap:0; padding:0; visibility:hidden; height:0; } .Polaris-Tabs__NewTab{ padding:0 var(--p-space-200) 0 var(--p-space-100); } @media (min-width: 48em){ .Polaris-Tabs__NewTab{ position:absolute; right:0; top:0; padding:0; } } .Polaris-Tabs__ActionListWrap{ display:block; } .Polaris-Tabs__Panel{ display:block; } .Polaris-Tabs__Panel:focus{ outline:none; } .Polaris-Tabs__Panel--hidden{ display:none; } .Polaris-IndexFilters-Container{ border-bottom:var(--p-border-width-025) solid var(--p-color-border); border-top-left-radius:var(--p-border-radius-200); border-top-right-radius:var(--p-border-radius-200); background:var(--p-color-bg-surface); } @media (max-width: 30.6225em){ .Polaris-IndexFilters-Container{ border-top-left-radius:0; border-top-right-radius:0; height:unset; } } .Polaris-SortButton-DirectionButton{ position: relative; border-radius:var(--p-border-radius-200); padding:var(--p-space-100) var(--p-space-300) var(--p-space-100) var(--p-space-200); display:grid; align-items:center; grid-template-columns:auto 1fr; gap:var(--p-space-050); cursor:pointer; width:100%; border:none; background:none; text-align:left; } .Polaris-SortButton-DirectionButton::after { content: ''; position: absolute; z-index: 1; top: -0.0625rem; right: -0.0625rem; bottom: -0.0625rem; left: -0.0625rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus); border-radius: var(--p-border-radius-200); } .Polaris-SortButton-DirectionButton:hover{ background-color:var(--p-color-bg-fill-transparent-hover); } .Polaris-SortButton-DirectionButton + .Polaris-SortButton-DirectionButton{ margin-top:var(--p-space-100); } .Polaris-SortButton-DirectionButton:focus-visible{ outline:0; } .Polaris-SortButton-DirectionButton:focus-visible::after { box-shadow: 0 0 0 0.125rem var(--p-color-border-focus); outline: var(--p-border-width-025) solid transparent; } .Polaris-SortButton-DirectionButton__DirectionButton--active{ color:var(--p-color-text); background:var(--p-color-bg-fill-transparent-active); } .Polaris-IndexFilters__IndexFiltersWrapper{ width:100%; } @media (min-width: 30.625em){ .Polaris-IndexFilters__IndexFiltersWrapper{ height:auto !important; } } @media (max-width: 30.6225em){ .Polaris-IndexFilters.Polaris-IndexFilters__IndexFiltersSticky{ position:fixed; z-index:var(--p-z-index-1); top:3.5rem; width:100vw; box-shadow:var(--p-shadow-200); } .Polaris-IndexFilters.Polaris-IndexFilters__IndexFiltersStickyFlush{ top:0; } } .Polaris-IndexFilters__TabsWrapper{ flex:1 1; height:2.75rem; } @media (max-width: 47.9975em){ .Polaris-IndexFilters__TabsWrapper{ height:var(--p-space-1200); } } .Polaris-IndexFilters__SmallScreenTabsWrapper{ overflow:hidden; padding:var(--p-space-100) var(--p-space-0) var(--p-space-200) var(--p-space-300); padding:0; } .Polaris-IndexFilters__SmallScreenTabsWrapper.Polaris-IndexFilters__TabsWrapperLoading{ position:relative; } .Polaris-IndexFilters__DesktopLoading{ position:absolute; right:100%; top:50%; height:1.25rem; width:1.25rem; transform:translateY(-50%); } .Polaris-IndexFilters__TabsLoading svg{ display:block; } .Polaris-IndexFilters__TabsWrapperLoading .Polaris-IndexFilters__TabsLoading{ position:absolute; right:0; top:0; height:3.4375rem; width:3.5rem; display:flex; align-items:center; justify-content:center; background:var(--p-color-bg-surface); } .Polaris-IndexFilters__TabsWrapperLoading .Polaris-IndexFilters__TabsLoading::before{ content:''; position:absolute; top:0; left:-1rem; width:var(--p-space-400); height:100%; pointer-events:none; background:linear-gradient( to right, rgba(255, 255, 255, 0), var(--p-color-bg-surface) ); } .Polaris-IndexFilters__ActionWrap{ position:relative; display:flex; gap:var(--p-space-200); align-items:center; justify-content:flex-start; padding:var(--p-space-150) var(--p-space-200); } @media (max-width: 47.9975em){ .Polaris-IndexFilters__ActionWrap{ padding:var(--p-space-200); height:3rem; border-left:var(--p-border-width-025) solid var(--p-color-border-secondary); } .Polaris-IndexFilters__ActionWrap::before{ content:''; position:absolute; top:0; left:-1.0625rem; width:var(--p-space-400); height:100%; pointer-events:none; background:linear-gradient( to right, rgba(255, 255, 255, 0), var(--p-color-bg-surface) ); } } .Polaris-IndexFilters__ActionWrap svg{ display:block; } .Polaris-IndexFilters__Spinner{ width:1.25rem; transform:translateX(var(--p-space-100)); } .Polaris-IndexFilters__Spinner svg{ display:block; } .Polaris-IndexFilters__ButtonWrap button, .Polaris-IndexFilters__ActionWrap button{ display:flex; } .Polaris-IndexTable{ --pc-index-table-translate-offset:2.1875rem; --pc-index-table-table-header-offset:var(--pg-control-height); --pc-index-table-cell:1; --pc-index-table-sticky-cell:29; --pc-index-table-bulk-actions:31; --pc-index-table-loading-panel:31; --pc-index-table-checkbox-offset-left:var(--p-space-300); --pc-index-table-checkbox-offset-right:var(--p-space-200); position:relative; border-radius:0; scrollbar-color:auto; } @media (min-width: 30.625em){ .Polaris-IndexTable{ border-radius:inherit; border-start-start-radius:0; border-start-end-radius:0; } } .Polaris-IndexTable__IndexTableWrapper{ border-radius:0; } .Polaris-IndexTable__IndexTableWrapper .Polaris-IndexTable__IndexTableWrapper--scrollBarHidden{ border-radius:inherit; } .Polaris-IndexTable__IndexTableWrapperWithSelectAllActions{ --pc-index-table-bulk-actions-offset:2.5625rem; padding-bottom:var(--pc-index-table-bulk-actions-offset); border-radius:0; } .Polaris-IndexTable__LoadingPanel{ position:absolute; z-index:var(--p-z-index-2); top:0; left:0; display:flex; width:100%; justify-content:center; align-items:center; background:var(--p-color-bg-surface); padding:var(--p-space-200) var(--p-space-400); box-shadow:var(--p-shadow-300); opacity:0; transform:translateY(-100%); transition:opacity var(--p-motion-duration-100) var(--p-motion-ease-in), transform var(--p-motion-duration-100) var(--p-motion-ease-in), visibility var(--p-motion-duration-0) linear var(--p-motion-duration-100); visibility:hidden; } .Polaris-IndexTable__LoadingPanel.Polaris-IndexTable__LoadingPanelEntered{ visibility:visible; opacity:1; transform:translateY(0); transition:opacity var(--p-motion-duration-100) var(--p-motion-ease-out), transform var(--p-motion-duration-100) var(--p-motion-ease-out); } .Polaris-IndexTable__LoadingPanel .Polaris-IndexTable__LoadingPanelRow{ display:flex; flex-wrap:nowrap; width:100%; background:var(--p-color-bg-surface-info); padding:var(--p-space-200); padding-bottom:var(--p-space-100); border-radius:var(--p-border-radius-100); } .Polaris-IndexTable__LoadingPanelText{ margin-left:var(--p-space-300); color:var(--p-color-text); } .Polaris-IndexTable__Table{ width:100%; min-width:100%; border-collapse:collapse; } .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__StickyTable--scrolling .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__StickyTable--scrolling .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableHeading--first, .Polaris-IndexTable__StickyTable--scrolling .Polaris-IndexTable__TableHeading--first, .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableHeading--second, .Polaris-IndexTable__StickyTable--scrolling .Polaris-IndexTable__TableHeading--second{ visibility:visible; background-color:var(--p-color-bg-surface); } .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableHeading--first, .Polaris-IndexTable__StickyTable--scrolling .Polaris-IndexTable__TableHeading--first, .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableHeading--second, .Polaris-IndexTable__StickyTable--scrolling .Polaris-IndexTable__TableHeading--second{ visibility:visible; background-color:var(--p-color-bg-surface-secondary); } .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__StickyTable--scrolling .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableHeading--first, .Polaris-IndexTable__StickyTable--scrolling .Polaris-IndexTable__TableHeading--first{ filter:drop-shadow(0.0625rem 0 0 var(--p-color-border-secondary)); } @media (min-width: 30.625em){ .Polaris-IndexTable__Table--scrolling.Polaris-IndexTable__Table--sticky .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__StickyTable--scrolling.Polaris-IndexTable__Table--sticky .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__Table--scrolling.Polaris-IndexTable__StickyTable .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__StickyTable--scrolling.Polaris-IndexTable__StickyTable .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__Table--scrolling.Polaris-IndexTable__Table--sticky .Polaris-IndexTable__TableHeading--second, .Polaris-IndexTable__StickyTable--scrolling.Polaris-IndexTable__Table--sticky .Polaris-IndexTable__TableHeading--second, .Polaris-IndexTable__Table--scrolling.Polaris-IndexTable__StickyTable .Polaris-IndexTable__TableHeading--second, .Polaris-IndexTable__StickyTable--scrolling.Polaris-IndexTable__StickyTable .Polaris-IndexTable__TableHeading--second{ filter:drop-shadow(0.0625rem 0 0 var(--p-color-border-secondary)); } } .Polaris-IndexTable__Table--scrolling.Polaris-IndexTable__Table--sticky.Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableHeading--second, .Polaris-IndexTable__StickyTable--scrolling.Polaris-IndexTable__Table--sticky.Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableHeading--second, .Polaris-IndexTable__Table--scrolling.Polaris-IndexTable__StickyTable.Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableHeading--second, .Polaris-IndexTable__StickyTable--scrolling.Polaris-IndexTable__StickyTable.Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableHeading--second, .Polaris-IndexTable__Table--scrolling.Polaris-IndexTable__Table--sticky.Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableCell:first-child, .Polaris-IndexTable__StickyTable--scrolling.Polaris-IndexTable__Table--sticky.Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableCell:first-child, .Polaris-IndexTable__Table--scrolling.Polaris-IndexTable__StickyTable.Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableCell:first-child, .Polaris-IndexTable__StickyTable--scrolling.Polaris-IndexTable__StickyTable.Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableCell:first-child{ filter:drop-shadow(0.0625rem 0 0 var(--p-color-border-secondary)); } .Polaris-IndexTable__Table--scrolling.Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableHeading--second, .Polaris-IndexTable__StickyTable--scrolling.Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableHeading--second, .Polaris-IndexTable__Table--scrolling.Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableCell:first-child, .Polaris-IndexTable__StickyTable--scrolling.Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableCell:first-child{ visibility:visible; } .Polaris-IndexTable__TableRow{ background-color:var(--p-color-bg-surface); cursor:pointer; border-top:var(--p-border-width-025) solid var(--p-color-border-secondary); } .Polaris-IndexTable__TableRow:first-child{ border-top:var(--p-border-width-025) solid var(--p-color-border); } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--unclickable{ cursor:auto; } .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneSuccess, .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneSuccess .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneSuccess .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneSuccess .Polaris-IndexTable__TableCell:last-child{ background-color:var(--p-color-bg-surface-success); } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneSuccess::before, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneSuccess .Polaris-IndexTable__TableCell--first::before{ background-color:var(--p-color-bg-surface-success); } .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneWarning, .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneWarning .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneWarning .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneWarning .Polaris-IndexTable__TableCell:last-child{ background-color:var(--p-color-bg-surface-warning); } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneWarning::before, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneWarning .Polaris-IndexTable__TableCell--first::before{ background-color:var(--p-color-bg-surface-warning); } .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneCritical, .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneCritical .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneCritical .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneCritical .Polaris-IndexTable__TableCell:last-child{ background-color:var(--p-color-bg-surface-critical); } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneCritical::before, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneCritical .Polaris-IndexTable__TableCell--first::before{ background-color:var(--p-color-bg-surface-critical); } .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneSubdued, .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneSubdued .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneSubdued .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneSubdued .Polaris-IndexTable__TableCell:last-child{ background-color:var(--p-color-bg-surface-secondary); color:var(--p-color-text-secondary); } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneSubdued::before, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneSubdued .Polaris-IndexTable__TableCell--first::before{ background-color:var(--p-color-bg-surface-secondary); } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--subheader{ cursor:default; } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--subheader, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--subheader .Polaris-IndexTable__TableCell:first-child, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--subheader .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--subheader .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--subheader .Polaris-IndexTable__TableCell:last-child{ color:var(--p-color-text-secondary); font-weight:var(--p-font-weight-medium); font-size:var(--p-font-size-300); background-color:var(--p-color-bg-surface-secondary); border-top:var(--p-border-width-025) solid var(--p-color-border); border-bottom:var(--p-border-width-025) solid var(--p-color-border); border-color:var(--p-color-border); } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child{ --pc-index-table-checkbox-width:var(--p-space-500); --pc-index-table-checkbox-width-sm:calc(var(--pc-index-table-checkbox-width) + var(--p-width-050)); --pc-index-table-checkbox-padding-left:var(--p-space-300); --pc-index-table-checkbox-padding-right:var(--p-width-150); --pc-index-table-checkbox-child-offset:calc(var(--pc-index-table-checkbox-width) + var(--pc-index-table-checkbox-padding-left)); --pc-index-table-checkbox-child-offset-sm:calc(var(--pc-index-table-checkbox-width-sm) + var(--pc-index-table-checkbox-padding-left)); --pc-table-shifted-checkbox-z-index:30; } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child .Polaris-IndexTable__TableCell--first{ left:var(--pc-index-table-checkbox-child-offset); z-index:var(--pc-table-shifted-checkbox-z-index); } @media (max-width: 30.6225em){ .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child .Polaris-IndexTable__TableCell--first{ left:var(--pc-index-table-checkbox-child-offset-sm); } } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child .Polaris-IndexTable__TableCell--first::before{ content:''; position:absolute; display:block; width:calc(var(--pc-index-table-checkbox-child-offset) + var(--pc-index-table-checkbox-padding-right)); height:100%; top:0; right:var(--pc-index-table-checkbox-child-offset); background-color:var(--p-color-bg-surface); } @media (max-width: 30.6225em){ .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child .Polaris-IndexTable__TableCell--first::before{ width:calc(var(--pc-index-table-checkbox-child-offset-sm) + var(--pc-index-table-checkbox-padding-right)); right:var(--pc-index-table-checkbox-child-offset-sm); } } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell{ --pc-index-table-cell-padding:var(--p-space-150); padding-left:calc(var(--pc-index-table-checkbox-child-offset) + var(--pc-index-table-cell-padding)); } @media (max-width: 30.6225em){ .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell{ padding-left:calc(var(--pc-index-table-checkbox-child-offset-sm) + var(--pc-index-table-cell-padding)); } } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected{ border-color:var(--p-color-border); } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected .Polaris-IndexTable__TableHeading--first, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected .Polaris-IndexTable__TableHeading--second, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected .Polaris-IndexTable__TableCell:last-child{ background-color:var(--p-color-bg-surface-selected); } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--child::before, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--child .Polaris-IndexTable__TableCell--first::before{ background-color:var(--p-color-bg-surface-selected); } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSuccess, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSuccess .Polaris-IndexTable__TableCell:first-child, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSuccess .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSuccess .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSuccess .Polaris-IndexTable__TableCell:last-child{ background-color:var(--p-color-bg-surface-success-active); } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneSuccess::before, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneSuccess .Polaris-IndexTable__TableCell--first::before{ background-color:var(--p-color-bg-surface-success-active); } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneWarning, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneWarning .Polaris-IndexTable__TableCell:first-child, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneWarning .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneWarning .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneWarning .Polaris-IndexTable__TableCell:last-child{ background-color:var(--p-color-bg-surface-warning-active); } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneWarning::before, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneWarning .Polaris-IndexTable__TableCell--first::before{ background-color:var(--p-color-bg-surface-warning-active); } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneCritical, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneCritical .Polaris-IndexTable__TableCell:first-child, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneCritical .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneCritical .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneCritical .Polaris-IndexTable__TableCell:last-child{ background-color:var(--p-color-bg-surface-critical-active); } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneCritical::before, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneCritical .Polaris-IndexTable__TableCell--first::before{ background-color:var(--p-color-bg-surface-critical-active); } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSubdued, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSubdued .Polaris-IndexTable__TableCell:first-child, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSubdued .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSubdued .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSubdued .Polaris-IndexTable__TableCell:last-child{ background-color:var(--p-color-bg-surface-secondary-active); } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneSubdued::before, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneSubdued .Polaris-IndexTable__TableCell--first::before{ background-color:var(--p-color-bg-surface-secondary-active); } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--subheader, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--subheader .Polaris-IndexTable__TableCell:first-child, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--subheader .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--subheader .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--subheader .Polaris-IndexTable__TableCell:last-child{ background-color:var(--p-color-bg-surface-secondary); } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled), .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{ background-color:var(--p-color-bg-surface-hover); } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--child:not(.Polaris-IndexTable__TableRow--disabled)::before, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--child:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first::before{ background-color:var(--p-color-bg-surface-hover); } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSuccess:not(.Polaris-IndexTable__TableRow--disabled), .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSuccess:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSuccess:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSuccess:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{ background-color:var(--p-color-bg-surface-success-hover); } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneSuccess:not(.Polaris-IndexTable__TableRow--disabled)::before, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneSuccess:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first::before{ background-color:var(--p-color-bg-surface-success-hover); } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneCritical:not(.Polaris-IndexTable__TableRow--disabled), .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneCritical:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneCritical:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneCritical:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{ background-color:var(--p-color-bg-surface-critical-hover); } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneCritical:not(.Polaris-IndexTable__TableRow--disabled)::before, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneCritical:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first::before{ background-color:var(--p-color-bg-surface-critical-hover); } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneWarning:not(.Polaris-IndexTable__TableRow--disabled), .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneWarning:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneWarning:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneWarning:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{ background-color:var(--p-color-bg-surface-warning-hover); } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneWarning:not(.Polaris-IndexTable__TableRow--disabled)::before, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneWarning:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first::before{ background-color:var(--p-color-bg-surface-warning-hover); } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSubdued:not(.Polaris-IndexTable__TableRow--disabled), .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSubdued:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSubdued:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSubdued:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{ background-color:var(--p-color-bg-surface-secondary-hover); } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneSubdued:not(.Polaris-IndexTable__TableRow--disabled)::before, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneSubdued:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first::before{ background-color:var(--p-color-bg-surface-secondary-hover); } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--subheader:not(.Polaris-IndexTable__TableRow--disabled), .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--subheader:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:first-child, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--subheader:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--subheader:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--subheader:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{ background-color:var(--p-color-bg-surface-secondary); } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected .Polaris-IndexTable__TableCell:last-child{ background-color:var(--p-color-bg-surface-brand-hover); } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected::before, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected .Polaris-IndexTable__TableCell--first::before, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell::before, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected .Polaris-IndexTable__TableCell:last-child::before{ background-color:var(--p-color-bg-surface-brand-hover); } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--child::before, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--child .Polaris-IndexTable__TableCell--first::before{ background-color:var(--p-color-bg-surface-brand-hover); } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSuccess, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSuccess .Polaris-IndexTable__TableCell:first-child, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSuccess .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSuccess .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSuccess .Polaris-IndexTable__TableCell:last-child{ background-color:var(--p-color-bg-surface-success-hover); } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneSuccess::before, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneSuccess .Polaris-IndexTable__TableCell--first::before{ background-color:var(--p-color-bg-surface-success-hover); } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneWarning, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneWarning .Polaris-IndexTable__TableCell:first-child, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneWarning .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneWarning .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneWarning .Polaris-IndexTable__TableCell:last-child{ background-color:var(--p-color-bg-surface-warning-hover); } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneCritical, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneCritical .Polaris-IndexTable__TableCell:first-child, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneCritical .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneCritical .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneCritical .Polaris-IndexTable__TableCell:last-child{ background-color:var(--p-color-bg-surface-critical-hover); } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSubdued, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSubdued .Polaris-IndexTable__TableCell:first-child, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSubdued .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSubdued .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSubdued .Polaris-IndexTable__TableCell:last-child{ background-color:var(--p-color-bg-surface-secondary-hover); } .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--subheader, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--subheader .Polaris-IndexTable__TableCell:first-child, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--subheader .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--subheader .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--subheader .Polaris-IndexTable__TableCell:last-child{ background-color:var(--p-color-bg-surface-secondary); } .Polaris-IndexTable__TableRow--disabled{ cursor:default; color:var(--p-color-text-secondary); } .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow:nth-child(2n + 1), .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow:nth-child(2n + 1), .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow:nth-child(2n + 1) .Polaris-IndexTable__TableCell:first-child, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow:nth-child(2n + 1) .Polaris-IndexTable__TableCell:first-child, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow:nth-child(2n + 1) .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow:nth-child(2n + 1) .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow:nth-child(2n + 1) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow:nth-child(2n + 1) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow:nth-child(2n + 1) .Polaris-IndexTable__TableCell:last-child, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow:nth-child(2n + 1) .Polaris-IndexTable__TableCell:last-child{ background-color:var(--p-color-bg-surface); } .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow:nth-child(2n), .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow:nth-child(2n), .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow:nth-child(2n) .Polaris-IndexTable__TableCell:first-child, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow:nth-child(2n) .Polaris-IndexTable__TableCell:first-child, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow:nth-child(2n) .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow:nth-child(2n) .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow:nth-child(2n) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow:nth-child(2n) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow:nth-child(2n) .Polaris-IndexTable__TableCell:last-child, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow:nth-child(2n) .Polaris-IndexTable__TableCell:last-child{ background:var(--p-color-bg-surface-secondary); } .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--child:nth-child(2n)::before, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--child:nth-child(2n) .Polaris-IndexTable__TableCell--first::before{ background-color:var(--p-color-bg-surface-secondary); } .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n + 1), .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n + 1), .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n), .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n), .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n + 1) .Polaris-IndexTable__TableCell:first-child, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n + 1) .Polaris-IndexTable__TableCell:first-child, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n) .Polaris-IndexTable__TableCell:first-child, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n) .Polaris-IndexTable__TableCell:first-child, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n + 1) .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n + 1) .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n) .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n) .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n + 1) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n + 1) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n + 1) .Polaris-IndexTable__TableCell:last-child, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n + 1) .Polaris-IndexTable__TableCell:last-child, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n) .Polaris-IndexTable__TableCell:last-child, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n) .Polaris-IndexTable__TableCell:last-child{ background-color:var(--p-color-bg-surface-hover); } .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--selected:nth-child(2n + 1), .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--selected:nth-child(2n + 1), .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--selected:nth-child(2n), .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--selected:nth-child(2n), .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--selected:nth-child(2n + 1) .Polaris-IndexTable__TableCell:first-child, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--selected:nth-child(2n + 1) .Polaris-IndexTable__TableCell:first-child, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--selected:nth-child(2n) .Polaris-IndexTable__TableCell:first-child, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--selected:nth-child(2n) .Polaris-IndexTable__TableCell:first-child, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--selected:nth-child(2n + 1) .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--selected:nth-child(2n + 1) .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--selected:nth-child(2n) .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--selected:nth-child(2n) .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--selected:nth-child(2n + 1) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--selected:nth-child(2n + 1) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--selected:nth-child(2n) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--selected:nth-child(2n) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--selected:nth-child(2n + 1) .Polaris-IndexTable__TableCell:last-child, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--selected:nth-child(2n + 1) .Polaris-IndexTable__TableCell:last-child, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--selected:nth-child(2n) .Polaris-IndexTable__TableCell:last-child, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--selected:nth-child(2n) .Polaris-IndexTable__TableCell:last-child{ background-color:var(--p-color-bg-surface-brand-selected); } .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--child.Polaris-IndexTable__TableRow--selected:nth-child(2n)::before, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--child.Polaris-IndexTable__TableRow--selected:nth-child(2n + 1)::before, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--child.Polaris-IndexTable__TableRow--selected:nth-child(2n) .Polaris-IndexTable__TableCell--first::before, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--child.Polaris-IndexTable__TableRow--selected:nth-child(2n + 1) .Polaris-IndexTable__TableCell--first::before{ background-color:var(--p-color-bg-surface-brand-selected); } .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n + 1), .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n + 1), .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n), .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n), .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n + 1) .Polaris-IndexTable__TableCell:first-child, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n + 1) .Polaris-IndexTable__TableCell:first-child, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n) .Polaris-IndexTable__TableCell:first-child, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n) .Polaris-IndexTable__TableCell:first-child, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n + 1) .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n + 1) .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n) .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n) .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n + 1) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n + 1) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n + 1) .Polaris-IndexTable__TableCell:last-child, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n + 1) .Polaris-IndexTable__TableCell:last-child, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n) .Polaris-IndexTable__TableCell:last-child, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n) .Polaris-IndexTable__TableCell:last-child{ background-color:var(--p-color-bg-surface-brand-hover); } .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n)::before, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n + 1)::before, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n) .Polaris-IndexTable__TableCell--first::before, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n + 1) .Polaris-IndexTable__TableCell--first::before{ background-color:var(--p-color-bg-surface-brand-hover); } .Polaris-IndexTable__TableHeading{ --pc-index-table-heading-padding-x:var(--p-space-150); --pc-index-table-heading-padding-y:var(--p-space-200); background:var(--p-color-bg-surface-secondary); padding:var(--pc-index-table-heading-padding-y) var(--pc-index-table-heading-padding-x); text-align:left; font-weight:var(--p-font-weight-medium); color:var(--p-color-text-secondary); font-size:var(--p-font-size-300); white-space:nowrap; border:0; } .Polaris-IndexTable__TableHeading:first-child:not(.Polaris-IndexTable__TableHeading--flush){ padding-left:var(--p-space-300); } .Polaris-IndexTable__TableHeading:last-child:not(.Polaris-IndexTable__TableHeading--flush){ padding-right:var(--p-space-300); overflow-x:hidden; } .Polaris-IndexTable--tableHeadingAlignCenter{ text-align:center; } .Polaris-IndexTable--tableHeadingAlignCenter [class*='TooltipContainer']{ justify-content:center; } .Polaris-IndexTable--tableHeadingAlignEnd{ text-align:right; } .Polaris-IndexTable--tableHeadingAlignEnd [class*='TooltipContainer'], .Polaris-IndexTable--tableHeadingAlignEnd [class*='SortableTableHeadingWithCustomMarkup']{ justify-content:end; } .Polaris-IndexTable--tableHeadingExtraPaddingRight{ --pc-index-table-heading-extra-padding-right:0rem; padding-right:var(--pc-index-table-heading-extra-padding-right); } .Polaris-IndexTable__TableHeading--sortable{ background:var(--p-color-bg-surface-secondary); } .Polaris-IndexTable__TableHeading--flush{ --pc-index-table-heading-padding-x:0rem; padding:var(--pc-index-table-heading-padding-y) var(--pc-index-table-heading-padding-x); } .Polaris-IndexTable__TableHeading--first{ position:sticky; left:0; padding-left:var(--pc-index-table-checkbox-offset-left); padding-right:var(--pc-index-table-checkbox-offset-right); width:var(--p-space-500); z-index:var(--pc-index-table-sticky-cell); } .Polaris-IndexTable__TableHeadingSortButton{ position:relative; background:none; padding:0; border:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-weight:var(--p-font-weight-medium); color:var(--p-color-text-secondary); font-size:var(--p-font-size-300); line-height:var(--p-font-line-height-500); } .Polaris-IndexTable__TableHeadingSortButton:hover .Polaris-IndexTable__TableHeadingSortIcon, .Polaris-IndexTable__TableHeadingSortButton:focus .Polaris-IndexTable__TableHeadingSortIcon{ opacity:1; } .Polaris-IndexTable--tableHeadingSortButtonHeadingAlignEnd{ transform:translateX(var(--p-space-500)); transition-delay:var(--p-motion-duration-50); } .Polaris-IndexTable--tableHeadingSortButtonHeadingAlignEnd:hover, .Polaris-IndexTable--tableHeadingSortButtonHeadingAlignEnd:focus{ transition-delay:none; transform:translateX(var(--p-space-100)); } .Polaris-IndexTable--tableHeadingSortButtonHeadingAlignEnd:hover::before{ content:''; position:absolute; top:0; left:calc(100% - var(--p-space-200)); height:100%; width:var(--p-space-600); display:block; animation:none; transition:none; } .Polaris-IndexTable--tableHeadingSortButtonHeadingAlignEndCurrentlySorted{ transform:translateX(var(--p-space-100)); } .Polaris-IndexTable--tableHeadingSortButtonHeadingAlignEndCurrentlySorted .Polaris-IndexTable--tableHeadingSortIconHeadingAlignEnd{ animation:none; } .Polaris-IndexTable--tableHeadingSortButtonHeadingAlignEndPreviouslySorted{ animation:Polaris-IndexTable--rightAlignedSortButtonSlideOut var(--p-motion-duration-50) var(--p-motion-ease); } .Polaris-IndexTable__TableHeadingSortIcon{ order:1; opacity:0; height:var(--p-space-500); width:var(--p-space-500); } .Polaris-IndexTable__TableHeadingSortIcon:not(.Polaris-IndexTable--tableHeadingSortIconHeadingAlignEnd:hover), .Polaris-IndexTable__TableHeadingSortIcon:not(.Polaris-IndexTable--tableHeadingSortButtonHeadingAlignEndPreviouslySorted){ transition:opacity var(--p-motion-duration-50) var(--p-motion-ease); } .Polaris-IndexTable__TableHeadingSortButton:hover .Polaris-IndexTable--tableHeadingSortIconHeadingAlignEnd{ animation:Polaris-IndexTable--revealRightAlignedSortButtonIcon var(--p-motion-duration-200) var(--p-motion-ease); } .Polaris-IndexTable--tableHeadingSortButtonHeadingAlignEndCurrentlySorted:hover .Polaris-IndexTable--tableHeadingSortIconHeadingAlignEnd{ animation:none; } .Polaris-IndexTable__TableHeadingUnderline::after{ content:''; position:absolute; left:0; bottom:calc(var(--p-border-width-050)*-1); width:100%; height:var(--p-border-width-050); border-bottom:var(--p-border-width-050) dotted var(--p-color-border-tertiary); } .Polaris-IndexTable__TableHeadingTooltipUnderlinePlaceholder{ border-bottom:var(--p-border-width-050) dotted transparent; } .Polaris-IndexTable__TableHeadingSortIcon--visible{ opacity:1; } .Polaris-IndexTable__TableHeadingSortSvg{ display:block; width:100%; max-width:100%; max-height:100%; } .Polaris-IndexTable__SortableTableHeadingWithCustomMarkup{ display:flex; flex-wrap:nowrap; } .Polaris-IndexTable__SortableTableHeaderWrapper{ cursor:pointer; } .Polaris-IndexTable__ColumnHeaderCheckboxWrapper{ display:flex; } .Polaris-IndexTable__FirstStickyHeaderElement{ padding-right:0; } .Polaris-IndexTable__TableHeading--second:not(.Polaris-IndexTable__TableHeading--unselectable){ padding-left:0; } .Polaris-IndexTable__TableHeading--second:not(.Polaris-IndexTable__TableHeading--unselectable):not(.Polaris-IndexTable__TableHeading--flush){ padding-left:var(--pc-index-table-heading-padding-x); } .Polaris-IndexTable__TableCell{ z-index:var(--pc-index-table-cell); text-align:left; padding:var(--p-space-200) var(--p-space-400); white-space:nowrap; } .Polaris-IndexTable__TableCell:not(.Polaris-IndexTable__TableCell--flush){ padding:var(--p-space-150); } .Polaris-IndexTable__TableCell:not(.Polaris-IndexTable__TableCell--flush):first-child{ padding-left:var(--p-space-300); } .Polaris-IndexTable__Table:not(.Polaris-IndexTable__Table--unselectable) .Polaris-IndexTable__TableCell:not(.Polaris-IndexTable__TableCell--flush):first-child{ padding-right:var(--pc-index-table-checkbox-offset-right); } .Polaris-IndexTable__TableCell:not(.Polaris-IndexTable__TableCell--flush):last-child{ padding-right:var(--p-space-300); } .Polaris-IndexTable__TableCell--flush{ padding:0; } .Polaris-IndexTable__TableCell--flush:first-child{ padding:0; } .Polaris-IndexTable__TableCell--first{ position:sticky; left:0; z-index:var(--pc-index-table-sticky-cell); padding:var(--p-space-150) 0; vertical-align:middle; } .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell{ left:var(--pc-checkbox-offset); } @media (min-width: 30.625em){ .Polaris-IndexTable__Table--sticky .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__StickyTable .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell{ position:sticky; z-index:var(--pc-index-table-sticky-cell); } } @media (min-width: 30.625em){ .Polaris-IndexTable__Table--sticky .Polaris-IndexTable__TableHeading--second:not(.Polaris-IndexTable__TableHeading--unselectable), .Polaris-IndexTable__StickyTable .Polaris-IndexTable__TableHeading--second:not(.Polaris-IndexTable__TableHeading--unselectable){ position:sticky; left:0; z-index:var(--pc-index-table-sticky-cell); } } .Polaris-IndexTable__Table--sticky .Polaris-IndexTable__TableHeading--second.Polaris-IndexTable__TableHeading--unselectable, .Polaris-IndexTable__StickyTable .Polaris-IndexTable__TableHeading--second.Polaris-IndexTable__TableHeading--unselectable{ position:sticky; left:0; z-index:var(--pc-index-table-sticky-cell); } .Polaris-IndexTable__Table--unselectable{ --pc-index-table-checkbox-width:var(--p-space-500); --pc-index-table-checkbox-width-sm:calc(var(--pc-index-table-checkbox-width) + var(--p-width-050)); --pc-index-table-checkbox-padding-left:var(--p-space-300); --pc-index-table-checkbox-child-offset:calc(var(--pc-index-table-checkbox-width) + var(--pc-index-table-checkbox-padding-left)); --pc-index-table-checkbox-child-offset-sm:calc(var(--pc-index-table-checkbox-width-sm) + var(--pc-index-table-checkbox-padding-left)); } .Polaris-IndexTable__Table--unselectable.Polaris-IndexTable__Table--sticky .Polaris-IndexTable__TableCell:first-child{ left:0; background-color:var(--p-color-bg-surface); z-index:var(--pc-index-table-sticky-cell); position:sticky; } .Polaris-IndexTable__Table--unselectable.Polaris-IndexTable__Table--sticky .Polaris-IndexTable__TableRow--subheader .Polaris-IndexTable__TableCell:first-child{ background-color:var(--p-color-bg-surface-secondary); } .Polaris-IndexTable__Table--unselectable.Polaris-IndexTable__Table--sticky .Polaris-IndexTable__TableRow--child .Polaris-IndexTable__TableCell:first-child{ padding-left:var(--pc-index-table-checkbox-child-offset); } @media (max-width: 30.6225em){ .Polaris-IndexTable__Table--unselectable.Polaris-IndexTable__Table--sticky .Polaris-IndexTable__TableRow--child .Polaris-IndexTable__TableCell:first-child{ padding-left:var(--pc-index-table-checkbox-child-offset-sm); } } .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--child .Polaris-IndexTable__TableCell:not(.Polaris-IndexTable__TableCell--flush):first-child{ padding-left:var(--pc-index-table-checkbox-child-offset); } .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled), .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:first-child, .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{ background-color:var(--p-color-bg-surface-hover); } .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSuccess:not(.Polaris-IndexTable__TableRow--disabled), .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSuccess:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:first-child, .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSuccess:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSuccess:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSuccess:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{ background-color:var(--p-color-bg-surface-success-hover); } .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneWarning:not(.Polaris-IndexTable__TableRow--disabled), .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneWarning:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:first-child, .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneWarning:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneWarning:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneWarning:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{ background-color:var(--p-color-bg-surface-warning-hover); } .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneCritical:not(.Polaris-IndexTable__TableRow--disabled), .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneCritical:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:first-child, .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneCritical:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneCritical:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneCritical:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{ background-color:var(--p-color-bg-surface-critical-hover); } .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSubdued:not(.Polaris-IndexTable__TableRow--disabled), .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSubdued:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:first-child, .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSubdued:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSubdued:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSubdued:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{ background-color:var(--p-color-bg-surface-secondary-hover); } .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--subheader:not(.Polaris-IndexTable__TableRow--disabled), .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--subheader:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:first-child, .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--subheader:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first, .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--subheader:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--subheader:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{ background-color:var(--p-color-bg-surface-secondary); } .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable--toneSuccess .Polaris-IndexTable__TableCell:first-child{ background-color:var(--p-color-bg-surface-success); } .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable--toneWarning .Polaris-IndexTable__TableCell:first-child{ background-color:var(--p-color-bg-surface-warning); } .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable--toneCritical .Polaris-IndexTable__TableCell:first-child{ background-color:var(--p-color-bg-surface-critical); } .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable--toneSubdued .Polaris-IndexTable__TableCell:first-child{ background-color:var(--p-color-bg-surface-secondary); color:var(--p-color-text-secondary); } @media (min-width: 30.625em){ .Polaris-IndexTable--tableStickyScrolling .Polaris-IndexTable__TableCell:last-child, .Polaris-IndexTable--stickyTableHeaderStickyScrolling .Polaris-IndexTable__TableCell:last-child, .Polaris-IndexTable--tableStickyScrolling .Polaris-IndexTable__TableHeading--last, .Polaris-IndexTable--stickyTableHeaderStickyScrolling .Polaris-IndexTable__TableHeading--last{ filter:drop-shadow(-0.0625rem 0 0 var(--p-color-border)); } } @media (min-width: 30.625em){ .Polaris-IndexTable--tableStickyLast .Polaris-IndexTable__TableCell:last-child, .Polaris-IndexTable--stickyTableHeaderStickyLast .Polaris-IndexTable__TableCell:last-child{ position:sticky; right:0; background-color:var(--p-color-bg-surface); z-index:var(--pc-index-table-sticky-cell); } } @media (min-width: 30.625em){ .Polaris-IndexTable--tableStickyLast .Polaris-IndexTable__TableHeading--last, .Polaris-IndexTable--stickyTableHeaderStickyLast .Polaris-IndexTable__TableHeading--last{ position:sticky; right:0; background-color:var(--p-color-bg-surface-secondary); z-index:auto; } } .Polaris-IndexTable__Table--sortable .Polaris-IndexTable__TableHeading{ background-color:var(--p-color-bg-surface-secondary); } .Polaris-IndexTable__StickyTable{ position:absolute; top:0; left:0; right:0; visibility:hidden; z-index:var(--pc-index-table-loading-panel); } .Polaris-IndexTable__StickyTableHeader{ position:absolute; display:flex; width:100%; } .Polaris-IndexTable__StickyTableHeader:not(.Polaris-IndexTable__StickyTableHeader--isSticky){ top:-62.5rem; left:-62.5rem; } .Polaris-IndexTable__StickyTableHeadings{ overflow:hidden; flex:1 1 auto; display:flex; } .Polaris-IndexTable__StickyTableHeading--second{ padding-left:0; } @media (min-width: 30.625em){ .Polaris-IndexTable__StickyTableHeading--second{ display:none; } } .Polaris-IndexTable__StickyTableHeading--second.Polaris-IndexTable--unselectable{ display:none; } .Polaris-IndexTable--stickyTableHeadingSecondScrolling{ padding:0 var(--p-space-025) 0 calc(var(--pc-index-table-checkbox-offset-right) + var(--pc-index-table-heading-padding-x)); display:none; } @media (min-width: 30.625em){ .Polaris-IndexTable--stickyTableHeadingSecondScrolling{ display:block; } } .Polaris-IndexTable__StickyTableHeader--isSticky{ visibility:visible; box-shadow:var(--p-shadow-100); background-color:var(--p-color-bg-surface-secondary); } .Polaris-IndexTable:hover .Polaris-IndexTable__ScrollLeft{ display:block; } .Polaris-IndexTable:hover .Polaris-IndexTable__ScrollRight{ display:block; } .Polaris-IndexTable .Polaris-IndexTable__ScrollRight--onboarding{ display:block; } .Polaris-IndexTable__SelectAllActionsWrapper{ visibility:visible; position:absolute; z-index:var(--pc-index-table-bulk-actions); left:0; width:100%; display:flex; align-items:center; justify-content:flex-start; } .Polaris-IndexTable__SelectAllActionsWrapperWithPagination{ width:100%; } @media (min-width: 48em){ .Polaris-IndexTable__SelectAllActionsWrapperWithPagination{ width:calc(100% - 3.5rem - var(--p-space-200)); } } .Polaris-IndexTable__SelectAllActionsWrapperSticky{ position:fixed; top:auto; bottom:0; } .Polaris-IndexTable__SelectAllActionsWrapperAtEnd{ opacity:0; transition:opacity var(--p-motion-duration-100) var(--p-motion-ease); } .Polaris-IndexTable__SelectAllActionsWrapperAtEndAppear{ opacity:1; } .Polaris-IndexTable__BulkActionsWrapper{ visibility:hidden; opacity:0; position:relative; z-index:var(--pc-index-table-bulk-actions); padding:var(--p-space-150) var(--p-space-200) var(--p-space-150) var(--p-space-300); line-height:var(--p-font-line-height-500); background-color:var(--p-color-bg-surface); transition:opacity var(--p-motion-duration-100) var(--p-motion-ease), visibility var(--p-motion-duration-100) var(--p-motion-ease); } .Polaris-IndexTable__BulkActionsWrapper.Polaris-IndexTable__BulkActionsWrapperVisible{ visibility:visible; opacity:1; } .Polaris-IndexTable__PaginationWrapper{ --pc-pagination-index:30; z-index:var(--pc-pagination-index); } @media (min-width: 48em){ .Polaris-IndexTable__PaginationWrapper{ position:sticky; bottom:0; } } @media (min-width: 48em){ .Polaris-IndexTable__PaginationWrapperScrolledPastTop{ position:absolute; bottom:auto; top:var(--pc-index-table-pagination-top-offset); width:100%; } } .Polaris-IndexTable__ScrollBarContainer{ --pc-index-table-scroll-bar:30; --pc-index-table-scroll-bar-height-offset:2.5625rem; position:sticky; z-index:var(--pc-index-table-scroll-bar); bottom:0; padding:var(--p-space-050); background-color:var(--p-color-bg-surface); transition:bottom var(--p-motion-duration-100) var(--p-motion-ease); } @media (min-width: 30.625em){ .Polaris-IndexTable__ScrollBarContainer{ border-bottom-right-radius:var(--p-border-radius-200); border-bottom-left-radius:var(--p-border-radius-200); padding:var(--p-space-050) var(--p-space-200); } } @media (min-width: 48em){ .Polaris-IndexTable__ScrollBarContainerWithPagination{ bottom:var(--pc-index-table-scroll-bar-height-offset); } .Polaris-IndexTable__ScrollBarContainerWithPagination.Polaris-IndexTable__ScrollBarContainerScrolledPastTop{ position:absolute; top:var(--pc-index-table-scroll-bar-top-offset); bottom:auto; width:100%; } } @media (min-width: 30.625em){ .Polaris-IndexTable__ScrollBarContainerWithPagination{ border-bottom-right-radius:0; border-bottom-left-radius:0; } } .Polaris-IndexTable__ScrollBarContainerWithPagination.Polaris-IndexTable__ScrollBarContainerWithSelectAllActions{ bottom:var(--pc-index-table-scroll-bar-height-offset); } .Polaris-IndexTable__ScrollBarContainerWithSelectAllActions.Polaris-IndexTable__ScrollBarContainerScrolledPastTop{ position:absolute; top:var(--pc-index-table-scroll-bar-top-offset); bottom:auto; width:100%; } @media (min-width: 30.625em){ .Polaris-IndexTable__ScrollBarContainerWithSelectAllActions{ border-bottom-right-radius:0; border-bottom-left-radius:0; } } .Polaris-IndexTable__ScrollBarContainerSelectAllActionsSticky{ bottom:var(--pc-index-table-scroll-bar-height-offset); } .Polaris-IndexTable--scrollBarContainerCondensed{ visibility:hidden; pointer-events:none; } .Polaris-IndexTable--scrollBarContainerHidden{ height:0; padding:0; } .Polaris-IndexTable__ScrollBar{ overflow-x:scroll; width:100%; margin:0; padding:0; } .Polaris-IndexTable__ScrollBar::-webkit-scrollbar-track{ border-radius:var(--p-border-radius-100); background-color:transparent; } .Polaris-IndexTable__ScrollBar::-webkit-scrollbar{ -webkit-appearance:none; appearance:none; height:var(--p-space-200); width:var(--p-space-200); background-color:transparent; } .Polaris-IndexTable__ScrollBar::-webkit-scrollbar-thumb{ border-radius:var(--p-border-radius-100); background-color:var(--p-color-border-tertiary); -webkit-transition:background-color var(--p-motion-duration-100) var(--p-motion-ease-out); transition:background-color var(--p-motion-duration-100) var(--p-motion-ease-out); } .Polaris-IndexTable__ScrollBar:hover::-webkit-scrollbar-thumb{ background-color:var(--p-color-border-inverse); } .Polaris-IndexTable--disableTextSelection{ -webkit-user-select:none; user-select:none; } .Polaris-IndexTable__EmptySearchResultWrapper{ padding:var(--p-space-400); } .Polaris-IndexTable--condensedRow{ width:calc(100% + var(--pc-index-table-translate-offset)); transform:translateX(calc(var(--pc-index-table-translate-offset)*-1)); transition:transform var(--p-motion-ease) var(--p-motion-duration-200); display:flex; border-top:var(--p-border-width-025) solid var(--p-color-border-secondary); filter:none; align-items:center; } [data-selectmode='true'] .Polaris-IndexTable--condensedRow{ transform:none; } .Polaris-IndexTable__CondensedList{ list-style-type:none; margin:0; padding:0; overflow:hidden; border-top:0; } .Polaris-IndexTable__CondensedList .Polaris-IndexTable__TableRow:first-child{ border-top:0; } .Polaris-IndexTable__HeaderWrapper{ position:relative; display:flex; align-items:center; width:100%; min-height:3.5rem; padding:var(--p-space-200) var(--p-space-400); background-color:var(--p-color-bg-surface); } .Polaris-IndexTable__HeaderWrapper.Polaris-IndexTable--unselectable{ min-height:auto; padding:0; } .Polaris-IndexTable__StickyTable--condensed{ visibility:visible; } .Polaris-IndexTable__StickyTableHeader--condensed{ padding:var(--p-space-400) var(--p-space-400) var(--p-space-200); } .Polaris-IndexTable__ScrollBarContent{ height:0.0625rem; width:var(--pc-index-table-scroll-bar-content-width); } @keyframes Polaris-IndexTable--rightAlignedSortButtonSlideOut{ 0%{ transform:translateX(var(--p-space-100)); } 80%{ transform:translateX(var(--p-space-100)); } 100%{ transform:translateX(var(--p-space-500)); } } @keyframes Polaris-IndexTable--revealRightAlignedSortButtonIcon{ 0%{ transform:translateX(calc(var(--p-space-500)*-1)); opacity:0; } 40%{ opacity:0; } 50%{ transform:translateX(0); } 100%{ opacity:1; } } .Polaris-IndexTable-Checkbox__Wrapper{ display:flex; justify-content:center; align-items:center; } .Polaris-IndexTable-ScrollContainer{ overflow-x:auto; overscroll-behavior-x:contain; -ms-overflow-style:none; scrollbar-width:none; border-radius:inherit; } .Polaris-IndexTable-ScrollContainer::-webkit-scrollbar{ display:none; } .Polaris-InlineCode__Code{ background-color:var(--p-color-bg-fill-tertiary); border-radius:var(--p-border-radius-050); font-family:var(--p-font-family-mono); font-size:0.85em; font-weight:var(--p-font-weight-medium); padding:var(--p-space-025) var(--p-space-100); } .Polaris-KeyboardKey{ --pc-keyboard-key-base-dimension:1.75rem; height:var(--pc-keyboard-key-base-dimension); display:inline-flex; justify-content:center; margin:0 var(--p-space-050) var(--p-space-050); margin-bottom:0; padding:0 var(--p-space-200); background:var(--p-color-bg-surface-tertiary); border-radius:var(--p-border-radius-100); color:var(--p-color-text-secondary); font-size:var(--p-font-size-350); font-weight:var(--p-font-weight-medium); font-family:var(--p-font-family-sans); line-height:var(--pc-keyboard-key-base-dimension); text-align:center; min-width:var(--pc-keyboard-key-base-dimension); -webkit-user-select:none; user-select:none; } .Polaris-KeyboardKey--small{ box-shadow:none; line-height:var(--p-font-size-400); padding:var(--p-space-050) var(--p-space-100); font-size:var(--p-font-size-300); height:var(--p-space-500); min-width:var(--p-space-500); } .Polaris-TextContainer{ --pc-text-container-spacing:var(--p-space-400); } .Polaris-TextContainer > *:not(:first-child){ margin-top:var(--pc-text-container-spacing); } .Polaris-TextContainer--spacingTight{ --pc-text-container-spacing:var(--p-space-200); } .Polaris-TextContainer--spacingLoose{ --pc-text-container-spacing:var(--p-space-500); } .Polaris-Layout{ display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; margin-top:calc(var(--p-space-400)*-1); margin-left:calc(var(--p-space-400)*-1); } @media print{ body .Polaris-Layout{ font-size:var(--p-font-size-300); line-height:var(--p-font-line-height-400); } .Polaris-Layout a, .Polaris-Layout button{ color:var(--p-color-text); } } .Polaris-Layout__Section{ flex:var(--pg-layout-relative-size) var(--pg-layout-relative-size) var(--pg-layout-width-primary-min); min-width:51%; } @media print{ .Polaris-Layout__Section{ flex:2 2 22.5rem; } } .Polaris-Layout__Section--fullWidth{ flex:1 1 100%; } .Polaris-Layout__Section--oneHalf{ flex:1 1 var(--pg-layout-width-one-half-width-base); min-width:0; } .Polaris-Layout__Section--oneThird{ flex:1 1 var(--pg-layout-width-one-third-width-base); min-width:0; } .Polaris-Layout__AnnotatedSection{ min-width:0; flex:1 1 100%; } .Polaris-Layout__Section, .Polaris-Layout__AnnotatedSection{ max-width:calc(100% - var(--p-space-400)); margin-top:var(--p-space-400); margin-left:var(--p-space-400); } .Polaris-Layout__Section + .Polaris-Layout__AnnotatedSection, .Polaris-Layout__AnnotatedSection + .Polaris-Layout__AnnotatedSection{ border-top:var(--p-border-width-025) solid var(--p-color-border-secondary); padding-top:var(--p-space-400); } .Polaris-Layout__AnnotationWrapper{ display:flex; flex-wrap:wrap; margin-top:calc(var(--p-space-400)*-1); margin-left:calc(var(--p-space-400)*-1); } .Polaris-Layout__AnnotationContent{ flex:var(--pg-layout-relative-size) var(--pg-layout-relative-size) var(--pg-layout-width-primary-min); } .Polaris-Layout__Annotation{ flex:1 1 var(--pg-layout-width-secondary-min); padding:var(--p-space-400) var(--p-space-400) 0 0; } @media (min-width: 48em){ .Polaris-Layout__Annotation{ padding-bottom:var(--p-space-400); } } .Polaris-Layout__Annotation, .Polaris-Layout__AnnotationContent{ min-width:0; max-width:calc(100% - var(--p-space-400)); margin-top:var(--p-space-400); margin-left:var(--p-space-400); } .Polaris-Tag{ position:relative; display:inline-flex; max-width:100%; align-items:center; padding-inline:calc(var(--p-space-100) + var(--p-space-050)); background-color:var(--p-color-bg-fill-tertiary); border-radius:var(--p-border-radius-200); color:var(--p-color-text); } .Polaris-Tag.Polaris-Tag--disabled{ transition:none; background:var(--p-color-bg-fill-disabled); color:var(--p-color-text-disabled); } .Polaris-Tag.Polaris-Tag--disabled svg{ fill:var(--p-color-icon-disabled); } .Polaris-Tag.Polaris-Tag--clickable{ -webkit-appearance:none; appearance:none; margin:0; padding:0; background:none; border:none; font-size:inherit; line-height:inherit; color:inherit; cursor:pointer; cursor:pointer; padding:0 calc(var(--p-space-100) + var(--p-space-050)); background-color:var(--p-color-bg-fill-tertiary); outline:var(--p-border-width-025) solid transparent; } .Polaris-Tag.Polaris-Tag--clickable:focus{ outline:none; } .Polaris-Tag.Polaris-Tag--clickable:hover{ background:var(--p-color-bg-fill-tertiary-hover); } .Polaris-Tag.Polaris-Tag--clickable{ position: relative; } .Polaris-Tag.Polaris-Tag--clickable::after { content: ''; position: absolute; z-index: 1; top: -0.0625rem; right: -0.0625rem; bottom: -0.0625rem; left: -0.0625rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus); border-radius: var(--p-border-radius-200); } .Polaris-Tag.Polaris-Tag--clickable:focus-visible:not(:active)::after { box-shadow: 0 0 0 0.125rem var(--p-color-border-focus); outline: var(--p-border-width-025) solid transparent; } .Polaris-Tag.Polaris-Tag--clickable:active{ background:var(--p-color-bg-fill-tertiary-active); } .Polaris-Tag.Polaris-Tag--clickable:disabled{ background:var(--p-color-bg-fill-disabled); cursor:default; pointer-events:none; color:var(--p-color-text-disabled); } .Polaris-Tag.Polaris-Tag--linkable:hover{ background:var(--p-color-bg-fill-tertiary-hover); } .Polaris-Tag.Polaris-Tag--linkable:active{ background:var(--p-color-bg-fill-tertiary-active); } .Polaris-Tag.Polaris-Tag--removable{ padding-right:0; padding-inline-end:0; } .Polaris-Tag__Button{ -webkit-appearance:none; appearance:none; margin:0; padding:0; background:none; border:none; font-size:inherit; line-height:inherit; color:inherit; cursor:pointer; display:block; flex-shrink:0; height:1.125rem; width:1.125rem; margin:var(--p-space-025); margin-left:var(--p-space-050); border-radius:0.4375rem; color:var(--p-color-icon-secondary); } .Polaris-Tag__Button:focus{ outline:none; } .Polaris-Tag__Button svg{ fill:currentColor; } .Polaris-Tag__Button:hover{ background:var(--p-color-bg-fill-tertiary-hover); color:var(--p-color-icon-hover); outline:var(--p-border-width-025) solid transparent; } .Polaris-Tag__Button{ position: relative; } .Polaris-Tag__Button::after { content: ''; position: absolute; z-index: 1; top: -0.0625rem; right: -0.0625rem; bottom: -0.0625rem; left: -0.0625rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus); border-radius: var(--p-border-radius-200); } .Polaris-Tag__Button:focus-visible{ background:var(--p-color-bg-fill-tertiary-hover); color:var(--p-color-icon-hover); } .Polaris-Tag__Button:focus-visible:not(:active)::after { box-shadow: 0 0 0 0.125rem var(--p-color-border-focus); outline: var(--p-border-width-025) solid transparent; } .Polaris-Tag__Button:active{ background:var(--p-color-bg-fill-tertiary-active); } .Polaris-Tag__Button:disabled{ cursor:default; pointer-events:none; } .Polaris-Tag__Button:disabled svg{ fill:var(--p-color-icon-disabled); } .Polaris-Tag__Link{ display:inline-grid; color:var(--p-color-text); outline:none; border-radius:var(--p-border-radius-200); text-decoration:none; position: relative; } .Polaris-Tag__Link::after { content: ''; position: absolute; z-index: 1; top: -0.0625rem; right: -0.0625rem; bottom: -0.0625rem; left: -0.0625rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus); border-radius: var(--p-border-radius-200); } .Polaris-Tag__Link:focus-visible:not(:active){ text-decoration:underline; } .Polaris-Tag__Link:focus-visible:not(:active)::after { box-shadow: 0 0 0 0.125rem var(--p-color-border-focus); outline: var(--p-border-width-025) solid transparent; } .Polaris-Tag__Link:hover{ background:var(--p-color-bg-fill-tertiary-hover); text-decoration:underline; } .Polaris-Tag__Link.Polaris-Tag--segmented:hover{ background:none; } .Polaris-Tag__Link.Polaris-Tag--segmented::after{ margin-right:var(--p-space-100); } .Polaris-Tag__Link:active{ background:var(--p-color-bg-fill-tertiary-active); } .Polaris-Tag__Text{ line-height:var(--p-font-line-height-500); } .Polaris-Tag--linkable.Polaris-Tag--removable:hover{ background:var(--p-color-bg-fill-tertiary-hover); } .Polaris-Tag--linkable.Polaris-Tag--removable:hover .Polaris-Tag__Button{ background:var(--p-color-bg-fill-tertiary-active); } .Polaris-Tag--sizeLarge, .Polaris-Tag--sizeLarge:is(.Polaris-Tag--removable, .Polaris-Tag--linkable){ min-height:1.5rem; padding:0 var(--p-space-200); } @media (hover: none){ .Polaris-Tag--sizeLarge, .Polaris-Tag--sizeLarge:is(.Polaris-Tag--removable, .Polaris-Tag--linkable){ padding-right:0; } } .Polaris-Tag--sizeLarge .Polaris-Tag__Link.Polaris-Tag--segmented::after{ margin-right:0; } .Polaris-Tag--sizeLarge .Polaris-Tag__Button{ opacity:0; position:absolute; right:var(--p-space-050); left:auto; width:1.25rem; height:1.25rem; margin:0; background-color:var(--p-color-bg-fill-tertiary); } @media (hover: none){ .Polaris-Tag--sizeLarge .Polaris-Tag__Button{ opacity:1; position:unset; } } .Polaris-Tag--sizeLarge .Polaris-Tag__Button:hover{ color:var(--p-color-icon-secondary-hover); } .Polaris-Tag--sizeLarge .Polaris-Tag__Button:active, .Polaris-Tag--sizeLarge .Polaris-Tag__Button:focus{ color:var(--p-color-icon-secondary-active); } .Polaris-Tag--sizeLarge:hover .Polaris-Tag__Button, .Polaris-Tag--sizeLarge .Polaris-Tag__Button:focus-visible{ opacity:1; } .Polaris-Tag--sizeLarge:hover .Polaris-Tag--overlay{ position:absolute; top:0; right:1.25rem; bottom:0; width:0.75rem; pointer-events:none; background:linear-gradient( to left, var(--p-color-bg-fill-tertiary) 0%, transparent 100% ); } .Polaris-Tag--sizeLarge.Polaris-Tag--removable.Polaris-Tag--linkable .Polaris-Tag__Button{ background-color:var(--p-color-bg-fill-tertiary-hover); } @media (hover: none){ .Polaris-Tag--sizeLarge.Polaris-Tag--removable.Polaris-Tag--linkable .Polaris-Tag__Button{ background-color:var(--p-color-bg-fill-tertiary); } } .Polaris-Tag--sizeLarge.Polaris-Tag--removable.Polaris-Tag--linkable:hover .Polaris-Tag--overlay{ background:linear-gradient( to left, var(--p-color-bg-fill-tertiary-hover) 0%, transparent 100% ); } .Polaris-Sheet{ position:fixed; bottom:0; width:100%; height:100%; background-color:var(--p-color-bg-surface); box-shadow:var(--p-shadow-600); } @media screen and (-ms-high-contrast: active){ .Polaris-Sheet{ border-left:var(--p-border-width-025) solid var(--p-color-border-secondary); } } @media (min-width: 48em){ .Polaris-Sheet{ right:0; width:var(--pc-sheet-desktop-width); } } .Polaris-Sheet:focus{ outline:0; } .Polaris-Sheet__Container{ --pc-sheet-desktop-width:23.75rem; position:fixed; z-index:var(--p-z-index-11); top:0; right:0; bottom:0; left:0; } @media (min-width: 48em){ .Polaris-Sheet__Container{ left:auto; width:var(--pc-sheet-desktop-width); } } .Polaris-Sheet__Bottom{ -webkit-backface-visibility:hidden; backface-visibility:hidden; will-change:transform; transition:transform var(--p-motion-duration-300) var(--p-motion-ease); transform-origin:bottom; } .Polaris-Sheet--enterBottom{ transform:translateY(100%); } .Polaris-Sheet--enterBottomActive{ transform:translateY(0%); } .Polaris-Sheet--exitBottom{ transform:translateY(0%); } .Polaris-Sheet--exitBottomActive{ transform:translateY(100%); } .Polaris-Sheet__Right{ -webkit-backface-visibility:hidden; backface-visibility:hidden; will-change:transform; transition:transform var(--p-motion-duration-300) var(--p-motion-ease); transform-origin:right; } .Polaris-Sheet--enterRight{ transform:translateX(100%); } .Polaris-Sheet--enterRightActive{ transform:translateX(0%); } .Polaris-Sheet--exitRight{ transform:translateX(0%); } .Polaris-Sheet--exitRightActive{ transform:translateX(100%); } .Polaris-LegacyFilters-ConnectedFilterControl{ --pc-connceted-filter-control-item:10; --pc-connceted-filter-control-focused:20; display:flex; flex-grow:1; align-items:center; } .Polaris-LegacyFilters-ConnectedFilterControl .Polaris-LegacyFilters-ConnectedFilterControl__CenterContainer{ flex:1 1 auto; min-width:6.25rem; } .Polaris-LegacyFilters-ConnectedFilterControl.Polaris-LegacyFilters-ConnectedFilterControl--right .Polaris-LegacyFilters-ConnectedFilterControl__CenterContainer *{ border-top-right-radius:var(--p-border-radius-200); border-bottom-right-radius:var(--p-border-radius-200); } .Polaris-LegacyFilters-ConnectedFilterControl__Item{ position:relative; z-index:var(--pc-connceted-filter-control-item); } .Polaris-LegacyFilters-ConnectedFilterControl__Item--focused{ z-index:var(--pc-connceted-filter-control-focused); } .Polaris-LegacyFilters-ConnectedFilterControl__ProxyButtonContainer{ position:absolute; top:-62.5rem; left:-62.5rem; display:flex; width:100%; height:0; visibility:hidden; overflow:hidden; } .Polaris-LegacyFilters-ConnectedFilterControl__ProxyButtonContainer > *{ flex-shrink:0; } .Polaris-LegacyFilters-ConnectedFilterControl__CenterContainer + .Polaris-LegacyFilters-ConnectedFilterControl__RightContainer, .Polaris-LegacyFilters-ConnectedFilterControl__CenterContainer + .Polaris-LegacyFilters-ConnectedFilterControl__MoreFiltersButtonContainer{ margin-left:var(--p-space-200); } .Polaris-LegacyFilters-ConnectedFilterControl__RightContainer{ display:flex; flex-shrink:0; } .Polaris-LegacyFilters-ConnectedFilterControl__RightContainer .Polaris-LegacyFilters-ConnectedFilterControl__Item > div > button{ margin-right:calc(var(--p-space-025)*-1); border-radius:0; } .Polaris-LegacyFilters-ConnectedFilterControl__RightContainer .Polaris-LegacyFilters-ConnectedFilterControl__Item{ flex-shrink:0; } .Polaris-LegacyFilters-ConnectedFilterControl__RightContainer .Polaris-LegacyFilters-ConnectedFilterControl__Item:first-of-type > div > button{ border-top-left-radius:var(--p-border-radius-200); border-bottom-left-radius:var(--p-border-radius-200); } .Polaris-LegacyFilters-ConnectedFilterControl__RightContainer .Polaris-LegacyFilters-ConnectedFilterControl__Item:last-of-type > div > button{ border-top-right-radius:var(--p-border-radius-200); border-bottom-right-radius:var(--p-border-radius-200); } .Polaris-LegacyFilters-ConnectedFilterControl__RightContainer.Polaris-LegacyFilters-ConnectedFilterControl--queryFieldHidden .Polaris-LegacyFilters-ConnectedFilterControl__Item:first-of-type > div > button{ border-top-left-radius:var(--p-border-radius-200); border-bottom-left-radius:var(--p-border-radius-200); } .Polaris-LegacyFilters-ConnectedFilterControl__RightContainerWithoutMoreFilters .Polaris-LegacyFilters-ConnectedFilterControl__Item:last-child > div > button{ border-top-right-radius:var(--p-border-radius-200); border-bottom-right-radius:var(--p-border-radius-200); } .Polaris-LegacyFilters-ConnectedFilterControl__MoreFiltersButtonContainer{ padding-left:var(--p-space-200); } .Polaris-LegacyFilters-ConnectedFilterControl__MoreFiltersButtonContainer .Polaris-LegacyFilters-ConnectedFilterControl__Item > div > button{ white-space:nowrap; border-top-left-radius:var(--p-border-radius-200); border-bottom-left-radius:var(--p-border-radius-200); } .Polaris-LegacyFilters-ConnectedFilterControl__MoreFiltersButtonContainer.Polaris-LegacyFilters-ConnectedFilterControl--onlyButtonVisible{ padding-left:0; } .Polaris-LegacyFilters-ConnectedFilterControl__MoreFiltersButtonContainer.Polaris-LegacyFilters-ConnectedFilterControl--onlyButtonVisible .Polaris-LegacyFilters-ConnectedFilterControl__Item > div > button{ border-radius:var(--p-border-radius-200); } .Polaris-LegacyFilters-ConnectedFilterControl__Wrapper{ display:flex; align-items:center; } .Polaris-LegacyFilters-ConnectedFilterControl__AuxiliaryContainer{ flex-grow:0; margin-left:var(--p-space-200); } @media (min-width: 48em){ .Polaris-LegacyFilters-ConnectedFilterControl__AuxiliaryContainer{ margin-left:0; } } .Polaris-LegacyFilters{ --pc-legacy-filters-header-height:var(--pg-top-bar-height); --pc-legacy-filters-footer-height:4.375rem; position:relative; } .Polaris-LegacyFilters__LegacyFiltersContainer{ position:relative; height:100%; width:100%; display:flex; flex-direction:column; } .Polaris-LegacyFilters__LegacyFiltersContainerHeader{ top:0; width:100%; padding:var(--p-space-400) var(--p-space-500); border-bottom:var(--p-border-width-025) solid var(--p-color-border-secondary); height:var(--pc-legacy-filters-header-height); box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; } .Polaris-LegacyFilters__LegacyFiltersDesktopContainerContent{ width:100%; height:calc(100% - var(--pc-legacy-filters-footer-height) - var(--pc-legacy-filters-header-height)); padding:var(--p-space-200); } .Polaris-LegacyFilters__LegacyFiltersMobileContainerContent{ width:100%; height:calc(100% - var(--pc-legacy-filters-header-height)); padding:var(--p-space-200); } .Polaris-LegacyFilters__LegacyFiltersContainerFooter{ position:absolute; bottom:0; width:100%; padding:var(--p-space-400) var(--p-space-500); border-top:var(--p-border-width-025) solid var(--p-color-border-secondary); height:var(--pc-legacy-filters-footer-height); box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; } .Polaris-LegacyFilters__LegacyFiltersMobileContainerFooter{ width:100%; padding:var(--p-space-400) var(--p-space-400); height:var(--pc-legacy-filters-footer-height); box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; } .Polaris-LegacyFilters__EmptyFooterState{ border-top:var(--p-border-width-025) solid var(--p-color-border-secondary); padding-top:var(--p-space-400); width:100%; display:flex; justify-content:center; } .Polaris-LegacyFilters__FilterTriggerContainer{ position:relative; } .Polaris-LegacyFilters__FilterTrigger{ width:100%; margin:0; padding:var(--p-space-400) var(--p-space-500); color:var(--p-color-text); border-radius:var(--p-border-radius-100); background:none; border:none; outline:none; position: relative; } .Polaris-LegacyFilters__FilterTrigger::after { content: ''; position: absolute; z-index: 1; top: -0.0625rem; right: -0.0625rem; bottom: -0.0625rem; left: -0.0625rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus); border-radius: var(--p-border-radius-100); } .Polaris-LegacyFilters__FilterTrigger:focus{ box-shadow:none; } .Polaris-LegacyFilters__FilterTrigger:hover{ cursor:pointer; background-color:var(--p-color-bg-surface-hover); outline:var(--p-border-width-025) solid transparent; } .Polaris-LegacyFilters__FilterTrigger:focus-visible:not(:active)::after { box-shadow: 0 0 0 0.125rem var(--p-color-border-focus); outline: var(--p-border-width-025) solid transparent; } .Polaris-LegacyFilters__FilterTriggerTitle{ font-size:0.9375rem; font-weight:var(--p-font-weight-semibold); } .Polaris-LegacyFilters__AppliedFilterBadgeContainer{ padding-top:var(--p-space-100); display:flex; } .Polaris-LegacyFilters--open .Polaris-LegacyFilters__AppliedFilterBadgeContainer{ display:none; } .Polaris-LegacyFilters__FilterTriggerLabelContainer{ display:flex; align-items:center; justify-content:space-between; } .Polaris-LegacyFilters--open::before, .Polaris-LegacyFilters--open::after{ content:''; position:relative; left:var(--p-space-400); width:calc(100% - var(--p-space-800)); height:var(--p-space-025); background-color:var(--p-color-bg-surface-tertiary); display:block; } .Polaris-LegacyFilters--open::before{ top:0; } .Polaris-LegacyFilters--open::after{ bottom:0; } .Polaris-LegacyFilters--open.Polaris-LegacyFilters--first::after{ content:''; bottom:0; position:relative; left:var(--p-space-400); width:calc(100% - var(--p-space-800)); height:var(--p-space-025); background-color:var(--p-color-bg-surface-tertiary); display:block; } .Polaris-LegacyFilters--open.Polaris-LegacyFilters--first::before{ display:none; } .Polaris-LegacyFilters--open ~ .Polaris-LegacyFilters--open::before{ display:none; } .Polaris-LegacyFilters--open.Polaris-LegacyFilters--last::before{ content:''; top:0; position:relative; left:var(--p-space-400); width:calc(100% - var(--p-space-800)); height:var(--p-space-025); background-color:var(--p-color-bg-surface-tertiary); display:block; } .Polaris-LegacyFilters--open.Polaris-LegacyFilters--last::after{ display:none; } .Polaris-LegacyFilters--open + .Polaris-LegacyFilters--last::before{ display:none; } .Polaris-LegacyFilters__FilterNodeContainer{ padding:var(--p-space-200) var(--p-space-500) var(--p-space-500) var(--p-space-500); } .Polaris-LegacyFilters__SearchIcon{ fill:currentColor; } .Polaris-LegacyFilters__Backdrop{ position:fixed; z-index:var(--p-z-index-10); top:0; right:0; bottom:0; left:0; display:block; opacity:0; } .Polaris-LegacyFilters__HelpText{ margin-top:var(--p-space-200); } .Polaris-LegacyFilters__TagsContainer{ display:flex; padding-top:var(--p-space-200); flex-wrap:wrap; } .Polaris-LegacyFilters__TagsContainer > *{ margin-right:var(--p-space-200); margin-bottom:var(--p-space-200); } .Polaris-LegacyTabs{ display:flex; flex-wrap:wrap; margin:0; padding:0; list-style:none; } .Polaris-LegacyTabs--fitted{ flex-wrap:nowrap; } .Polaris-LegacyTabs--fitted .Polaris-LegacyTabs__TabContainer{ flex:1 1 100%; } .Polaris-LegacyTabs--fitted .Polaris-LegacyTabs__Title{ width:100%; padding:var(--p-space-150) var(--p-space-300); } .Polaris-LegacyTabs--fillSpace .Polaris-LegacyTabs__TabContainer{ flex:1 1 auto; } .Polaris-LegacyTabs__TabContainer{ display:flex; margin:0; padding:0; } .Polaris-LegacyTabs__Tab{ -webkit-appearance:none; appearance:none; margin:0; padding:0; background:none; border:none; font-size:inherit; line-height:inherit; color:inherit; cursor:pointer; color:var(--p-color-text); position:relative; justify-content:center; width:100%; min-width:100%; margin-top:var(--p-space-025); margin-bottom:calc(var(--p-space-025)*-1); padding:var(--p-space-200) var(--p-space-100); outline:none; text-align:center; white-space:nowrap; text-decoration:none; cursor:pointer; } .Polaris-LegacyTabs__Tab:focus{ outline:none; } .Polaris-LegacyTabs__Tab:hover{ text-decoration:none; } .Polaris-LegacyTabs__Tab:hover .Polaris-LegacyTabs__Title{ color:var(--p-color-text-brand); background-color:transparent; } .Polaris-LegacyTabs__Tab:hover .Polaris-LegacyTabs__Title::before{ background-color:var(--p-color-bg-fill-tertiary-hover); } .Polaris-LegacyTabs__Tab:active .Polaris-LegacyTabs__Title{ background-color:transparent; } .Polaris-LegacyTabs__Tab:active .Polaris-LegacyTabs__Title::before{ background:var(--p-color-bg-fill-tertiary-active); } .Polaris-LegacyTabs__Tab:focus-visible .Polaris-LegacyTabs__Title{ color:var(--p-color-text-brand); } .Polaris-LegacyTabs__Tab:focus-visible:not(:active) .Polaris-LegacyTabs__Title::after { box-shadow: 0 0 0 0.125rem var(--p-color-border-focus); outline: var(--p-border-width-025) solid transparent; } .Polaris-LegacyTabs__Tab:visited{ color:inherit; } .Polaris-LegacyTabs__Tab--selected{ color:var(--p-color-text-brand); } .Polaris-LegacyTabs__Tab--selected:focus .Polaris-LegacyTabs__Title{ outline:var(--p-border-width-050) solid transparent; } .Polaris-LegacyTabs__Tab--selected:focus .Polaris-LegacyTabs__Title::before{ background:var(--p-color-bg-fill-brand); } .Polaris-LegacyTabs__Tab--selected .Polaris-LegacyTabs__Title{ outline:var(--p-border-width-050) solid transparent; color:var(--p-color-text-brand); } .Polaris-LegacyTabs__Tab--selected .Polaris-LegacyTabs__Title::before{ background:var(--p-color-bg-fill-brand); } .Polaris-LegacyTabs__Title{ position: relative; border-radius:var(--p-border-radius-100); display:block; padding:var(--p-space-150) var(--p-space-300); min-width:3.125rem; color:var(--p-color-text-brand); } .Polaris-LegacyTabs__Title::after { content: ''; position: absolute; z-index: 1; top: -0.0625rem; right: -0.0625rem; bottom: -0.0625rem; left: -0.0625rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus); border-radius: var(--p-border-radius-100); } .Polaris-LegacyTabs__Title::before{ content:''; position:absolute; bottom:calc(var(--p-space-200)*-1); left:0; right:0; height:var(--p-border-width-050); border-top-left-radius:var(--p-border-radius-100); border-top-right-radius:var(--p-border-radius-100); } .Polaris-LegacyTabs--titleWithIcon{ display:flex; } .Polaris-LegacyTabs__Panel{ display:block; } .Polaris-LegacyTabs__Panel:focus{ outline:none; } .Polaris-LegacyTabs__Panel--hidden{ display:none; } .Polaris-LegacyTabs__Item{ --pc-legacy-tabs-item-min-height:1rem; --pc-legacy-tabs-item-vertical-padding:calc(var(--pc-legacy-tabs-item-min-height)*0.5); -webkit-appearance:none; appearance:none; margin:0; padding:0; background:none; border:none; font-size:inherit; line-height:inherit; color:inherit; cursor:pointer; position: relative; display:block; width:100%; min-height:var(--pc-legacy-tabs-item-min-height); padding:var(--pc-legacy-tabs-item-vertical-padding) var(--p-space-400); text-align:left; text-decoration:none; cursor:pointer; border-radius:var(--p-border-radius-100); color:inherit; } .Polaris-LegacyTabs__Item:focus{ outline:none; } .Polaris-LegacyTabs__Item::after { content: ''; position: absolute; z-index: 1; top: -0.0625rem; right: -0.0625rem; bottom: -0.0625rem; left: -0.0625rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus); border-radius: var(--p-border-radius-100); } .Polaris-LegacyTabs__Item::-moz-focus-inner{ border:none; } .Polaris-LegacyTabs__Item:hover{ background-color:var(--p-color-bg-surface-hover); } .Polaris-LegacyTabs__Item:active{ background-color:var(--p-color-bg-surface-brand-active); } .Polaris-LegacyTabs__Item:focus-visible:not(:active)::after { box-shadow: 0 0 0 0.125rem var(--p-color-border-focus); outline: var(--p-border-width-025) solid transparent; } .Polaris-LegacyTabs__Item:visited{ color:inherit; } .Polaris-LegacyTabs__DisclosureTab{ display:none; } .Polaris-LegacyTabs__DisclosureTab--visible{ display:flex; } .Polaris-LegacyTabs__DisclosureActivator{ position: relative; height:100%; background-color:transparent; cursor:pointer; border:none; outline:none; margin:var(--p-space-025) var(--p-space-025) calc(var(--p-space-025)*-1) 0; } .Polaris-LegacyTabs__DisclosureActivator::after { content: ''; position: absolute; z-index: 1; top: -0.0625rem; right: -0.0625rem; bottom: -0.0625rem; left: -0.0625rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus); border-radius: var(--p-border-radius-100); } .Polaris-LegacyTabs__DisclosureActivator:hover svg, .Polaris-LegacyTabs__DisclosureActivator:focus svg{ fill:var(--p-color-icon); } .Polaris-LegacyTabs__DisclosureActivator:focus-visible .Polaris-LegacyTabs__Title::after { box-shadow: 0 0 0 0.125rem var(--p-color-border-focus); outline: var(--p-border-width-025) solid transparent; } .Polaris-LegacyTabs__DisclosureActivator:hover .Polaris-LegacyTabs__Title::before{ background-color:var(--p-color-border-hover); } .Polaris-LegacyTabs__TabMeasurer{ display:flex; visibility:hidden; height:0; } .Polaris-Link{ -webkit-appearance:none; appearance:none; display:inline; text-align:inherit; padding:0; background:none; border:0; font-size:inherit; font-weight:inherit; color:var(--p-color-text-link); text-decoration:underline; cursor:pointer; touch-action:manipulation; } .Polaris-Link:hover{ color:var(--p-color-text-link-hover); text-decoration:underline; } .Polaris-Link:focus, .Polaris-Link:focus-visible{ outline:var(--p-color-border-focus) auto var(--p-border-width-050); outline-offset:var(--p-space-050); border-radius:var(--p-border-radius-150); } .Polaris-Link:active{ position:relative; color:var(--p-color-text-link-active); } @media print{ .Polaris-Link{ -webkit-text-decoration-color:var(--p-color-border-tertiary); text-decoration-color:var(--p-color-border-tertiary); } } .Polaris-Link--monochrome{ color:inherit; } .Polaris-Link--monochrome:hover, .Polaris-Link--monochrome:focus, .Polaris-Link--monochrome:active{ color:inherit; } .Polaris-Link--removeUnderline{ text-decoration:none; } .Polaris-Link--removeUnderline:hover{ text-decoration:underline; } .Polaris-List{ padding-left:var(--p-space-500); margin-top:0; margin-bottom:0; list-style:disc outside none; } .Polaris-List + .Polaris-List{ margin-top:var(--p-space-400); } .Polaris-List--typeNumber{ padding-left:var(--p-space-800); list-style:decimal outside none; } .Polaris-List__Item .Polaris-List:first-child{ margin-top:var(--p-space-200); } .Polaris-List--spacingLoose .Polaris-List__Item{ margin-bottom:var(--p-space-100); } .Polaris-MediaCard{ height:100%; width:100%; display:flex; flex-flow:row wrap; } .Polaris-MediaCard.Polaris-MediaCard--portrait{ flex-flow:column nowrap; } @media (max-width: 47.9975em){ .Polaris-MediaCard{ flex-flow:column nowrap; } } .Polaris-MediaCard__MediaContainer{ overflow:hidden; } .Polaris-MediaCard__MediaContainer:not(.Polaris-MediaCard--portrait){ flex-basis:40%; } @media (min-width: 48em){ .Polaris-MediaCard__MediaContainer:not(.Polaris-MediaCard--portrait){ border-top-right-radius:0; border-top-left-radius:var(--p-border-radius-200); border-bottom-left-radius:var(--p-border-radius-200); } } .Polaris-MediaCard__MediaContainer.Polaris-MediaCard--sizeSmall:not(.Polaris-MediaCard--portrait){ flex-basis:33%; } @media (min-width: 30.625em){ .Polaris-MediaCard__MediaContainer{ border-top-left-radius:var(--p-border-radius-200); border-top-right-radius:var(--p-border-radius-200); } } .Polaris-MediaCard__InfoContainer{ position:relative; } .Polaris-MediaCard__InfoContainer:not(.Polaris-MediaCard--portrait){ flex-basis:60%; } .Polaris-MediaCard__InfoContainer.Polaris-MediaCard--sizeSmall:not(.Polaris-MediaCard--portrait){ flex-basis:67%; } .Polaris-MediaCard__ActionContainer{ padding-top:var(--p-space-200); } .Polaris-MediaCard__ActionContainer.Polaris-MediaCard--portrait{ padding-top:var(--p-space-200); } @media (max-width: 47.9975em){ .Polaris-MediaCard__ActionContainer{ padding-top:var(--p-space-200); } } .Polaris-Navigation{ --pc-navigation-mobile-height:2.5rem; --pc-navigation-desktop-height:1.75rem; --pc-navigation-icon-size:1.25rem; --pc-navigation-item-line-height:2.5rem; --pc-navigation-letter-spacing-medium:-0.005rem; display:flex; flex-direction:column; align-items:stretch; width:var(--pg-mobile-nav-width); min-width:var(--pg-layout-width-nav-base); max-width:22.5rem; height:100%; min-height:100%; background-color:var(--p-color-nav-bg); -webkit-overflow-scrolling:touch; border-right:0; padding-bottom: 0; padding-bottom: calc(constant(safe-area-inset-bottom)); padding-bottom: calc(env(safe-area-inset-bottom)); } .Polaris-Navigation:focus{ outline:none; } @media (min-width: 48em){ .Polaris-Navigation{ max-width:var(--pg-layout-width-nav-base); max-width: var(--pg-layout-width-nav-base); max-width: calc(var(--pg-layout-width-nav-base) + constant(safe-area-inset-left)); max-width: calc(var(--pg-layout-width-nav-base) + env(safe-area-inset-left)); } } .Polaris-Navigation__UserMenu{ flex:0 0 auto; } .Polaris-Navigation__ContextControl{ background-color:var(--p-color-bg-inverse); margin-bottom:var(--p-space-400); min-height:var(--pg-top-bar-height); } @media (min-width: 48em){ .Polaris-Navigation__ContextControl{ display:none; } } .Polaris-Navigation__PrimaryNavigation{ display:flex; overflow:auto; flex:1 1 auto; flex-direction:column; align-items:stretch; max-width:100%; padding-top:var(--p-space-100); scrollbar-width:thin; scrollbar-gutter:stable; scrollbar-color:var(--p-color-nav-bg) transparent; transition:scrollbar-color var(--p-motion-duration-100) var(--p-motion-ease-in); } @media (min-width: 48em){ .Polaris-Navigation__PrimaryNavigation{ padding-top:var(--p-space-400); } } .Polaris-Navigation__PrimaryNavigation:focus{ outline:none; } .Polaris-Navigation__PrimaryNavigation::-webkit-scrollbar{ width:0.6875rem; opacity:0; } .Polaris-Navigation__PrimaryNavigation::-webkit-scrollbar-thumb{ background-color:var(--p-color-scrollbar-thumb-bg-hover); border:var(--p-border-width-050) solid transparent; border-radius:var(--p-border-radius-300); background-clip:content-box; } .Polaris-Navigation__PrimaryNavigation:hover{ scrollbar-color:var(--p-color-scrollbar-thumb-bg-hover) transparent; background-color:var(--p-color-nav-bg); } .Polaris-Navigation__PrimaryNavigation:hover::-webkit-scrollbar{ opacity:1; } .Polaris-Navigation__LogoContainer{ display:none; } @media (max-width: 47.9975em){ .Polaris-Navigation__LogoContainer{ display:flex; flex:0 0 var(--pg-top-bar-height); align-items:center; height:var(--pg-top-bar-height); padding:0 var(--p-space-200) 0 var(--p-space-400); background-color:var(--p-color-bg-inverse); box-shadow:var(--p-shadow-200); margin-bottom:var(--p-space-400); flex-basis: var(--pg-top-bar-height); flex-basis: calc(var(--pg-top-bar-height) + constant(safe-area-inset-left)); flex-basis: calc(var(--pg-top-bar-height) + env(safe-area-inset-left)); padding-left: var(--p-space-400); padding-left: calc(var(--p-space-400) + constant(safe-area-inset-left)); padding-left: calc(var(--p-space-400) + env(safe-area-inset-left)); } } .Polaris-Navigation__LogoContainer.Polaris-Navigation--hasLogoSuffix{ gap:var(--p-space-200); } .Polaris-Navigation__Logo, .Polaris-Navigation__LogoLink{ display:block; } .Polaris-Navigation__Item{ -webkit-appearance:none; appearance:none; margin:0; padding:0; background:none; border:none; font-size:inherit; line-height:inherit; color:inherit; cursor:pointer; display:flex; flex-grow:1; align-items:flex-start; max-width:100%; padding:0 var(--p-space-100) 0 var(--p-space-200); margin:0; color:var(--p-color-text); text-decoration:none; text-align:left; position: relative; position:relative; } .Polaris-Navigation__Item:focus{ outline:none; } .Polaris-Navigation__Item::after { content: ''; position: absolute; z-index: 1; top: -0.0625rem; right: -0.0625rem; bottom: -0.0625rem; left: -0.0625rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus); border-radius: var(--p-border-radius-100); } .Polaris-Navigation__Item:focus-visible{ background:var(--p-color-bg-surface-hover); color:var(--p-color-text); text-decoration:none; } .Polaris-Navigation__Item:focus-visible::after { box-shadow: 0 0 0 0.125rem var(--p-color-border-focus); outline: var(--p-border-width-025) solid transparent; } .Polaris-Navigation__Item:focus-visible:not(:active){ z-index:var(--p-z-index-1); outline:var(--p-border-width-050) solid var(--p-color-border-focus); } .Polaris-Navigation__Item:focus-visible:not(:active)::after{ content:none; } .Polaris-Navigation__Item:active, .Polaris-Navigation__Item:active:hover{ color:var(--p-color-text); background-color:var(--p-color-nav-bg-surface-selected); } .Polaris-Navigation__Item:active::after, .Polaris-Navigation__Item:active:hover::after{ content:none; } .Polaris-Navigation__Item::-moz-focus-inner{ border:0; } .Polaris-Navigation__Item svg, .Polaris-Navigation__Item img{ display:block; height:var(--p-space-500); width:var(--p-space-500); } .Polaris-Navigation__Item .Polaris-Navigation__Icon--resized svg, .Polaris-Navigation__Item .Polaris-Navigation__Icon--resized img{ margin:var(--p-space-050); height:var(--p-space-400); width:var(--p-space-400); } .Polaris-Navigation__Item .Polaris-Navigation__Icon--resized img{ border-radius:var(--p-border-radius-100); } .Polaris-Navigation__Item:is(:hover, :focus-visible){ background-color:transparent; color:var(--p-color-text); text-decoration:none; } .Polaris-Navigation__Item .Polaris-Navigation__Badge{ margin-right:0; } .Polaris-Navigation__Item::before{ opacity:0; } .Polaris-Navigation__Item, .Polaris-Navigation__ItemInnerWrapper{ border-radius:var(--p-border-radius-200); transition:background-color var(--p-motion-duration-150) var(--p-motion-ease-out); } .Polaris-Navigation__ItemWrapper{ --secondary-actions-on-hover-background-color:var( --p-color-nav-bg-surface-hover ); width:100%; padding:0 var(--p-space-300); } @supports (scrollbar-gutter: stable){ .Polaris-Navigation__ItemWrapper{ padding:0 calc(var(--p-space-300) - var(--pc-app-provider-scrollbar-width)) 0 var(--p-space-300); } } .Polaris-Navigation__ItemInnerWrapper{ position:relative; display:flex; flex-wrap:nowrap; width:100%; transition:background-color var(--p-motion-duration-150) var(--p-motion-ease-out); } .Polaris-Navigation__ItemInnerWrapper.Polaris-Navigation__ItemInnerDisabled{ pointer-events:none; } .Polaris-Navigation__ItemInnerWrapper:is(:hover, :focus-visible){ background:var(--p-color-nav-bg-surface-hover); } @media (min-width: 48em){ .Polaris-Navigation__ItemInnerWrapper.Polaris-Navigation--itemInnerWrapperDisplayActionsOnHover:is(:hover, :focus-visible) .Polaris-Navigation__SecondaryActions{ background:var(--secondary-actions-on-hover-background-color); } .Polaris-Navigation__ItemInnerWrapper.Polaris-Navigation--itemInnerWrapperDisplayActionsOnHover:is(:hover, :focus-visible) .Polaris-Navigation__SecondaryActions::before{ background:linear-gradient( to right, rgba(0, 0, 0, 0), var(--p-color-nav-bg-surface-hover) var(--p-space-800) ); } .Polaris-Navigation__ItemInnerWrapper.Polaris-Navigation--itemInnerWrapperDisplayActionsOnHover:is(:active) .Polaris-Navigation__SecondaryActions{ background:var(--p-color-nav-bg-surface-active); } } .Polaris-Navigation__ItemInnerWrapper:active{ background-color:var(--p-color-nav-bg-surface-active); } @media (min-width: 48em){ .Polaris-Navigation__ItemInnerWrapper.Polaris-Navigation--itemInnerWrapperDisplayActionsOnHover:active .Polaris-Navigation__SecondaryActions::before{ background:linear-gradient( to right, rgba(0, 0, 0, 0), var(--p-color-nav-bg-surface-active) var(--p-space-800) ); } } .Polaris-Navigation__ItemInnerWrapper--selected{ background-color:var(--p-color-nav-bg-surface-selected); } .Polaris-Navigation__ItemInnerWrapper--selected .Polaris-Navigation__Text{ color:var(--p-color-text); } .Polaris-Navigation__ItemInnerWrapper--selected:is(:hover, :focus-visible, :focus-within){ background:var(--p-color-nav-bg-surface-selected); } @media (min-width: 48em){ .Polaris-Navigation__ItemInnerWrapper--selected.Polaris-Navigation--itemInnerWrapperDisplayActionsOnHover:is(:hover, :focus-visible, :focus-within) .Polaris-Navigation__SecondaryActions{ background:var(--p-color-nav-bg-surface-selected); } .Polaris-Navigation__ItemInnerWrapper--selected.Polaris-Navigation--itemInnerWrapperDisplayActionsOnHover:is(:hover, :focus-visible, :focus-within) .Polaris-Navigation__SecondaryActions::before{ background:linear-gradient( to right, rgba(0, 0, 0, 0), var(--p-color-nav-bg-surface-selected) var(--p-space-800) ); } } .Polaris-Navigation__ItemInnerWrapper--selected:active{ background:var(--p-color-nav-bg-surface-active); } .Polaris-Navigation__ItemInnerWrapper--selected .Polaris-Navigation__SecondaryActions{ background:var(--p-color-nav-bg-surface-selected); border-top-right-radius:var(--p-border-radius-200); border-bottom-right-radius:var(--p-border-radius-200); } .Polaris-Navigation__ItemInnerWrapper--selected .Polaris-Navigation__SecondaryActions::before{ background:linear-gradient( to right, rgba(0, 0, 0, 0), var(--p-color-nav-bg-surface-selected) var(--p-space-800) ); } .Polaris-Navigation__ItemInnerWrapper--open{ background-color:transparent; } .Polaris-Navigation__ItemInnerWrapper--open:active{ background:var(--p-color-nav-bg-surface-active); } @media (min-width: 48em){ .Polaris-Navigation__ItemInnerWrapper--open.Polaris-Navigation--itemInnerWrapperDisplayActionsOnHover .Polaris-Navigation__SecondaryActions{ background:var(--secondary-actions-on-hover-background-color); } .Polaris-Navigation__ItemInnerWrapper--open.Polaris-Navigation--itemInnerWrapperDisplayActionsOnHover .Polaris-Navigation__SecondaryActions::before{ background:linear-gradient( to right, rgba(0, 0, 0, 0), var(--secondary-actions-on-hover-background-color) var(--p-space-800) ); } } .Polaris-Navigation__Item--selected{ color:var(--p-color-text); outline:var(--p-border-width-025) solid transparent; } .Polaris-Navigation__Item--selected::before{ content:''; position:absolute; top:0.0625rem; bottom:0.0625rem; left:calc(var(--p-space-200)*-1); width:0.1875rem; background-color:transparent; border-top-right-radius:var(--p-border-radius-100); border-bottom-right-radius:var(--p-border-radius-100); } .Polaris-Navigation__Item--selected{ position: relative; } .Polaris-Navigation__Item--selected::after { content: ''; position: absolute; z-index: 1; top: -0.0625rem; right: -0.0625rem; bottom: -0.0625rem; left: -0.0625rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus); border-radius: var(--p-border-radius-100); } .Polaris-Navigation__Item--selected:hover, .Polaris-Navigation__Item--selected:focus-visible{ color:var(--p-color-text-brand-hover); } .Polaris-Navigation__Item--selected :focus-visible::after { box-shadow: 0 0 0 0.125rem var(--p-color-border-focus); outline: var(--p-border-width-025) solid transparent; } .Polaris-Navigation__Item--selected:active, .Polaris-Navigation__Item--selected:active:hover{ color:var(--p-color-text-brand); background-color:var(--p-color-nav-bg-surface-active); } .Polaris-Navigation__Item--selected:active::after, .Polaris-Navigation__Item--selected:active:hover::after{ content:none; } .Polaris-Navigation--itemChildActive::before{ content:url('data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2228%22%20viewBox%3D%220%200%2021%2028%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M9%2024.75C9%2024.3358%209.33579%2024%209.75%2024V24C10.1642%2024%2010.5%2024.3358%2010.5%2024.75V28H9V24.75Z%22%20fill%3D%22%23B5B5B5%22%2F%3E%0A%3C%2Fsvg%3E'); position:absolute; top:var(--p-space-200); left:var(--p-space-200); width:1.3125rem; height:2rem; border-radius:0; opacity:1; transition:opacity var(--p-motion-duration-150) var(--p-motion-ease-out); } @media (min-width: 48em){ .Polaris-Navigation--itemChildActive::before{ top:0; height:1.75rem; } } .Polaris-Navigation__Item--disabled{ color:var(--p-color-text-disabled); } .Polaris-Navigation__Item--disabled .Polaris-Navigation__Text{ opacity:0.6; } .Polaris-Navigation__Item--disabled .Polaris-Navigation__Icon{ opacity:0.4; } .Polaris-Navigation__Badge{ margin-left:var(--p-space-200); display:inline-flex; height:var(--p-font-line-height-500); margin-top:var(--p-space-200); margin-right:var(--p-space-100); } @media (min-width: 48em){ .Polaris-Navigation__Badge{ margin:var(--p-space-100); margin-right:var(--p-space-100); margin-top:var(--p-space-100); } } .Polaris-Navigation__ListItem--hasAction .Polaris-Navigation__Badge{ margin-right:var(--p-space-100); } .Polaris-Navigation__Icon{ --pc-navigation-filter-icon:brightness(0) saturate(100%) invert(36%) sepia(13%) saturate(137%) hue-rotate(169deg) brightness(95%) contrast(87%); --pc-navigation-filter-icon-action-primary:invert(10%) sepia(11%) saturate(0%) hue-rotate(159deg) brightness(105%) contrast(102%); --pc-navigation-filter-icon-on-interactive:brightness(0) saturate(100%) invert(100%); flex-shrink:0; align-self:flex-start; width:1.25rem; height:1.25rem; margin-top:var(--p-space-200); margin-right:var(--p-space-200); margin-bottom:var(--p-space-200); } @media (min-width: 48em){ .Polaris-Navigation__Icon{ margin-top:var(--p-space-100); margin-right:var(--p-space-200); margin-bottom:var(--p-space-100); } } .Polaris-Navigation__Icon svg{ fill:var(--p-color-icon); } .Polaris-Navigation__Icon img{ filter:var(--pc-navigation-filter-icon); } .Polaris-Navigation__Item:hover .Polaris-Navigation__Icon svg, .Polaris-Navigation__Item:focus-visible .Polaris-Navigation__Icon svg{ fill:var(--p-color-icon); } .Polaris-Navigation__Item:hover .Polaris-Navigation__Icon img, .Polaris-Navigation__Item:focus-visible .Polaris-Navigation__Icon img{ filter:var(--pc-navigation-filter-icon); } .Polaris-Navigation__Item--selected .Polaris-Navigation__Icon svg, .Polaris-Navigation__Item--selected:hover .Polaris-Navigation__Icon svg, .Polaris-Navigation--subNavigationActive .Polaris-Navigation__Icon svg, .Polaris-Navigation--subNavigationActive:hover .Polaris-Navigation__Icon svg, .Polaris-Navigation--itemChildActive .Polaris-Navigation__Icon svg, .Polaris-Navigation--itemChildActive:hover .Polaris-Navigation__Icon svg, .Polaris-Navigation__Item--selected:focus-visible .Polaris-Navigation__Icon svg{ fill:var(--p-color-icon-brand); } .Polaris-Navigation__Item--selected .Polaris-Navigation__Icon img, .Polaris-Navigation__Item--selected:hover .Polaris-Navigation__Icon img, .Polaris-Navigation--subNavigationActive .Polaris-Navigation__Icon img, .Polaris-Navigation--subNavigationActive:hover .Polaris-Navigation__Icon img, .Polaris-Navigation--itemChildActive .Polaris-Navigation__Icon img, .Polaris-Navigation--itemChildActive:hover .Polaris-Navigation__Icon img, .Polaris-Navigation__Item--selected:focus-visible .Polaris-Navigation__Icon img{ filter:var(--pc-navigation-filter-icon-action-primary); } .Polaris-Navigation__Icon svg{ display:block; } .Polaris-Navigation__ListItem{ position:relative; display:flex; flex-wrap:wrap; } .Polaris-Navigation__RollupSection .Polaris-Navigation__ListItem, .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__ListItem{ opacity:1; } .Polaris-Navigation__ListItem:nth-child(1) { animation-delay: 0ms; } .Polaris-Navigation__ListItem:nth-child(2) { animation-delay: 50ms; } .Polaris-Navigation__ListItem:nth-child(3) { animation-delay: 100ms; } .Polaris-Navigation__ListItem:nth-child(4) { animation-delay: 150ms; } .Polaris-Navigation__ListItem:nth-child(5) { animation-delay: 200ms; } .Polaris-Navigation__ListItem:nth-child(6) { animation-delay: 250ms; } .Polaris-Navigation__ListItem:nth-child(7) { animation-delay: 300ms; } .Polaris-Navigation__ListItem:nth-child(8) { animation-delay: 350ms; } .Polaris-Navigation__ListItem:nth-child(9) { animation-delay: 400ms; } .Polaris-Navigation__ListItem:nth-child(10) { animation-delay: 450ms; } .Polaris-Navigation__ListItem:nth-child(11) { animation-delay: 500ms; } .Polaris-Navigation__ListItem:nth-child(12) { animation-delay: 550ms; } .Polaris-Navigation__ListItem:not(:first-child) .Polaris-Navigation__ItemInnerWrapper{ border-top:0; } .Polaris-Navigation__ListItem--hasAction .Polaris-Navigation__Item{ max-width:calc(100% - var(--pc-navigation-icon-size) + var(--p-space-400)*2 + var(--p-space-100)); } .Polaris-Navigation__Text{ flex:1 1 auto; margin-top:var(--p-space-150); margin-bottom:var(--p-space-150); } @media (min-width: 48em){ .Polaris-Navigation__Text{ margin-top:var(--p-space-100); margin-bottom:var(--p-space-100); } } .Polaris-Navigation__Text--truncated{ display:-webkit-box; overflow:hidden; -webkit-line-clamp:1; -webkit-box-orient:vertical; word-break:break-all; } .Polaris-Navigation__SecondaryActions{ display:flex; align-items:center; height:calc(var(--pc-navigation-mobile-height) - var(--p-space-100)); } .Polaris-Navigation__SecondaryActions:last-child{ margin-right:var(--p-space-050); } @media (min-width: 48em){ .Polaris-Navigation__SecondaryActions{ height:var(--pc-navigation-desktop-height); } } .Polaris-Navigation__ItemWithFloatingActions{ position:relative; display:flex; flex-wrap:nowrap; width:100%; } @media (min-width: 48em){ .Polaris-Navigation--itemInnerWrapperDisplayActionsOnHover .Polaris-Navigation__SecondaryActions{ position:absolute; top:0; right:0; z-index:var(--p-z-index-2); background:var(--p-color-nav-bg-surface-hover); visibility:hidden; opacity:0; transition:none; border-top-right-radius:var(--p-border-radius-200); border-bottom-right-radius:var(--p-border-radius-200); margin-right:0; padding:0 var(--p-space-050); } .Polaris-Navigation--itemInnerWrapperDisplayActionsOnHover .Polaris-Navigation__SecondaryActions::before{ content:''; pointer-events:none; position:absolute; right:100%; display:block; height:100%; width:var(--p-space-800); background:linear-gradient( to right, rgba(0, 0, 0, 0), var(--p-color-nav-bg-surface-hover) var(--p-space-800) ); } .Polaris-Navigation--itemInnerWrapperDisplayActionsOnHover:focus-within .Polaris-Navigation__SecondaryActions, .Polaris-Navigation--itemInnerWrapperDisplayActionsOnHover:hover .Polaris-Navigation__SecondaryActions{ visibility:visible; opacity:1; } .Polaris-Navigation--itemInnerWrapperDisplayActionsOnHover:active .Polaris-Navigation__SecondaryActions{ background-color:var(--p-color-nav-bg-surface-active); } } .Polaris-Navigation__SecondaryAction[type='button']{ cursor:pointer; background:none; } .Polaris-Navigation__SecondaryAction{ display:flex; align-items:center; height:calc(100% - var(--p-space-100)); padding:calc(var(--p-space-200) - var(--p-space-050)) var(--p-space-200); border-radius:var(--p-border-radius-200); border:none; } .Polaris-Navigation__SecondaryAction:focus-visible:not(:active){ outline:var(--p-border-width-050) solid var(--p-color-border-focus); } .Polaris-Navigation__SecondaryAction:focus-visible:not(:active)::after{ content:none; } .Polaris-Navigation__SecondaryAction svg{ fill:var(--p-color-icon); } @media (min-width: 48em){ .Polaris-Navigation__SecondaryAction{ height:calc(100% - var(--p-space-100)); padding:calc(var(--p-space-100) - var(--p-space-050)); } } .Polaris-Navigation__SecondaryAction:hover, .Polaris-Navigation__SecondaryAction:focus, .Polaris-Navigation__SecondaryAction:active{ background-color:var(--p-color-bg-fill-transparent-hover); } .Polaris-Navigation__SecondaryAction:hover svg, .Polaris-Navigation__SecondaryAction:focus svg, .Polaris-Navigation__SecondaryAction:active svg{ fill:var(--p-color-icon-hover); } @media (-ms-high-contrast: active){ .Polaris-Navigation__SecondaryAction:hover svg, .Polaris-Navigation__SecondaryAction:focus svg, .Polaris-Navigation__SecondaryAction:active svg{ fill:#ffffff; } } .Polaris-Navigation__SecondaryAction{ position: relative; } .Polaris-Navigation__SecondaryAction::after { content: ''; position: absolute; z-index: 1; top: -0.0625rem; right: -0.0625rem; bottom: -0.0625rem; left: -0.0625rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus); border-radius: var(--p-border-radius-100); } .Polaris-Navigation__SecondaryAction:focus-visible::after { box-shadow: 0 0 0 0.125rem var(--p-color-border-focus); outline: var(--p-border-width-025) solid transparent; } .Polaris-Navigation__SecondaryAction:active::after{ content:none; } .Polaris-Navigation__SecondaryAction:active svg{ fill:var(--p-color-icon-active); } .Polaris-Navigation__SecondaryAction:focus, .Polaris-Navigation__SecondaryAction:active{ outline:none; } .Polaris-Navigation__SecondaryNavigation{ flex-basis:100%; margin-left:0; overflow-x:visible; } .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__List{ margin:0; padding:0; list-style:none; margin-bottom:var(--p-space-200); } .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item{ position:relative; padding-left:calc(var(--p-space-800) + var(--p-space-100)); } .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item::before, .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item::after{ content:''; position:absolute; top:0; left:var(--p-space-200); width:1.3125rem; height:2rem; border-radius:0; opacity:0; transition:opacity var(--p-motion-duration-150) var(--p-motion-ease-out); } @media (min-width: 48em){ .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item::before, .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item::after{ height:1.75rem; } } .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item:is(:hover, :focus-visible, :focus-within){ background:var(--p-color-nav-bg); color:var(--p-color-text-brand); } .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item:hover{ color:var(--p-color-text); background:var(--p-color-nav-bg-surface-hover); } .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item:focus-visible::after { box-shadow: 0 0 0 0.125rem var(--p-color-border-focus); outline: var(--p-border-width-025) solid transparent; } .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item:active, .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item:active:hover{ background-color:var(--p-color-nav-bg-surface-active); } .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item:active::after, .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item:active:hover::after{ content:none; } .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item:active{ color:var(--p-color-text-brand); } .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Text{ margin-top:var(--p-space-100); margin-bottom:var(--p-space-100); } .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item--selected{ border-radius:var(--p-border-radius-200); color:var(--p-color-text); position: relative; } .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item--selected::after { content: ''; position: absolute; z-index: 1; top: -0.0625rem; right: -0.0625rem; bottom: -0.0625rem; left: -0.0625rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus); border-radius: var(--p-border-radius-100); } .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item--selected:is(:hover, :focus-visible, :focus-within){ background:var(--p-color-nav-bg-surface-selected); color:var(--p-color-text-brand); } .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item--selected:active, .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item--selected:active:hover{ background:var(--p-color-nav-bg-surface-active); color:var(--p-color-text-brand); } .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item--selected:active::after, .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item--selected:active:hover::after{ content:none; } .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item--selected:hover{ color:var(--p-color-text-brand-hover); } .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item--selected:focus-visible{ color:var(--p-color-text-brand); } .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item--selected:active{ color:var(--p-color-text-brand); } .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item--selected:active::after{ content:none; } .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item--disabled{ color:var(--p-color-text-disabled); } .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item--line::before, .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item--line.Polaris-Navigation--itemHoverLine::before{ opacity:1; background:url('data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2228%22%20viewBox%3D%220%200%2021%2028%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%229%22%20width%3D%221.5%22%20height%3D%2228%22%20fill%3D%22%23B5B5B5%22%2F%3E%3C%2Fsvg%3E'); } .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation--itemLinePointer::before, .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation--itemLinePointer.Polaris-Navigation--itemHoverPointer::before{ opacity:1; content:url("data:image/svg+xml,%3Csvg%20width%3D'21'%20height%3D'28'%20viewBox%3D'0%200%2021%2028'%20fill%3D'none'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M19%2014.25H19.75V15.75H19V14.25ZM10.077%2013.362L10.7452%2013.0215V13.0215L10.077%2013.362ZM11.388%2014.673L11.7285%2014.0048H11.7285L11.388%2014.673ZM10.5%200V10.2H9V0H10.5ZM14.55%2014.25H19V15.75H14.55V14.25ZM10.5%2010.2C10.5%2011.0525%2010.5006%2011.6467%2010.5384%2012.1093C10.5755%2012.5632%2010.6446%2012.824%2010.7452%2013.0215L9.40873%2013.7025C9.18239%2013.2582%209.08803%2012.7781%209.04336%2012.2315C8.99942%2011.6936%209%2011.0277%209%2010.2H10.5ZM14.55%2015.75C13.7223%2015.75%2013.0564%2015.7506%2012.5185%2015.7066C11.9719%2015.662%2011.4918%2015.5676%2011.0475%2015.3413L11.7285%2014.0048C11.926%2014.1054%2012.1868%2014.1745%2012.6407%2014.2116C13.1033%2014.2494%2013.6975%2014.25%2014.55%2014.25V15.75ZM10.7452%2013.0215C10.9609%2013.4448%2011.3052%2013.7891%2011.7285%2014.0048L11.0475%2015.3413C10.3419%2014.9817%209.76825%2014.4081%209.40873%2013.7025L10.7452%2013.0215Z'%20fill%3D'%23B5B5B5'/%3E%3Cpath%20d%3D'M17%2012L20%2015L17%2018'%20stroke%3D'%23B5B5B5'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'/%3E%3C/svg%3E%0A"); } .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation--itemHoverLine::before{ opacity:1; content:url('data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2228%22%20viewBox%3D%220%200%2021%2028%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M9%200H10.5V28H9V0Z%22%20fill%3D%22%23B5B5B5%22%2F%3E%0A%3C%2Fsvg%3E'); } .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation--itemHoverPointer::before{ opacity:1; content:url('data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2228%22%20viewBox%3D%220%200%2021%2028%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M9%207.75C9%207.33579%209.33579%207%209.75%207V7C10.1642%207%2010.5%207.33579%2010.5%207.75V9.95C10.5%2010.8025%2010.5006%2011.3967%2010.5384%2011.8593C10.5755%2012.3132%2010.6446%2012.574%2010.7452%2012.7715C10.961%2013.1948%2011.3052%2013.539%2011.7285%2013.7548C11.926%2013.8554%2012.1868%2013.9245%2012.6407%2013.9616C13.1033%2013.9994%2013.6975%2014%2014.55%2014H17.9393L16.2197%2012.2803C15.9268%2011.9874%2015.9268%2011.5126%2016.2197%2011.2197C16.5126%2010.9268%2016.9874%2010.9268%2017.2803%2011.2197L20.2803%2014.2197C20.5732%2014.5126%2020.5732%2014.9874%2020.2803%2015.2803L17.2803%2018.2803C16.9874%2018.5732%2016.5126%2018.5732%2016.2197%2018.2803C15.9268%2017.9874%2015.9268%2017.5126%2016.2197%2017.2197L17.9393%2015.5H14.5179C13.705%2015.5%2013.0494%2015.5%2012.5185%2015.4566C11.9719%2015.412%2011.4918%2015.3176%2011.0475%2015.0913C10.3419%2014.7317%209.76825%2014.1581%209.40873%2013.4525C9.18239%2013.0082%209.08803%2012.5281%209.04336%2011.9815C8.99999%2011.4506%208.99999%2010.795%209%209.98212V7.75Z%22%20fill%3D%22%23CCCCCC%22%2F%3E%0A%3C%2Fsvg%3E'); } .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item--line.Polaris-Navigation--itemHoverPointer::before{ opacity:1; content:url('data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2228%22%20viewBox%3D%220%200%2021%2028%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M9%200H10.5V28H9V0Z%22%20fill%3D%22%23B5B5B5%22%2F%3E%0A%3C%2Fsvg%3E'); } .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item--line.Polaris-Navigation--itemHoverPointer::after{ opacity:1; content:url('data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2228%22%20viewBox%3D%220%200%2021%2028%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M11.5%2015.2751C11.8158%2015.3745%2012.1522%2015.4267%2012.5185%2015.4566C13.0494%2015.5%2013.705%2015.5%2014.5179%2015.5H17.9393L16.2197%2017.2197C15.9268%2017.5126%2015.9268%2017.9874%2016.2197%2018.2803C16.5126%2018.5732%2016.9874%2018.5732%2017.2803%2018.2803L20.2803%2015.2803C20.5732%2014.9874%2020.5732%2014.5126%2020.2803%2014.2197L17.2803%2011.2197C16.9874%2010.9268%2016.5126%2010.9268%2016.2197%2011.2197C15.9268%2011.5126%2015.9268%2011.9874%2016.2197%2012.2803L17.9393%2014H14.55C13.6975%2014%2013.1033%2013.9994%2012.6407%2013.9616C12.1868%2013.9245%2011.926%2013.8554%2011.7285%2013.7548C11.6495%2013.7145%2011.5732%2013.6697%2011.5%2013.6208V15.2751Z%22%20fill%3D%22%23CCCCCC%22%2F%3E%0A%3C%2Fsvg%3E'); } .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation--itemLinePointer.Polaris-Navigation--itemHoverLine::before{ opacity:1; content:url('data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2228%22%20viewBox%3D%220%200%2021%2028%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%200.75V0H10.5V0.75V9.95C10.5%2010.8025%2010.5006%2011.3967%2010.5384%2011.8593C10.5755%2012.3132%2010.6446%2012.574%2010.7452%2012.7715C10.961%2013.1948%2011.3052%2013.539%2011.7285%2013.7548C11.926%2013.8554%2012.1868%2013.9245%2012.6407%2013.9616C13.1033%2013.9994%2013.6975%2014%2014.55%2014H17.9393L16.2197%2012.2803C15.9268%2011.9874%2015.9268%2011.5126%2016.2197%2011.2197C16.5126%2010.9268%2016.9874%2010.9268%2017.2803%2011.2197L20.2803%2014.2197C20.5732%2014.5126%2020.5732%2014.9874%2020.2803%2015.2803L17.2803%2018.2803C16.9874%2018.5732%2016.5126%2018.5732%2016.2197%2018.2803C15.9268%2017.9874%2015.9268%2017.5126%2016.2197%2017.2197L17.9393%2015.5H14.55H14.5179C13.705%2015.5%2013.0494%2015.5%2012.5185%2015.4566C11.9719%2015.412%2011.4918%2015.3176%2011.0475%2015.0913C10.3419%2014.7317%209.76825%2014.1581%209.40873%2013.4525C9.18239%2013.0082%209.08803%2012.5281%209.04336%2011.9815C8.99999%2011.4506%208.99999%2010.795%209%209.98212V9.95V0.75Z%22%20fill%3D%22%23B5B5B5%22%2F%3E%0A%3C%2Fsvg%3E'); } .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation--itemLinePointer.Polaris-Navigation--itemHoverLine::after{ opacity:1; } .Polaris-Navigation__SecondaryNavigation--noIcon .Polaris-Navigation__Item{ padding-left:var(--p-space-600); } .Polaris-Navigation__Section{ flex:0 0 auto; margin:0; padding:var(--p-space-400) 0; padding-top:0; padding-left: 0; padding-left: calc(constant(safe-area-inset-left)); padding-left: calc(env(safe-area-inset-left)); list-style:none; } .Polaris-Navigation__Section + .Polaris-Navigation__Section{ padding-top:var(--p-space-200); padding-bottom:var(--p-space-400); } .Polaris-Navigation__Section--fill{ flex:1 0 auto; } .Polaris-Navigation__Section--withSeparator{ border-top:var(--p-border-width-025) solid var(--p-color-border-secondary); } .Polaris-Navigation__SectionHeading{ display:flex; align-items:center; padding-left:var(--p-space-500); padding-right:var(--p-space-100); } @supports not (scrollbar-gutter: stable){ .Polaris-Navigation__SectionHeading{ padding-right:var(--p-space-200); } } @supports (scrollbar-gutter: stable){ .Polaris-Navigation__SectionHeading{ padding-right:calc(var(--p-space-100) - var(--pc-app-provider-scrollbar-width)); } } .Polaris-Navigation__SectionHeading > :first-child{ flex:1 1 auto; margin-top:calc(var(--p-space-200) + var(--p-space-050)); margin-bottom:calc(var(--p-space-200) + var(--p-space-050)); } @media (min-width: 48em){ .Polaris-Navigation__SectionHeading > :first-child{ margin-top:var(--p-space-100); margin-bottom:var(--p-space-100); } } .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action{ -webkit-appearance:none; appearance:none; margin:0; padding:0; background:none; border:none; font-size:inherit; line-height:inherit; color:inherit; cursor:pointer; display:flex; align-items:center; height:calc(100% - var(--p-space-100)); padding:var(--p-space-050) var(--p-space-200); border-radius:var(--p-border-radius-200); } .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:focus{ outline:none; } @supports (scrollbar-gutter: stable){ .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action{ padding-inline:var(--p-space-150); } } .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:focus-visible:not(:active){ outline:var(--p-border-width-050) solid var(--p-color-border-focus); } .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:focus-visible:not(:active)::after{ content:none; } .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action svg{ fill:var(--p-color-icon); } @media (min-width: 48em){ .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action svg, .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action img{ height:var(--p-space-400); width:var(--p-space-400); margin:var(--p-space-050); } } .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action{ position: relative; } .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action::after { content: ''; position: absolute; z-index: 1; top: -0.0625rem; right: -0.0625rem; bottom: -0.0625rem; left: -0.0625rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus); border-radius: var(--p-border-radius-100); } .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:hover, .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:focus{ background:var(--p-color-bg-fill-transparent-hover); } .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:hover svg, .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:focus svg{ fill:var(--p-color-icon-hover); } @media (-ms-high-contrast: active){ .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:hover svg, .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:focus svg{ fill:#ffffff; } .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:hover img, .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:focus img{ filter:var(--p-color-icon-brand); } } .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:hover svg{ fill:var(--p-filter-icon); } .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:focus-visible::after { box-shadow: 0 0 0 0.125rem var(--p-color-border-focus); outline: var(--p-border-width-025) solid transparent; } .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:focus:hover svg{ fill:var(--p-color-icon-hover); } .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:active, .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:active:hover{ background:var(--p-color-bg-surface-active); } .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:active::after, .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:active:hover::after{ content:none; } .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:active svg, .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:active:hover svg{ fill:var(--p-color-icon-active); } .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:focus, .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:active{ outline:none; } .Polaris-Navigation__RollupToggle{ color:var(--p-color-text); color:var(--p-color-text-secondary); } .Polaris-Navigation__RollupToggle:hover{ color:var(--p-color-text-brand); } .Polaris-Navigation__RollupToggle:hover svg{ fill:var(--p-color-icon-brand); } .Polaris-Navigation__RollupToggle:hover img{ filter:var(--p-color-icon-brand); } .Polaris-Navigation__RollupToggle:focus-visible{ outline:none; } .Polaris-Navigation__RollupToggle:focus-visible::after { box-shadow: 0 0 0 0.125rem var(--p-color-border-focus); outline: var(--p-border-width-025) solid transparent; } .Polaris-Navigation__RollupToggle:active{ background-color:var(--p-color-bg-surface-active); } .Polaris-Navigation__List{ margin:0; padding:0; list-style:none; } .Polaris-Navigation__Indicator{ position:relative; display:inline-block; height:0.625rem; width:0.625rem; } .Polaris-Navigation__SecondaryNavigationOpen{ animation:var(--p-motion-ease-out) var(--p-motion-duration-150) Polaris-Navigation__snappy--grow; } @keyframes Polaris-Navigation__snappy--grow{ from{ margin-bottom:-10%; opacity:0; } to{ margin-bottom:0%; opacity:1; } } .Polaris-OptionList-Option{ -webkit-appearance:none; appearance:none; margin:0; padding:0; background:none; border:none; font-size:inherit; line-height:inherit; color:inherit; cursor:pointer; width:100%; min-height:var(--pg-control-height); text-align:left; text-decoration:none; border-radius:var(--p-border-radius-100); margin-top:var(--p-space-100); color:inherit; } .Polaris-OptionList-Option:focus{ outline:none; } .Polaris-OptionList-Option:visited{ color:inherit; } .Polaris-OptionList-Option:first-child{ margin-top:0; } .Polaris-OptionList-Option__SingleSelectOption{ -webkit-appearance:none; appearance:none; margin:0; padding:0; background:none; border:none; font-size:inherit; line-height:inherit; color:inherit; cursor:pointer; text-align:left; display:flex; flex-wrap:nowrap; justify-content:space-between; } .Polaris-OptionList-Option__SingleSelectOption:focus{ outline:none; } .Polaris-OptionList-Option__SingleSelectOption.Polaris-OptionList-Option--focused:focus-visible:not(:active){ outline:var(--p-border-width-050) solid var(--p-color-border-focus); outline-offset:var(--p-space-025); background-color:var(--p-color-bg-surface-secondary-hover); } .Polaris-OptionList-Option__SingleSelectOption.Polaris-OptionList-Option--active{ background:var(--p-color-bg-surface-secondary-selected); } .Polaris-OptionList-Option__SingleSelectOption:not(.Polaris-OptionList-Option--disabled){ color:inherit; } .Polaris-OptionList-Option__SingleSelectOption.Polaris-OptionList-Option--select, .Polaris-OptionList-Option__SingleSelectOption.Polaris-OptionList-Option--select:hover:not(.Polaris-OptionList-Option--disabled), .Polaris-OptionList-Option__SingleSelectOption.Polaris-OptionList-Option--active{ font-weight:var(--p-font-weight-semibold); background:var(--p-color-bg-surface-secondary-active); } .Polaris-OptionList-Option__SingleSelectOption .Polaris-OptionList-Option__Media{ padding:0 var(--p-space-200) 0 0; } .Polaris-OptionList-Option__Label, .Polaris-OptionList-Option__SingleSelectOption, .Polaris-OptionList-Option__MultiSelectOption{ display:flex; align-items:flex-start; width:100%; cursor:pointer; border-radius:var(--p-border-radius-200); padding:var(--p-space-150); word-wrap:break-word; word-break:break-word; overflow-wrap:break-word; } .Polaris-OptionList-Option__Label:hover:not(.Polaris-OptionList-Option--disabled), .Polaris-OptionList-Option__SingleSelectOption:hover:not(.Polaris-OptionList-Option--disabled), .Polaris-OptionList-Option__MultiSelectOption:hover:not(.Polaris-OptionList-Option--disabled){ background-color:var(--p-color-bg-surface-secondary-hover); } .Polaris-OptionList-Option__Label:active:not(.Polaris-OptionList-Option--disabled), .Polaris-OptionList-Option__SingleSelectOption:active:not(.Polaris-OptionList-Option--disabled), .Polaris-OptionList-Option__MultiSelectOption:active:not(.Polaris-OptionList-Option--disabled){ background:var(--p-color-bg-surface-secondary-active); } .Polaris-OptionList-Option__Label:hover:not(.Polaris-OptionList-Option--disabled), .Polaris-OptionList-Option__SingleSelectOption:hover:not(.Polaris-OptionList-Option--disabled), .Polaris-OptionList-Option__MultiSelectOption:hover:not(.Polaris-OptionList-Option--disabled), .Polaris-OptionList-Option__Label:active:not(.Polaris-OptionList-Option--disabled), .Polaris-OptionList-Option__SingleSelectOption:active:not(.Polaris-OptionList-Option--disabled), .Polaris-OptionList-Option__MultiSelectOption:active:not(.Polaris-OptionList-Option--disabled), .Polaris-OptionList-Option__Label.Polaris-OptionList-Option--select, .Polaris-OptionList-Option__SingleSelectOption.Polaris-OptionList-Option--select, .Polaris-OptionList-Option__MultiSelectOption.Polaris-OptionList-Option--select, .Polaris-OptionList-Option__Label.Polaris-OptionList-Option--select:hover:not(.Polaris-OptionList-Option--disabled), .Polaris-OptionList-Option__SingleSelectOption.Polaris-OptionList-Option--select:hover:not(.Polaris-OptionList-Option--disabled), .Polaris-OptionList-Option__MultiSelectOption.Polaris-OptionList-Option--select:hover:not(.Polaris-OptionList-Option--disabled){ outline:var(--p-border-width-025) solid transparent; } .Polaris-OptionList-Option__Label .Polaris-OptionList-Option__Media, .Polaris-OptionList-Option__SingleSelectOption .Polaris-OptionList-Option__Media, .Polaris-OptionList-Option__MultiSelectOption .Polaris-OptionList-Option__Media{ padding:0 var(--p-space-200) 0 0; } .Polaris-OptionList-Option__Label.Polaris-OptionList-Option--disabled, .Polaris-OptionList-Option__SingleSelectOption.Polaris-OptionList-Option--disabled, .Polaris-OptionList-Option__MultiSelectOption.Polaris-OptionList-Option--disabled{ background:transparent; cursor:default; color:var(--p-color-text-disabled); } .Polaris-OptionList-Option__MultiSelectOption.Polaris-OptionList-Option--select.Polaris-OptionList-Option__CheckboxLabel{ background-color:transparent; } .Polaris-OptionList-Option__MultiSelectOption.Polaris-OptionList-Option--select svg{ fill:var(--p-color-icon-active); } .Polaris-OptionList-Option__MultiSelectOption.Polaris-OptionList-Option--select:hover:not(.Polaris-OptionList-Option--disabled){ background-color:var(--p-color-bg-surface-secondary-hover); } .Polaris-OptionList-Option--disabled .Polaris-OptionList-Option__Media svg{ fill:var(--p-color-icon-disabled); } .Polaris-OptionList-Option__Media svg{ fill:var(--p-color-icon); } .Polaris-OptionList-Option--verticalAlignTop{ align-items:flex-start; } .Polaris-OptionList-Option--verticalAlignCenter{ align-items:center; } .Polaris-OptionList-Option--verticalAlignBottom{ align-items:flex-end; } .Polaris-OptionList-Option__Icon{ margin-left:var(--p-space-200); } .Polaris-OptionList-Option__Icon svg{ fill:var(--p-color-icon-brand); } .Polaris-OptionList-Option__Checkbox{ box-sizing:border-box; display:flex; flex-shrink:0; width:1.25rem; height:1.25rem; margin-right:var(--p-space-200); align-items:center; } .Polaris-Header-Title.Polaris-Header-Title__TitleWithSubtitle{ margin-top:0; } .Polaris-Header-Title__TitleWrapper{ display:flex; flex-wrap:wrap; align-items:center; row-gap:var(--p-space-200); padding-block:var(--p-space-050); } .Polaris-Header-Title__TitleWrapper .Polaris-Header-Title{ display:inline; margin-right:var(--p-space-200); } .Polaris-Header-Title__TitleWrapper .Polaris-Header-Title > *{ display:inline; } .Polaris-Header-Title__SubTitle{ margin-top:var(--p-space-050); } .Polaris-Header-Title__SubTitle.Polaris-Header-Title__SubtitleCompact{ margin-top:var(--p-space-050); } .Polaris-Header-Title__SubTitle.Polaris-Header-Title__SubtitleMaxWidth{ max-width:45ch; } .Polaris-Page-Header__TitleWrapper{ grid-area:title; margin-top:var(--p-space-100); align-self:center; } @media (min-width: 30.625em){ .Polaris-Page-Header__TitleWrapper{ margin-top:0; } } .Polaris-Page-Header__TitleWrapper.Polaris-Page-Header__TitleWrapperExpand{ flex:1 1 auto; } .Polaris-Page-Header__BreadcrumbWrapper{ grid-area:breadcrumbs; } .Polaris-Page-Header__BreadcrumbWrapper a, .Polaris-Page-Header__BreadcrumbWrapper button{ background:transparent; border-radius:var(--p-border-radius-200); box-shadow:none; } .Polaris-Page-Header__BreadcrumbWrapper a:is(:hover, :focus, :focus-visible), .Polaris-Page-Header__BreadcrumbWrapper button:is(:hover, :focus, :focus-visible){ box-shadow:none !important; } .Polaris-Page-Header__BreadcrumbWrapper a:is(:hover, :focus-visible), .Polaris-Page-Header__BreadcrumbWrapper button:is(:hover, :focus-visible){ background:var(--p-color-bg-fill-tertiary-hover); } .Polaris-Page-Header__BreadcrumbWrapper a:focus, .Polaris-Page-Header__BreadcrumbWrapper button:focus{ background:var(--p-color-bg-fill-tertiary-active); box-shadow:var(--p-shadow-inset-200) !important; } .Polaris-Page-Header__PaginationWrapper{ margin-left:var(--p-space-200); line-height:1; } .Polaris-Page-Header__PrimaryActionWrapper{ margin-top:0; margin-left:var(--p-space-100); } @media (min-width: 48em){ .Polaris-Page-Header__PrimaryActionWrapper{ margin-left:var(--p-space-200); } } .Polaris-Page-Header__Row{ display:flex; justify-content:space-between; line-height:normal; } .Polaris-Page-Header__Row:first-child{ min-height:1.75rem; } .Polaris-Page-Header__Row + .Polaris-Page-Header__Row{ margin-top:var(--p-space-050); } .Polaris-Page-Header--mobileView .Polaris-Page-Header__Row + .Polaris-Page-Header__Row{ margin-top:var(--p-space-100); } .Polaris-Page-Header__Row + .Polaris-Page-Header__Row .Polaris-Page-Header__RightAlign{ margin-left:0; } .Polaris-Page-Header__RightAlign{ grid-area:actions; display:flex; align-content:flex-end; flex:1 1 auto; align-items:center; align-self:flex-start; justify-content:flex-end; margin-left:var(--p-space-400); white-space:nowrap; } @media (max-width: 30.6225em){ .Polaris-Page-Header--noBreadcrumbs .Polaris-Page-Header__RightAlign{ margin-left:0; } } @media (min-width: 30.625em){ .Polaris-Page-Header__AdditionalMetaData{ margin-left:calc(var(--p-space-500) + var(--p-space-200) + var(--p-space-100)); } } .Polaris-Page-Header--noBreadcrumbs .Polaris-Page-Header__AdditionalMetaData{ margin-left:0; } .Polaris-Page-Header__Actions{ width:100%; display:flex; align-items:center; justify-content:flex-end; text-align:right; } @media (max-width: 64.9975em){ .Polaris-Page-Header--longTitle .Polaris-Page-Header__AdditionalMetaData{ margin-left:0; } .Polaris-Page-Header--longTitle .Polaris-Page-Header__Row{ display:grid; gap:var(--p-space-200) var(--p-space-400); grid-template-columns:auto 1fr; grid-template-areas:'breadcrumbs actions' 'title title'; } .Polaris-Page-Header--longTitle .Polaris-Page-Header__Row + .Polaris-Page-Header__Row{ gap:0; } } @media (max-width: 47.9975em){ .Polaris-Page-Header--mediumTitle:not(.Polaris-Page-Header--noBreadcrumbs) .Polaris-Page-Header__AdditionalMetaData{ margin-left:0; } .Polaris-Page-Header--mediumTitle:not(.Polaris-Page-Header--noBreadcrumbs) .Polaris-Page-Header__Row{ display:grid; gap:var(--p-space-200) var(--p-space-400); grid-template-columns:auto 1fr; grid-template-areas:'breadcrumbs actions' 'title title'; } .Polaris-Page-Header--mediumTitle:not(.Polaris-Page-Header--noBreadcrumbs) .Polaris-Page-Header__Row + .Polaris-Page-Header__Row{ gap:0; } } .Polaris-Page-Header--mediumTitle.Polaris-Page-Header--noBreadcrumbs .Polaris-Page-Header__TitleWrapper{ margin-top:0; } .Polaris-Page-Header--mediumTitle.Polaris-Page-Header--noBreadcrumbs .Polaris-Page-Header__RightAlign{ margin-bottom:var(--p-space-100); } @media (min-width: 48em){ .Polaris-Page-Header--mediumTitle.Polaris-Page-Header--noBreadcrumbs .Polaris-Page-Header__RightAlign{ margin-bottom:0; } } .Polaris-Page-Header--mediumTitle.Polaris-Page-Header--noBreadcrumbs .Polaris-Page-Header__Row{ flex-wrap:wrap-reverse; } @media (min-width: 48em){ .Polaris-Page-Header--mediumTitle.Polaris-Page-Header--noBreadcrumbs .Polaris-Page-Header__Row{ flex-wrap:nowrap; } } .Polaris-Page-Header--isSingleRow .Polaris-Page-Header__Row{ gap:0; } html, body{ min-height:100%; height:100%; } .Polaris-Page{ margin:0 auto; padding:0; max-width:calc(var(--pg-layout-width-primary-max) + var(--pg-layout-width-secondary-max) + var(--pg-layout-width-inner-spacing-base)); } @media (min-width: 30.625em){ .Polaris-Page{ padding:0 var(--p-space-600); } } .Polaris-Page::after{ content:''; display:table; } .Polaris-Page--fullWidth{ max-width:none; } .Polaris-Page--narrowWidth{ max-width:var(--pg-layout-width-primary-max); } .Polaris-Page__Content{ padding:var(--p-space-200) 0; } @media (min-width: 48em){ .Polaris-Page__Content{ padding-top:var(--p-space-500); } } .Polaris-PageActions{ margin:0 auto; border-top:0; padding:var(--p-space-400); } @media (min-width: 30.625em){ .Polaris-PageActions{ padding:var(--p-space-400) 0; } } .Polaris-Picker-SearchField{ flex-grow:1; padding:var(--p-space-100) 0; outline:none; border:none; font-size:var(--p-font-size-400); line-height:var(--p-font-line-height-600); } @media (min-width: 48em){ .Polaris-Picker-SearchField{ font-size:var(--p-font-size-325); line-height:var(--p-font-line-height-500); } } .Polaris-Picker-Activator{ background:none; outline:none; padding:var(--p-space-200) var(--p-space-300); border-radius:var(--p-border-radius-200); border:var(--p-border-width-025) solid var(--p-color-border); width:100%; display:flex; align-items:center; justify-content:space-between; cursor:pointer; } .Polaris-Picker-Activator:hover{ background-color:var(--p-color-bg-surface-hover); } .Polaris-Picker-Activator:active{ background-color:var(--p-color-bg-surface-active); } .Polaris-Picker-Activator:focus:not(:active){ outline:var(--p-border-width-050) solid var(--p-color-border-focus); outline-offset:var(--p-space-025); } .Polaris-Picker-Activator--disabled{ pointer-events:none; background-color:var(--p-color-bg-surface-disabled); border-color:var(--p-color-border-disabled); } .Polaris-ProgressBar{ --pc-progress-bar-height-base:1rem; --pc-progress-bar-height-small:calc(var(--pc-progress-bar-height-base)*0.5); --pc-progress-bar-height-large:calc(var(--pc-progress-bar-height-base)*2); --pc-progress-bar-duration: initial; --pc-progress-bar-percent: initial; overflow:hidden; width:100%; background-color:var(--pc-progress-bar-background); border-radius:var(--p-border-radius-100); } @media (forced-colors: active){ .Polaris-ProgressBar{ border:var(--p-border-width-025) solid transparent; } } .Polaris-ProgressBar--sizeSmall{ height:var(--pc-progress-bar-height-small); } .Polaris-ProgressBar--sizeMedium{ height:var(--pc-progress-bar-height-base); } .Polaris-ProgressBar--sizeLarge{ height:var(--pc-progress-bar-height-large); } .Polaris-ProgressBar--toneHighlight{ --pc-progress-bar-background:var(--p-color-bg-fill-tertiary); --pc-progress-bar-indicator:var(--p-color-bg-fill-info); } .Polaris-ProgressBar--tonePrimary{ --pc-progress-bar-background:var(--p-color-bg-fill-tertiary); --pc-progress-bar-indicator:var(--p-color-bg-fill-brand); } .Polaris-ProgressBar--toneSuccess{ --pc-progress-bar-background:var(--p-color-bg-fill-tertiary); --pc-progress-bar-indicator:var(--p-color-bg-fill-success); } .Polaris-ProgressBar--toneCritical{ --pc-progress-bar-background:var(--p-color-bg-fill-tertiary); --pc-progress-bar-indicator:var(--p-color-bg-fill-critical); } .Polaris-ProgressBar__Indicator{ height:inherit; background-color:var(--pc-progress-bar-indicator); transition:transform var(--pc-progress-bar-duration) var(--p-motion-ease); transform:scaleX(0); transform-origin:0 50%; } @media screen and (-ms-high-contrast: active){ .Polaris-ProgressBar__Indicator{ border:var(--pc-progress-bar-height-base) solid highlight; } } .Polaris-ProgressBar__IndicatorAppearActive, .Polaris-ProgressBar__IndicatorAppearDone{ transform:scaleX(var(--pc-progress-bar-percent)); } .Polaris-ProgressBar__Progress, .Polaris-ProgressBar__Label{ position: absolute !important; top: 0; width: 0.0625rem !important; height: 0.0625rem !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; } .Polaris-RangeSlider{ --pc-range-slider-input:10; --pc-range-slider-output:20; --pc-range-slider-track-height:0.25rem; --pc-range-slider-thumb-size:1rem; --pc-track-dashed-border-radius:var(--p-border-radius-100); } .Polaris-RangeSlider--trackDashedAfter::after{ content:''; } .Polaris-RangeSlider--trackDashed, .Polaris-RangeSlider--trackDashedAfter::after{ --pc-track-dashed-color:var(--p-color-border); position:absolute; height:var(--pc-range-slider-track-height); width:100%; background-image:linear-gradient( to right, var(--pc-track-dashed-color), var(--pc-track-dashed-color) 50%, transparent 50%, transparent 100% ); background-size:var(--pc-range-slider-track-height) var(--pc-range-slider-track-height); border-radius:var(--pc-track-dashed-border-radius); border-right:var(--pc-track-dashed-border-radius) var(--pc-track-dashed-color) solid; } .Polaris-RangeSlider-DualThumb{ position:relative; width:100%; display:flex; align-items:center; } .Polaris-RangeSlider-DualThumb__TrackWrapper{ position:relative; display:flex; align-items:center; width:100%; min-height:1.75rem; cursor:pointer; } .Polaris-RangeSlider-DualThumb__TrackWrapper.Polaris-RangeSlider-DualThumb--disabled{ opacity:0.8; cursor:not-allowed; } .Polaris-RangeSlider-DualThumb__Track{ --pc-range-slider-progress-upper: initial; --pc-range-slider-progress-lower: initial; --pc-dual-thumb-unselected-range:transparent; --pc-dual-thumb-selected-range:var(--p-color-bg-fill-brand); --pc-dual-thumb-gradient-colors:var(--pc-dual-thumb-unselected-range) 0%, var(--pc-dual-thumb-unselected-range) var(--pc-range-slider-progress-lower), var(--pc-dual-thumb-selected-range) var(--pc-range-slider-progress-lower), var(--pc-dual-thumb-selected-range) var(--pc-range-slider-progress-upper), var(--pc-dual-thumb-unselected-range) var(--pc-range-slider-progress-upper), var(--pc-dual-thumb-unselected-range) 100%; position:absolute; z-index:1; width:100%; height:var(--pc-range-slider-track-height); border-radius:var(--pc-range-slider-thumb-size); background-image:linear-gradient( to right, var(--pc-dual-thumb-gradient-colors) ); } .Polaris-RangeSlider-DualThumb--error .Polaris-RangeSlider-DualThumb__Track{ --pc-dual-thumb-selected-range:var(--p-color-bg-fill-critical); --pc-dual-thumb-gradient-colors:var(--pc-dual-thumb-unselected-range) 0%, var(--pc-dual-thumb-unselected-range) var(--pc-range-slider-progress-lower), var(--pc-dual-thumb-selected-range) var(--pc-range-slider-progress-lower), var(--pc-dual-thumb-selected-range) var(--pc-range-slider-progress-upper), var(--pc-dual-thumb-unselected-range) var(--pc-range-slider-progress-upper), var(--pc-dual-thumb-unselected-range) 100%; background-image:linear-gradient( to right, var(--pc-dual-thumb-gradient-colors) ); } .Polaris-RangeSlider-DualThumb--disabled .Polaris-RangeSlider-DualThumb__Track{ background:var(--p-color-border-disabled) none; } .Polaris-RangeSlider-DualThumb__Thumbs{ position: relative; position:absolute; z-index:var(--pc-range-slider-input); padding:0; width:var(--pc-range-slider-thumb-size); height:var(--pc-range-slider-thumb-size); border-radius:var(--p-border-radius-full); border:var(--p-border-width-025) solid var(--p-color-border-emphasis); background:linear-gradient( var(--p-color-bg-fill-brand), var(--p-color-bg-fill-brand) ); -webkit-tap-highlight-color:transparent; cursor:-webkit-grab; transition:transform var(--p-motion-duration-150) var(--p-motion-ease); } .Polaris-RangeSlider-DualThumb__Thumbs::after { content: ''; position: absolute; z-index: 1; top: -0.125rem; right: -0.125rem; bottom: -0.125rem; left: -0.125rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.125rem var(--p-color-border-focus); border-radius: var(--p-border-radius-200); } .Polaris-RangeSlider-DualThumb__Thumbs.Polaris-RangeSlider-DualThumb--disabled{ cursor:not-allowed; border-color:var(--p-color-border-disabled); background:var(--p-color-border-disabled); } .Polaris-RangeSlider-DualThumb__Thumbs:active{ transform:scale(1.5); } .Polaris-RangeSlider-DualThumb__Thumbs:focus-visible{ outline:0; } .Polaris-RangeSlider-DualThumb__Thumbs:focus-visible::after { box-shadow: 0 0 0 0.125rem var(--p-color-border-focus); outline: var(--p-border-width-025) solid transparent; } .Polaris-RangeSlider-DualThumb--error .Polaris-RangeSlider-DualThumb__Thumbs{ border-color:var(--p-color-bg-fill-critical); background:linear-gradient( var(--p-color-bg-fill-critical), var(--p-color-bg-fill-critical) ); } .Polaris-RangeSlider-DualThumb__Prefix{ flex:0 0 auto; margin-right:var(--p-space-200); } .Polaris-RangeSlider-DualThumb__Suffix{ flex:0 0 auto; margin-left:var(--p-space-200); } .Polaris-RangeSlider-DualThumb__Output{ --pc-range-slider-output-spacing:var(--p-space-400); position:absolute; z-index:var(--pc-range-slider-output); bottom:1.5rem; opacity:0; visibility:hidden; pointer-events:none; transition-property:opacity, visibility, bottom; transition-duration:var(--p-motion-duration-150); transition-timing-function:var(--p-motion-ease); transform:translateX(calc(-50% + var(--pc-range-slider-thumb-size)/2)); } .Polaris-RangeSlider-DualThumb__Thumbs:active + .Polaris-RangeSlider-DualThumb__Output{ opacity:1; visibility:visible; bottom:2rem; } .Polaris-RangeSlider-DualThumb__OutputBubble{ position:relative; display:flex; padding:0 var(--p-space-200); min-width:2rem; height:2rem; background-color:var(--p-color-bg-surface); box-shadow:var(--p-shadow-500); border-radius:var(--p-border-radius-100); transition-property:transform; transition-duration:var(--p-motion-duration-150); transition-timing-function:var(--p-motion-ease); } .Polaris-RangeSlider-DualThumb__Thumbs:hover + .Polaris-RangeSlider-DualThumb__Output .Polaris-RangeSlider-DualThumb__OutputBubble, .Polaris-RangeSlider-DualThumb__Thumbs:active + .Polaris-RangeSlider-DualThumb__Output .Polaris-RangeSlider-DualThumb__OutputBubble, .Polaris-RangeSlider-DualThumb__Thumbs:focus + .Polaris-RangeSlider-DualThumb__Output .Polaris-RangeSlider-DualThumb__OutputBubble{ transform:translateY(calc(var(--pc-range-slider-output-spacing)*-1)); } @media (min-width: 48em){ .Polaris-RangeSlider-DualThumb__Thumbs:hover + .Polaris-RangeSlider-DualThumb__Output .Polaris-RangeSlider-DualThumb__OutputBubble, .Polaris-RangeSlider-DualThumb__Thumbs:active + .Polaris-RangeSlider-DualThumb__Output .Polaris-RangeSlider-DualThumb__OutputBubble, .Polaris-RangeSlider-DualThumb__Thumbs:focus + .Polaris-RangeSlider-DualThumb__Output .Polaris-RangeSlider-DualThumb__OutputBubble{ transform:translateY( calc((var(--pc-range-slider-output-spacing)*0.5)*-1) ); } } .Polaris-RangeSlider-DualThumb__OutputBubble > :first-child{ display:block; flex:1 1 auto; margin:auto; } .Polaris-RangeSlider-SingleThumb{ display:flex; align-items:center; } .Polaris-RangeSlider-SingleThumb.Polaris-RangeSlider-SingleThumb--disabled{ opacity:0.8; } .Polaris-RangeSlider-SingleThumb__InputWrapper{ position:relative; display:flex; align-items:center; flex:1 1 auto; height:var(--pc-range-slider-thumb-size); } .Polaris-RangeSlider-SingleThumb__InputWrapper input{ padding:var(--p-space-300) 0; background-color:transparent; cursor:pointer; } @media (max-width: 30.6225em){ .Polaris-RangeSlider-SingleThumb__InputWrapper{ height:2.75rem; } } .Polaris-RangeSlider-SingleThumb--disabled input{ cursor:not-allowed; } .Polaris-RangeSlider-SingleThumb__Prefix{ flex:0 0 auto; margin-right:var(--p-space-200); } .Polaris-RangeSlider-SingleThumb__Suffix{ flex:0 0 auto; margin-left:var(--p-space-200); } .Polaris-RangeSlider-SingleThumb__Input{ --pc-range-slider-min: initial; --pc-range-slider-max: initial; --pc-range-slider-current: initial; --pc-range-slider-progess: initial; --pc-range-slider-output-factor: initial; --pc-single-thumb-progress-lower:var(--p-color-bg-fill-brand); --pc-single-thumb-progress-upper:transparent; --pc-single-thumb-gradient-colors:var(--pc-single-thumb-progress-lower) 0%, var(--pc-single-thumb-progress-lower) var(--pc-range-slider-progress), var(--pc-single-thumb-progress-upper) var(--pc-range-slider-progress), var(--pc-single-thumb-progress-upper) 100%; position:relative; z-index:var(--pc-range-slider-input); flex:1 1 auto; margin:0; padding:0; width:100%; background-color:transparent; -webkit-appearance:none; appearance:none; } .Polaris-RangeSlider-SingleThumb__Input::-ms-tooltip{ display:none; } .Polaris-RangeSlider-SingleThumb__Input:focus{ outline:0; } .Polaris-RangeSlider-SingleThumb__Input::-moz-focus-outer{ border:0; } .Polaris-RangeSlider-SingleThumb__Input::-ms-track{ outline:var(--p-border-width-025) solid transparent; } .Polaris-RangeSlider-SingleThumb__Input::-ms-track { cursor:pointer; width:100%; height:var(--pc-range-slider-track-height); background-image:linear-gradient( to right, var(--pc-single-thumb-gradient-colors) ); border:none; border-radius:var(--pc-range-slider-track-height); } .Polaris-RangeSlider-SingleThumb__Input::-moz-range-track { cursor:pointer; width:100%; height:var(--pc-range-slider-track-height); background-image:linear-gradient( to right, var(--pc-single-thumb-gradient-colors) ); border:none; border-radius:var(--pc-range-slider-track-height); } .Polaris-RangeSlider-SingleThumb__Input::-webkit-slider-runnable-track { cursor:pointer; width:100%; height:var(--pc-range-slider-track-height); background-image:linear-gradient( to right, var(--pc-single-thumb-gradient-colors) ); border:none; border-radius:var(--pc-range-slider-track-height); } .Polaris-RangeSlider-SingleThumb__Input::-ms-thumb { cursor:-webkit-grab; width:var(--pc-range-slider-thumb-size); height:var(--pc-range-slider-thumb-size); border:var(--p-border-width-025) solid transparent; border-radius:var(--p-border-radius-full); background:linear-gradient( var(--p-color-bg-fill-brand), var(--p-color-bg-fill-brand) ); box-shadow:0 0 0 0 var(--p-color-border-focus); appearance:none; -ms-transition-property:border-color, transform; transition-property:border-color, transform; transition-duration:var(--p-motion-duration-200); transition-timing-function:var(--p-motion-ease); margin-top:calc((var(--pc-range-slider-thumb-size) - var(--pc-range-slider-track-height))*-1/2); } .Polaris-RangeSlider-SingleThumb__Input::-ms-thumb:hover{ background:linear-gradient( var(--p-color-bg-fill-brand), var(--p-color-bg-fill-brand) ); } .Polaris-RangeSlider-SingleThumb__Input::-moz-range-thumb { cursor:-webkit-grab; width:var(--pc-range-slider-thumb-size); height:var(--pc-range-slider-thumb-size); border:var(--p-border-width-025) solid transparent; border-radius:var(--p-border-radius-full); background:linear-gradient( var(--p-color-bg-fill-brand), var(--p-color-bg-fill-brand) ); box-shadow:0 0 0 0 var(--p-color-border-focus); appearance:none; -moz-transition-property:border-color, transform; transition-property:border-color, transform; transition-duration:var(--p-motion-duration-200); transition-timing-function:var(--p-motion-ease); margin-top:calc((var(--pc-range-slider-thumb-size) - var(--pc-range-slider-track-height))*-1/2); } .Polaris-RangeSlider-SingleThumb__Input::-moz-range-thumb:hover{ background:linear-gradient( var(--p-color-bg-fill-brand), var(--p-color-bg-fill-brand) ); } .Polaris-RangeSlider-SingleThumb__Input::-webkit-slider-thumb { cursor:-webkit-grab; width:var(--pc-range-slider-thumb-size); height:var(--pc-range-slider-thumb-size); border:var(--p-border-width-025) solid transparent; border-radius:var(--p-border-radius-full); background:linear-gradient( var(--p-color-bg-fill-brand), var(--p-color-bg-fill-brand) ); box-shadow:0 0 0 0 var(--p-color-border-focus); -webkit-appearance:none; appearance:none; -webkit-transition-property:border-color, transform; transition-property:border-color, transform; transition-duration:var(--p-motion-duration-200); transition-timing-function:var(--p-motion-ease); margin-top:calc((var(--pc-range-slider-thumb-size) - var(--pc-range-slider-track-height))*-1/2); } .Polaris-RangeSlider-SingleThumb__Input::-webkit-slider-thumb:hover{ background:linear-gradient( var(--p-color-bg-fill-brand), var(--p-color-bg-fill-brand) ); } .Polaris-RangeSlider-SingleThumb__Input::-ms-thumb{ margin-top:0; transform:translateY(calc(var(--pc-range-slider-thumb-size)*0.2)) scale(0.4); } .Polaris-RangeSlider-SingleThumb__Input::-webkit-slider-thumb{ margin-top:calc((var(--pc-range-slider-thumb-size) - var(--pc-range-slider-track-height))*-0.5); } .Polaris-RangeSlider-SingleThumb__Input:active::-ms-thumb { transform:scale(1.5); } .Polaris-RangeSlider-SingleThumb__Input:active::-moz-range-thumb { transform:scale(1.5); } .Polaris-RangeSlider-SingleThumb__Input:active::-webkit-slider-thumb { transform:scale(1.5); } .Polaris-RangeSlider-SingleThumb__Input:focus{ outline:var(--p-border-width-025) solid transparent; } .Polaris-RangeSlider-SingleThumb__Input:focus::-ms-thumb { border-color:var(--p-color-bg-surface); box-shadow:0 0 0 var(--p-border-width-050) var(--p-color-border-focus); } .Polaris-RangeSlider-SingleThumb__Input:focus::-moz-range-thumb { border-color:var(--p-color-bg-surface); box-shadow:0 0 0 var(--p-border-width-050) var(--p-color-border-focus); } .Polaris-RangeSlider-SingleThumb__Input:focus::-webkit-slider-thumb { border-color:var(--p-color-bg-surface); box-shadow:0 0 0 var(--p-border-width-050) var(--p-color-border-focus); } .Polaris-RangeSlider-SingleThumb--error .Polaris-RangeSlider-SingleThumb__Input{ --pc-single-thumb-progress-lower:var(--p-color-bg-fill-critical); } .Polaris-RangeSlider-SingleThumb--error .Polaris-RangeSlider-SingleThumb__Input::-ms-thumb { border-color:var(--p-color-bg-fill-critical); background:var(--p-color-bg-fill-critical); } .Polaris-RangeSlider-SingleThumb--error .Polaris-RangeSlider-SingleThumb__Input::-moz-range-thumb { border-color:var(--p-color-bg-fill-critical); background:var(--p-color-bg-fill-critical); } .Polaris-RangeSlider-SingleThumb--error .Polaris-RangeSlider-SingleThumb__Input::-webkit-slider-thumb { border-color:var(--p-color-bg-fill-critical); background:var(--p-color-bg-fill-critical); } .Polaris-RangeSlider-SingleThumb--disabled .Polaris-RangeSlider-SingleThumb__Input::-ms-track{ outline:var(--p-border-width-025) solid transparent; } .Polaris-RangeSlider-SingleThumb--disabled .Polaris-RangeSlider-SingleThumb__Input::-ms-track { cursor:auto; background-image:none; background-color:var(--p-color-border-disabled); } .Polaris-RangeSlider-SingleThumb--disabled .Polaris-RangeSlider-SingleThumb__Input::-moz-range-track { cursor:auto; background-image:none; background-color:var(--p-color-border-disabled); } .Polaris-RangeSlider-SingleThumb--disabled .Polaris-RangeSlider-SingleThumb__Input::-webkit-slider-runnable-track { cursor:auto; background-image:none; background-color:var(--p-color-border-disabled); } .Polaris-RangeSlider-SingleThumb--disabled .Polaris-RangeSlider-SingleThumb__Input::-ms-thumb { cursor:not-allowed; border-color:var(--p-color-border-disabled); background:var(--p-color-border-disabled); } .Polaris-RangeSlider-SingleThumb--disabled .Polaris-RangeSlider-SingleThumb__Input::-moz-range-thumb { cursor:not-allowed; border-color:var(--p-color-border-disabled); background:var(--p-color-border-disabled); } .Polaris-RangeSlider-SingleThumb--disabled .Polaris-RangeSlider-SingleThumb__Input::-webkit-slider-thumb { cursor:not-allowed; border-color:var(--p-color-border-disabled); background:var(--p-color-border-disabled); } .Polaris-RangeSlider-SingleThumb__Output{ --pc-range-slider-output-spacing:var(--p-space-400); position:absolute; z-index:var(--pc-range-slider-output); bottom:var(--pc-range-slider-thumb-size); left:var(--pc-range-slider-progress); transform:translateX( calc(-50% + var(--pc-range-slider-output-factor)*var(--pc-range-slider-thumb-size)) ); opacity:0; visibility:hidden; pointer-events:none; transition-property:opacity, visibility, bottom; transition-duration:var(--p-motion-duration-200); transition-timing-function:var(--p-motion-ease); } .Polaris-RangeSlider-SingleThumb__Input:active + .Polaris-RangeSlider-SingleThumb__Output{ opacity:1; visibility:visible; bottom:calc(var(--pc-range-slider-thumb-size) + 0.5rem); } .Polaris-RangeSlider-SingleThumb__OutputBubble{ position:relative; display:flex; box-shadow:var(--p-shadow-500); padding:0 var(--p-space-200); min-width:2rem; height:2rem; background-color:var(--p-color-bg-surface); border-radius:var(--p-border-radius-100); transition-property:transform; transition-duration:var(--p-motion-duration-200); transition-timing-function:var(--p-motion-ease); outline:var(--p-border-width-025) solid transparent; } .Polaris-RangeSlider-SingleThumb__Input:hover + .Polaris-RangeSlider-SingleThumb__Output .Polaris-RangeSlider-SingleThumb__OutputBubble, .Polaris-RangeSlider-SingleThumb__Input:active + .Polaris-RangeSlider-SingleThumb__Output .Polaris-RangeSlider-SingleThumb__OutputBubble, .Polaris-RangeSlider-SingleThumb__Input:focus + .Polaris-RangeSlider-SingleThumb__Output .Polaris-RangeSlider-SingleThumb__OutputBubble{ transform:translateY(calc(var(--pc-range-slider-output-spacing)*-1)); } @media (min-width: 48em){ .Polaris-RangeSlider-SingleThumb__Input:hover + .Polaris-RangeSlider-SingleThumb__Output .Polaris-RangeSlider-SingleThumb__OutputBubble, .Polaris-RangeSlider-SingleThumb__Input:active + .Polaris-RangeSlider-SingleThumb__Output .Polaris-RangeSlider-SingleThumb__OutputBubble, .Polaris-RangeSlider-SingleThumb__Input:focus + .Polaris-RangeSlider-SingleThumb__Output .Polaris-RangeSlider-SingleThumb__OutputBubble{ transform:translateY( calc((var(--pc-range-slider-output-spacing)*0.4)*-1) ); } } .Polaris-RangeSlider-SingleThumb__OutputBubble > :first-child{ display:block; flex:1 1 auto; margin:auto; } .Polaris-ResourceItem{ --pc-resource-item-min-height:2.75rem; --pc-resource-item-disclosure-width:3rem; --pc-resource-item-offset:2.375rem; --pc-resource-item-clickable-stacking-order:1; --pc-resource-item-content-stacking-order:2; --pc-resource-item-action-unhide-clip:auto; --pc-resource-item-action-hide-clip:rect(0, 0, 0, 0); --pc-resource-item-action-unhide-overflow:visible; --pc-resource-item-action-hide-overflow:hidden; outline:none; cursor:pointer; } .Polaris-ResourceItem:hover{ background-color:var(--p-color-bg-surface-secondary-hover); } .Polaris-ResourceItem:hover .Polaris-ResourceItem__Actions > *{ clip:var(--pc-resource-item-action-unhide-clip); overflow:var(--pc-resource-item-action-unhide-overflow); } .Polaris-ResourceItem:active{ background-color:var(--p-color-bg-surface-active); } .Polaris-ResourceItem__ItemWrapper{ overflow:hidden; max-width:100%; } .Polaris-ResourceItem__CheckboxWrapper{ z-index:var(--pc-resource-item-content-stacking-order); display:flex; align-items:inherit; height:100%; } .Polaris-ResourceItem--focusedInner, .Polaris-ResourceItem--focusedInner.Polaris-ResourceItem--focused, .Polaris-ResourceItem--focusedInner.Polaris-ResourceItem--focused.Polaris-ResourceItem--selected{ box-shadow:none; } .Polaris-ResourceItem__Link, .Polaris-ResourceItem__Button{ position:absolute; z-index:var(--pc-resource-item-clickable-stacking-order); top:0; left:0; height:100%; width:100%; opacity:0; } .Polaris-ResourceItem__Button{ padding:0; border:none; } .Polaris-ResourceItem--selectable{ width:100%; margin-right:0; } .Polaris-ResourceItem--disabled{ cursor:default; color:var(--p-color-text-secondary); } .Polaris-ResourceItem--disabled:hover{ background-color:transparent; } .Polaris-ResourceItem__Actions > *{ clip:var(--pc-resource-item-action-hide-clip); overflow:var(--pc-resource-item-action-hide-overflow); } .Polaris-ResourceItem--focused .Polaris-ResourceItem__Actions > *{ clip:var(--pc-resource-item-action-unhide-clip); overflow:var(--pc-resource-item-action-unhide-overflow); } .Polaris-ResourceItem--selected{ background-color:var(--p-color-bg-surface-brand-selected); } .Polaris-ResourceItem--selected:hover{ background-color:var(--p-color-bg-surface-brand-hover); } .Polaris-ResourceItem--selected:active{ background-color:var(--p-color-bg-surface-brand-active); } .Polaris-ResourceItem__ListItem{ position: relative; } .Polaris-ResourceItem__ListItem::after { content: ''; position: absolute; z-index: 1; top: 0rem; right: 0rem; bottom: 0rem; left: 0rem; display: block; pointer-events: none; box-shadow: 0 0 0 0rem var(--p-color-border-focus); border-radius: var(--p-border-radius-100); } .Polaris-ResourceItem__ListItem + .Polaris-ResourceItem__ListItem{ border-top:var(--pc-resource-list-separator-border); } .Polaris-ResourceItem__ListItem.Polaris-ResourceItem--focused{ outline:var(--p-border-width-050) solid var(--p-color-border-focus); outline-offset:calc(var(--p-space-050)*-1); z-index:var(--pc-resource-item-clickable-stacking-order); border-radius:var(--p-border-radius-0); } .Polaris-ResourceItem__ListItem.Polaris-ResourceItem--focused::after{ content:none; } @media (min-width: 30.625em){ .Polaris-ResourceItem__ListItem.Polaris-ResourceItem--focused{ border-radius:var(--p-border-radius-300); } .Polaris-ResourceItem__ListItem.Polaris-ResourceItem--focused:first-of-type{ border-bottom-left-radius:var(--p-border-radius-0); border-bottom-right-radius:var(--p-border-radius-0); } .Polaris-ResourceItem__ListItem.Polaris-ResourceItem--focused:last-of-type{ border-top-left-radius:var(--p-border-radius-0); border-top-right-radius:var(--p-border-radius-0); } } .Polaris-ResourceItem__ListItem.Polaris-ResourceItem--focused:only-child{ border-radius:var(--p-border-radius-0); } @media (min-width: 30.625em){ .Polaris-ResourceItem__ListItem.Polaris-ResourceItem--focused:only-child{ border-radius:var(--p-border-radius-300); } } .Polaris-ResourceItem__ListItem.Polaris-ResourceItem--focused.Polaris-ResourceItem--selectable{ border-radius:var(--p-border-radius-0); } @media (min-width: 30.625em){ .Polaris-ResourceItem__ListItem.Polaris-ResourceItem--focused.Polaris-ResourceItem--selectable:last-child{ border-bottom-left-radius:var(--p-border-radius-300); border-bottom-right-radius:var(--p-border-radius-300); } .Polaris-ResourceItem__ListItem.Polaris-ResourceItem--focused.Polaris-ResourceItem--selectable.Polaris-ResourceItem--hasBulkActions.Polaris-ResourceItem--selected:last-child{ border-bottom-left-radius:var(--p-border-radius-0); border-bottom-right-radius:var(--p-border-radius-0); } } .Polaris-Select{ --pc-select-backdrop:10; --pc-select-content:20; --pc-select-input:30; position:relative; } .Polaris-Select select::-ms-expand{ display:none; } .Polaris-Select:not(.Polaris-Select--disabled):not(.Polaris-Select--error):hover .Polaris-Select__Backdrop{ border-color:var(--p-color-input-border-hover); background-color:var(--p-color-input-bg-surface-hover); } .Polaris-Select:not(.Polaris-Select--disabled):not(.Polaris-Select--error) .Polaris-Select__Input:active ~ .Polaris-Select__Backdrop{ border:none; box-shadow:var(--p-shadow-inset-200); background-color:var(--p-color-input-bg-surface-active); } .Polaris-Select--disabled .Polaris-Select__Content{ color:var(--p-color-text-disabled); } .Polaris-Select--disabled .Polaris-Select__InlineLabel{ color:inherit; } .Polaris-Select--disabled .Polaris-Select__Icon svg{ fill:var(--p-color-icon-disabled); } .Polaris-Select--disabled .Polaris-Select__Backdrop{ border-color:var(--p-color-border-disabled); background-color:var(--p-color-bg-surface-disabled); } .Polaris-Select--disabled .Polaris-Select__Backdrop::before{ background-color:var(--p-color-input-bg-surface); } .Polaris-Select--disabled .Polaris-Select__Backdrop:hover{ cursor:default; } .Polaris-Select__Content{ font-size:var(--p-font-size-325); font-weight:var(--p-font-weight-regular); line-height:var(--p-font-line-height-500); border:none; letter-spacing:initial; position:relative; z-index:var(--pc-select-content); display:flex; align-items:center; width:100%; min-height:var(--pg-control-height); padding:var(--p-space-150) var(--p-space-200) var(--p-space-150) var(--p-space-300); font-size:var(--p-font-size-400); line-height:var(--p-font-line-height-600); } @media (min-width: 48em){ .Polaris-Select__Content{ line-height:var(--p-font-line-height-500); font-size:var(--p-font-size-325); } } @media (max-width: 47.9975em){ .Polaris-Select__Content div > span{ font-size:var(--p-font-size-400); line-height:var(--p-font-line-height-500); } } .Polaris-Select__SelectedOption{ flex:1 1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .Polaris-Select__Prefix{ padding-right:var(--p-space-100); } .Polaris-Select__Icon svg{ fill:var(--p-color-icon-secondary); } .Polaris-Select__Input{ font-size:var(--p-font-size-400); font-weight:var(--p-font-weight-regular); line-height:var(--p-font-line-height-600); font-family:var(--p-font-family-sans); letter-spacing:initial; position:absolute; text-rendering:auto; top:0; left:0; z-index:var(--pc-select-input); width:100%; height:100%; margin:0; opacity:0; -webkit-appearance:none; appearance:none; border:none; padding:var(--p-space-150) var(--p-space-200) var(--p-space-150) var(--p-space-300); } @media (min-width: 48em){ .Polaris-Select__Input{ font-size:var(--p-font-size-325); line-height:var(--p-font-line-height-500); } } .Polaris-Select__Backdrop{ z-index:var(--pc-select-backdrop); top:0; right:0; bottom:0; left:0; border:var(--p-border-width-0165) solid var(--p-color-input-border); border-radius:var(--p-border-radius-200); background-color:var(--p-color-input-bg-surface); position:absolute; } .Polaris-Select--error .Polaris-Select__Backdrop{ border-color:var(--p-color-border-critical-secondary); background-color:var(--p-color-bg-surface-critical); } .Polaris-Select--error .Polaris-Select__Backdrop.Polaris-Select--hover, .Polaris-Select--error .Polaris-Select__Backdrop:hover{ border-color:var(--p-color-border-critical); } .Polaris-Select--error .Polaris-Select__Input:focus-visible ~ .Polaris-Select__Backdrop{ border-color:var(--p-color-border-critical-secondary); border-width:var(--p-border-width-025); background-color:var(--p-color-bg-surface-critical); } .Polaris-Select__Input:focus-visible ~ .Polaris-Select__Backdrop{ border-color:var(--p-color-input-border-active); border-width:var(--p-border-width-025); background-color:var(--p-color-input-bg-surface-active); outline:var(--p-border-width-050) solid var(--p-color-border-focus); outline-offset:var(--p-space-025); } .Polaris-Select--toneMagic .Polaris-Select__Content{ color:var(--p-color-text-magic); } .Polaris-Select--toneMagic .Polaris-Select__InlineLabel{ color:inherit; } .Polaris-Select--toneMagic .Polaris-Select__Backdrop{ border-color:var(--p-color-border-magic-secondary); background-color:var(--p-color-bg-surface-magic); } .Polaris-Select--toneMagic .Polaris-Select__Icon svg{ fill:var(--p-color-icon-magic); } .Polaris-Select--toneMagic:not(.Polaris-Select--disabled):not(.Polaris-Select--error):not(:focus-within):hover .Polaris-Select__Backdrop{ border-color:var(--p-color-border-magic-secondary-hover); background-color:var(--p-color-bg-surface-magic-hover); } .Polaris-Select--toneMagic:not(.Polaris-Select--disabled):not(.Polaris-Select--error) .Polaris-Select__Input:focus-visible ~ .Polaris-Select__Content{ color:var(--p-color-text); } .Polaris-Select--toneMagic:not(.Polaris-Select--disabled):not(.Polaris-Select--error) .Polaris-Select__Input:focus-visible ~ .Polaris-Select__Content .Polaris-Select__Icon svg{ fill:var(--p-color-icon-secondary); } @media (-ms-high-contrast: active){ .Polaris-Select__Content{ color:windowText; -ms-high-contrast-adjust:none; } .Polaris-Select__InlineLabel{ color:inherit; } .Polaris-Select__InlineLabel::after{ content:':'; } .Polaris-Select__SelectedOption{ color:inherit; } .Polaris-Select__Icon svg{ fill:buttonText; } .Polaris-Select__Backdrop::after{ display:none; } .Polaris-Select__Input:focus ~ .Polaris-Select__Content{ color:highlightText; } .Polaris-Select__Input:focus ~ .Polaris-Select__Backdrop{ background-color:highlight; } .Polaris-Select--disabled .Polaris-Select__Content{ color:grayText; } .Polaris-Select--disabled .Polaris-Select__Icon{ opacity:1; } .Polaris-Select--disabled .Polaris-Select__Icon svg{ fill:grayText; } } .Polaris-ResourceList__FiltersWrapper{ padding:var(--p-space-300); } .Polaris-ResourceList__FiltersWrapper + .Polaris-ResourceList__ResourceListWrapper > :first-child:is(.Polaris-ResourceList){ border-top:var(--pc-resource-list-separator-border); } .Polaris-ResourceList__HeaderOuterWrapper{ position:relative; background-color:var(--p-color-bg-surface); z-index:var(--pc-resource-list-header-outer-wrapper-stacking-order); border-top-left-radius:var(--p-border-radius-200); border-top-right-radius:var(--p-border-radius-200); } .Polaris-ResourceList__HeaderOuterWrapper + .Polaris-ResourceList, .Polaris-ResourceList__HeaderOuterWrapper + .Polaris-ResourceList__BulkActionsWrapper + .Polaris-ResourceList{ border-top:var(--pc-resource-list-separator-border); } .Polaris-ResourceList__HeaderWrapper--disabled{ pointer-events:none; } .Polaris-ResourceList__HeaderWrapper--overlay{ position:absolute; top:0; right:0; bottom:0; left:0; z-index:var(--pc-resource-list-header-overlay-stacking-order); background-color:rgba(255, 255, 255, 0.5); } .Polaris-ResourceList__FiltersWrapper + .Polaris-ResourceList__ResourceListWrapper > .Polaris-ResourceList__HeaderOuterWrapper{ margin-top:calc(var(--p-space-400)*-1); } .Polaris-ResourceList__HeaderWrapper{ position:relative; display:flex; width:100%; background-color:var(--p-color-bg-surface); border-radius:var(--p-border-radius-200); min-height:3.25rem; align-items:center; padding:var(--p-space-200) var(--p-space-300); } @media (min-width: 48em){ .Polaris-ResourceList__HeaderWrapper{ min-height:3rem; } } .Polaris-ResourceList__HeaderWrapper--isSticky{ box-shadow:var(--p-shadow-100); border-radius:0; } .Polaris-ResourceList__HeaderContentWrapper{ position:absolute; z-index:var(--pc-resource-list-content-wrapper-stacking-order); right:var(--p-space-300); left:var(--p-space-300); top:0; bottom:0; display:flex; min-height:var(--pg-control-height); opacity:1; transition:opacity var(--p-motion-ease) var(--p-motion-duration-200); align-items:center; } .Polaris-ResourceList__HeaderWrapper--inSelectMode .Polaris-ResourceList__HeaderContentWrapper{ opacity:0; } .Polaris-ResourceList__SortWrapper, .Polaris-ResourceList__AlternateToolWrapper{ position:relative; display:flex; flex:1 1; align-items:center; } .Polaris-ResourceList__HeaderWrapper--hasSelect .Polaris-ResourceList__SortWrapper, .Polaris-ResourceList__HeaderWrapper--hasSelect .Polaris-ResourceList__AlternateToolWrapper{ padding-right:var(--p-space-200); } @media (min-width: 30.625em){ .Polaris-ResourceList__SortWrapper, .Polaris-ResourceList__AlternateToolWrapper{ position:relative; left:auto; flex:0 1 auto; margin-left:var(--p-space-400); } .Polaris-ResourceList__HeaderWrapper--hasAlternateTool.Polaris-ResourceList__HeaderWrapper--hasSelect .Polaris-ResourceList__SortWrapper, .Polaris-ResourceList__HeaderWrapper--hasAlternateTool.Polaris-ResourceList__HeaderWrapper--hasSelect .Polaris-ResourceList__AlternateToolWrapper, .Polaris-ResourceList__HeaderWrapper--hasSort.Polaris-ResourceList__HeaderWrapper--hasSelect .Polaris-ResourceList__SortWrapper, .Polaris-ResourceList__HeaderWrapper--hasSort.Polaris-ResourceList__HeaderWrapper--hasSelect .Polaris-ResourceList__AlternateToolWrapper{ padding-right:0; } } .Polaris-ResourceList__SortWrapper{ min-width:0; max-width:100%; } .Polaris-ResourceList__SortWrapper > *{ max-width:100%; } .Polaris-ResourceList__HeaderTitleWrapper{ white-space:nowrap; text-overflow:ellipsis; flex:1 1; align-self:center; } .Polaris-ResourceList__HeaderWrapper--hasAlternateTool .Polaris-ResourceList__HeaderTitleWrapper, .Polaris-ResourceList__HeaderWrapper--hasSort .Polaris-ResourceList__HeaderTitleWrapper{ display:none; } @media (min-width: 30.625em){ .Polaris-ResourceList__HeaderWrapper--hasSelect .Polaris-ResourceList__HeaderTitleWrapper, .Polaris-ResourceList__HeaderWrapper--hasAlternateTool.Polaris-ResourceList__HeaderWrapper--hasSelect .Polaris-ResourceList__HeaderTitleWrapper, .Polaris-ResourceList__HeaderWrapper--hasSort.Polaris-ResourceList__HeaderWrapper--hasSelect .Polaris-ResourceList__HeaderTitleWrapper{ display:none; } .Polaris-ResourceList__HeaderWrapper--hasAlternateTool .Polaris-ResourceList__HeaderTitleWrapper, .Polaris-ResourceList__HeaderWrapper--hasSort .Polaris-ResourceList__HeaderTitleWrapper{ display:block; } } .Polaris-ResourceList__SelectAllActionsWrapper{ z-index:var(--pc-resource-list-bulk-actions-wrapper-stacking-order); position:absolute; left:0; width:100%; display:flex; align-items:center; } @media (min-width: 30.625em){ .Polaris-ResourceList__SelectAllActionsWrapper{ flex:0 1 auto; align-self:flex-start; } } .Polaris-ResourceList__SelectAllActionsWrapperSticky{ position:fixed; top:auto; bottom:0; } .Polaris-ResourceList__SelectAllActionsWrapperAtEnd{ opacity:0; transition:opacity var(--p-motion-duration-100) var(--p-motion-ease); } .Polaris-ResourceList__SelectAllActionsWrapperAtEndAppear{ opacity:1; } .Polaris-ResourceList__BulkActionsWrapper{ position:relative; z-index:var(--pc-resource-list-bulk-actions-wrapper-stacking-order); width:100%; visibility:hidden; opacity:0; transition:opacity var(--p-motion-duration-100) var(--p-motion-ease), visibility var(--p-motion-duration-100) var(--p-motion-ease); } .Polaris-ResourceList__BulkActionsWrapper.Polaris-ResourceList__BulkActionsWrapperVisible{ visibility:visible; opacity:1; } .Polaris-ResourceList__PaginationWrapper{ z-index:var(--pc-pagination-index); } @media (min-width: 48em){ .Polaris-ResourceList__PaginationWrapper{ position:sticky; bottom:0; } } .Polaris-ResourceList__CheckableButtonWrapper{ display:none; height:100%; } @media (min-width: 30.625em){ .Polaris-ResourceList__CheckableButtonWrapper{ flex:1 1; display:block; } } .Polaris-ResourceList__SelectButtonWrapper{ position:relative; flex:none; } @media (min-width: 30.625em){ .Polaris-ResourceList__SelectButtonWrapper{ display:none; } } .Polaris-ResourceList__EmptySearchResultWrapper{ padding-top:var(--p-space-800); padding-bottom:var(--p-space-800); } @media (min-height: 37.5em){ .Polaris-ResourceList__EmptySearchResultWrapper{ padding-top:var(--p-space-1600); padding-bottom:var(--p-space-1600); } } .Polaris-ResourceList__ResourceListWrapper{ --pc-resource-list-stacking-order:1; --pc-resource-list-content-wrapper-stacking-order:1; --pc-resource-list-overlay-stacking-order:3; --pc-resource-list-header-overlay-stacking-order:4; --pc-resource-list-spinner-stacking-order:4; --pc-pagination-index:30; --pc-resource-list-bulk-actions-wrapper-stacking-order:31; --pc-resource-list-header-outer-wrapper-stacking-order:31; --pc-resource-list-separator-border:var(--p-border-width-025) solid var(--p-color-border); position:relative; } .Polaris-ResourceList{ position:relative; z-index:var(--pc-resource-list-stacking-order); margin:0; padding:0; list-style:none; } .Polaris-ResourceList__ItemWrapper{ position:relative; z-index:var(--pc-resource-list-stacking-order); overflow:hidden; max-width:100%; } .Polaris-ResourceList__ItemWrapper + .Polaris-ResourceList__ItemWrapper{ border-top:var(--pc-resource-list-separator-border); } .Polaris-ResourceList__ItemWrapper--isLoading{ min-height:4rem; } .Polaris-ResourceList__SpinnerContainer{ position:absolute; top:0; right:0; bottom:0; left:0; z-index:var(--pc-resource-list-spinner-stacking-order); display:flex; justify-content:center; } .Polaris-ResourceList__LoadingOverlay{ position:absolute; top:0; right:0; bottom:0; left:0; z-index:var(--pc-resource-list-overlay-stacking-order); display:flex; justify-content:center; background-color:rgba(255, 255, 255, 0.5); } .Polaris-ResourceList__DisabledPointerEvents{ pointer-events:none; } .Polaris-ResourceList--disableTextSelection{ -webkit-user-select:none; user-select:none; } .Polaris-SelectAllActions{ display:flex; gap:var(--p-space-200); align-items:center; justify-content:flex-start; width:100%; transition:var(--p-motion-duration-100) var(--p-motion-ease); transition-property:transform, opacity; } .Polaris-SelectAllActions.Polaris-SelectAllActions--selectAllActionsNotSticky{ transform:none; opacity:1; } .Polaris-SelectAllActions__SelectAllActions--entering, .Polaris-SelectAllActions__SelectAllActions--exiting{ display:flex; opacity:0; } .Polaris-SelectAllActions__SelectAllActions--entering:not(:is(.Polaris-SelectAllActions--selectAllActionsNotSticky, .Polaris-SelectAllActions__SelectAllActions--hasPagination)), .Polaris-SelectAllActions__SelectAllActions--exiting:not(:is(.Polaris-SelectAllActions--selectAllActionsNotSticky, .Polaris-SelectAllActions__SelectAllActions--hasPagination)){ transform:translateY(100%); } .Polaris-SelectAllActions__SelectAllActions--exited{ display:none; opacity:0; } .Polaris-SelectAllActions__SelectAllActions--exited:not(:is(.Polaris-SelectAllActions--selectAllActionsNotSticky, .Polaris-SelectAllActions__SelectAllActions--hasPagination)){ transform:translateY(100%); } .Polaris-SelectAllActions__SelectAllActions--entered{ opacity:1; display:flex; transform:translateY(0); } .Polaris-SelectAllActions__AllAction{ border:0; background:none; padding:0; cursor:pointer; color:var(--p-color-text-emphasis); outline:none; position: relative; } .Polaris-SelectAllActions__AllAction::after { content: ''; position: absolute; z-index: 1; top: -0.0625rem; right: -0.0625rem; bottom: -0.0625rem; left: -0.0625rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus); border-radius: var(--p-border-radius-100); } .Polaris-SelectAllActions__AllAction:hover, .Polaris-SelectAllActions__AllAction:focus{ color:var(--p-color-text-emphasis-hover); } .Polaris-SelectAllActions__AllAction:active{ color:var(--p-color-text-emphasis-active); } .Polaris-SelectAllActions__AllAction:focus-visible:not(:active)::after { box-shadow: 0 0 0 0.125rem var(--p-color-border-focus); outline: var(--p-border-width-025) solid transparent; } .Polaris-SkeletonBodyText__SkeletonBodyTextContainer{ width:100%; } .Polaris-SkeletonBodyText{ height:var(--p-space-200); display:flex; background-color:var(--p-color-bg-fill-tertiary); border-radius:var(--p-border-radius-100); } @media screen and (-ms-high-contrast: active){ .Polaris-SkeletonBodyText{ background-color:grayText; } } .Polaris-SkeletonBodyText:last-child:not(:first-child){ width:80%; } .Polaris-SkeletonBodyText + .Polaris-SkeletonBodyText{ margin-top:var(--p-space-300); } .Polaris-SkeletonDisplayText__DisplayText{ --pc-skeleton-display-text-height:var(--p-font-line-height-500); --pc-skeleton-display-text-height-not-condensed:var( --p-font-line-height-500 ); max-width:var(--pc-skeleton-display-text-max-width, 120px); display:flex; background-color:var(--p-color-bg-fill-tertiary); border-radius:var(--p-border-radius-100); height:var(--pc-skeleton-display-text-height); } @media screen and (-ms-high-contrast: active){ .Polaris-SkeletonDisplayText__DisplayText{ background-color:grayText; } } @media (min-width: 48em){ .Polaris-SkeletonDisplayText__DisplayText{ height:var(--pc-skeleton-display-text-height-not-condensed); } } .Polaris-SkeletonDisplayText--sizeSmall{ --pc-skeleton-display-text-height:var(--p-font-line-height-600); --pc-skeleton-display-text-height-not-condensed:var( --p-font-line-height-700 ); } .Polaris-SkeletonDisplayText--sizeMedium{ --pc-skeleton-display-text-height:var(--p-font-line-height-700); --pc-skeleton-display-text-height-not-condensed:var( --p-font-line-height-800 ); } .Polaris-SkeletonDisplayText--sizeLarge{ --pc-skeleton-display-text-height:var(--p-font-line-height-700); --pc-skeleton-display-text-height-not-condensed:var( --p-font-line-height-800 ); } .Polaris-SkeletonDisplayText--sizeExtraLarge{ --pc-skeleton-display-text-height:2.25rem; --pc-skeleton-display-text-height-not-condensed:2.75rem; } :root{ --pc-skeleton-page-max-width:62.375rem; --pc-skeleton-page-max-width-narrow:41.375rem; } @media screen and (-ms-high-contrast: active){ .Polaris-SkeletonPage__SkeletonTitle{ background-color:grayText; } } .Polaris-SkeletonTabs__Tabs{ display:flex; width:100%; overflow:auto; } @media (min-width: 48em){ .Polaris-SkeletonTabs__Tabs{ overflow:visible; } } .Polaris-SkeletonTabs__Tab{ position:relative; display:flex; align-items:center; height:calc(var(--p-height-800) + var(--p-height-400)); padding:var(--p-space-200) var(--p-space-300); margin-right:var(--p-space-100); } .Polaris-SkeletonTabs__Tab:last-child{ margin-right:0; } @media (min-width: 48em){ .Polaris-SkeletonTabs__Tab{ height:calc(var(--p-height-700) + var(--p-height-400)); } } .Polaris-SkeletonTabs__TabText{ width:var(--p-width-1600); height:var(--p-space-300); background-color:var(--p-color-bg-fill-tertiary); border-radius:var(--p-border-radius-100); } @media screen and (-ms-high-contrast: active){ .Polaris-SkeletonTabs__TabText{ background-color:grayText; } } .Polaris-SkeletonTabs--fitted{ flex-wrap:nowrap; } .Polaris-SkeletonTabs--fitted .Polaris-SkeletonTabs__Tab{ justify-content:flex-start; } @media (min-width: 48em){ .Polaris-SkeletonTabs--fitted .Polaris-SkeletonTabs__Tab{ flex:1 1 100%; justify-content:center; } } @media (min-width: 48em){ .Polaris-SkeletonTabs--fitted .Polaris-SkeletonTabs__TabText{ width:100%; } } .Polaris-SkeletonThumbnail{ --pc-skeleton-thumbnail-extra-small-size:1.5rem; --pc-skeleton-thumbnail-small-size:2.5rem; --pc-skeleton-thumbnail-medium-size:3.75rem; --pc-skeleton-thumbnail-large-size:5rem; display:flex; background-color:var(--p-color-bg-fill-tertiary); border-radius:var(--p-border-radius-200); } @media screen and (-ms-high-contrast: active){ .Polaris-SkeletonThumbnail{ background-color:grayText; } } .Polaris-SkeletonThumbnail--sizeExtraSmall{ height:var(--pc-skeleton-thumbnail-extra-small-size); width:var(--pc-skeleton-thumbnail-extra-small-size); } .Polaris-SkeletonThumbnail--sizeSmall{ height:var(--pc-skeleton-thumbnail-small-size); width:var(--pc-skeleton-thumbnail-small-size); } .Polaris-SkeletonThumbnail--sizeMedium{ height:var(--pc-skeleton-thumbnail-medium-size); width:var(--pc-skeleton-thumbnail-medium-size); } .Polaris-SkeletonThumbnail--sizeLarge{ height:var(--pc-skeleton-thumbnail-large-size); width:var(--pc-skeleton-thumbnail-large-size); } .Polaris-Thumbnail{ --pc-thumbnail-extra-small-size:1.5rem; --pc-thumbnail-small-size:2.5rem; --pc-thumbnail-medium-size:3.75rem; --pc-thumbnail-large-size:5rem; position:relative; display:block; overflow:hidden; background:var(--p-color-bg-surface); min-width:var(--pc-thumbnail-extra-small-size); max-width:100%; border-radius:var(--p-border-radius-200); } .Polaris-Thumbnail::after{ content:''; top:0; left:0; right:0; bottom:0; position:absolute; border-radius:var(--p-border-radius-200); box-shadow:var(--p-shadow-border-inset); display:block; padding-bottom:100%; } .Polaris-Thumbnail.Polaris-Thumbnail--sizeExtraSmall, .Polaris-Thumbnail.Polaris-Thumbnail--sizeExtraSmall::after{ border-radius:var(--p-border-radius-150); } .Polaris-Thumbnail::before{ content:''; display:block; padding-bottom:100%; } .Polaris-Thumbnail--sizeExtraSmall{ width:var(--pc-thumbnail-extra-small-size); } .Polaris-Thumbnail--sizeSmall{ width:var(--pc-thumbnail-small-size); } .Polaris-Thumbnail--sizeMedium{ width:var(--pc-thumbnail-medium-size); } .Polaris-Thumbnail--sizeLarge{ width:var(--pc-thumbnail-large-size); } .Polaris-Thumbnail--transparent{ background:transparent; } .Polaris-Thumbnail > *{ position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; max-width:100%; max-height:100%; color:var(--p-color-icon-secondary); } .Polaris-Thumbnail > * svg{ fill:currentColor; } .Polaris-TopBar-SearchDismissOverlay{ position:fixed; top:0; left:0; right:0; z-index:var(--p-z-index-7); height:100%; } .Polaris-TopBar-SearchDismissOverlay--visible{ background-color:transparent; animation:none; } .Polaris-TopBar-Search{ position:fixed; visibility:hidden; z-index:var(--p-z-index-8); pointer-events:none; top:var(--pg-top-bar-height); left:0; right:0; box-shadow:var(--p-shadow-600); overflow:hidden; } @media (min-width: 30.625em){ .Polaris-TopBar-Search{ position:absolute; top:100%; max-width:36.25rem; margin:var(--p-space-100) var(--p-space-500) 0; border-radius:var(--p-border-radius-200); } } @media (min-width: 48em){ .Polaris-TopBar-Search{ margin:var(--p-space-100) var(--p-space-800) 0; } } .Polaris-TopBar-Search__SearchContent{ background-color:var(--p-color-bg-surface); } .Polaris-TopBar-Search--visible{ visibility:initial; pointer-events:all; } .Polaris-TopBar-Search__Results{ position:relative; display:flex; flex-direction:column; max-height:calc(100vh - var(--pg-top-bar-height)); margin:0; } @media (min-width: 30.625em){ .Polaris-TopBar-Search__Results{ max-height:60vh; } } .Polaris-TopBar-SearchField{ --pc-search-field-backdrop:1; --pc-search-field-input:2; --pc-search-field-icon:3; --pc-search-field-action:3; --pc-search-field-icon-size:1.125rem; z-index:var(--p-z-index-11); position:relative; display:flex; flex:1 1 auto; align-items:center; border:var(--p-border-width-025) solid transparent; width:100%; } .Polaris-TopBar-SearchField--focused .Polaris-TopBar-SearchField__Input, .Polaris-TopBar-SearchField__Input:focus{ color:var(--p-color-text-inverse); } .Polaris-TopBar-SearchField--focused .Polaris-TopBar-SearchField__Input::placeholder, .Polaris-TopBar-SearchField__Input:focus::placeholder{ color:var(--p-color-text-inverse-secondary); } .Polaris-TopBar-SearchField__Input:focus-visible ~ .Polaris-TopBar-SearchField__Backdrop::after { box-shadow: 0 0 0 0.125rem var(--p-color-border-focus); outline: var(--p-border-width-025) solid transparent; } .Polaris-TopBar-SearchField__Input:focus-visible ~ .Polaris-TopBar-SearchField__BackdropShowFocusBorder{ border:var(--p-border-width-025) solid var(--pc-top-bar-border); } .Polaris-TopBar-SearchField__Input:focus-visible ~ .Polaris-TopBar-SearchField__Icon svg{ fill:var(--p-color-icon-secondary); } .Polaris-TopBar-SearchField__Input:focus-visible:not(:active) ~ .Polaris-TopBar-SearchField__Backdrop{ outline:var(--p-border-width-050) solid var(--p-color-border-focus); outline-offset:var(--p-space-050); } .Polaris-TopBar-SearchField__Input:focus-visible:not(:active) ~ .Polaris-TopBar-SearchField__Icon svg{ fill:var(--p-color-icon-secondary); } .Polaris-TopBar-SearchField--focused .Polaris-TopBar-SearchField__BackdropShowFocusBorder{ border:var(--p-border-width-025) solid var(--pc-top-bar-border); } .Polaris-TopBar-SearchField--focused .Polaris-TopBar-SearchField__Icon svg{ fill:var(--p-color-icon-inverse); } .Polaris-TopBar-SearchField__Input{ font-size:var(--p-font-size-325); font-weight:var(--p-font-weight-regular); line-height:var(--p-font-line-height-500); border:none; letter-spacing:initial; z-index:var(--pc-search-field-input); height:2rem; width:100%; padding:0 calc(var(--pc-search-field-icon-size) + var(--p-space-300)); border:var(--p-border-width-0165) solid var(--p-color-border-inverse); border-radius:var(--p-border-radius-200); background-color:transparent; outline:none; color:var(--p-color-text-inverse-secondary); -webkit-backface-visibility:hidden; backface-visibility:hidden; will-change:fill, color; transition:fill var(--p-motion-duration-200) var(--p-motion-ease), color var(--p-motion-duration-200) var(--p-motion-ease); } .Polaris-TopBar-SearchField__Input:hover{ border-color:var(--p-color-border-inverse-hover); } .Polaris-TopBar-SearchField__Input:active, .Polaris-TopBar-SearchField__Input:focus{ box-shadow:inset 0 0 0 var(--p-border-width-025) var(--p-color-border-inverse-active); } .Polaris-TopBar-SearchField__Input::placeholder{ color:var(--p-color-text-inverse-secondary); } .Polaris-TopBar-SearchField__Input::-webkit-search-decoration, .Polaris-TopBar-SearchField__Input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; } .Polaris-TopBar-SearchField__Icon{ position:absolute; z-index:var(--pc-search-field-icon); top:50%; left:var(--p-space-200); display:flex; height:var(--pc-search-field-icon-size); width:var(--pc-search-field-icon-size); pointer-events:none; transform:translateY(-50%); } .Polaris-TopBar-SearchField__Icon svg{ fill:var(--p-color-icon-secondary); } .Polaris-TopBar-SearchField__Clear{ position: relative; position:absolute; right:var(--p-space-100); z-index:var(--pc-search-field-action); border:none; -webkit-appearance:none; appearance:none; background:transparent; padding:var(--p-space-100); } .Polaris-TopBar-SearchField__Clear::after { content: ''; position: absolute; z-index: 1; top: -0.0625rem; right: -0.0625rem; bottom: -0.0625rem; left: -0.0625rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus); border-radius: var(--p-border-radius-200); } .Polaris-TopBar-SearchField__Clear svg{ fill:var(--p-color-icon-secondary); } .Polaris-TopBar-SearchField__Clear:focus, .Polaris-TopBar-SearchField__Clear:hover{ outline:none; } .Polaris-TopBar-SearchField__Clear:hover svg, .Polaris-TopBar-SearchField__Clear:focus svg{ fill:var(--p-color-icon-inverse); } .Polaris-TopBar-SearchField__Clear:focus-visible::after { box-shadow: 0 0 0 0.125rem var(--p-color-border-focus); outline: var(--p-border-width-025) solid transparent; } .Polaris-TopBar-SearchField__Clear:active svg{ fill:var(--p-color-icon-active); } .Polaris-TopBar-SearchField__Clear:active::after{ border:none; } .Polaris-TopBar-SearchField__Backdrop{ position:absolute; z-index:var(--pc-search-field-backdrop); top:0; right:0; bottom:0; left:0; background-color:var(--p-color-bg-surface-inverse); border-radius:var(--p-border-radius-200); } .Polaris-TopBar-SearchField__Backdrop::after{ content:none; } .Polaris-MessageIndicator__MessageIndicatorWrapper{ position:relative; } .Polaris-MessageIndicator{ --pc-message-indicator-size:0.75rem; --pc-message-indicator-position:-0.1875rem; position:absolute; z-index:1; top:var(--pc-message-indicator-position); right:var(--pc-message-indicator-position); width:var(--pc-message-indicator-size); height:var(--pc-message-indicator-size); border-radius:var(--p-border-radius-full); background-color:var(--p-color-icon-info); border:solid var(--p-border-width-050) var(--p-color-bg); } .Polaris-Menu-Message__Section{ max-width:20.3125rem; margin-top:var(--p-space-200); padding-top:var(--p-space-200); border-top:var(--p-border-width-025) solid var(--p-color-border-secondary); } .Polaris-TopBar-Menu__ActivatorWrapper{ height:var(--pg-top-bar-height); display:flex; align-items:center; } .Polaris-TopBar-Menu__Activator{ -webkit-appearance:none; appearance:none; margin:0; padding:0; background:none; border:none; font-size:inherit; line-height:inherit; color:inherit; cursor:pointer; position: relative; color:var(--p-color-text-inverse); position:relative; display:flex; justify-content:center; align-items:center; min-width:auto; min-height:2rem; padding:var(--p-space-150); border:0; cursor:pointer; transition:background-color var(--p-motion-duration-100); margin-right:var(--p-space-200); border-radius:var(--p-border-radius-200); background-color:var(--p-color-bg-fill-inverse); } .Polaris-TopBar-Menu__Activator:focus{ outline:none; } .Polaris-TopBar-Menu__Activator::after { content: ''; position: absolute; z-index: 1; top: -0.0625rem; right: -0.0625rem; bottom: -0.0625rem; left: -0.0625rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus); border-radius: var(--p-border-radius-100); } .Polaris-TopBar-Menu__Activator:focus{ background-color:var(--p-color-bg-fill-inverse-hover); outline:none; } .Polaris-TopBar-Menu__Activator:focus-visible{ outline:var(--p-border-width-050) solid var(--p-color-border-focus); outline-offset:var(--p-space-050); } .Polaris-TopBar-Menu__Activator:focus-visible::after{ content:none; } .Polaris-TopBar-Menu__Activator:hover{ background-color:var(--p-color-bg-fill-inverse-hover); } .Polaris-TopBar-Menu__Activator:active, .Polaris-TopBar-Menu__Activator[aria-expanded='true']{ background-color:var(--p-color-bg-fill-inverse-active); outline:none; transition:none; } .Polaris-TopBar-Menu__Activator:active::after, .Polaris-TopBar-Menu__Activator[aria-expanded='true']::after{ border:none; } .Polaris-TopBar-Menu__Activator:active p, .Polaris-TopBar-Menu__Activator[aria-expanded='true'] p{ color:var(--p-color-text-inverse); } @media (max-width: 47.9975em){ .Polaris-TopBar-Menu__Activator{ margin-right:var(--p-space-200); background-color:var(--p-color-bg-inverse); } .Polaris-TopBar-Menu__Activator:focus, .Polaris-TopBar-Menu__Activator:hover, .Polaris-TopBar-Menu__Activator:active, .Polaris-TopBar-Menu__Activator[aria-expanded='true']{ opacity:0.85; } } .Polaris-TopBar-Menu__Activator--userMenu{ padding:var(--p-space-050); } .Polaris-TopBar-Menu__Section{ margin-top:var(--p-space-200); padding-top:var(--p-space-200); border-top:var(--p-border-width-025) solid var(--p-color-border-secondary); } .Polaris-TopBar-UserMenu__Details{ max-width:10rem; margin-right:0; padding:0 var(--p-space-200) 0 0.625rem; } @media (max-width: 47.9975em){ .Polaris-TopBar-UserMenu__Details{ display:none; } } .Polaris-TopBar{ position:relative; height:var(--pg-top-bar-height); box-shadow:var(--p-shadow-100); background-color:var(--p-color-bg-inverse); gap:var(--p-space-100); } @media (min-width: 48em){ .Polaris-TopBar{ gap:var(--p-space-600); grid-template-columns:minmax(15rem, 1fr) minmax(auto, 30rem) 1fr; } } .Polaris-TopBar::after{ content:''; position:absolute; bottom:0; width:100%; border-bottom:var(--p-border-width-025) solid transparent; } .Polaris-TopBar__Container{ display:grid; grid-template-columns:1fr minmax(auto, 30rem) 1fr; align-items:center; width:calc(100vw - var(--pc-app-provider-scrollbar-width)); } .Polaris-TopBar__LogoDisplayControl{ display:none; } @media (min-width: 48em){ .Polaris-TopBar__LogoDisplayControl{ display:flex; } } .Polaris-TopBar__LogoDisplayContainer{ display:flex; } .Polaris-TopBar__LogoContainer{ flex:0 0 var(--pg-layout-width-nav-base); align-items:center; height:100%; padding:0 var(--p-space-200) 0 var(--p-space-400); flex-basis: var(--pg-layout-width-nav-base); flex-basis: calc(var(--pg-layout-width-nav-base) + constant(safe-area-inset-left)); flex-basis: calc(var(--pg-layout-width-nav-base) + env(safe-area-inset-left)); padding-left: var(--p-space-400); padding-left: calc(var(--p-space-400) + constant(safe-area-inset-left)); padding-left: calc(var(--p-space-400) + env(safe-area-inset-left)); } .Polaris-TopBar__LogoContainer.Polaris-TopBar--hasLogoSuffix{ gap:var(--p-space-200); } .Polaris-TopBar__Logo, .Polaris-TopBar__LogoLink{ display:block; } .Polaris-TopBar__Logo:focus-visible, .Polaris-TopBar__LogoLink:focus-visible{ outline:var(--p-border-width-050) solid var(--p-color-border-focus); outline-offset:var(--p-space-150); border-radius:var(--p-border-radius-200); } .Polaris-TopBar__ContextControl{ display:none; } @media (min-width: 48em){ .Polaris-TopBar__ContextControl{ width:var(--pg-layout-width-nav-base); display:block; } } @media (min-width: 90em){ .Polaris-TopBar__ContextControl{ width:var(--pg-layout-width-nav-base); } } .Polaris-TopBar__NavigationIcon{ -webkit-appearance:none; appearance:none; margin:0; padding:0; background:none; border:none; font-size:inherit; line-height:inherit; color:inherit; cursor:pointer; position:relative; align-self:center; margin-left:calc(var(--p-space-200) + var(--p-space-050)); margin-right:var(--p-space-200); padding:var(--p-space-200); border-radius:var(--p-border-radius-100); color:var(--p-color-icon-inverse); transition:var(--p-motion-duration-150) color var(--p-motion-ease) var(--p-motion-duration-50); } .Polaris-TopBar__NavigationIcon:focus{ outline:none; } .Polaris-TopBar__NavigationIcon.Polaris-TopBar--focused:active{ background-color:var(--p-color-bg-fill-inverse-hover); } .Polaris-TopBar__NavigationIcon:hover{ background-color:var(--p-color-bg-fill-inverse-hover); } .Polaris-TopBar__NavigationIcon::after{ content:''; position:absolute; top:calc(var(--p-space-200)*-1); left:calc(var(--p-space-200)*-1); width:calc(100% + var(--p-space-500)); height:calc(100% + var(--p-space-500)); } @media (min-width: 48em){ .Polaris-TopBar__NavigationIcon{ display:none; } } .Polaris-TopBar__NavigationIcon .Polaris-TopBar__IconWrapper{ position: relative; } .Polaris-TopBar__NavigationIcon .Polaris-TopBar__IconWrapper::after { content: ''; position: absolute; z-index: 1; top: -0.4375rem; right: -0.4375rem; bottom: -0.4375rem; left: -0.4375rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.4375rem var(--p-color-border-focus); border-radius: var(--p-border-radius-100); } .Polaris-TopBar__NavigationIcon:focus-visible:not(:active) .Polaris-TopBar__IconWrapper::after { box-shadow: 0 0 0 0.125rem var(--p-color-border-focus); outline: var(--p-border-width-025) solid transparent; } .Polaris-TopBar__LeftContent{ display:flex; } .Polaris-TopBar__Search{ z-index:var(--p-z-index-1); display:flex; flex:1 1 auto; align-items:center; justify-content:center; height:100%; } @media (min-width: 48em){ .Polaris-TopBar__Search{ position:relative; } } .Polaris-TopBar__RightContent{ display:flex; justify-content:flex-end; } .Polaris-TopBar__SecondaryMenu{ margin-left:var(--p-space-200); } .Polaris-TopBar__SecondaryMenu svg{ fill:var(--p-color-icon-inverse); } .Polaris-VideoThumbnail__Thumbnail{ position:relative; padding-bottom:56.25%; background-size:cover; background-position:center center; background-repeat:no-repeat; width:100%; height:100%; } .Polaris-VideoThumbnail__ThumbnailContainer{ position:relative; height:100%; } .Polaris-VideoThumbnail__PlayButton{ --pc-play-button-focused-state-overlay:rgba(223, 227, 232, 0.3); position:absolute; top:0; left:0; width:100%; height:100%; padding:0; border:none; background:transparent; transition:opacity var(--p-motion-duration-200) var(--p-motion-ease-in); cursor:pointer; } .Polaris-VideoThumbnail__PlayButton:focus{ outline:none; box-shadow:inset 0.125rem 0 0 var(--p-color-border-focus); background-image:linear-gradient( var(--pc-play-button-focused-state-overlay), var(--pc-play-button-focused-state-overlay) ); } .Polaris-VideoThumbnail__PlayButton:focus .Polaris-VideoThumbnail__Timestamp{ background-color:var( --p-color-video-thumbnail-play-button-bg-fill-hover ); } .Polaris-VideoThumbnail__PlayButton:hover .Polaris-VideoThumbnail__Timestamp{ background-color:var(--p-color-video-thumbnail-play-button-bg-fill-hover); } .Polaris-VideoThumbnail__PlayIcon{ fill:var(--p-color-video-thumbnail-play-button-text-on-bg-fill); } .Polaris-VideoThumbnail__Timestamp{ position:absolute; bottom:0; padding:var(--p-space-100) var(--p-space-200) var(--p-space-100) var(--p-space-100); margin-bottom:var(--p-space-400); margin-left:var(--p-space-400); border-radius:var(--p-border-radius-200); color:var(--p-color-video-thumbnail-play-button-text-on-bg-fill); background-color:var(--p-color-video-thumbnail-play-button-bg-fill); text-align:center; transition:background-color var(--p-motion-duration-200) var(--p-motion-ease-in); } .Polaris-VideoThumbnail__Progress{ position:absolute; bottom:0; width:100%; background-color:var(--p-color-bg-surface); height:0.375rem; overflow:hidden; } .Polaris-VideoThumbnail__Indicator{ height:inherit; width:100%; transform-origin:left; transform:scaleX(0); background-color:var(--p-color-bg-fill-brand); transition:transform var(--p-motion-duration-500) var(--p-motion-ease); } .Polaris-VideoThumbnail__ProgressBar, .Polaris-VideoThumbnail__Label{ position: absolute !important; top: 0; width: 0.0625rem !important; height: 0.0625rem !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; } /*!*****************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/app/globals.css ***! \*****************************************************************************************************************************************************************************************************************************************************************/ /*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */ @layer properties; @layer theme, base, components, utilities; @layer theme { :root, :host { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-red-50: oklch(97.1% 0.013 17.38); --color-red-100: oklch(93.6% 0.032 17.717); --color-red-200: oklch(88.5% 0.062 18.334); --color-red-300: oklch(80.8% 0.114 19.571); --color-red-400: oklch(70.4% 0.191 22.216); --color-red-500: oklch(63.7% 0.237 25.331); --color-red-950: oklch(25.8% 0.092 26.042); --color-amber-50: oklch(98.7% 0.022 95.277); --color-amber-100: oklch(96.2% 0.059 95.617); --color-amber-200: oklch(92.4% 0.12 95.746); --color-amber-300: oklch(87.9% 0.169 91.605); --color-amber-400: oklch(82.8% 0.189 84.429); --color-amber-500: oklch(76.9% 0.188 70.08); --color-yellow-500: oklch(79.5% 0.184 86.047); --color-emerald-50: oklch(97.9% 0.021 166.113); --color-emerald-100: oklch(95% 0.052 163.051); --color-emerald-200: oklch(90.5% 0.093 164.15); --color-emerald-300: oklch(84.5% 0.143 164.978); --color-emerald-400: oklch(76.5% 0.177 163.223); --color-emerald-500: oklch(69.6% 0.17 162.48); --color-blue-400: oklch(70.7% 0.165 254.624); --color-blue-500: oklch(62.3% 0.214 259.815); --color-violet-400: oklch(70.2% 0.183 293.541); --color-violet-500: oklch(60.6% 0.25 292.717); --color-purple-400: oklch(71.4% 0.203 305.504); --color-rose-600: oklch(58.6% 0.253 17.585); --color-gray-100: oklch(96.7% 0.003 264.542); --color-gray-200: oklch(92.8% 0.006 264.531); --color-gray-400: oklch(70.7% 0.022 261.325); --color-gray-500: oklch(55.1% 0.027 264.364); --color-gray-900: oklch(21% 0.034 264.665); --color-neutral-100: oklch(97% 0 0); --color-neutral-200: oklch(92.2% 0 0); --color-neutral-300: oklch(87% 0 0); --color-neutral-400: oklch(70.8% 0 0); --color-neutral-500: oklch(55.6% 0 0); --color-neutral-600: oklch(43.9% 0 0); --color-neutral-700: oklch(37.1% 0 0); --color-neutral-800: oklch(26.9% 0 0); --color-neutral-900: oklch(20.5% 0 0); --color-neutral-950: oklch(14.5% 0 0); --color-stone-100: oklch(97% 0.001 106.424); --color-stone-200: oklch(92.3% 0.003 48.717); --color-black: #000; --color-white: #fff; --spacing: 0.25rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --container-5xl: 64rem; --container-6xl: 72rem; --text-xs: 0.75rem; --text-xs--line-height: calc(1 / 0.75); --text-sm: 0.875rem; --text-sm--line-height: calc(1.25 / 0.875); --text-base: 1rem; --text-base--line-height: calc(1.5 / 1); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: calc(2.25 / 1.875); --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-6xl: 3.75rem; --text-6xl--line-height: 1; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --tracking-tight: -0.025em; --tracking-normal: 0em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-relaxed: 1.625; --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --animate-spin: spin 1s linear infinite; --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; --blur-sm: 8px; --blur-md: 12px; --blur-xl: 24px; --blur-2xl: 40px; --aspect-video: 16 / 9; --default-transition-duration: 150ms; --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); } } @layer base { *, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; } html, :host { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); font-feature-settings: var(--default-font-feature-settings, normal); font-variation-settings: var(--default-font-variation-settings, normal); -webkit-tap-highlight-color: transparent; } 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; -webkit-text-decoration: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); font-feature-settings: var(--default-mono-font-feature-settings, normal); font-variation-settings: var(--default-mono-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: -0.25em; } sup { top: -0.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } :-moz-focusring { outline: auto; } progress { vertical-align: baseline; } summary { display: list-item; } ol, ul, menu { list-style: none; } img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } button, input, select, optgroup, textarea, ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; border-radius: 0; background-color: transparent; opacity: 1; } :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } ::file-selector-button { margin-inline-end: 4px; } ::placeholder { opacity: 1; } @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { ::placeholder { color: currentcolor; @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, currentcolor 50%, transparent); } } } textarea { resize: vertical; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; } ::-webkit-datetime-edit { display: inline-flex; } ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { padding-block: 0; } ::-webkit-calendar-picker-indicator { line-height: 1; } :-moz-ui-invalid { box-shadow: none; } button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button { appearance: button; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [hidden]:where(:not([hidden="until-found"])) { display: none !important; } } @layer utilities { .pointer-events-auto { pointer-events: auto; } .pointer-events-none { pointer-events: none; } .collapse { visibility: collapse; } .invisible { visibility: hidden; } .visible { visibility: visible; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border-width: 0; } .absolute { position: absolute; } .fixed { position: fixed; } .relative { position: relative; } .static { position: static; } .sticky { position: sticky; } .-inset-1 { inset: calc(var(--spacing) * -1); } .inset-0 { inset: calc(var(--spacing) * 0); } .inset-0\.5 { inset: calc(var(--spacing) * 0.5); } .inset-3 { inset: calc(var(--spacing) * 3); } .inset-6 { inset: calc(var(--spacing) * 6); } .inset-\[-10px\] { inset: -10px; } .inset-x-0 { inset-inline: calc(var(--spacing) * 0); } .inset-x-2\.5 { inset-inline: calc(var(--spacing) * 2.5); } .inset-x-3 { inset-inline: calc(var(--spacing) * 3); } .inset-x-4 { inset-inline: calc(var(--spacing) * 4); } .inset-y-0 { inset-block: calc(var(--spacing) * 0); } .-top-1 { top: calc(var(--spacing) * -1); } .-top-px { top: -1px; } .top-0 { top: calc(var(--spacing) * 0); } .top-0\.5 { top: calc(var(--spacing) * 0.5); } .top-1 { top: calc(var(--spacing) * 1); } .top-1\.5 { top: calc(var(--spacing) * 1.5); } .top-1\/2 { top: calc(1/2 * 100%); } .top-2 { top: calc(var(--spacing) * 2); } .top-3 { top: calc(var(--spacing) * 3); } .top-3\.5 { top: calc(var(--spacing) * 3.5); } .top-4 { top: calc(var(--spacing) * 4); } .top-6 { top: calc(var(--spacing) * 6); } .top-11 { top: calc(var(--spacing) * 11); } .top-16 { top: calc(var(--spacing) * 16); } .top-20 { top: calc(var(--spacing) * 20); } .top-24 { top: calc(var(--spacing) * 24); } .top-\[-3px\] { top: -3px; } .top-\[42\%\] { top: 42%; } .top-\[calc\(100\%\+0\.5rem\)\] { top: calc(100% + 0.5rem); } .top-\[calc\(100\%\+4px\)\] { top: calc(100% + 4px); } .top-\[calc\(100\%\+6px\)\] { top: calc(100% + 6px); } .top-\[calc\(100\%\+8px\)\] { top: calc(100% + 8px); } .top-\[calc\(100\%-2px\)\] { top: calc(100% - 2px); } .top-\[max\(76px\,calc\(env\(safe-area-inset-top\)\+18px\)\)\] { top: max(76px, calc(env(safe-area-inset-top) + 18px)); } .top-full { top: 100%; } .-right-1 { right: calc(var(--spacing) * -1); } .right-0 { right: calc(var(--spacing) * 0); } .right-1 { right: calc(var(--spacing) * 1); } .right-1\.5 { right: calc(var(--spacing) * 1.5); } .right-2 { right: calc(var(--spacing) * 2); } .right-3 { right: calc(var(--spacing) * 3); } .right-3\.5 { right: calc(var(--spacing) * 3.5); } .right-4 { right: calc(var(--spacing) * 4); } .right-5 { right: calc(var(--spacing) * 5); } .right-6 { right: calc(var(--spacing) * 6); } .right-\[-6px\] { right: -6px; } .right-\[calc\(100\%\+8px\)\] { right: calc(100% + 8px); } .-bottom-1 { bottom: calc(var(--spacing) * -1); } .-bottom-px { bottom: -1px; } .bottom-0 { bottom: calc(var(--spacing) * 0); } .bottom-1\.5 { bottom: calc(var(--spacing) * 1.5); } .bottom-2 { bottom: calc(var(--spacing) * 2); } .bottom-3 { bottom: calc(var(--spacing) * 3); } .bottom-4 { bottom: calc(var(--spacing) * 4); } .bottom-11 { bottom: calc(var(--spacing) * 11); } .bottom-\[7\.25rem\] { bottom: 7.25rem; } .bottom-\[calc\(12px\+env\(safe-area-inset-bottom\)\)\] { bottom: calc(12px + env(safe-area-inset-bottom)); } .bottom-\[calc\(100\%\+8px\)\] { bottom: calc(100% + 8px); } .bottom-\[calc\(100\%\+10px\)\] { bottom: calc(100% + 10px); } .bottom-full { bottom: 100%; } .-left-1 { left: calc(var(--spacing) * -1); } .left-0 { left: calc(var(--spacing) * 0); } .left-0\.5 { left: calc(var(--spacing) * 0.5); } .left-1 { left: calc(var(--spacing) * 1); } .left-1\/2 { left: calc(1/2 * 100%); } .left-2 { left: calc(var(--spacing) * 2); } .left-2\.5 { left: calc(var(--spacing) * 2.5); } .left-3 { left: calc(var(--spacing) * 3); } .left-3\.5 { left: calc(var(--spacing) * 3.5); } .left-4 { left: calc(var(--spacing) * 4); } .left-6 { left: calc(var(--spacing) * 6); } .left-\[18px\] { left: 18px; } .left-\[calc\(100\%\+8px\)\] { left: calc(100% + 8px); } .isolate { isolation: isolate; } .-z-10 { z-index: calc(10 * -1); } .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-\[60\] { z-index: 60; } .z-\[65\] { z-index: 65; } .z-\[70\] { z-index: 70; } .z-\[80\] { z-index: 80; } .z-\[85\] { z-index: 85; } .z-\[90\] { z-index: 90; } .z-\[110\] { z-index: 110; } .z-\[140\] { z-index: 140; } .z-\[180\] { z-index: 180; } .z-\[300\] { z-index: 300; } .z-\[999\] { z-index: 999; } .z-\[1000\] { z-index: 1000; } .z-\[1200\] { z-index: 1200; } .z-\[1201\] { z-index: 1201; } .z-\[1300\] { z-index: 1300; } .col-span-2 { grid-column: span 2 / span 2; } .col-span-full { grid-column: 1 / -1; } .row-span-2 { grid-row: span 2 / span 2; } .\!container { width: 100% !important; @media (width >= 40rem) { max-width: 40rem !important; } @media (width >= 48rem) { max-width: 48rem !important; } @media (width >= 64rem) { max-width: 64rem !important; } @media (width >= 80rem) { max-width: 80rem !important; } @media (width >= 96rem) { max-width: 96rem !important; } } .container { width: 100%; @media (width >= 40rem) { max-width: 40rem; } @media (width >= 48rem) { max-width: 48rem; } @media (width >= 64rem) { max-width: 64rem; } @media (width >= 80rem) { max-width: 80rem; } @media (width >= 96rem) { max-width: 96rem; } } .\!m-0 { margin: calc(var(--spacing) * 0) !important; } .m-0 { margin: calc(var(--spacing) * 0); } .m-6 { margin: calc(var(--spacing) * 6); } .m-auto { margin: auto; } .-mx-2 { margin-inline: calc(var(--spacing) * -2); } .-mx-4 { margin-inline: calc(var(--spacing) * -4); } .mx-0\.5 { margin-inline: calc(var(--spacing) * 0.5); } .mx-1 { margin-inline: calc(var(--spacing) * 1); } .mx-1\.5 { margin-inline: calc(var(--spacing) * 1.5); } .mx-6 { margin-inline: calc(var(--spacing) * 6); } .mx-auto { margin-inline: auto; } .-mt-4 { margin-top: calc(var(--spacing) * -4); } .mt-0\.5 { margin-top: calc(var(--spacing) * 0.5); } .mt-1 { margin-top: calc(var(--spacing) * 1); } .mt-1\.5 { margin-top: calc(var(--spacing) * 1.5); } .mt-2 { margin-top: calc(var(--spacing) * 2); } .mt-2\.5 { margin-top: calc(var(--spacing) * 2.5); } .mt-3 { margin-top: calc(var(--spacing) * 3); } .mt-4 { margin-top: calc(var(--spacing) * 4); } .mt-5 { margin-top: calc(var(--spacing) * 5); } .mt-6 { margin-top: calc(var(--spacing) * 6); } .mt-7 { margin-top: calc(var(--spacing) * 7); } .mt-8 { margin-top: calc(var(--spacing) * 8); } .mt-10 { margin-top: calc(var(--spacing) * 10); } .mt-14 { margin-top: calc(var(--spacing) * 14); } .mt-16 { margin-top: calc(var(--spacing) * 16); } .mt-\[18px\] { margin-top: 18px; } .mr-2 { margin-right: calc(var(--spacing) * 2); } .mb-0\.5 { margin-bottom: calc(var(--spacing) * 0.5); } .mb-1 { margin-bottom: calc(var(--spacing) * 1); } .mb-1\.5 { margin-bottom: calc(var(--spacing) * 1.5); } .mb-2 { margin-bottom: calc(var(--spacing) * 2); } .mb-2\.5 { margin-bottom: calc(var(--spacing) * 2.5); } .mb-3 { margin-bottom: calc(var(--spacing) * 3); } .mb-4 { margin-bottom: calc(var(--spacing) * 4); } .mb-5 { margin-bottom: calc(var(--spacing) * 5); } .mb-6 { margin-bottom: calc(var(--spacing) * 6); } .mb-7 { margin-bottom: calc(var(--spacing) * 7); } .mb-8 { margin-bottom: calc(var(--spacing) * 8); } .ml-0\.5 { margin-left: calc(var(--spacing) * 0.5); } .ml-2 { margin-left: calc(var(--spacing) * 2); } .ml-\[18px\] { margin-left: 18px; } .ml-auto { margin-left: auto; } .line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .block { display: block; } .contents { display: contents; } .flex { display: flex; } .grid { display: grid; } .hidden { display: none; } .inline { display: inline; } .inline-block { display: inline-block; } .inline-flex { display: inline-flex; } .table { display: table; } .aspect-\[2\/3\] { aspect-ratio: 2/3; } .aspect-\[3\/4\] { aspect-ratio: 3/4; } .aspect-\[4\/3\] { aspect-ratio: 4/3; } .aspect-\[4\/5\] { aspect-ratio: 4/5; } .aspect-\[9\/13\] { aspect-ratio: 9/13; } .aspect-\[9\/16\] { aspect-ratio: 9/16; } .aspect-\[16\/11\] { aspect-ratio: 16/11; } .aspect-square { aspect-ratio: 1 / 1; } .aspect-video { aspect-ratio: var(--aspect-video); } .h-0 { height: calc(var(--spacing) * 0); } .h-1 { height: calc(var(--spacing) * 1); } .h-1\.5 { height: calc(var(--spacing) * 1.5); } .h-2 { height: calc(var(--spacing) * 2); } .h-2\.5 { height: calc(var(--spacing) * 2.5); } .h-2\/5 { height: calc(2/5 * 100%); } .h-3 { height: calc(var(--spacing) * 3); } .h-3\.5 { height: calc(var(--spacing) * 3.5); } .h-4 { height: calc(var(--spacing) * 4); } .h-5 { height: calc(var(--spacing) * 5); } .h-6 { height: calc(var(--spacing) * 6); } .h-7 { height: calc(var(--spacing) * 7); } .h-8 { height: calc(var(--spacing) * 8); } .h-9 { height: calc(var(--spacing) * 9); } .h-10 { height: calc(var(--spacing) * 10); } .h-11 { height: calc(var(--spacing) * 11); } .h-12 { height: calc(var(--spacing) * 12); } .h-14 { height: calc(var(--spacing) * 14); } .h-16 { height: calc(var(--spacing) * 16); } .h-20 { height: calc(var(--spacing) * 20); } .h-24 { height: calc(var(--spacing) * 24); } .h-44 { height: calc(var(--spacing) * 44); } .h-\[2px\] { height: 2px; } .h-\[22px\] { height: 22px; } .h-\[26px\] { height: 26px; } .h-\[30px\] { height: 30px; } .h-\[34px\] { height: 34px; } .h-\[62\%\] { height: 62%; } .h-\[360px\] { height: 360px; } .h-\[calc\(52px\+env\(safe-area-inset-bottom\)\)\] { height: calc(52px + env(safe-area-inset-bottom)); } .h-\[calc\(100\%-64px\)\] { height: calc(100% - 64px); } .h-\[calc\(116px\+env\(safe-area-inset-bottom\)\)\] { height: calc(116px + env(safe-area-inset-bottom)); } .h-\[min\(88dvh\,900px\)\] { height: min(88dvh, 900px); } .h-full { height: 100%; } .h-px { height: 1px; } .max-h-36 { max-height: calc(var(--spacing) * 36); } .max-h-44 { max-height: calc(var(--spacing) * 44); } .max-h-48 { max-height: calc(var(--spacing) * 48); } .max-h-60 { max-height: calc(var(--spacing) * 60); } .max-h-64 { max-height: calc(var(--spacing) * 64); } .max-h-80 { max-height: calc(var(--spacing) * 80); } .max-h-\[4\.75rem\] { max-height: 4.75rem; } .max-h-\[11\.5rem\] { max-height: 11.5rem; } .max-h-\[14rem\] { max-height: 14rem; } .max-h-\[19rem\] { max-height: 19rem; } .max-h-\[62vh\] { max-height: 62vh; } .max-h-\[82vh\] { max-height: 82vh; } .max-h-\[88vh\] { max-height: 88vh; } .max-h-\[92vh\] { max-height: 92vh; } .max-h-\[260px\] { max-height: 260px; } .max-h-\[310px\] { max-height: 310px; } .max-h-\[420px\] { max-height: 420px; } .max-h-\[560px\] { max-height: 560px; } .max-h-\[calc\(100\%-2\.75rem\)\] { max-height: calc(100% - 2.75rem); } .max-h-\[calc\(100dvh-3rem\)\] { max-height: calc(100dvh - 3rem); } .max-h-\[calc\(100dvh-6rem\)\] { max-height: calc(100dvh - 6rem); } .max-h-\[calc\(100vh-11rem\)\] { max-height: calc(100vh - 11rem); } .max-h-\[min\(68vh\,560px\)\] { max-height: min(68vh, 560px); } .max-h-\[min\(200px\,34dvh\)\] { max-height: min(200px, 34dvh); } .max-h-\[min\(220px\,calc\(var\(--command-panel-height\,570px\)-140px\)\)\] { max-height: min(220px, calc(var(--command-panel-height,570px) - 140px)); } .max-h-\[min\(480px\,calc\(100dvh-32px\)\)\] { max-height: min(480px, calc(100dvh - 32px)); } .max-h-\[min\(760px\,calc\(100vh-32px\)\)\] { max-height: min(760px, calc(100vh - 32px)); } .max-h-full { max-height: 100%; } .min-h-0 { min-height: calc(var(--spacing) * 0); } .min-h-8 { min-height: calc(var(--spacing) * 8); } .min-h-9 { min-height: calc(var(--spacing) * 9); } .min-h-10 { min-height: calc(var(--spacing) * 10); } .min-h-11 { min-height: calc(var(--spacing) * 11); } .min-h-12 { min-height: calc(var(--spacing) * 12); } .min-h-16 { min-height: calc(var(--spacing) * 16); } .min-h-40 { min-height: calc(var(--spacing) * 40); } .min-h-\[26px\] { min-height: 26px; } .min-h-\[88px\] { min-height: 88px; } .min-h-\[116px\] { min-height: 116px; } .min-h-\[142px\] { min-height: 142px; } .min-h-\[250px\] { min-height: 250px; } .min-h-\[260px\] { min-height: 260px; } .min-h-\[320px\] { min-height: 320px; } .min-h-\[360px\] { min-height: 360px; } .min-h-\[420px\] { min-height: 420px; } .min-h-\[430px\] { min-height: 430px; } .min-h-\[560px\] { min-height: 560px; } .min-h-\[calc\(100vh-120px\)\] { min-height: calc(100vh - 120px); } .min-h-full { min-height: 100%; } .min-h-screen { min-height: 100vh; } .w-0 { width: calc(var(--spacing) * 0); } .w-0\.5 { width: calc(var(--spacing) * 0.5); } .w-1 { width: calc(var(--spacing) * 1); } .w-1\.5 { width: calc(var(--spacing) * 1.5); } .w-2 { width: calc(var(--spacing) * 2); } .w-2\.5 { width: calc(var(--spacing) * 2.5); } .w-3 { width: calc(var(--spacing) * 3); } .w-3\.5 { width: calc(var(--spacing) * 3.5); } .w-4 { width: calc(var(--spacing) * 4); } .w-5 { width: calc(var(--spacing) * 5); } .w-6 { width: calc(var(--spacing) * 6); } .w-7 { width: calc(var(--spacing) * 7); } .w-8 { width: calc(var(--spacing) * 8); } .w-9 { width: calc(var(--spacing) * 9); } .w-10 { width: calc(var(--spacing) * 10); } .w-11 { width: calc(var(--spacing) * 11); } .w-12 { width: calc(var(--spacing) * 12); } .w-14 { width: calc(var(--spacing) * 14); } .w-16 { width: calc(var(--spacing) * 16); } .w-20 { width: calc(var(--spacing) * 20); } .w-24 { width: calc(var(--spacing) * 24); } .w-36 { width: calc(var(--spacing) * 36); } .w-44 { width: calc(var(--spacing) * 44); } .w-48 { width: calc(var(--spacing) * 48); } .w-64 { width: calc(var(--spacing) * 64); } .w-72 { width: calc(var(--spacing) * 72); } .w-\[22px\] { width: 22px; } .w-\[30px\] { width: 30px; } .w-\[36\%\] { width: 36%; } .w-\[60\%\] { width: 60%; } .w-\[88px\] { width: 88px; } .w-\[104px\] { width: 104px; } .w-\[118px\] { width: 118px; } .w-\[140px\] { width: 140px; } .w-\[150px\] { width: 150px; } .w-\[168px\] { width: 168px; } .w-\[220px\] { width: 220px; } .w-\[246px\] { width: 246px; } .w-\[360px\] { width: 360px; } .w-\[440px\] { width: 440px; } .w-\[calc\(50\%-0\.3125rem\)\] { width: calc(50% - 0.3125rem); } .w-\[min\(15rem\,100\%\)\] { width: min(15rem, 100%); } .w-\[min\(16rem\,100\%\)\] { width: min(16rem, 100%); } .w-\[min\(92vw\,472px\)\] { width: min(92vw, 472px); } .w-\[min\(280px\,calc\(100vw-32px\)\)\] { width: min(280px, calc(100vw - 32px)); } .w-\[min\(285px\,calc\(100vw-3rem\)\)\] { width: min(285px, calc(100vw - 3rem)); } .w-\[min\(320px\,calc\(100vw-2\.5rem\)\)\] { width: min(320px, calc(100vw - 2.5rem)); } .w-\[min\(340px\,calc\(100vw-32px\)\)\] { width: min(340px, calc(100vw - 32px)); } .w-\[min\(380px\,100vw\)\] { width: min(380px, 100vw); } .w-\[min\(392px\,calc\(100\%-1\.5rem\)\)\] { width: min(392px, calc(100% - 1.5rem)); } .w-\[min\(400px\,calc\(100\%-1\.5rem\)\)\] { width: min(400px, calc(100% - 1.5rem)); } .w-\[min\(420px\,calc\(100vw-2rem\)\)\] { width: min(420px, calc(100vw - 2rem)); } .w-\[min\(420px\,calc\(100vw-7rem\)\)\] { width: min(420px, calc(100vw - 7rem)); } .w-\[min\(440px\,calc\(100\%-1\.5rem\)\)\] { width: min(440px, calc(100% - 1.5rem)); } .w-\[min\(1120px\,calc\(100vw-32px\)\)\] { width: min(1120px, calc(100vw - 32px)); } .w-full { width: 100%; } .w-px { width: 1px; } .max-w-2xl { max-width: var(--container-2xl); } .max-w-3xl { max-width: var(--container-3xl); } .max-w-4xl { max-width: var(--container-4xl); } .max-w-5xl { max-width: var(--container-5xl); } .max-w-6xl { max-width: var(--container-6xl); } .max-w-\[34ch\] { max-width: 34ch; } .max-w-\[44\%\] { max-width: 44%; } .max-w-\[60vw\] { max-width: 60vw; } .max-w-\[66ch\] { max-width: 66ch; } .max-w-\[130px\] { max-width: 130px; } .max-w-\[140px\] { max-width: 140px; } .max-w-\[160px\] { max-width: 160px; } .max-w-\[170px\] { max-width: 170px; } .max-w-\[180px\] { max-width: 180px; } .max-w-\[190px\] { max-width: 190px; } .max-w-\[220px\] { max-width: 220px; } .max-w-\[240px\] { max-width: 240px; } .max-w-\[260px\] { max-width: 260px; } .max-w-\[300px\] { max-width: 300px; } .max-w-\[360px\] { max-width: 360px; } .max-w-\[420px\] { max-width: 420px; } .max-w-\[480px\] { max-width: 480px; } .max-w-\[520px\] { max-width: 520px; } .max-w-\[560px\] { max-width: 560px; } .max-w-\[640px\] { max-width: 640px; } .max-w-\[680px\] { max-width: 680px; } .max-w-\[720px\] { max-width: 720px; } .max-w-\[760px\] { max-width: 760px; } .max-w-\[900px\] { max-width: 900px; } .max-w-\[920px\] { max-width: 920px; } .max-w-\[1180px\] { max-width: 1180px; } .max-w-\[1440px\] { max-width: 1440px; } .max-w-\[1840px\] { max-width: 1840px; } .max-w-\[calc\(100vw-16px\)\] { max-width: calc(100vw - 16px); } .max-w-\[calc\(100vw-48px\)\] { max-width: calc(100vw - 48px); } .max-w-\[calc\(100vw-220px\)\] { max-width: calc(100vw - 220px); } .max-w-\[min\(94vw\,1420px\)\] { max-width: min(94vw, 1420px); } .max-w-\[min\(240px\,40vh\)\] { max-width: min(240px, 40vh); } .max-w-full { max-width: 100%; } .max-w-md { max-width: var(--container-md); } .max-w-sm { max-width: var(--container-sm); } .min-w-0 { min-width: calc(var(--spacing) * 0); } .min-w-2 { min-width: calc(var(--spacing) * 2); } .min-w-4 { min-width: calc(var(--spacing) * 4); } .min-w-7 { min-width: calc(var(--spacing) * 7); } .min-w-9 { min-width: calc(var(--spacing) * 9); } .min-w-24 { min-width: calc(var(--spacing) * 24); } .min-w-40 { min-width: calc(var(--spacing) * 40); } .min-w-\[44px\] { min-width: 44px; } .min-w-\[72px\] { min-width: 72px; } .min-w-\[104px\] { min-width: 104px; } .min-w-\[160px\] { min-width: 160px; } .min-w-\[180px\] { min-width: 180px; } .min-w-\[220px\] { min-width: 220px; } .min-w-\[260px\] { min-width: 260px; } .flex-1 { flex: 1; } .flex-shrink { flex-shrink: 1; } .shrink-0 { flex-shrink: 0; } .grow { flex-grow: 1; } .basis-full { flex-basis: 100%; } .origin-bottom { transform-origin: bottom; } .origin-bottom-right { transform-origin: 100% 100%; } .origin-center { transform-origin: center; } .-translate-x-1\/2 { --tw-translate-x: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-y-1\/2 { --tw-translate-y: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-y-1 { --tw-translate-y: calc(var(--spacing) * 1); translate: var(--tw-translate-x) var(--tw-translate-y); } .scale-110 { --tw-scale-x: 110%; --tw-scale-y: 110%; --tw-scale-z: 110%; scale: var(--tw-scale-x) var(--tw-scale-y); } .-rotate-90 { rotate: calc(90deg * -1); } .rotate-45 { rotate: 45deg; } .rotate-90 { rotate: 90deg; } .rotate-180 { rotate: 180deg; } .transform { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } .animate-pulse { animation: var(--animate-pulse); } .animate-spin { animation: var(--animate-spin); } .cursor-default { cursor: default; } .cursor-ew-resize { cursor: ew-resize; } .cursor-grab { cursor: grab; } .cursor-grabbing { cursor: grabbing; } .cursor-help { cursor: help; } .cursor-not-allowed { cursor: not-allowed; } .cursor-pointer { cursor: pointer; } .cursor-zoom-in { cursor: zoom-in; } .touch-none { touch-action: none; } .resize { resize: both; } .resize-none { resize: none; } .resize-y { resize: vertical; } .list-none { list-style-type: none; } .appearance-none { appearance: none; } .columns-2 { columns: 2; } .break-inside-avoid { break-inside: avoid; } .auto-cols-fr { grid-auto-columns: minmax(0, 1fr); } .grid-flow-col { grid-auto-flow: column; } .auto-rows-max { grid-auto-rows: max-content; } .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-\[84px_minmax\(0\,1fr\)\] { grid-template-columns: 84px minmax(0,1fr); } .grid-cols-\[110px_1fr\] { grid-template-columns: 110px 1fr; } .grid-cols-\[110px_minmax\(0\,1fr\)\] { grid-template-columns: 110px minmax(0,1fr); } .grid-cols-\[auto_minmax\(0\,1fr\)_390px\] { grid-template-columns: auto minmax(0,1fr) 390px; } .grid-cols-\[minmax\(0\,1fr\)_360px\] { grid-template-columns: minmax(0,1fr) 360px; } .grid-cols-\[minmax\(0\,1fr\)_390px\] { grid-template-columns: minmax(0,1fr) 390px; } .grid-cols-\[repeat\(2\,minmax\(0\,1fr\)\)\] { grid-template-columns: repeat(2,minmax(0,1fr)); } .grid-cols-\[repeat\(auto-fill\,minmax\(140px\,1fr\)\)\] { grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); } .grid-cols-\[repeat\(auto-fill\,minmax\(150px\,1fr\)\)\] { grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); } .grid-cols-\[repeat\(auto-fill\,minmax\(180px\,1fr\)\)\] { grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); } .grid-rows-\[repeat\(2\,minmax\(0\,1fr\)\)\] { grid-template-rows: repeat(2,minmax(0,1fr)); } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .place-items-center { place-items: center; } .content-start { align-content: flex-start; } .items-baseline { align-items: baseline; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .items-start { align-items: flex-start; } .items-stretch { align-items: stretch; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .justify-start { justify-content: flex-start; } .justify-items-center { justify-items: center; } .gap-0 { gap: calc(var(--spacing) * 0); } .gap-0\.5 { gap: calc(var(--spacing) * 0.5); } .gap-1 { gap: calc(var(--spacing) * 1); } .gap-1\.5 { gap: calc(var(--spacing) * 1.5); } .gap-2 { gap: calc(var(--spacing) * 2); } .gap-2\.5 { gap: calc(var(--spacing) * 2.5); } .gap-3 { gap: calc(var(--spacing) * 3); } .gap-3\.5 { gap: calc(var(--spacing) * 3.5); } .gap-4 { gap: calc(var(--spacing) * 4); } .gap-5 { gap: calc(var(--spacing) * 5); } .gap-6 { gap: calc(var(--spacing) * 6); } .gap-\[3px\] { gap: 3px; } .space-y-0\.5 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse))); } } .space-y-1 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse))); } } .space-y-1\.5 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse))); } } .space-y-2 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))); } } .space-y-2\.5 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse))); } } .space-y-3 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse))); } } .space-y-4 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))); } } .space-y-5 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse))); } } .space-y-6 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))); } } .space-y-7 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 7) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 7) * calc(1 - var(--tw-space-y-reverse))); } } .gap-x-2 { column-gap: calc(var(--spacing) * 2); } .gap-x-3 { column-gap: calc(var(--spacing) * 3); } .gap-y-1 { row-gap: calc(var(--spacing) * 1); } .gap-y-2 { row-gap: calc(var(--spacing) * 2); } .divide-y { :where(& > :not(:last-child)) { --tw-divide-y-reverse: 0; border-bottom-style: var(--tw-border-style); border-top-style: var(--tw-border-style); border-top-width: calc(1px * var(--tw-divide-y-reverse)); border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); } } .divide-white\/5 { :where(& > :not(:last-child)) { border-color: color-mix(in srgb, #fff 5%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 5%, transparent); } } } .divide-white\/8 { :where(& > :not(:last-child)) { border-color: color-mix(in srgb, #fff 8%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 8%, transparent); } } } .self-center { align-self: center; } .self-end { align-self: flex-end; } .self-start { align-self: flex-start; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden; } .overflow-visible { overflow: visible; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; } .overscroll-contain { overscroll-behavior: contain; } .rounded { border-radius: 0.25rem; } .rounded-2xl { border-radius: var(--radius-2xl); } .rounded-3xl { border-radius: var(--radius-3xl); } .rounded-\[1\.2rem\] { border-radius: 1.2rem; } .rounded-\[1\.5rem\] { border-radius: 1.5rem; } .rounded-\[1\.25rem\] { border-radius: 1.25rem; } .rounded-\[1\.35rem\] { border-radius: 1.35rem; } .rounded-\[1\.55rem\] { border-radius: 1.55rem; } .rounded-\[1\.75rem\] { border-radius: 1.75rem; } .rounded-\[1rem\] { border-radius: 1rem; } .rounded-\[2rem\] { border-radius: 2rem; } .rounded-\[4px\] { border-radius: 4px; } .rounded-\[5px\] { border-radius: 5px; } .rounded-\[9px\] { border-radius: 9px; } .rounded-\[10px\] { border-radius: 10px; } .rounded-\[13px\] { border-radius: 13px; } .rounded-\[14px\] { border-radius: 14px; } .rounded-\[15px\] { border-radius: 15px; } .rounded-\[16px\] { border-radius: 16px; } .rounded-\[18px\] { border-radius: 18px; } .rounded-\[20px\] { border-radius: 20px; } .rounded-\[22px\] { border-radius: 22px; } .rounded-\[24px\] { border-radius: 24px; } .rounded-\[26px\] { border-radius: 26px; } .rounded-\[28px\] { border-radius: 28px; } .rounded-\[32px\] { border-radius: 32px; } .rounded-\[40\%\] { border-radius: 40%; } .rounded-full { border-radius: calc(infinity * 1px); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-md { border-radius: var(--radius-md); } .rounded-sm { border-radius: var(--radius-sm); } .rounded-xl { border-radius: var(--radius-xl); } .rounded-t-\[12px\] { border-top-left-radius: 12px; border-top-right-radius: 12px; } .rounded-t-\[28px\] { border-top-left-radius: 28px; border-top-right-radius: 28px; } .rounded-b-3xl { border-bottom-right-radius: var(--radius-3xl); border-bottom-left-radius: var(--radius-3xl); } .border { border-style: var(--tw-border-style); border-width: 1px; } .border-0 { border-style: var(--tw-border-style); border-width: 0px; } .border-2 { border-style: var(--tw-border-style); border-width: 2px; } .border-\[5px\] { border-style: var(--tw-border-style); border-width: 5px; } .border-y { border-block-style: var(--tw-border-style); border-block-width: 1px; } .border-t { border-top-style: var(--tw-border-style); border-top-width: 1px; } .border-r { border-right-style: var(--tw-border-style); border-right-width: 1px; } .border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } .border-l { border-left-style: var(--tw-border-style); border-left-width: 1px; } .border-dashed { --tw-border-style: dashed; border-style: dashed; } .border-\[\#37d280\]\/20 { border-color: color-mix(in oklab, #37d280 20%, transparent); } .border-\[\#37d280\]\/22 { border-color: color-mix(in oklab, #37d280 22%, transparent); } .border-\[\#37d280\]\/24 { border-color: color-mix(in oklab, #37d280 24%, transparent); } .border-\[\#37d280\]\/25 { border-color: color-mix(in oklab, #37d280 25%, transparent); } .border-\[\#e8e8e8\] { border-color: #e8e8e8; } .border-\[\#efbc93\]\/20 { border-color: color-mix(in oklab, #efbc93 20%, transparent); } .border-\[\#ff6a6a\]\/25 { border-color: color-mix(in oklab, #ff6a6a 25%, transparent); } .border-\[\#ff8a65\]\/20 { border-color: color-mix(in oklab, #ff8a65 20%, transparent); } .border-\[rgba\(239\,188\,147\,0\.28\)\] { border-color: rgba(239,188,147,0.28); } .border-amber-300\/20 { border-color: color-mix(in srgb, oklch(87.9% 0.169 91.605) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-amber-300) 20%, transparent); } } .border-amber-300\/25 { border-color: color-mix(in srgb, oklch(87.9% 0.169 91.605) 25%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-amber-300) 25%, transparent); } } .border-amber-300\/30 { border-color: color-mix(in srgb, oklch(87.9% 0.169 91.605) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-amber-300) 30%, transparent); } } .border-amber-400\/15 { border-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 15%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-amber-400) 15%, transparent); } } .border-amber-400\/20 { border-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-amber-400) 20%, transparent); } } .border-amber-500\/15 { border-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 15%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-amber-500) 15%, transparent); } } .border-amber-500\/20 { border-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-amber-500) 20%, transparent); } } .border-blue-500\/25 { border-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 25%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-blue-500) 25%, transparent); } } .border-emerald-300\/15 { border-color: color-mix(in srgb, oklch(84.5% 0.143 164.978) 15%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-emerald-300) 15%, transparent); } } .border-emerald-300\/25 { border-color: color-mix(in srgb, oklch(84.5% 0.143 164.978) 25%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-emerald-300) 25%, transparent); } } .border-emerald-300\/30 { border-color: color-mix(in srgb, oklch(84.5% 0.143 164.978) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-emerald-300) 30%, transparent); } } .border-emerald-300\/35 { border-color: color-mix(in srgb, oklch(84.5% 0.143 164.978) 35%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-emerald-300) 35%, transparent); } } .border-emerald-400\/15 { border-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 15%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-emerald-400) 15%, transparent); } } .border-emerald-400\/20 { border-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-emerald-400) 20%, transparent); } } .border-emerald-400\/35 { border-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 35%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-emerald-400) 35%, transparent); } } .border-emerald-500\/12 { border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 12%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-emerald-500) 12%, transparent); } } .border-emerald-500\/25 { border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 25%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-emerald-500) 25%, transparent); } } .border-gray-200 { border-color: var(--color-gray-200); } .border-red-300\/20 { border-color: color-mix(in srgb, oklch(80.8% 0.114 19.571) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-red-300) 20%, transparent); } } .border-red-300\/25 { border-color: color-mix(in srgb, oklch(80.8% 0.114 19.571) 25%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-red-300) 25%, transparent); } } .border-red-400\/10 { border-color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-red-400) 10%, transparent); } } .border-red-400\/20 { border-color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-red-400) 20%, transparent); } } .border-red-400\/25 { border-color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 25%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-red-400) 25%, transparent); } } .border-red-500\/20 { border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-red-500) 20%, transparent); } } .border-transparent { border-color: transparent; } .border-violet-500\/25 { border-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 25%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-violet-500) 25%, transparent); } } .border-white { border-color: var(--color-white); } .border-white\/5 { border-color: color-mix(in srgb, #fff 5%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 5%, transparent); } } .border-white\/6 { border-color: color-mix(in srgb, #fff 6%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 6%, transparent); } } .border-white\/8 { border-color: color-mix(in srgb, #fff 8%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 8%, transparent); } } .border-white\/10 { border-color: color-mix(in srgb, #fff 10%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } .border-white\/12 { border-color: color-mix(in srgb, #fff 12%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 12%, transparent); } } .border-white\/14 { border-color: color-mix(in srgb, #fff 14%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 14%, transparent); } } .border-white\/15 { border-color: color-mix(in srgb, #fff 15%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 15%, transparent); } } .border-white\/16 { border-color: color-mix(in srgb, #fff 16%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 16%, transparent); } } .border-white\/18 { border-color: color-mix(in srgb, #fff 18%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 18%, transparent); } } .border-white\/20 { border-color: color-mix(in srgb, #fff 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 20%, transparent); } } .border-white\/22 { border-color: color-mix(in srgb, #fff 22%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 22%, transparent); } } .border-white\/24 { border-color: color-mix(in srgb, #fff 24%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 24%, transparent); } } .border-white\/25 { border-color: color-mix(in srgb, #fff 25%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 25%, transparent); } } .border-white\/26 { border-color: color-mix(in srgb, #fff 26%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 26%, transparent); } } .border-white\/28 { border-color: color-mix(in srgb, #fff 28%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 28%, transparent); } } .border-white\/30 { border-color: color-mix(in srgb, #fff 30%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 30%, transparent); } } .border-white\/35 { border-color: color-mix(in srgb, #fff 35%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 35%, transparent); } } .border-white\/40 { border-color: color-mix(in srgb, #fff 40%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 40%, transparent); } } .border-white\/45 { border-color: color-mix(in srgb, #fff 45%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 45%, transparent); } } .border-white\/50 { border-color: color-mix(in srgb, #fff 50%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 50%, transparent); } } .border-white\/70 { border-color: color-mix(in srgb, #fff 70%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 70%, transparent); } } .border-white\/85 { border-color: color-mix(in srgb, #fff 85%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 85%, transparent); } } .border-white\/\[0\.05\] { border-color: color-mix(in srgb, #fff 5%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 5%, transparent); } } .border-white\/\[0\.06\] { border-color: color-mix(in srgb, #fff 6%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 6%, transparent); } } .border-white\/\[0\.07\] { border-color: color-mix(in srgb, #fff 7.000000000000001%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 7.000000000000001%, transparent); } } .border-white\/\[0\.08\] { border-color: color-mix(in srgb, #fff 8%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 8%, transparent); } } .border-white\/\[0\.10\] { border-color: color-mix(in srgb, #fff 10%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } .border-white\/\[0\.12\] { border-color: color-mix(in srgb, #fff 12%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 12%, transparent); } } .border-white\/\[0\.14\] { border-color: color-mix(in srgb, #fff 14.000000000000002%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 14.000000000000002%, transparent); } } .border-white\/\[0\.15\] { border-color: color-mix(in srgb, #fff 15%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 15%, transparent); } } .border-white\/\[0\.16\] { border-color: color-mix(in srgb, #fff 16%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 16%, transparent); } } .border-white\/\[0\.18\] { border-color: color-mix(in srgb, #fff 18%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 18%, transparent); } } .border-x-transparent { border-inline-color: transparent; } .border-y-transparent { border-block-color: transparent; } .border-t-black\/85 { border-top-color: color-mix(in srgb, #000 85%, transparent); @supports (color: color-mix(in lab, red, red)) { border-top-color: color-mix(in oklab, var(--color-black) 85%, transparent); } } .border-t-transparent { border-top-color: transparent; } .border-r-black\/85 { border-right-color: color-mix(in srgb, #000 85%, transparent); @supports (color: color-mix(in lab, red, red)) { border-right-color: color-mix(in oklab, var(--color-black) 85%, transparent); } } .border-r-transparent { border-right-color: transparent; } .border-b-black\/85 { border-bottom-color: color-mix(in srgb, #000 85%, transparent); @supports (color: color-mix(in lab, red, red)) { border-bottom-color: color-mix(in oklab, var(--color-black) 85%, transparent); } } .border-b-transparent { border-bottom-color: transparent; } .border-l-black\/85 { border-left-color: color-mix(in srgb, #000 85%, transparent); @supports (color: color-mix(in lab, red, red)) { border-left-color: color-mix(in oklab, var(--color-black) 85%, transparent); } } .border-l-transparent { border-left-color: transparent; } .\!bg-white\/5 { background-color: color-mix(in srgb, #fff 5%, transparent) !important; @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 5%, transparent) !important; } } .bg-\[\#0a0a0a\] { background-color: #0a0a0a; } .bg-\[\#0b0b0b\] { background-color: #0b0b0b; } .bg-\[\#0d0d0d\] { background-color: #0d0d0d; } .bg-\[\#0d0d0d\]\/92 { background-color: color-mix(in oklab, #0d0d0d 92%, transparent); } .bg-\[\#0d0d0d\]\/96 { background-color: color-mix(in oklab, #0d0d0d 96%, transparent); } .bg-\[\#0d0d0d\]\/\[0\.97\] { background-color: color-mix(in oklab, #0d0d0d 97%, transparent); } .bg-\[\#0e0e0e\]\/95 { background-color: color-mix(in oklab, #0e0e0e 95%, transparent); } .bg-\[\#0e0e0e\]\/96 { background-color: color-mix(in oklab, #0e0e0e 96%, transparent); } .bg-\[\#1a1a1a\] { background-color: #1a1a1a; } .bg-\[\#1b1b1b\] { background-color: #1b1b1b; } .bg-\[\#111\] { background-color: #111; } .bg-\[\#111\]\/85 { background-color: color-mix(in oklab, #111 85%, transparent); } .bg-\[\#111\]\/94 { background-color: color-mix(in oklab, #111 94%, transparent); } .bg-\[\#111\]\/95 { background-color: color-mix(in oklab, #111 95%, transparent); } .bg-\[\#222\] { background-color: #222; } .bg-\[\#050505\] { background-color: #050505; } .bg-\[\#070707\] { background-color: #070707; } .bg-\[\#080808\] { background-color: #080808; } .bg-\[\#080808\]\/96 { background-color: color-mix(in oklab, #080808 96%, transparent); } .bg-\[\#101010\]\/96 { background-color: color-mix(in oklab, #101010 96%, transparent); } .bg-\[\#101010\]\/\[0\.98\] { background-color: color-mix(in oklab, #101010 98%, transparent); } .bg-\[\#111111\] { background-color: #111111; } .bg-\[\#111111\]\/88 { background-color: color-mix(in oklab, #111111 88%, transparent); } .bg-\[\#111111\]\/95 { background-color: color-mix(in oklab, #111111 95%, transparent); } .bg-\[\#121212\] { background-color: #121212; } .bg-\[\#141414\]\/85 { background-color: color-mix(in oklab, #141414 85%, transparent); } .bg-\[\#151515\] { background-color: #151515; } .bg-\[\#161616\] { background-color: #161616; } .bg-\[\#171717\] { background-color: #171717; } .bg-\[\#181818\] { background-color: #181818; } .bg-\[\#181818\]\/95 { background-color: color-mix(in oklab, #181818 95%, transparent); } .bg-\[\#181818\]\/98 { background-color: color-mix(in oklab, #181818 98%, transparent); } .bg-\[\#181818\]\/\[0\.97\] { background-color: color-mix(in oklab, #181818 97%, transparent); } .bg-\[\#202020\] { background-color: #202020; } .bg-\[\#262626\] { background-color: #262626; } .bg-\[\#e8e8e8\] { background-color: #e8e8e8; } .bg-\[\#f4f1ea\] { background-color: #f4f1ea; } .bg-\[\#ff8a65\]\/\[0\.07\] { background-color: color-mix(in oklab, #ff8a65 7.000000000000001%, transparent); } .bg-\[rgba\(10\,10\,10\,0\.72\)\] { background-color: rgba(10,10,10,0.72); } .bg-\[rgba\(17\,17\,17\,0\.10\)\] { background-color: rgba(17,17,17,0.10); } .bg-\[rgba\(55\,210\,128\,0\.08\)\] { background-color: rgba(55,210,128,0.08); } .bg-\[rgba\(55\,210\,128\,0\.10\)\] { background-color: rgba(55,210,128,0.10); } .bg-\[rgba\(55\,210\,128\,0\.12\)\] { background-color: rgba(55,210,128,0.12); } .bg-\[rgba\(55\,210\,128\,0\.14\)\] { background-color: rgba(55,210,128,0.14); } .bg-\[rgba\(86\,194\,255\,0\.12\)\] { background-color: rgba(86,194,255,0.12); } .bg-\[rgba\(239\,188\,147\,0\.08\)\] { background-color: rgba(239,188,147,0.08); } .bg-\[rgba\(239\,188\,147\,0\.12\)\] { background-color: rgba(239,188,147,0.12); } .bg-\[rgba\(239\,188\,147\,0\.14\)\] { background-color: rgba(239,188,147,0.14); } .bg-\[rgba\(255\,106\,106\,0\.10\)\] { background-color: rgba(255,106,106,0.10); } .bg-\[rgba\(255\,106\,106\,0\.12\)\] { background-color: rgba(255,106,106,0.12); } .bg-\[var\(--studio-bg\,\#111111\)\] { background-color: var(--studio-bg,#111111); } .bg-amber-300\/12 { background-color: color-mix(in srgb, oklch(87.9% 0.169 91.605) 12%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-amber-300) 12%, transparent); } } .bg-amber-300\/\[0\.06\] { background-color: color-mix(in srgb, oklch(87.9% 0.169 91.605) 6%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-amber-300) 6%, transparent); } } .bg-amber-400\/8 { background-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 8%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-amber-400) 8%, transparent); } } .bg-amber-500\/5 { background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 5%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-amber-500) 5%, transparent); } } .bg-amber-500\/8 { background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 8%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-amber-500) 8%, transparent); } } .bg-amber-500\/12 { background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 12%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-amber-500) 12%, transparent); } } .bg-amber-500\/15 { background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 15%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-amber-500) 15%, transparent); } } .bg-black { background-color: var(--color-black); } .bg-black\/0 { background-color: color-mix(in srgb, #000 0%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 0%, transparent); } } .bg-black\/10 { background-color: color-mix(in srgb, #000 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 10%, transparent); } } .bg-black\/15 { background-color: color-mix(in srgb, #000 15%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 15%, transparent); } } .bg-black\/20 { background-color: color-mix(in srgb, #000 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 20%, transparent); } } .bg-black\/25 { background-color: color-mix(in srgb, #000 25%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 25%, transparent); } } .bg-black\/28 { background-color: color-mix(in srgb, #000 28%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 28%, transparent); } } .bg-black\/30 { background-color: color-mix(in srgb, #000 30%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 30%, transparent); } } .bg-black\/35 { background-color: color-mix(in srgb, #000 35%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 35%, transparent); } } .bg-black\/40 { background-color: color-mix(in srgb, #000 40%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 40%, transparent); } } .bg-black\/42 { background-color: color-mix(in srgb, #000 42%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 42%, transparent); } } .bg-black\/45 { background-color: color-mix(in srgb, #000 45%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 45%, transparent); } } .bg-black\/50 { background-color: color-mix(in srgb, #000 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 50%, transparent); } } .bg-black\/55 { background-color: color-mix(in srgb, #000 55%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 55%, transparent); } } .bg-black\/60 { background-color: color-mix(in srgb, #000 60%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 60%, transparent); } } .bg-black\/64 { background-color: color-mix(in srgb, #000 64%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 64%, transparent); } } .bg-black\/65 { background-color: color-mix(in srgb, #000 65%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 65%, transparent); } } .bg-black\/68 { background-color: color-mix(in srgb, #000 68%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 68%, transparent); } } .bg-black\/70 { background-color: color-mix(in srgb, #000 70%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 70%, transparent); } } .bg-black\/75 { background-color: color-mix(in srgb, #000 75%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 75%, transparent); } } .bg-black\/85 { background-color: color-mix(in srgb, #000 85%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 85%, transparent); } } .bg-black\/86 { background-color: color-mix(in srgb, #000 86%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 86%, transparent); } } .bg-black\/92 { background-color: color-mix(in srgb, #000 92%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 92%, transparent); } } .bg-blue-500\/15 { background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 15%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-blue-500) 15%, transparent); } } .bg-current { background-color: currentcolor; } .bg-emerald-300\/\[0\.04\] { background-color: color-mix(in srgb, oklch(84.5% 0.143 164.978) 4%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-emerald-300) 4%, transparent); } } .bg-emerald-300\/\[0\.045\] { background-color: color-mix(in srgb, oklch(84.5% 0.143 164.978) 4.5%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-emerald-300) 4.5%, transparent); } } .bg-emerald-500\/6 { background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 6%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-emerald-500) 6%, transparent); } } .bg-emerald-500\/8 { background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 8%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-emerald-500) 8%, transparent); } } .bg-emerald-500\/10 { background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent); } } .bg-emerald-500\/12 { background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 12%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-emerald-500) 12%, transparent); } } .bg-emerald-500\/15 { background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 15%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-emerald-500) 15%, transparent); } } .bg-emerald-500\/20 { background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent); } } .bg-gray-100 { background-color: var(--color-gray-100); } .bg-gray-900 { background-color: var(--color-gray-900); } .bg-neutral-100 { background-color: var(--color-neutral-100); } .bg-neutral-400 { background-color: var(--color-neutral-400); } .bg-neutral-500 { background-color: var(--color-neutral-500); } .bg-neutral-700 { background-color: var(--color-neutral-700); } .bg-neutral-700\/80 { background-color: color-mix(in srgb, oklch(37.1% 0 0) 80%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral-700) 80%, transparent); } } .bg-neutral-800 { background-color: var(--color-neutral-800); } .bg-neutral-900 { background-color: var(--color-neutral-900); } .bg-neutral-950 { background-color: var(--color-neutral-950); } .bg-neutral-950\/90 { background-color: color-mix(in srgb, oklch(14.5% 0 0) 90%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral-950) 90%, transparent); } } .bg-neutral-950\/95 { background-color: color-mix(in srgb, oklch(14.5% 0 0) 95%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral-950) 95%, transparent); } } .bg-red-400 { background-color: var(--color-red-400); } .bg-red-400\/75 { background-color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 75%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-red-400) 75%, transparent); } } .bg-red-400\/\[0\.04\] { background-color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 4%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-red-400) 4%, transparent); } } .bg-red-500\/10 { background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent); } } .bg-red-500\/12 { background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 12%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-red-500) 12%, transparent); } } .bg-red-500\/15 { background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 15%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-red-500) 15%, transparent); } } .bg-red-500\/\[0\.04\] { background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 4%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-red-500) 4%, transparent); } } .bg-transparent { background-color: transparent; } .bg-violet-500\/15 { background-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 15%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-violet-500) 15%, transparent); } } .bg-white { background-color: var(--color-white); } .bg-white\/4 { background-color: color-mix(in srgb, #fff 4%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 4%, transparent); } } .bg-white\/5 { background-color: color-mix(in srgb, #fff 5%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 5%, transparent); } } .bg-white\/6 { background-color: color-mix(in srgb, #fff 6%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 6%, transparent); } } .bg-white\/7 { background-color: color-mix(in srgb, #fff 7%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 7%, transparent); } } .bg-white\/8 { background-color: color-mix(in srgb, #fff 8%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 8%, transparent); } } .bg-white\/9 { background-color: color-mix(in srgb, #fff 9%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 9%, transparent); } } .bg-white\/10 { background-color: color-mix(in srgb, #fff 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } .bg-white\/15 { background-color: color-mix(in srgb, #fff 15%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 15%, transparent); } } .bg-white\/22 { background-color: color-mix(in srgb, #fff 22%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 22%, transparent); } } .bg-white\/35 { background-color: color-mix(in srgb, #fff 35%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 35%, transparent); } } .bg-white\/40 { background-color: color-mix(in srgb, #fff 40%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 40%, transparent); } } .bg-white\/55 { background-color: color-mix(in srgb, #fff 55%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 55%, transparent); } } .bg-white\/70 { background-color: color-mix(in srgb, #fff 70%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 70%, transparent); } } .bg-white\/75 { background-color: color-mix(in srgb, #fff 75%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 75%, transparent); } } .bg-white\/90 { background-color: color-mix(in srgb, #fff 90%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 90%, transparent); } } .bg-white\/95 { background-color: color-mix(in srgb, #fff 95%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 95%, transparent); } } .bg-white\/\[0\.02\] { background-color: color-mix(in srgb, #fff 2%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 2%, transparent); } } .bg-white\/\[0\.03\] { background-color: color-mix(in srgb, #fff 3%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 3%, transparent); } } .bg-white\/\[0\.04\] { background-color: color-mix(in srgb, #fff 4%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 4%, transparent); } } .bg-white\/\[0\.05\] { background-color: color-mix(in srgb, #fff 5%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 5%, transparent); } } .bg-white\/\[0\.06\] { background-color: color-mix(in srgb, #fff 6%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 6%, transparent); } } .bg-white\/\[0\.07\] { background-color: color-mix(in srgb, #fff 7.000000000000001%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 7.000000000000001%, transparent); } } .bg-white\/\[0\.08\] { background-color: color-mix(in srgb, #fff 8%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 8%, transparent); } } .bg-white\/\[0\.09\] { background-color: color-mix(in srgb, #fff 9%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 9%, transparent); } } .bg-white\/\[0\.10\] { background-color: color-mix(in srgb, #fff 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } .bg-white\/\[0\.12\] { background-color: color-mix(in srgb, #fff 12%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 12%, transparent); } } .bg-white\/\[0\.14\] { background-color: color-mix(in srgb, #fff 14.000000000000002%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 14.000000000000002%, transparent); } } .bg-white\/\[0\.015\] { background-color: color-mix(in srgb, #fff 1.5%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 1.5%, transparent); } } .bg-white\/\[0\.025\] { background-color: color-mix(in srgb, #fff 2.5%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 2.5%, transparent); } } .bg-white\/\[0\.035\] { background-color: color-mix(in srgb, #fff 3.5000000000000004%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 3.5000000000000004%, transparent); } } .bg-white\/\[0\.045\] { background-color: color-mix(in srgb, #fff 4.5%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 4.5%, transparent); } } .bg-white\/\[0\.055\] { background-color: color-mix(in srgb, #fff 5.5%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 5.5%, transparent); } } .bg-gradient-to-b { --tw-gradient-position: to bottom in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-gradient-to-br { --tw-gradient-position: to bottom right in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-gradient-to-r { --tw-gradient-position: to right in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-gradient-to-t { --tw-gradient-position: to top in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-gradient-to-tr { --tw-gradient-position: to top right in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-\[linear-gradient\(180deg\,rgba\(255\,255\,255\,0\.03\)\,rgba\(255\,255\,255\,0\.02\)\)\] { background-image: linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.02)); } .bg-\[linear-gradient\(180deg\,rgba\(255\,255\,255\,0\.08\)\,rgba\(255\,255\,255\,0\.03\)\)\] { background-image: linear-gradient(180deg,rgba(255,255,255,0.08),rgba(255,255,255,0.03)); } .bg-\[radial-gradient\(circle_at_35\%_24\%\,rgba\(255\,255\,255\,0\.10\)\,transparent_44\%\)\,radial-gradient\(circle_at_76\%_78\%\,rgba\(255\,255\,255\,0\.05\)\,transparent_46\%\)\] { background-image: radial-gradient(circle at 35% 24%,rgba(255,255,255,0.10),transparent 44%),radial-gradient(circle at 76% 78%,rgba(255,255,255,0.05),transparent 46%); } .bg-\[radial-gradient\(circle_at_35\%_28\%\,rgba\(255\,255\,255\,0\.08\)\,transparent_44\%\)\,radial-gradient\(circle_at_68\%_74\%\,rgba\(255\,255\,255\,0\.04\)\,transparent_46\%\)\] { background-image: radial-gradient(circle at 35% 28%,rgba(255,255,255,0.08),transparent 44%),radial-gradient(circle at 68% 74%,rgba(255,255,255,0.04),transparent 46%); } .bg-\[radial-gradient\(circle_at_35\%_28\%\,rgba\(255\,255\,255\,0\.11\)\,transparent_38\%\)\,radial-gradient\(circle_at_68\%_74\%\,rgba\(255\,255\,255\,0\.055\)\,transparent_40\%\)\] { background-image: radial-gradient(circle at 35% 28%,rgba(255,255,255,0.11),transparent 38%),radial-gradient(circle at 68% 74%,rgba(255,255,255,0.055),transparent 40%); } .bg-\[radial-gradient\(circle_at_center\,rgba\(255\,255\,255\,0\.22\)\,transparent_60\%\)\] { background-image: radial-gradient(circle at center,rgba(255,255,255,0.22),transparent 60%); } .bg-\[radial-gradient\(circle_at_top\,rgba\(255\,255\,255\,0\.06\)\,transparent_58\%\)\,linear-gradient\(180deg\,rgba\(17\,17\,17\,0\.94\)\,rgba\(8\,8\,8\,0\.98\)\)\] { background-image: radial-gradient(circle at top,rgba(255,255,255,0.06),transparent 58%),linear-gradient(180deg,rgba(17,17,17,0.94),rgba(8,8,8,0.98)); } .bg-\[repeating-linear-gradient\(45deg\,\#141414\,\#141414_10px\,\#171717_10px\,\#171717_20px\)\] { background-image: repeating-linear-gradient(45deg,#141414,#141414 10px,#171717 10px,#171717 20px); } .from-\[\#1a1a1a\] { --tw-gradient-from: #1a1a1a; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-\[\#1e1e1e\] { --tw-gradient-from: #1e1e1e; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-\[\#080808\] { --tw-gradient-from: #080808; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-\[\#121212\] { --tw-gradient-from: #121212; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-\[\#141414\] { --tw-gradient-from: #141414; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-\[\#161616\] { --tw-gradient-from: #161616; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-black\/35 { --tw-gradient-from: color-mix(in srgb, #000 35%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-black) 35%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-black\/65 { --tw-gradient-from: color-mix(in srgb, #000 65%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-black) 65%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-black\/75 { --tw-gradient-from: color-mix(in srgb, #000 75%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-black) 75%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-black\/80 { --tw-gradient-from: color-mix(in srgb, #000 80%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-black) 80%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-black\/85 { --tw-gradient-from: color-mix(in srgb, #000 85%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-black) 85%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-black\/90 { --tw-gradient-from: color-mix(in srgb, #000 90%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-black) 90%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-neutral-900 { --tw-gradient-from: var(--color-neutral-900); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-stone-200\/80 { --tw-gradient-from: color-mix(in srgb, oklch(92.3% 0.003 48.717) 80%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-stone-200) 80%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-transparent { --tw-gradient-from: transparent; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .via-\[\#101010\] { --tw-gradient-via: #101010; --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-\[\#121212\] { --tw-gradient-via: #121212; --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-\[\#141414\] { --tw-gradient-via: #141414; --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-\[\#161616\] { --tw-gradient-via: #161616; --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-black\/20 { --tw-gradient-via: color-mix(in srgb, #000 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-via: color-mix(in oklab, var(--color-black) 20%, transparent); } --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-black\/35 { --tw-gradient-via: color-mix(in srgb, #000 35%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-via: color-mix(in oklab, var(--color-black) 35%, transparent); } --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-black\/45 { --tw-gradient-via: color-mix(in srgb, #000 45%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-via: color-mix(in oklab, var(--color-black) 45%, transparent); } --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-red-950\/25 { --tw-gradient-via: color-mix(in srgb, oklch(25.8% 0.092 26.042) 25%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-via: color-mix(in oklab, var(--color-red-950) 25%, transparent); } --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-stone-100\/35 { --tw-gradient-via: color-mix(in srgb, oklch(97% 0.001 106.424) 35%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-via: color-mix(in oklab, var(--color-stone-100) 35%, transparent); } --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-transparent { --tw-gradient-via: transparent; --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-white\/3 { --tw-gradient-via: color-mix(in srgb, #fff 3%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-via: color-mix(in oklab, var(--color-white) 3%, transparent); } --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-white\/20 { --tw-gradient-via: color-mix(in srgb, #fff 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-via: color-mix(in oklab, var(--color-white) 20%, transparent); } --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-white\/30 { --tw-gradient-via: color-mix(in srgb, #fff 30%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-via: color-mix(in oklab, var(--color-white) 30%, transparent); } --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-white\/40 { --tw-gradient-via: color-mix(in srgb, #fff 40%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-via: color-mix(in oklab, var(--color-white) 40%, transparent); } --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-white\/\[0\.03\] { --tw-gradient-via: color-mix(in srgb, #fff 3%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-via: color-mix(in oklab, var(--color-white) 3%, transparent); } --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .to-\[\#0a0a0a\] { --tw-gradient-to: #0a0a0a; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-\[\#0b0b0b\] { --tw-gradient-to: #0b0b0b; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-\[\#080808\] { --tw-gradient-to: #080808; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-\[\#151515\] { --tw-gradient-to: #151515; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-black\/30 { --tw-gradient-to: color-mix(in srgb, #000 30%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-to: color-mix(in oklab, var(--color-black) 30%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-black\/70 { --tw-gradient-to: color-mix(in srgb, #000 70%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-to: color-mix(in oklab, var(--color-black) 70%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-neutral-800\/20 { --tw-gradient-to: color-mix(in srgb, oklch(26.9% 0 0) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-to: color-mix(in oklab, var(--color-neutral-800) 20%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-transparent { --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .object-contain { object-fit: contain; } .object-cover { object-fit: cover; } .\!p-1\.5 { padding: calc(var(--spacing) * 1.5) !important; } .p-0\.5 { padding: calc(var(--spacing) * 0.5); } .p-1 { padding: calc(var(--spacing) * 1); } .p-1\.5 { padding: calc(var(--spacing) * 1.5); } .p-2 { padding: calc(var(--spacing) * 2); } .p-2\.5 { padding: calc(var(--spacing) * 2.5); } .p-3 { padding: calc(var(--spacing) * 3); } .p-3\.5 { padding: calc(var(--spacing) * 3.5); } .p-4 { padding: calc(var(--spacing) * 4); } .p-5 { padding: calc(var(--spacing) * 5); } .p-6 { padding: calc(var(--spacing) * 6); } .p-12 { padding: calc(var(--spacing) * 12); } .p-\[3px\] { padding: 3px; } .px-0 { padding-inline: calc(var(--spacing) * 0); } .px-0\.5 { padding-inline: calc(var(--spacing) * 0.5); } .px-1 { padding-inline: calc(var(--spacing) * 1); } .px-1\.5 { padding-inline: calc(var(--spacing) * 1.5); } .px-2 { padding-inline: calc(var(--spacing) * 2); } .px-2\.5 { padding-inline: calc(var(--spacing) * 2.5); } .px-3 { padding-inline: calc(var(--spacing) * 3); } .px-3\.5 { padding-inline: calc(var(--spacing) * 3.5); } .px-4 { padding-inline: calc(var(--spacing) * 4); } .px-5 { padding-inline: calc(var(--spacing) * 5); } .px-6 { padding-inline: calc(var(--spacing) * 6); } .px-7 { padding-inline: calc(var(--spacing) * 7); } .px-10 { padding-inline: calc(var(--spacing) * 10); } .px-\[5px\] { padding-inline: 5px; } .px-\[9px\] { padding-inline: 9px; } .py-0 { padding-block: calc(var(--spacing) * 0); } .py-0\.5 { padding-block: calc(var(--spacing) * 0.5); } .py-1 { padding-block: calc(var(--spacing) * 1); } .py-1\.5 { padding-block: calc(var(--spacing) * 1.5); } .py-2 { padding-block: calc(var(--spacing) * 2); } .py-2\.5 { padding-block: calc(var(--spacing) * 2.5); } .py-3 { padding-block: calc(var(--spacing) * 3); } .py-3\.5 { padding-block: calc(var(--spacing) * 3.5); } .py-4 { padding-block: calc(var(--spacing) * 4); } .py-5 { padding-block: calc(var(--spacing) * 5); } .py-6 { padding-block: calc(var(--spacing) * 6); } .py-8 { padding-block: calc(var(--spacing) * 8); } .py-12 { padding-block: calc(var(--spacing) * 12); } .py-16 { padding-block: calc(var(--spacing) * 16); } .py-\[5px\] { padding-block: 5px; } .py-px { padding-block: 1px; } .pt-0\.5 { padding-top: calc(var(--spacing) * 0.5); } .pt-1 { padding-top: calc(var(--spacing) * 1); } .pt-1\.5 { padding-top: calc(var(--spacing) * 1.5); } .pt-2 { padding-top: calc(var(--spacing) * 2); } .pt-2\.5 { padding-top: calc(var(--spacing) * 2.5); } .pt-3 { padding-top: calc(var(--spacing) * 3); } .pt-3\.5 { padding-top: calc(var(--spacing) * 3.5); } .pt-4 { padding-top: calc(var(--spacing) * 4); } .pt-5 { padding-top: calc(var(--spacing) * 5); } .pt-6 { padding-top: calc(var(--spacing) * 6); } .pt-7 { padding-top: calc(var(--spacing) * 7); } .pt-8 { padding-top: calc(var(--spacing) * 8); } .pt-20 { padding-top: calc(var(--spacing) * 20); } .pt-px { padding-top: 1px; } .pr-0\.5 { padding-right: calc(var(--spacing) * 0.5); } .pr-1 { padding-right: calc(var(--spacing) * 1); } .pr-1\.5 { padding-right: calc(var(--spacing) * 1.5); } .pr-2\.5 { padding-right: calc(var(--spacing) * 2.5); } .pr-3 { padding-right: calc(var(--spacing) * 3); } .pr-3\.5 { padding-right: calc(var(--spacing) * 3.5); } .pr-4 { padding-right: calc(var(--spacing) * 4); } .pr-9 { padding-right: calc(var(--spacing) * 9); } .pr-10 { padding-right: calc(var(--spacing) * 10); } .pr-12 { padding-right: calc(var(--spacing) * 12); } .pr-16 { padding-right: calc(var(--spacing) * 16); } .pr-\[7px\] { padding-right: 7px; } .pb-0\.5 { padding-bottom: calc(var(--spacing) * 0.5); } .pb-1 { padding-bottom: calc(var(--spacing) * 1); } .pb-1\.5 { padding-bottom: calc(var(--spacing) * 1.5); } .pb-2 { padding-bottom: calc(var(--spacing) * 2); } .pb-2\.5 { padding-bottom: calc(var(--spacing) * 2.5); } .pb-3 { padding-bottom: calc(var(--spacing) * 3); } .pb-3\.5 { padding-bottom: calc(var(--spacing) * 3.5); } .pb-4 { padding-bottom: calc(var(--spacing) * 4); } .pb-5 { padding-bottom: calc(var(--spacing) * 5); } .pb-12 { padding-bottom: calc(var(--spacing) * 12); } .pb-44 { padding-bottom: calc(var(--spacing) * 44); } .pb-\[calc\(12px\+env\(safe-area-inset-bottom\)\)\] { padding-bottom: calc(12px + env(safe-area-inset-bottom)); } .pl-1 { padding-left: calc(var(--spacing) * 1); } .pl-2\.5 { padding-left: calc(var(--spacing) * 2.5); } .pl-3 { padding-left: calc(var(--spacing) * 3); } .pl-3\.5 { padding-left: calc(var(--spacing) * 3.5); } .pl-7 { padding-left: calc(var(--spacing) * 7); } .pl-8 { padding-left: calc(var(--spacing) * 8); } .pl-9 { padding-left: calc(var(--spacing) * 9); } .pl-\[9px\] { padding-left: 9px; } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .align-middle { vertical-align: middle; } .font-\[family-name\:inherit\]\! { font-family: inherit !important; } .font-mono { font-family: var(--font-mono); } .font-sans { font-family: var(--font-sans); } .text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } .text-3xl { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); } .text-6xl { font-size: var(--text-6xl); line-height: var(--tw-leading, var(--text-6xl--line-height)); } .text-base { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } .text-lg { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } .text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .text-xl { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } .text-xs { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .text-\[0\.7rem\] { font-size: 0.7rem; } .text-\[0\.72rem\] { font-size: 0.72rem; } .text-\[8\.5px\] { font-size: 8.5px; } .text-\[8px\] { font-size: 8px; } .text-\[9\.5px\] { font-size: 9.5px; } .text-\[9px\] { font-size: 9px; } .text-\[10\.5px\] { font-size: 10.5px; } .text-\[10px\] { font-size: 10px; } .text-\[11\.5px\] { font-size: 11.5px; } .text-\[11px\] { font-size: 11px; } .text-\[12\.5px\] { font-size: 12.5px; } .text-\[12px\] { font-size: 12px; } .text-\[13px\] { font-size: 13px; } .text-\[14px\] { font-size: 14px; } .text-\[15px\] { font-size: 15px; } .text-\[16px\] { font-size: 16px; } .text-\[18px\] { font-size: 18px; } .text-\[20px\] { font-size: 20px; } .text-\[22px\] { font-size: 22px; } .text-\[24px\] { font-size: 24px; } .text-\[26px\] { font-size: 26px; } .leading-4 { --tw-leading: calc(var(--spacing) * 4); line-height: calc(var(--spacing) * 4); } .leading-5 { --tw-leading: calc(var(--spacing) * 5); line-height: calc(var(--spacing) * 5); } .leading-6 { --tw-leading: calc(var(--spacing) * 6); line-height: calc(var(--spacing) * 6); } .leading-7 { --tw-leading: calc(var(--spacing) * 7); line-height: calc(var(--spacing) * 7); } .leading-\[1\.05\] { --tw-leading: 1.05; line-height: 1.05; } .leading-\[1\.45\] { --tw-leading: 1.45; line-height: 1.45; } .leading-\[18px\] { --tw-leading: 18px; line-height: 18px; } .leading-none { --tw-leading: 1; line-height: 1; } .leading-relaxed { --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); } .leading-snug { --tw-leading: var(--leading-snug); line-height: var(--leading-snug); } .leading-tight { --tw-leading: var(--leading-tight); line-height: var(--leading-tight); } .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } .font-medium { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .font-normal { --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); } .font-semibold { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } .tracking-\[-0\.01em\] { --tw-tracking: -0.01em; letter-spacing: -0.01em; } .tracking-\[-0\.02em\] { --tw-tracking: -0.02em; letter-spacing: -0.02em; } .tracking-\[-0\.015em\] { --tw-tracking: -0.015em; letter-spacing: -0.015em; } .tracking-\[-0\.025em\] { --tw-tracking: -0.025em; letter-spacing: -0.025em; } .tracking-\[0\.01em\] { --tw-tracking: 0.01em; letter-spacing: 0.01em; } .tracking-\[0\.1em\] { --tw-tracking: 0.1em; letter-spacing: 0.1em; } .tracking-\[0\.02em\] { --tw-tracking: 0.02em; letter-spacing: 0.02em; } .tracking-\[0\.2em\] { --tw-tracking: 0.2em; letter-spacing: 0.2em; } .tracking-\[0\.04em\] { --tw-tracking: 0.04em; letter-spacing: 0.04em; } .tracking-\[0\.08em\] { --tw-tracking: 0.08em; letter-spacing: 0.08em; } .tracking-\[0\.11em\] { --tw-tracking: 0.11em; letter-spacing: 0.11em; } .tracking-\[0\.12em\] { --tw-tracking: 0.12em; letter-spacing: 0.12em; } .tracking-\[0\.14em\] { --tw-tracking: 0.14em; letter-spacing: 0.14em; } .tracking-\[0\.15em\] { --tw-tracking: 0.15em; letter-spacing: 0.15em; } .tracking-\[0\.16em\] { --tw-tracking: 0.16em; letter-spacing: 0.16em; } .tracking-\[0\.18em\] { --tw-tracking: 0.18em; letter-spacing: 0.18em; } .tracking-\[0\.22em\] { --tw-tracking: 0.22em; letter-spacing: 0.22em; } .tracking-\[0\.24em\] { --tw-tracking: 0.24em; letter-spacing: 0.24em; } .tracking-\[0\.28em\] { --tw-tracking: 0.28em; letter-spacing: 0.28em; } .tracking-normal { --tw-tracking: var(--tracking-normal); letter-spacing: var(--tracking-normal); } .tracking-tight { --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .tracking-wider { --tw-tracking: var(--tracking-wider); letter-spacing: var(--tracking-wider); } .tracking-widest { --tw-tracking: var(--tracking-widest); letter-spacing: var(--tracking-widest); } .\[overflow-wrap\:anywhere\] { overflow-wrap: anywhere; } .break-words { overflow-wrap: break-word; } .break-all { word-break: break-all; } .whitespace-normal { white-space: normal; } .whitespace-nowrap { white-space: nowrap; } .whitespace-pre-wrap { white-space: pre-wrap; } .\!text-white\/60 { color: color-mix(in srgb, #fff 60%, transparent) !important; @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 60%, transparent) !important; } } .\!text-white\/70 { color: color-mix(in srgb, #fff 70%, transparent) !important; @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 70%, transparent) !important; } } .\!text-white\/90 { color: color-mix(in srgb, #fff 90%, transparent) !important; @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 90%, transparent) !important; } } .text-\[\#37d280\] { color: #37d280; } .text-\[\#56c2ff\] { color: #56c2ff; } .text-\[\#111\] { color: #111; } .text-\[\#111111\] { color: #111111; } .text-\[\#141414\] { color: #141414; } .text-\[\#A1A1AA\] { color: #A1A1AA; } .text-\[\#E4E4E7\] { color: #E4E4E7; } .text-\[\#F4F4F5\] { color: #F4F4F5; } .text-\[\#efbc93\] { color: #efbc93; } .text-\[\#ff6a6a\] { color: #ff6a6a; } .text-\[\#ff8a8a\] { color: #ff8a8a; } .text-\[\#ffd7ca\] { color: #ffd7ca; } .text-amber-50 { color: var(--color-amber-50); } .text-amber-50\/80 { color: color-mix(in srgb, oklch(98.7% 0.022 95.277) 80%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-amber-50) 80%, transparent); } } .text-amber-50\/85 { color: color-mix(in srgb, oklch(98.7% 0.022 95.277) 85%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-amber-50) 85%, transparent); } } .text-amber-100 { color: var(--color-amber-100); } .text-amber-100\/65 { color: color-mix(in srgb, oklch(96.2% 0.059 95.617) 65%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-amber-100) 65%, transparent); } } .text-amber-100\/70 { color: color-mix(in srgb, oklch(96.2% 0.059 95.617) 70%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-amber-100) 70%, transparent); } } .text-amber-100\/80 { color: color-mix(in srgb, oklch(96.2% 0.059 95.617) 80%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-amber-100) 80%, transparent); } } .text-amber-100\/85 { color: color-mix(in srgb, oklch(96.2% 0.059 95.617) 85%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-amber-100) 85%, transparent); } } .text-amber-200 { color: var(--color-amber-200); } .text-amber-300 { color: var(--color-amber-300); } .text-amber-400 { color: var(--color-amber-400); } .text-black { color: var(--color-black); } .text-black\/65 { color: color-mix(in srgb, #000 65%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-black) 65%, transparent); } } .text-black\/70 { color: color-mix(in srgb, #000 70%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-black) 70%, transparent); } } .text-blue-400 { color: var(--color-blue-400); } .text-emerald-50 { color: var(--color-emerald-50); } .text-emerald-50\/75 { color: color-mix(in srgb, oklch(97.9% 0.021 166.113) 75%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-emerald-50) 75%, transparent); } } .text-emerald-100 { color: var(--color-emerald-100); } .text-emerald-100\/70 { color: color-mix(in srgb, oklch(95% 0.052 163.051) 70%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-emerald-100) 70%, transparent); } } .text-emerald-100\/80 { color: color-mix(in srgb, oklch(95% 0.052 163.051) 80%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-emerald-100) 80%, transparent); } } .text-emerald-100\/90 { color: color-mix(in srgb, oklch(95% 0.052 163.051) 90%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-emerald-100) 90%, transparent); } } .text-emerald-200 { color: var(--color-emerald-200); } .text-emerald-200\/85 { color: color-mix(in srgb, oklch(90.5% 0.093 164.15) 85%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-emerald-200) 85%, transparent); } } .text-emerald-300 { color: var(--color-emerald-300); } .text-emerald-400 { color: var(--color-emerald-400); } .text-gray-400 { color: var(--color-gray-400); } .text-gray-500 { color: var(--color-gray-500); } .text-gray-900 { color: var(--color-gray-900); } .text-neutral-100 { color: var(--color-neutral-100); } .text-neutral-200 { color: var(--color-neutral-200); } .text-neutral-200\/80 { color: color-mix(in srgb, oklch(92.2% 0 0) 80%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-neutral-200) 80%, transparent); } } .text-neutral-300 { color: var(--color-neutral-300); } .text-neutral-300\/90 { color: color-mix(in srgb, oklch(87% 0 0) 90%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-neutral-300) 90%, transparent); } } .text-neutral-400 { color: var(--color-neutral-400); } .text-neutral-500 { color: var(--color-neutral-500); } .text-neutral-600 { color: var(--color-neutral-600); } .text-neutral-700 { color: var(--color-neutral-700); } .text-neutral-800 { color: var(--color-neutral-800); } .text-neutral-950 { color: var(--color-neutral-950); } .text-purple-400 { color: var(--color-purple-400); } .text-red-50 { color: var(--color-red-50); } .text-red-100 { color: var(--color-red-100); } .text-red-100\/75 { color: color-mix(in srgb, oklch(93.6% 0.032 17.717) 75%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-red-100) 75%, transparent); } } .text-red-100\/85 { color: color-mix(in srgb, oklch(93.6% 0.032 17.717) 85%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-red-100) 85%, transparent); } } .text-red-100\/90 { color: color-mix(in srgb, oklch(93.6% 0.032 17.717) 90%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-red-100) 90%, transparent); } } .text-red-200 { color: var(--color-red-200); } .text-red-300 { color: var(--color-red-300); } .text-red-300\/85 { color: color-mix(in srgb, oklch(80.8% 0.114 19.571) 85%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-red-300) 85%, transparent); } } .text-rose-600 { color: var(--color-rose-600); } .text-transparent { color: transparent; } .text-violet-400 { color: var(--color-violet-400); } .text-white { color: var(--color-white); } .text-white\/15 { color: color-mix(in srgb, #fff 15%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 15%, transparent); } } .text-white\/20 { color: color-mix(in srgb, #fff 20%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 20%, transparent); } } .text-white\/25 { color: color-mix(in srgb, #fff 25%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 25%, transparent); } } .text-white\/30 { color: color-mix(in srgb, #fff 30%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 30%, transparent); } } .text-white\/35 { color: color-mix(in srgb, #fff 35%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 35%, transparent); } } .text-white\/40 { color: color-mix(in srgb, #fff 40%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 40%, transparent); } } .text-white\/45 { color: color-mix(in srgb, #fff 45%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 45%, transparent); } } .text-white\/50 { color: color-mix(in srgb, #fff 50%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 50%, transparent); } } .text-white\/55 { color: color-mix(in srgb, #fff 55%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 55%, transparent); } } .text-white\/58 { color: color-mix(in srgb, #fff 58%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 58%, transparent); } } .text-white\/60 { color: color-mix(in srgb, #fff 60%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 60%, transparent); } } .text-white\/65 { color: color-mix(in srgb, #fff 65%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 65%, transparent); } } .text-white\/68 { color: color-mix(in srgb, #fff 68%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 68%, transparent); } } .text-white\/70 { color: color-mix(in srgb, #fff 70%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 70%, transparent); } } .text-white\/72 { color: color-mix(in srgb, #fff 72%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 72%, transparent); } } .text-white\/75 { color: color-mix(in srgb, #fff 75%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 75%, transparent); } } .text-white\/78 { color: color-mix(in srgb, #fff 78%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 78%, transparent); } } .text-white\/80 { color: color-mix(in srgb, #fff 80%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 80%, transparent); } } .text-white\/85 { color: color-mix(in srgb, #fff 85%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 85%, transparent); } } .text-white\/88 { color: color-mix(in srgb, #fff 88%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 88%, transparent); } } .text-white\/90 { color: color-mix(in srgb, #fff 90%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 90%, transparent); } } .text-white\/\[0\.88\] { color: color-mix(in srgb, #fff 88%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 88%, transparent); } } .text-yellow-500\/80 { color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 80%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-yellow-500) 80%, transparent); } } .capitalize { text-transform: capitalize; } .lowercase { text-transform: lowercase; } .normal-case { text-transform: none; } .uppercase { text-transform: uppercase; } .italic { font-style: italic; } .ordinal { --tw-ordinal: ordinal; font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); } .tabular-nums { --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); } .underline { text-decoration-line: underline; } .decoration-white\/15 { text-decoration-color: color-mix(in srgb, #fff 15%, transparent); @supports (color: color-mix(in lab, red, red)) { text-decoration-color: color-mix(in oklab, var(--color-white) 15%, transparent); } } .decoration-white\/20 { text-decoration-color: color-mix(in srgb, #fff 20%, transparent); @supports (color: color-mix(in lab, red, red)) { text-decoration-color: color-mix(in oklab, var(--color-white) 20%, transparent); } } .decoration-white\/30 { text-decoration-color: color-mix(in srgb, #fff 30%, transparent); @supports (color: color-mix(in lab, red, red)) { text-decoration-color: color-mix(in oklab, var(--color-white) 30%, transparent); } } .underline-offset-2 { text-underline-offset: 2px; } .underline-offset-4 { text-underline-offset: 4px; } .opacity-0 { opacity: 0%; } .opacity-20 { opacity: 20%; } .opacity-25 { opacity: 25%; } .opacity-30 { opacity: 30%; } .opacity-40 { opacity: 40%; } .opacity-45 { opacity: 45%; } .opacity-50 { opacity: 50%; } .opacity-60 { opacity: 60%; } .opacity-80 { opacity: 80%; } .opacity-90 { opacity: 90%; } .opacity-100 { opacity: 100%; } .opacity-\[0\.02\] { opacity: 0.02; } .opacity-\[0\.03\] { opacity: 0.03; } .mix-blend-luminosity { mix-blend-mode: luminosity; } .mix-blend-overlay { mix-blend-mode: overlay; } .shadow { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-2xl { --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_-8px_28px_rgba\(0\,0\,0\,0\.55\)\] { --tw-shadow: 0 -8px 28px var(--tw-shadow-color, rgba(0,0,0,0.55)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_-12px_40px_rgba\(0\,0\,0\,0\.45\)\] { --tw-shadow: 0 -12px 40px var(--tw-shadow-color, rgba(0,0,0,0.45)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_0_12px_rgba\(255\,255\,255\,0\.3\)\] { --tw-shadow: 0 0 12px var(--tw-shadow-color, rgba(255,255,255,0.3)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_0_12px_rgba\(255\,255\,255\,0\.9\)\] { --tw-shadow: 0 0 12px var(--tw-shadow-color, rgba(255,255,255,0.9)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_0_18px_rgba\(255\,255\,255\,0\.05\)\] { --tw-shadow: 0 0 18px var(--tw-shadow-color, rgba(255,255,255,0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_0_24px_rgba\(248\,113\,113\,0\.12\)\] { --tw-shadow: 0 0 24px var(--tw-shadow-color, rgba(248,113,113,0.12)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_0_24px_rgba\(255\,255\,255\,0\.12\)\] { --tw-shadow: 0 0 24px var(--tw-shadow-color, rgba(255,255,255,0.12)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_0_34px_rgba\(251\,191\,36\,0\.22\)\] { --tw-shadow: 0 0 34px var(--tw-shadow-color, rgba(251,191,36,0.22)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_0_36px_rgba\(255\,255\,255\,0\.45\)\] { --tw-shadow: 0 0 36px var(--tw-shadow-color, rgba(255,255,255,0.45)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_0_42px_rgba\(251\,191\,36\,0\.24\)\] { --tw-shadow: 0 0 42px var(--tw-shadow-color, rgba(251,191,36,0.24)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_0_80px_rgba\(255\,255\,255\,0\.08\)\] { --tw-shadow: 0 0 80px var(--tw-shadow-color, rgba(255,255,255,0.08)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_1px_2px_rgba\(0\,0\,0\,0\.3\)\] { --tw-shadow: 0 1px 2px var(--tw-shadow-color, rgba(0,0,0,0.3)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_4px_12px_rgba\(0\,0\,0\,0\.5\)\] { --tw-shadow: 0 4px 12px var(--tw-shadow-color, rgba(0,0,0,0.5)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_4px_16px_rgba\(0\,0\,0\,0\.5\)\] { --tw-shadow: 0 4px 16px var(--tw-shadow-color, rgba(0,0,0,0.5)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_6px_18px_rgba\(0\,0\,0\,0\.34\)\] { --tw-shadow: 0 6px 18px var(--tw-shadow-color, rgba(0,0,0,0.34)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_6px_18px_rgba\(0\,0\,0\,0\.42\)\] { --tw-shadow: 0 6px 18px var(--tw-shadow-color, rgba(0,0,0,0.42)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_8px_20px_rgba\(0\,0\,0\,0\.4\)\] { --tw-shadow: 0 8px 20px var(--tw-shadow-color, rgba(0,0,0,0.4)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_8px_20px_rgba\(0\,0\,0\,0\.55\)\] { --tw-shadow: 0 8px 20px var(--tw-shadow-color, rgba(0,0,0,0.55)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_8px_22px_rgba\(0\,0\,0\,0\.5\)\] { --tw-shadow: 0 8px 22px var(--tw-shadow-color, rgba(0,0,0,0.5)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_8px_22px_rgba\(0\,0\,0\,0\.42\)\] { --tw-shadow: 0 8px 22px var(--tw-shadow-color, rgba(0,0,0,0.42)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_8px_22px_rgba\(0\,0\,0\,0\.45\)\] { --tw-shadow: 0 8px 22px var(--tw-shadow-color, rgba(0,0,0,0.45)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_8px_22px_rgba\(0\,0\,0\,0\.46\)\] { --tw-shadow: 0 8px 22px var(--tw-shadow-color, rgba(0,0,0,0.46)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_8px_24px_rgba\(0\,0\,0\,0\.35\)\] { --tw-shadow: 0 8px 24px var(--tw-shadow-color, rgba(0,0,0,0.35)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_8px_24px_rgba\(0\,0\,0\,0\.42\)\] { --tw-shadow: 0 8px 24px var(--tw-shadow-color, rgba(0,0,0,0.42)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_8px_28px_rgba\(0\,0\,0\,0\.42\)\] { --tw-shadow: 0 8px 28px var(--tw-shadow-color, rgba(0,0,0,0.42)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_8px_32px_rgba\(0\,0\,0\,0\.6\)\] { --tw-shadow: 0 8px 32px var(--tw-shadow-color, rgba(0,0,0,0.6)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_8px_32px_rgba\(0\,0\,0\,0\.7\)\] { --tw-shadow: 0 8px 32px var(--tw-shadow-color, rgba(0,0,0,0.7)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_10px_32px_rgba\(251\,191\,36\,0\.16\)\] { --tw-shadow: 0 10px 32px var(--tw-shadow-color, rgba(251,191,36,0.16)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_10px_34px_rgba\(0\,0\,0\,0\.62\)\] { --tw-shadow: 0 10px 34px var(--tw-shadow-color, rgba(0,0,0,0.62)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_12px_28px_rgba\(255\,255\,255\,0\.10\)\] { --tw-shadow: 0 12px 28px var(--tw-shadow-color, rgba(255,255,255,0.10)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_12px_28px_rgba\(255\,255\,255\,0\.12\)\] { --tw-shadow: 0 12px 28px var(--tw-shadow-color, rgba(255,255,255,0.12)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_12px_30px_rgba\(0\,0\,0\,0\.34\)\] { --tw-shadow: 0 12px 30px var(--tw-shadow-color, rgba(0,0,0,0.34)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_12px_30px_rgba\(0\,0\,0\,0\.55\)\] { --tw-shadow: 0 12px 30px var(--tw-shadow-color, rgba(0,0,0,0.55)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_12px_32px_rgba\(0\,0\,0\,0\.22\)\] { --tw-shadow: 0 12px 32px var(--tw-shadow-color, rgba(0,0,0,0.22)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_12px_32px_rgba\(0\,0\,0\,0\.45\)\] { --tw-shadow: 0 12px 32px var(--tw-shadow-color, rgba(0,0,0,0.45)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_12px_36px_rgba\(0\,0\,0\,0\.6\)\] { --tw-shadow: 0 12px 36px var(--tw-shadow-color, rgba(0,0,0,0.6)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_12px_36px_rgba\(0\,0\,0\,0\.48\)\] { --tw-shadow: 0 12px 36px var(--tw-shadow-color, rgba(0,0,0,0.48)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_12px_36px_rgba\(0\,0\,0\,0\.65\)\] { --tw-shadow: 0 12px 36px var(--tw-shadow-color, rgba(0,0,0,0.65)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_12px_40px_rgba\(0\,0\,0\,0\.5\)\] { --tw-shadow: 0 12px 40px var(--tw-shadow-color, rgba(0,0,0,0.5)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_14px_34px_rgba\(255\,255\,255\,0\.12\)\] { --tw-shadow: 0 14px 34px var(--tw-shadow-color, rgba(255,255,255,0.12)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_14px_42px_rgba\(0\,0\,0\,0\.66\)\] { --tw-shadow: 0 14px 42px var(--tw-shadow-color, rgba(0,0,0,0.66)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_14px_44px_rgba\(0\,0\,0\,0\.55\)\] { --tw-shadow: 0 14px 44px var(--tw-shadow-color, rgba(0,0,0,0.55)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_14px_44px_rgba\(0\,0\,0\,0\.58\)\] { --tw-shadow: 0 14px 44px var(--tw-shadow-color, rgba(0,0,0,0.58)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_16px_48px_rgba\(0\,0\,0\,0\.8\)\] { --tw-shadow: 0 16px 48px var(--tw-shadow-color, rgba(0,0,0,0.8)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_16px_48px_rgba\(0\,0\,0\,0\.55\)\] { --tw-shadow: 0 16px 48px var(--tw-shadow-color, rgba(0,0,0,0.55)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_18px_42px_rgba\(0\,0\,0\,0\.42\)\] { --tw-shadow: 0 18px 42px var(--tw-shadow-color, rgba(0,0,0,0.42)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_18px_42px_rgba\(0\,0\,0\,0\.55\)\] { --tw-shadow: 0 18px 42px var(--tw-shadow-color, rgba(0,0,0,0.55)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_18px_48px_rgba\(0\,0\,0\,0\.32\)\] { --tw-shadow: 0 18px 48px var(--tw-shadow-color, rgba(0,0,0,0.32)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_18px_50px_rgba\(0\,0\,0\,0\.55\)\] { --tw-shadow: 0 18px 50px var(--tw-shadow-color, rgba(0,0,0,0.55)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_18px_52px_rgba\(0\,0\,0\,0\.68\)\] { --tw-shadow: 0 18px 52px var(--tw-shadow-color, rgba(0,0,0,0.68)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_20px_60px_rgba\(0\,0\,0\,0\.55\)\] { --tw-shadow: 0 20px 60px var(--tw-shadow-color, rgba(0,0,0,0.55)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_22px_60px_rgba\(0\,0\,0\,0\.68\)\] { --tw-shadow: 0 22px 60px var(--tw-shadow-color, rgba(0,0,0,0.68)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_22px_70px_rgba\(0\,0\,0\,0\.75\)\] { --tw-shadow: 0 22px 70px var(--tw-shadow-color, rgba(0,0,0,0.75)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_24px_70px_rgba\(0\,0\,0\,0\.44\)\] { --tw-shadow: 0 24px 70px var(--tw-shadow-color, rgba(0,0,0,0.44)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_24px_72px_rgba\(0\,0\,0\,0\.72\)\] { --tw-shadow: 0 24px 72px var(--tw-shadow-color, rgba(0,0,0,0.72)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_24px_80px_rgba\(0\,0\,0\,0\.7\)\] { --tw-shadow: 0 24px 80px var(--tw-shadow-color, rgba(0,0,0,0.7)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_24px_80px_rgba\(0\,0\,0\,0\.75\)\] { --tw-shadow: 0 24px 80px var(--tw-shadow-color, rgba(0,0,0,0.75)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_24px_80px_rgba\(0\,0\,0\,0\.78\)\] { --tw-shadow: 0 24px 80px var(--tw-shadow-color, rgba(0,0,0,0.78)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_26px_80px_rgba\(0\,0\,0\,0\.72\)\,inset_0_1px_0_rgba\(255\,255\,255\,0\.04\)\] { --tw-shadow: 0 26px 80px var(--tw-shadow-color, rgba(0,0,0,0.72)), inset 0 1px 0 var(--tw-shadow-color, rgba(255,255,255,0.04)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_26px_80px_rgba\(0\,0\,0\,0\.72\)\] { --tw-shadow: 0 26px 80px var(--tw-shadow-color, rgba(0,0,0,0.72)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_28px_90px_rgba\(0\,0\,0\,0\.74\)\] { --tw-shadow: 0 28px 90px var(--tw-shadow-color, rgba(0,0,0,0.74)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_28px_90px_rgba\(0\,0\,0\,0\.76\)\] { --tw-shadow: 0 28px 90px var(--tw-shadow-color, rgba(0,0,0,0.76)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_30px_100px_rgba\(0\,0\,0\,0\.82\)\] { --tw-shadow: 0 30px 100px var(--tw-shadow-color, rgba(0,0,0,0.82)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_34px_120px_rgba\(0\,0\,0\,0\.75\)\] { --tw-shadow: 0 34px 120px var(--tw-shadow-color, rgba(0,0,0,0.75)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_40px_120px_rgba\(0\,0\,0\,0\.8\)\] { --tw-shadow: 0 40px 120px var(--tw-shadow-color, rgba(0,0,0,0.8)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_44px_140px_rgba\(0\,0\,0\,0\.92\)\] { --tw-shadow: 0 44px 140px var(--tw-shadow-color, rgba(0,0,0,0.92)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[inset_0_1px_0_rgba\(255\,255\,255\,0\.04\)\,0_14px_44px_rgba\(0\,0\,0\,0\.45\)\] { --tw-shadow: inset 0 1px 0 var(--tw-shadow-color, rgba(255,255,255,0.04)), 0 14px 44px var(--tw-shadow-color, rgba(0,0,0,0.45)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[inset_0_1px_0_rgba\(255\,255\,255\,0\.04\)\,0_18px_52px_rgba\(0\,0\,0\,0\.55\)\] { --tw-shadow: inset 0 1px 0 var(--tw-shadow-color, rgba(255,255,255,0.04)), 0 18px 52px var(--tw-shadow-color, rgba(0,0,0,0.55)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[inset_0_1px_0_rgba\(255\,255\,255\,0\.04\)\] { --tw-shadow: inset 0 1px 0 var(--tw-shadow-color, rgba(255,255,255,0.04)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[inset_0_1px_0_rgba\(255\,255\,255\,0\.05\)\] { --tw-shadow: inset 0 1px 0 var(--tw-shadow-color, rgba(255,255,255,0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[inset_0_1px_0_rgba\(255\,255\,255\,0\.06\)\] { --tw-shadow: inset 0 1px 0 var(--tw-shadow-color, rgba(255,255,255,0.06)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-lg { --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-sm { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-xl { --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .ring { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .ring-1 { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-black\/20 { --tw-shadow-color: color-mix(in srgb, #000 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 20%, transparent) var(--tw-shadow-alpha), transparent); } } .ring-amber-300\/45 { --tw-ring-color: color-mix(in srgb, oklch(87.9% 0.169 91.605) 45%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-amber-300) 45%, transparent); } } .ring-red-400\/35 { --tw-ring-color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 35%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-red-400) 35%, transparent); } } .ring-white\/8 { --tw-ring-color: color-mix(in srgb, #fff 8%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-white) 8%, transparent); } } .ring-white\/12 { --tw-ring-color: color-mix(in srgb, #fff 12%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-white) 12%, transparent); } } .ring-white\/40 { --tw-ring-color: color-mix(in srgb, #fff 40%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-white) 40%, transparent); } } .ring-white\/50 { --tw-ring-color: color-mix(in srgb, #fff 50%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-white) 50%, transparent); } } .ring-white\/55 { --tw-ring-color: color-mix(in srgb, #fff 55%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-white) 55%, transparent); } } .ring-white\/80 { --tw-ring-color: color-mix(in srgb, #fff 80%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-white) 80%, transparent); } } .ring-white\/\[0\.06\] { --tw-ring-color: color-mix(in srgb, #fff 6%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-white) 6%, transparent); } } .ring-offset-2 { --tw-ring-offset-width: 2px; --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .ring-offset-\[\#050505\] { --tw-ring-offset-color: #050505; } .outline { outline-style: var(--tw-outline-style); outline-width: 1px; } .blur { --tw-blur: blur(8px); 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,); } .blur-2xl { --tw-blur: blur(var(--blur-2xl)); 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,); } .blur-xl { --tw-blur: blur(var(--blur-xl)); 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,); } .drop-shadow-\[0_1px_8px_rgba\(0\,0\,0\,0\.9\)\] { --tw-drop-shadow-size: drop-shadow(0 1px 8px var(--tw-drop-shadow-color, rgba(0,0,0,0.9))); --tw-drop-shadow: var(--tw-drop-shadow-size); 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,); } .drop-shadow-sm { --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15))); --tw-drop-shadow: drop-shadow(var(--drop-shadow-sm)); 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,); } .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 { --tw-backdrop-blur: blur(8px); -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,); } .backdrop-blur-2xl { --tw-backdrop-blur: blur(var(--blur-2xl)); -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,); } .backdrop-blur-\[6px\] { --tw-backdrop-blur: blur(6px); -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,); } .backdrop-blur-\[16px\] { --tw-backdrop-blur: blur(16px); -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,); } .backdrop-blur-\[18px\] { --tw-backdrop-blur: blur(18px); -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,); } .backdrop-blur-\[38px\] { --tw-backdrop-blur: blur(38px); -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,); } .backdrop-blur-\[40px\] { --tw-backdrop-blur: blur(40px); -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,); } .backdrop-blur-\[42px\] { --tw-backdrop-blur: blur(42px); -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,); } .backdrop-blur-md { --tw-backdrop-blur: blur(var(--blur-md)); -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,); } .backdrop-blur-sm { --tw-backdrop-blur: blur(var(--blur-sm)); -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,); } .backdrop-blur-xl { --tw-backdrop-blur: blur(var(--blur-xl)); -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,); } .backdrop-filter { -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, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-\[background\,transform\] { transition-property: background,transform; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-\[background-color\,opacity\] { transition-property: background-color,opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-\[box-shadow\] { transition-property: box-shadow; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-\[width\] { transition-property: width; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-all { transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-colors { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-opacity { transition-property: opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-transform { transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .duration-150 { --tw-duration: 150ms; transition-duration: 150ms; } .duration-200 { --tw-duration: 200ms; transition-duration: 200ms; } .duration-300 { --tw-duration: 300ms; transition-duration: 300ms; } .duration-500 { --tw-duration: 500ms; transition-duration: 500ms; } .duration-700 { --tw-duration: 700ms; transition-duration: 700ms; } .ease-\[cubic-bezier\(0\.16\,1\,0\.3\,1\)\] { --tw-ease: cubic-bezier(0.16,1,0.3,1); transition-timing-function: cubic-bezier(0.16,1,0.3,1); } .ease-in-out { --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); } .ease-out { --tw-ease: var(--ease-out); transition-timing-function: var(--ease-out); } .outline-none { --tw-outline-style: none; outline-style: none; } .select-none { -webkit-user-select: none; user-select: none; } .group-focus-within\:pointer-events-auto { &:is(:where(.group):focus-within *) { pointer-events: auto; } } .group-focus-within\:translate-y-0 { &:is(:where(.group):focus-within *) { --tw-translate-y: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); } } .group-focus-within\:opacity-100 { &:is(:where(.group):focus-within *) { opacity: 100%; } } .group-hover\:pointer-events-auto { &:is(:where(.group):hover *) { @media (hover: hover) { pointer-events: auto; } } } .group-hover\:translate-y-0 { &:is(:where(.group):hover *) { @media (hover: hover) { --tw-translate-y: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); } } } .group-hover\:scale-105 { &:is(:where(.group):hover *) { @media (hover: hover) { --tw-scale-x: 105%; --tw-scale-y: 105%; --tw-scale-z: 105%; scale: var(--tw-scale-x) var(--tw-scale-y); } } } .group-hover\:scale-\[1\.02\] { &:is(:where(.group):hover *) { @media (hover: hover) { scale: 1.02; } } } .group-hover\:scale-\[1\.025\] { &:is(:where(.group):hover *) { @media (hover: hover) { scale: 1.025; } } } .group-hover\:scale-\[1\.035\] { &:is(:where(.group):hover *) { @media (hover: hover) { scale: 1.035; } } } .group-hover\:border-white\/15 { &:is(:where(.group):hover *) { @media (hover: hover) { border-color: color-mix(in srgb, #fff 15%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 15%, transparent); } } } } .group-hover\:border-white\/18 { &:is(:where(.group):hover *) { @media (hover: hover) { border-color: color-mix(in srgb, #fff 18%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 18%, transparent); } } } } .group-hover\:bg-black\/18 { &:is(:where(.group):hover *) { @media (hover: hover) { background-color: color-mix(in srgb, #000 18%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 18%, transparent); } } } } .group-hover\:bg-black\/25 { &:is(:where(.group):hover *) { @media (hover: hover) { background-color: color-mix(in srgb, #000 25%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 25%, transparent); } } } } .group-hover\:text-neutral-200 { &:is(:where(.group):hover *) { @media (hover: hover) { color: var(--color-neutral-200); } } } .group-hover\:text-neutral-400 { &:is(:where(.group):hover *) { @media (hover: hover) { color: var(--color-neutral-400); } } } .group-hover\:text-white { &:is(:where(.group):hover *) { @media (hover: hover) { color: var(--color-white); } } } .group-hover\:text-white\/60 { &:is(:where(.group):hover *) { @media (hover: hover) { color: color-mix(in srgb, #fff 60%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 60%, transparent); } } } } .group-hover\:opacity-45 { &:is(:where(.group):hover *) { @media (hover: hover) { opacity: 45%; } } } .group-hover\:opacity-100 { &:is(:where(.group):hover *) { @media (hover: hover) { opacity: 100%; } } } .group-hover\:shadow-\[0_18px_42px_rgba\(0\,0\,0\,0\.42\)\] { &:is(:where(.group):hover *) { @media (hover: hover) { --tw-shadow: 0 18px 42px var(--tw-shadow-color, rgba(0,0,0,0.42)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } } .group-hover\:ring-white\/20 { &:is(:where(.group):hover *) { @media (hover: hover) { --tw-ring-color: color-mix(in srgb, #fff 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-white) 20%, transparent); } } } } .group-focus-visible\:bg-black\/25 { &:is(:where(.group):focus-visible *) { background-color: color-mix(in srgb, #000 25%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 25%, transparent); } } } .group-focus-visible\:opacity-100 { &:is(:where(.group):focus-visible *) { opacity: 100%; } } .peer-checked\:block { &:is(:where(.peer):checked ~ *) { display: block; } } .placeholder\:text-gray-400 { &::placeholder { color: var(--color-gray-400); } } .placeholder\:text-neutral-500 { &::placeholder { color: var(--color-neutral-500); } } .placeholder\:text-neutral-600 { &::placeholder { color: var(--color-neutral-600); } } .placeholder\:text-white\/30 { &::placeholder { color: color-mix(in srgb, #fff 30%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 30%, transparent); } } } .before\:absolute { &::before { content: var(--tw-content); position: absolute; } } .before\:-inset-x-1 { &::before { content: var(--tw-content); inset-inline: calc(var(--spacing) * -1); } } .before\:-inset-y-2 { &::before { content: var(--tw-content); inset-block: calc(var(--spacing) * -2); } } .before\:content-\[\'\'\] { &::before { --tw-content: ''; content: var(--tw-content); } } .checked\:border-white { &:checked { border-color: var(--color-white); } } .checked\:bg-white { &:checked { background-color: var(--color-white); } } .focus-within\:border-white\/24 { &:focus-within { border-color: color-mix(in srgb, #fff 24%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 24%, transparent); } } } .focus-within\:outline { &:focus-within { outline-style: var(--tw-outline-style); outline-width: 1px; } } .focus-within\:outline-2 { &:focus-within { outline-style: var(--tw-outline-style); outline-width: 2px; } } .focus-within\:outline-white\/60 { &:focus-within { outline-color: color-mix(in srgb, #fff 60%, transparent); @supports (color: color-mix(in lab, red, red)) { outline-color: color-mix(in oklab, var(--color-white) 60%, transparent); } } } .hover\:z-30 { &:hover { @media (hover: hover) { z-index: 30; } } } .hover\:-translate-y-0\.5 { &:hover { @media (hover: hover) { --tw-translate-y: calc(var(--spacing) * -0.5); translate: var(--tw-translate-x) var(--tw-translate-y); } } } .hover\:-translate-y-1 { &:hover { @media (hover: hover) { --tw-translate-y: calc(var(--spacing) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } } } .hover\:-translate-y-px { &:hover { @media (hover: hover) { --tw-translate-y: -1px; translate: var(--tw-translate-x) var(--tw-translate-y); } } } .hover\:scale-105 { &:hover { @media (hover: hover) { --tw-scale-x: 105%; --tw-scale-y: 105%; --tw-scale-z: 105%; scale: var(--tw-scale-x) var(--tw-scale-y); } } } .hover\:scale-\[1\.02\] { &:hover { @media (hover: hover) { scale: 1.02; } } } .hover\:border-red-500\/30 { &:hover { @media (hover: hover) { border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-red-500) 30%, transparent); } } } } .hover\:border-white\/12 { &:hover { @media (hover: hover) { border-color: color-mix(in srgb, #fff 12%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 12%, transparent); } } } } .hover\:border-white\/14 { &:hover { @media (hover: hover) { border-color: color-mix(in srgb, #fff 14%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 14%, transparent); } } } } .hover\:border-white\/15 { &:hover { @media (hover: hover) { border-color: color-mix(in srgb, #fff 15%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 15%, transparent); } } } } .hover\:border-white\/18 { &:hover { @media (hover: hover) { border-color: color-mix(in srgb, #fff 18%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 18%, transparent); } } } } .hover\:border-white\/20 { &:hover { @media (hover: hover) { border-color: color-mix(in srgb, #fff 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 20%, transparent); } } } } .hover\:border-white\/24 { &:hover { @media (hover: hover) { border-color: color-mix(in srgb, #fff 24%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 24%, transparent); } } } } .hover\:border-white\/25 { &:hover { @media (hover: hover) { border-color: color-mix(in srgb, #fff 25%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 25%, transparent); } } } } .hover\:border-white\/30 { &:hover { @media (hover: hover) { border-color: color-mix(in srgb, #fff 30%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 30%, transparent); } } } } .hover\:border-white\/35 { &:hover { @media (hover: hover) { border-color: color-mix(in srgb, #fff 35%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 35%, transparent); } } } } .hover\:border-white\/40 { &:hover { @media (hover: hover) { border-color: color-mix(in srgb, #fff 40%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 40%, transparent); } } } } .hover\:border-white\/55 { &:hover { @media (hover: hover) { border-color: color-mix(in srgb, #fff 55%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 55%, transparent); } } } } .hover\:border-white\/60 { &:hover { @media (hover: hover) { border-color: color-mix(in srgb, #fff 60%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 60%, transparent); } } } } .hover\:border-white\/\[0\.18\] { &:hover { @media (hover: hover) { border-color: color-mix(in srgb, #fff 18%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 18%, transparent); } } } } .hover\:border-white\/\[0\.20\] { &:hover { @media (hover: hover) { border-color: color-mix(in srgb, #fff 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 20%, transparent); } } } } .hover\:\!bg-white\/5 { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #fff 5%, transparent) !important; @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 5%, transparent) !important; } } } } .hover\:\!bg-white\/10 { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #fff 10%, transparent) !important; @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 10%, transparent) !important; } } } } .hover\:bg-\[\#181818\] { &:hover { @media (hover: hover) { background-color: #181818; } } } .hover\:bg-\[\#252525\] { &:hover { @media (hover: hover) { background-color: #252525; } } } .hover\:bg-\[rgba\(255\,106\,106\,0\.08\)\] { &:hover { @media (hover: hover) { background-color: rgba(255,106,106,0.08); } } } .hover\:bg-black { &:hover { @media (hover: hover) { background-color: var(--color-black); } } } .hover\:bg-black\/40 { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #000 40%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 40%, transparent); } } } } .hover\:bg-black\/80 { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #000 80%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 80%, transparent); } } } } .hover\:bg-emerald-500\/25 { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 25%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-emerald-500) 25%, transparent); } } } } .hover\:bg-neutral-200 { &:hover { @media (hover: hover) { background-color: var(--color-neutral-200); } } } .hover\:bg-red-500\/20 { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-red-500) 20%, transparent); } } } } .hover\:bg-red-500\/25 { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 25%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-red-500) 25%, transparent); } } } } .hover\:bg-white { &:hover { @media (hover: hover) { background-color: var(--color-white); } } } .hover\:bg-white\/5 { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #fff 5%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 5%, transparent); } } } } .hover\:bg-white\/6 { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #fff 6%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 6%, transparent); } } } } .hover\:bg-white\/8 { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #fff 8%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 8%, transparent); } } } } .hover\:bg-white\/10 { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #fff 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } } } .hover\:bg-white\/12 { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #fff 12%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 12%, transparent); } } } } .hover\:bg-white\/15 { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #fff 15%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 15%, transparent); } } } } .hover\:bg-white\/90 { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #fff 90%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 90%, transparent); } } } } .hover\:bg-white\/\[0\.03\] { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #fff 3%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 3%, transparent); } } } } .hover\:bg-white\/\[0\.04\] { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #fff 4%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 4%, transparent); } } } } .hover\:bg-white\/\[0\.05\] { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #fff 5%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 5%, transparent); } } } } .hover\:bg-white\/\[0\.06\] { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #fff 6%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 6%, transparent); } } } } .hover\:bg-white\/\[0\.07\] { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #fff 7.000000000000001%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 7.000000000000001%, transparent); } } } } .hover\:bg-white\/\[0\.08\] { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #fff 8%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 8%, transparent); } } } } .hover\:bg-white\/\[0\.09\] { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #fff 9%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 9%, transparent); } } } } .hover\:bg-white\/\[0\.10\] { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #fff 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } } } .hover\:bg-white\/\[0\.12\] { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #fff 12%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 12%, transparent); } } } } .hover\:bg-white\/\[0\.16\] { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #fff 16%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 16%, transparent); } } } } .hover\:bg-white\/\[0\.045\] { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #fff 4.5%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 4.5%, transparent); } } } } .hover\:\!text-white { &:hover { @media (hover: hover) { color: var(--color-white) !important; } } } .hover\:text-neutral-100 { &:hover { @media (hover: hover) { color: var(--color-neutral-100); } } } .hover\:text-neutral-200 { &:hover { @media (hover: hover) { color: var(--color-neutral-200); } } } .hover\:text-neutral-300 { &:hover { @media (hover: hover) { color: var(--color-neutral-300); } } } .hover\:text-neutral-400 { &:hover { @media (hover: hover) { color: var(--color-neutral-400); } } } .hover\:text-red-400 { &:hover { @media (hover: hover) { color: var(--color-red-400); } } } .hover\:text-white { &:hover { @media (hover: hover) { color: var(--color-white); } } } .hover\:text-white\/70 { &:hover { @media (hover: hover) { color: color-mix(in srgb, #fff 70%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 70%, transparent); } } } } .hover\:text-white\/75 { &:hover { @media (hover: hover) { color: color-mix(in srgb, #fff 75%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 75%, transparent); } } } } .hover\:text-white\/80 { &:hover { @media (hover: hover) { color: color-mix(in srgb, #fff 80%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 80%, transparent); } } } } .hover\:text-white\/88 { &:hover { @media (hover: hover) { color: color-mix(in srgb, #fff 88%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 88%, transparent); } } } } .hover\:decoration-white\/60 { &:hover { @media (hover: hover) { text-decoration-color: color-mix(in srgb, #fff 60%, transparent); @supports (color: color-mix(in lab, red, red)) { text-decoration-color: color-mix(in oklab, var(--color-white) 60%, transparent); } } } } .hover\:shadow-\[0_14px_34px_rgba\(255\,255\,255\,0\.16\)\] { &:hover { @media (hover: hover) { --tw-shadow: 0 14px 34px var(--tw-shadow-color, rgba(255,255,255,0.16)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } } .hover\:shadow-\[0_14px_38px_rgba\(0\,0\,0\,0\.6\)\] { &:hover { @media (hover: hover) { --tw-shadow: 0 14px 38px var(--tw-shadow-color, rgba(0,0,0,0.6)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } } .hover\:shadow-\[0_16px_36px_rgba\(0\,0\,0\,0\.26\)\] { &:hover { @media (hover: hover) { --tw-shadow: 0 16px 36px var(--tw-shadow-color, rgba(0,0,0,0.26)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } } .hover\:shadow-\[0_16px_48px_rgba\(0\,0\,0\,0\.8\)\] { &:hover { @media (hover: hover) { --tw-shadow: 0 16px 48px var(--tw-shadow-color, rgba(0,0,0,0.8)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } } .hover\:shadow-\[0_18px_42px_rgba\(255\,255\,255\,0\.16\)\] { &:hover { @media (hover: hover) { --tw-shadow: 0 18px 42px var(--tw-shadow-color, rgba(255,255,255,0.16)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } } .hover\:shadow-\[0_18px_52px_rgba\(0\,0\,0\,0\.76\)\] { &:hover { @media (hover: hover) { --tw-shadow: 0 18px 52px var(--tw-shadow-color, rgba(0,0,0,0.76)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } } .hover\:shadow-\[0_18px_52px_rgba\(0\,0\,0\,0\.78\)\] { &:hover { @media (hover: hover) { --tw-shadow: 0 18px 52px var(--tw-shadow-color, rgba(0,0,0,0.78)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } } .hover\:ring-white\/22 { &:hover { @media (hover: hover) { --tw-ring-color: color-mix(in srgb, #fff 22%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-white) 22%, transparent); } } } } .hover\:ring-white\/25 { &:hover { @media (hover: hover) { --tw-ring-color: color-mix(in srgb, #fff 25%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-white) 25%, transparent); } } } } .focus\:border-gray-400 { &:focus { border-color: var(--color-gray-400); } } .focus\:border-white\/18 { &:focus { border-color: color-mix(in srgb, #fff 18%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 18%, transparent); } } } .focus\:border-white\/25 { &:focus { border-color: color-mix(in srgb, #fff 25%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 25%, transparent); } } } .focus\:border-white\/30 { &:focus { border-color: color-mix(in srgb, #fff 30%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 30%, transparent); } } } .focus\:border-white\/32 { &:focus { border-color: color-mix(in srgb, #fff 32%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 32%, transparent); } } } .focus\:border-white\/40 { &:focus { border-color: color-mix(in srgb, #fff 40%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 40%, transparent); } } } .focus\:bg-black\/40 { &:focus { background-color: color-mix(in srgb, #000 40%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 40%, transparent); } } } .focus\:bg-black\/45 { &:focus { background-color: color-mix(in srgb, #000 45%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 45%, transparent); } } } .focus\:opacity-100 { &:focus { opacity: 100%; } } .focus\:ring-1 { &:focus { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .focus\:ring-white\/40 { &:focus { --tw-ring-color: color-mix(in srgb, #fff 40%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-white) 40%, transparent); } } } .focus\:outline-none { &:focus { --tw-outline-style: none; outline-style: none; } } .focus-visible\:border-b { &:focus-visible { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } } .focus-visible\:border-white\/40 { &:focus-visible { border-color: color-mix(in srgb, #fff 40%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 40%, transparent); } } } .focus-visible\:border-white\/45 { &:focus-visible { border-color: color-mix(in srgb, #fff 45%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 45%, transparent); } } } .focus-visible\:text-white\/88 { &:focus-visible { color: color-mix(in srgb, #fff 88%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 88%, transparent); } } } .focus-visible\:opacity-100 { &:focus-visible { opacity: 100%; } } .focus-visible\:ring-1 { &:focus-visible { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .focus-visible\:ring-2 { &:focus-visible { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .focus-visible\:ring-neutral-500 { &:focus-visible { --tw-ring-color: var(--color-neutral-500); } } .focus-visible\:ring-white\/30 { &:focus-visible { --tw-ring-color: color-mix(in srgb, #fff 30%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-white) 30%, transparent); } } } .focus-visible\:ring-white\/40 { &:focus-visible { --tw-ring-color: color-mix(in srgb, #fff 40%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-white) 40%, transparent); } } } .focus-visible\:ring-white\/60 { &:focus-visible { --tw-ring-color: color-mix(in srgb, #fff 60%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-white) 60%, transparent); } } } .focus-visible\:ring-white\/70 { &:focus-visible { --tw-ring-color: color-mix(in srgb, #fff 70%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-white) 70%, transparent); } } } .focus-visible\:ring-offset-2 { &:focus-visible { --tw-ring-offset-width: 2px; --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } } .focus-visible\:ring-offset-\[\#0d0d0d\] { &:focus-visible { --tw-ring-offset-color: #0d0d0d; } } .focus-visible\:ring-offset-\[\#121212\] { &:focus-visible { --tw-ring-offset-color: #121212; } } .focus-visible\:ring-offset-\[\#151515\] { &:focus-visible { --tw-ring-offset-color: #151515; } } .focus-visible\:outline { &:focus-visible { outline-style: var(--tw-outline-style); outline-width: 1px; } } .focus-visible\:outline-1 { &:focus-visible { outline-style: var(--tw-outline-style); outline-width: 1px; } } .focus-visible\:outline-2 { &:focus-visible { outline-style: var(--tw-outline-style); outline-width: 2px; } } .focus-visible\:outline-offset-2 { &:focus-visible { outline-offset: 2px; } } .focus-visible\:outline-offset-4 { &:focus-visible { outline-offset: 4px; } } .focus-visible\:outline-gray-400 { &:focus-visible { outline-color: var(--color-gray-400); } } .focus-visible\:outline-neutral-500 { &:focus-visible { outline-color: var(--color-neutral-500); } } .focus-visible\:outline-white\/60 { &:focus-visible { outline-color: color-mix(in srgb, #fff 60%, transparent); @supports (color: color-mix(in lab, red, red)) { outline-color: color-mix(in oklab, var(--color-white) 60%, transparent); } } } .focus-visible\:outline-white\/70 { &:focus-visible { outline-color: color-mix(in srgb, #fff 70%, transparent); @supports (color: color-mix(in lab, red, red)) { outline-color: color-mix(in oklab, var(--color-white) 70%, transparent); } } } .focus-visible\:outline-none { &:focus-visible { --tw-outline-style: none; outline-style: none; } } .active\:scale-\[0\.98\] { &:active { scale: 0.98; } } .active\:scale-\[0\.99\] { &:active { scale: 0.99; } } .active\:cursor-grabbing { &:active { cursor: grabbing; } } .disabled\:pointer-events-none { &:disabled { pointer-events: none; } } .disabled\:cursor-default { &:disabled { cursor: default; } } .disabled\:cursor-not-allowed { &:disabled { cursor: not-allowed; } } .disabled\:cursor-wait { &:disabled { cursor: wait; } } .disabled\:bg-neutral-700 { &:disabled { background-color: var(--color-neutral-700); } } .disabled\:bg-neutral-800 { &:disabled { background-color: var(--color-neutral-800); } } .disabled\:text-neutral-400 { &:disabled { color: var(--color-neutral-400); } } .disabled\:text-neutral-500 { &:disabled { color: var(--color-neutral-500); } } .disabled\:text-neutral-600 { &:disabled { color: var(--color-neutral-600); } } .disabled\:opacity-30 { &:disabled { opacity: 30%; } } .disabled\:opacity-35 { &:disabled { opacity: 35%; } } .disabled\:opacity-40 { &:disabled { opacity: 40%; } } .disabled\:opacity-45 { &:disabled { opacity: 45%; } } .disabled\:opacity-50 { &:disabled { opacity: 50%; } } .disabled\:opacity-55 { &:disabled { opacity: 55%; } } .disabled\:opacity-60 { &:disabled { opacity: 60%; } } .disabled\:opacity-70 { &:disabled { opacity: 70%; } } .aria-pressed\:bg-white\/10 { &[aria-pressed="true"] { background-color: color-mix(in srgb, #fff 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } } .aria-pressed\:font-semibold { &[aria-pressed="true"] { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } } .motion-safe\:animate-\[ripli-fade-in_200ms_ease-out_both\] { @media (prefers-reduced-motion: no-preference) { animation: ripli-fade-in 200ms ease-out both; } } .motion-safe\:animate-\[ripli-panel-in_240ms_cubic-bezier\(0\.16\,1\,0\.3\,1\)_both\] { @media (prefers-reduced-motion: no-preference) { animation: ripli-panel-in 240ms cubic-bezier(0.16,1,0.3,1) both; } } .motion-safe\:animate-spin { @media (prefers-reduced-motion: no-preference) { animation: var(--animate-spin); } } .motion-reduce\:animate-none { @media (prefers-reduced-motion: reduce) { animation: none; } } .motion-reduce\:transition-none { @media (prefers-reduced-motion: reduce) { transition-property: none; } } .max-\[1120px\]\:\!bottom-\[4\.5rem\] { @media (width < 1120px) { bottom: 4.5rem !important; } } .max-\[1120px\]\:max-h-\[calc\(100dvh-11\.5rem\)\] { @media (width < 1120px) { max-height: calc(100dvh - 11.5rem); } } .max-\[1100px\]\:block { @media (width < 1100px) { display: block; } } .max-\[1100px\]\:grid-cols-1 { @media (width < 1100px) { grid-template-columns: repeat(1, minmax(0, 1fr)); } } .max-\[1100px\]\:overflow-visible { @media (width < 1100px) { overflow: visible; } } .max-\[1100px\]\:overflow-y-auto { @media (width < 1100px) { overflow-y: auto; } } .sm\:right-4 { @media (width >= 40rem) { right: calc(var(--spacing) * 4); } } .sm\:bottom-\[calc\(16px\+env\(safe-area-inset-bottom\)\)\] { @media (width >= 40rem) { bottom: calc(16px + env(safe-area-inset-bottom)); } } .sm\:left-auto { @media (width >= 40rem) { left: auto; } } .sm\:hidden { @media (width >= 40rem) { display: none; } } .sm\:w-\[112px\] { @media (width >= 40rem) { width: 112px; } } .sm\:w-\[520px\] { @media (width >= 40rem) { width: 520px; } } .sm\:w-\[calc\(25\%-0\.46875rem\)\] { @media (width >= 40rem) { width: calc(25% - 0.46875rem); } } .sm\:w-auto { @media (width >= 40rem) { width: auto; } } .sm\:max-w-\[calc\(100vw-32px\)\] { @media (width >= 40rem) { max-width: calc(100vw - 32px); } } .sm\:columns-3 { @media (width >= 40rem) { columns: 3; } } .sm\:grid-cols-2 { @media (width >= 40rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .sm\:grid-cols-3 { @media (width >= 40rem) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .sm\:grid-cols-4 { @media (width >= 40rem) { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .sm\:grid-cols-\[1fr_120px\] { @media (width >= 40rem) { grid-template-columns: 1fr 120px; } } .sm\:grid-cols-\[160px_minmax\(0\,1fr\)\] { @media (width >= 40rem) { grid-template-columns: 160px minmax(0,1fr); } } .sm\:grid-cols-\[minmax\(0\,1fr\)_auto\] { @media (width >= 40rem) { grid-template-columns: minmax(0,1fr) auto; } } .sm\:grid-cols-\[repeat\(3\,minmax\(0\,1fr\)\)\] { @media (width >= 40rem) { grid-template-columns: repeat(3,minmax(0,1fr)); } } .sm\:flex-row { @media (width >= 40rem) { flex-direction: row; } } .sm\:items-center { @media (width >= 40rem) { align-items: center; } } .sm\:items-start { @media (width >= 40rem) { align-items: flex-start; } } .sm\:justify-between { @media (width >= 40rem) { justify-content: space-between; } } .sm\:justify-center { @media (width >= 40rem) { justify-content: center; } } .sm\:justify-end { @media (width >= 40rem) { justify-content: flex-end; } } .sm\:gap-3 { @media (width >= 40rem) { gap: calc(var(--spacing) * 3); } } .sm\:rounded-\[14px\] { @media (width >= 40rem) { border-radius: 14px; } } .sm\:border { @media (width >= 40rem) { border-style: var(--tw-border-style); border-width: 1px; } } .sm\:border-white\/10 { @media (width >= 40rem) { border-color: color-mix(in srgb, #fff 10%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } } .sm\:p-4 { @media (width >= 40rem) { padding: calc(var(--spacing) * 4); } } .sm\:p-8 { @media (width >= 40rem) { padding: calc(var(--spacing) * 8); } } .sm\:px-5 { @media (width >= 40rem) { padding-inline: calc(var(--spacing) * 5); } } .sm\:px-8 { @media (width >= 40rem) { padding-inline: calc(var(--spacing) * 8); } } .sm\:py-3 { @media (width >= 40rem) { padding-block: calc(var(--spacing) * 3); } } .sm\:py-5 { @media (width >= 40rem) { padding-block: calc(var(--spacing) * 5); } } .sm\:pr-3 { @media (width >= 40rem) { padding-right: calc(var(--spacing) * 3); } } .sm\:pr-14 { @media (width >= 40rem) { padding-right: calc(var(--spacing) * 14); } } .sm\:pl-4 { @media (width >= 40rem) { padding-left: calc(var(--spacing) * 4); } } .sm\:text-4xl { @media (width >= 40rem) { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); } } .sm\:text-\[15px\] { @media (width >= 40rem) { font-size: 15px; } } .sm\:opacity-0 { @media (width >= 40rem) { opacity: 0%; } } .sm\:group-focus-within\:opacity-100 { @media (width >= 40rem) { &:is(:where(.group):focus-within *) { opacity: 100%; } } } .sm\:group-hover\:opacity-100 { @media (width >= 40rem) { &:is(:where(.group):hover *) { @media (hover: hover) { opacity: 100%; } } } } .md\:block { @media (width >= 48rem) { display: block; } } .md\:flex { @media (width >= 48rem) { display: flex; } } .md\:inline { @media (width >= 48rem) { display: inline; } } .md\:max-w-3xl { @media (width >= 48rem) { max-width: var(--container-3xl); } } .md\:max-w-\[360px\] { @media (width >= 48rem) { max-width: 360px; } } .md\:grid-cols-2 { @media (width >= 48rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .md\:grid-cols-3 { @media (width >= 48rem) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .md\:grid-cols-\[240px_minmax\(0\,1fr\)\] { @media (width >= 48rem) { grid-template-columns: 240px minmax(0,1fr); } } .md\:grid-cols-\[minmax\(180px\,0\.72fr\)_minmax\(0\,1fr\)\] { @media (width >= 48rem) { grid-template-columns: minmax(180px,0.72fr) minmax(0,1fr); } } .md\:grid-cols-\[repeat\(4\,minmax\(0\,1fr\)\)\] { @media (width >= 48rem) { grid-template-columns: repeat(4,minmax(0,1fr)); } } .md\:flex-row { @media (width >= 48rem) { flex-direction: row; } } .md\:items-center { @media (width >= 48rem) { align-items: center; } } .md\:justify-between { @media (width >= 48rem) { justify-content: space-between; } } .md\:border-r { @media (width >= 48rem) { border-right-style: var(--tw-border-style); border-right-width: 1px; } } .md\:border-b-0 { @media (width >= 48rem) { border-bottom-style: var(--tw-border-style); border-bottom-width: 0px; } } .md\:px-6 { @media (width >= 48rem) { padding-inline: calc(var(--spacing) * 6); } } .md\:text-lg { @media (width >= 48rem) { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } } .md\:text-\[2rem\] { @media (width >= 48rem) { font-size: 2rem; } } .lg\:columns-4 { @media (width >= 64rem) { columns: 4; } } .lg\:grid-cols-2 { @media (width >= 64rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .lg\:grid-cols-3 { @media (width >= 64rem) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .lg\:grid-cols-4 { @media (width >= 64rem) { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .lg\:grid-cols-\[minmax\(0\,1\.2fr\)_minmax\(0\,0\.8fr\)\] { @media (width >= 64rem) { grid-template-columns: minmax(0,1.2fr) minmax(0,0.8fr); } } .lg\:grid-cols-\[repeat\(4\,minmax\(0\,1fr\)\)\] { @media (width >= 64rem) { grid-template-columns: repeat(4,minmax(0,1fr)); } } .lg\:flex-row { @media (width >= 64rem) { flex-direction: row; } } .lg\:items-center { @media (width >= 64rem) { align-items: center; } } .lg\:items-end { @media (width >= 64rem) { align-items: flex-end; } } .lg\:items-start { @media (width >= 64rem) { align-items: flex-start; } } .lg\:justify-between { @media (width >= 64rem) { justify-content: space-between; } } .lg\:px-10 { @media (width >= 64rem) { padding-inline: calc(var(--spacing) * 10); } } .xl\:max-w-xs { @media (width >= 80rem) { max-width: var(--container-xs); } } .xl\:grid-cols-4 { @media (width >= 80rem) { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .xl\:grid-cols-\[repeat\(4\,minmax\(0\,1fr\)\)\] { @media (width >= 80rem) { grid-template-columns: repeat(4,minmax(0,1fr)); } } .xl\:grid-cols-\[repeat\(5\,minmax\(0\,1fr\)\)\] { @media (width >= 80rem) { grid-template-columns: repeat(5,minmax(0,1fr)); } } .xl\:flex-row { @media (width >= 80rem) { flex-direction: row; } } .xl\:items-center { @media (width >= 80rem) { align-items: center; } } .xl\:px-8 { @media (width >= 80rem) { padding-inline: calc(var(--spacing) * 8); } } .xl\:text-xs { @media (width >= 80rem) { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } } .\32 xl\:columns-6 { @media (width >= 96rem) { columns: 6; } } .\32 xl\:grid-cols-5 { @media (width >= 96rem) { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .\32 xl\:grid-cols-\[repeat\(6\,minmax\(0\,1fr\)\)\] { @media (width >= 96rem) { grid-template-columns: repeat(6,minmax(0,1fr)); } } .pointer-coarse\:h-11 { @media (pointer: coarse) { height: calc(var(--spacing) * 11); } } .\[\@media\(max-width\:479px\)\]\:hidden { @media (max-width:479px) { display: none; } } .\[\@media\(max-width\:479px\)\]\:w-9 { @media (max-width:479px) { width: calc(var(--spacing) * 9); } } .\[\@media\(max-width\:479px\)\]\:w-auto { @media (max-width:479px) { width: auto; } } .\[\@media\(max-width\:479px\)\]\:w-full { @media (max-width:479px) { width: 100%; } } .\[\@media\(max-width\:479px\)\]\:max-w-\[118px\] { @media (max-width:479px) { max-width: 118px; } } .\[\@media\(max-width\:599px\)\]\:order-3 { @media (max-width:599px) { order: 3; } } .\[\@media\(max-width\:599px\)\]\:basis-full { @media (max-width:599px) { flex-basis: 100%; } } .\[\@media\(min-width\:480px\)\]\:hidden { @media (min-width:480px) { display: none; } } .\[\@media\(pointer\:coarse\)\]\:h-11 { @media (pointer:coarse) { height: calc(var(--spacing) * 11); } } .\[\@media\(pointer\:coarse\)\]\:min-h-11 { @media (pointer:coarse) { min-height: calc(var(--spacing) * 11); } } .\[\@media\(pointer\:coarse\)\]\:w-11 { @media (pointer:coarse) { width: calc(var(--spacing) * 11); } } .\[\@media\(pointer\:coarse\)\]\:w-\[128px\] { @media (pointer:coarse) { width: 128px; } } .\[\@media\(pointer\:coarse\)\]\:min-w-11 { @media (pointer:coarse) { min-width: calc(var(--spacing) * 11); } } .\[\@media\(pointer\:coarse\)\]\:pr-11 { @media (pointer:coarse) { padding-right: calc(var(--spacing) * 11); } } .\[\@media\(pointer\:coarse\)\]\:opacity-100 { @media (pointer:coarse) { opacity: 100%; } } } :root { --font-body: "Manrope"; --font-serif: "Cormorant Garamond"; --landing-bg: #111111; --landing-card: #161616; --landing-line: rgba(255, 255, 255, 0.10); --landing-line-soft: rgba(255, 255, 255, 0.08); --landing-text: #f7f7f7; --landing-muted: #9d9d9d; --studio-bg: #111111; --studio-panel: #161616; --studio-panel-2: #141414; --studio-highlight: #1e1e1e; --studio-accent: #888888; --studio-accent-soft: rgba(136, 136, 136, 0.14); --studio-line: rgba(255, 255, 255, 0.10); --studio-line-soft: rgba(255, 255, 255, 0.06); --studio-text: rgba(255, 255, 255, 0.88); --studio-muted: rgba(255, 255, 255, 0.50); --studio-subtle: rgba(255, 255, 255, 0.68); --studio-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); --studio-gold: #ffffff; } * { box-sizing: border-box; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } *:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.6); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body { margin: 0; font-family: var(--font-body), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--landing-bg); color: var(--landing-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } .landing-root { background: #000; color: #fff; min-height: 100vh; --landing-accent-font: var(--font-serif), Georgia, serif; --landing-scale-hero-title: 1; --landing-scale-hero-subheadline: 1; --landing-scale-section-title: 1; --landing-scale-body: 1; } .landing-container { width: min(1400px, calc(100% - 48px)); margin: 0 auto; } .landing-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 110; background: rgba(17, 17, 17, 0.92); backdrop-filter: blur(10px); } .landing-header-inner { height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .landing-brand { display: inline-flex; align-items: center; } .landing-brand img { height: 30px; width: auto; object-fit: contain; filter: brightness(1.04); } .landing-brand-text { display: inline-flex; align-items: center; height: 30px; font-family: var(--landing-accent-font); font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: #fff; } .landing-nav { display: flex; align-items: center; gap: 34px; } .landing-nav a { color: rgba(255, 255, 255, 0.55); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; text-decoration: none; transition: color 0.2s ease; } .landing-nav a:hover { color: #ffffff; } .landing-header-cta { height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--landing-line); display: inline-flex; align-items: center; font-size: 13px; font-weight: 700; color: #fff; text-decoration: none; transition: border-color 0.2s ease; } .landing-header-actions { display: flex; align-items: center; gap: 10px; position: relative; } .landing-header-cta-primary { background: #ffffff; color: #000000; border-color: rgba(255, 255, 255, 0.18); } .landing-header-cta-ghost { background: transparent; } .landing-header-cta:hover { border-color: rgba(255, 255, 255, 0.35); } .landing-mobile-menu { display: none; } .landing-mobile-menu-details { position: relative; } .landing-mobile-menu-details summary::-webkit-details-marker { display: none; } .landing-mobile-menu-toggle { list-style: none; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--landing-line); display: inline-flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; cursor: pointer; background: transparent; } .landing-mobile-menu-toggle span { display: block; width: 14px; height: 1.5px; border-radius: 999px; background: #ffffff; } .landing-mobile-menu-panel { position: absolute; top: calc(100% + 10px); right: 0; min-width: 180px; border-radius: 12px; border: 1px solid var(--landing-line); background: #070707; padding: 8px; display: grid; gap: 4px; z-index: 140; } .landing-mobile-menu-panel a { display: block; border-radius: 8px; padding: 9px 10px; font-size: 12px; color: #e5e5e5; transition: background 0.2s ease, color 0.2s ease; } .landing-mobile-menu-panel a:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; } .landing-hero { padding: 140px 0 94px; } .landing-hero-head { max-width: 1020px; margin: 0 auto; text-align: center; } .landing-hero-title { margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: clamp(calc(2.05rem * var(--landing-scale-hero-title)), calc(5.2vw * var(--landing-scale-hero-title)), calc(4.45rem * var(--landing-scale-hero-title))); line-height: 0.96; letter-spacing: -0.03em; font-weight: 700; } .landing-hero-title-accent { font-family: var(--landing-accent-font); font-style: italic; font-weight: 500; color: #f5f5f5; letter-spacing: -0.015em; } .landing-hero-subheadline { margin: 30px auto 0; max-width: 860px; font-size: clamp(calc(1rem * var(--landing-scale-hero-subheadline)), calc(1.9vw * var(--landing-scale-hero-subheadline)), calc(1.35rem * var(--landing-scale-hero-subheadline))); color: #dedede; line-height: 1.4; font-weight: 500; } .landing-hero-microline { margin: 18px auto 0; color: var(--landing-muted); font-size: calc(1rem * var(--landing-scale-body)); max-width: 640px; } .landing-prompt-ui { margin: 34px auto 0; max-width: 840px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.14); background: linear-gradient(180deg, #101010 0%, #070707 100%); padding: 16px; text-align: left; display: grid; gap: 12px; box-shadow: 0 18px 46px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .landing-prompt-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .landing-prompt-label { color: #d8d8d8; text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; font-weight: 700; } .landing-prompt-chips { display: flex; align-items: center; gap: 8px; } .landing-prompt-chip { border: 1px solid rgba(255, 255, 255, 0.17); border-radius: 999px; padding: 4px 8px; font-size: 11px; color: #e5e5e5; } .landing-prompt-line { min-height: 31px; display: flex; align-items: center; gap: 8px; color: #fff; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .landing-typing-cursor { width: 1px; height: 18px; background: rgba(255, 255, 255, 0.92); animation: landing-blink 1s steps(1) infinite; } .landing-prompt-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .landing-prompt-meta { display: inline-flex; align-items: center; gap: 8px; color: var(--landing-muted); font-size: 12px; font-weight: 600; } .landing-prompt-dot { width: 6px; height: 6px; border-radius: 50%; background: #ffffff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.09); } .landing-prompt-btn { height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22); background: #ffffff; color: #000; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; cursor: pointer; transition: transform 0.2s ease; } .landing-prompt-btn:hover { transform: translateY(-1px); } .landing-media-grid { margin-top: 72px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; } .landing-grid-item { position: relative; border-radius: 13px; border: 1px solid var(--landing-line-soft); overflow: hidden; background: var(--landing-card); } .landing-grid-item img, .landing-grid-item video { width: 100%; height: 100%; object-fit: cover; } .landing-media-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.025); } .landing-overlay-label { position: absolute; top: 14px; left: 14px; z-index: 3; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 10px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(0, 0, 0, 0.45); color: #fff; } .span-6 { grid-column: span 6; aspect-ratio: 16 / 9; } .span-3 { grid-column: span 3; aspect-ratio: 1 / 1; } .span-4 { grid-column: span 4; aspect-ratio: 4 / 5; } .span-3-portrait { grid-column: span 3; aspect-ratio: 9 / 16; } .span-6-portrait { grid-column: span 6; aspect-ratio: 29 / 25; } .landing-section { padding: 92px 0; } .landing-section-head { text-align: center; max-width: 860px; margin: 0 auto 56px; } .landing-section-head h2 { margin: 0; font-size: clamp(calc(2rem * var(--landing-scale-section-title)), calc(4.2vw * var(--landing-scale-section-title)), calc(3.15rem * var(--landing-scale-section-title))); letter-spacing: -0.02em; line-height: 1.03; } .landing-section-head p { margin: 18px auto 0; color: var(--landing-muted); max-width: 700px; font-size: calc(1.06rem * var(--landing-scale-body)); } .landing-ugc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .ugc-card { aspect-ratio: 9 / 16; } .landing-results { padding-top: 110px; } .landing-results-card { max-width: 860px; margin: 0 auto; padding: 56px; border: 1px solid var(--landing-line); border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)); text-align: center; } .landing-results-card h2 { margin: 0; font-size: clamp(calc(2rem * var(--landing-scale-section-title)), calc(4vw * var(--landing-scale-section-title)), calc(3rem * var(--landing-scale-section-title))); letter-spacing: -0.02em; } .landing-results-card p { margin: 16px auto 0; color: var(--landing-muted); max-width: 620px; font-size: calc(1rem * var(--landing-scale-body)); } .landing-results-actions { margin-top: 30px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; } .waitlist { margin-top: 26px; border-top: 1px solid var(--landing-line-soft); padding-top: 22px; display: grid; gap: 12px; } .waitlist-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .waitlist-head strong { font-size: 0.95rem; letter-spacing: -0.01em; } .waitlist-meta { color: var(--landing-muted); font-size: 12px; } .waitlist-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; } .waitlist-label { font-size: 12px; color: var(--landing-muted); } .waitlist-row input { height: 46px; border-radius: 999px; border: 1px solid var(--landing-line); background: rgba(255, 255, 255, 0.03); color: #fff; padding: 0 18px; font-size: 14px; } .waitlist-row input:focus { outline: none; border-color: rgba(255, 255, 255, 0.4); } .waitlist-row input:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 2px; } .waitlist-row button { height: 46px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18); background: #ffffff; color: #000000; font-size: 13px; font-weight: 800; padding: 0 20px; cursor: pointer; } .waitlist-row button:disabled { opacity: 0.7; cursor: not-allowed; } .waitlist-message { margin: 0; font-size: 12px; color: var(--landing-muted); } .waitlist-message.ok { color: rgba(186, 242, 200, 0.96); } .waitlist-message.error { color: rgba(255, 177, 177, 0.96); } @media (max-width: 720px) { .waitlist-row { grid-template-columns: 1fr; gap: 10px; } .waitlist-label { display: none; } .waitlist-row input, .waitlist-row button { width: 100%; } } .landing-btn { height: 48px; border-radius: 999px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; } .landing-btn-primary { background: #fff; color: #000; } .landing-btn-ghost { border: 1px solid var(--landing-line); color: #f4f4f4; } .landing-footer { margin-top: 96px; padding: 42px 0 54px; border-top: 1px solid rgba(255, 255, 255, 0.07); } .landing-footer-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; color: rgba(255, 255, 255, 0.55); font-size: 13px; } .landing-footer-links { display: flex; align-items: center; gap: 20px; } .landing-footer-links a:hover { color: #fff; } @keyframes landing-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .admin-login-page { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at 20% 0, #101010 0%, #000 62%); padding: 24px; } .admin-login-card { width: min(460px, 100%); background: #0b0b0b; border: 1px solid var(--landing-line); border-radius: 14px; padding: 28px; box-shadow: 0 24px 52px rgba(0, 0, 0, 0.45); } .admin-login-card h1 { margin: 0; font-size: 1.6rem; } .admin-login-card p { margin: 10px 0 22px; color: var(--landing-muted); } .admin-login-card form { display: grid; gap: 14px; } .admin-login-card label { display: grid; gap: 8px; color: #d2d2d2; font-size: 13px; } .admin-login-card input { height: 42px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.14); background: #040404; color: #fff; padding: 0 12px; } .admin-login-card button { height: 44px; border-radius: 999px; border: 0; font-weight: 700; background: #fff; color: #000; cursor: pointer; } .admin-login-card button:disabled { opacity: 0.6; cursor: not-allowed; } .admin-login-error { margin: 0; color: #cccccc; font-size: 13px; font-weight: 600; } .studio-app-root { min-height: 100vh; background: var(--studio-bg); color: var(--studio-text); } html[data-studio-theme="light"] .studio-app-root { --studio-bg: #f2f2f2; --studio-panel: #ffffff; --studio-panel-2: #f3f3f3; --studio-line: rgba(20, 20, 20, 0.15); --studio-line-soft: rgba(20, 20, 20, 0.08); --studio-text: rgba(16, 16, 16, 0.92); --studio-muted: rgba(16, 16, 16, 0.62); --studio-subtle: rgba(16, 16, 16, 0.8); --studio-shadow: 0 8px 22px rgba(20, 20, 20, 0.08); --studio-gold: #0b0b0b; background: radial-gradient(circle at 20% 0, rgba(0, 0, 0, 0.025), transparent 55%), radial-gradient(circle at 78% 8%, rgba(0, 0, 0, 0.015), transparent 55%), var(--studio-bg); } .studio-app-grain { position: fixed; inset: 0; pointer-events: none; opacity: 0.02; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); z-index: 2; } .studio-app-header { position: fixed; top: 0; left: 0; width: 100%; height: 70px; z-index: 80; background: rgba(17, 17, 17, 0.92); backdrop-filter: blur(10px); } html[data-studio-theme="light"] .studio-app-header { background: rgba(242, 242, 242, 0.92); } .studio-app-header-inner { height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 18px; } .studio-app-brand { display: inline-flex; align-items: center; filter: brightness(1.04); } .studio-app-logo { height: 30px; width: auto; object-fit: contain; } .studio-app-topnav { display: flex; align-items: center; gap: 34px; } .studio-app-toplink { color: #b3b3b3; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; transition: color 0.2s ease; } .studio-app-toplink:hover { color: #ffffff; } .studio-app-toplink.is-active { color: #ffffff; } html[data-studio-theme="light"] .studio-app-toplink { color: rgba(10, 10, 10, 0.62); } html[data-studio-theme="light"] .studio-app-toplink:hover, html[data-studio-theme="light"] .studio-app-toplink.is-active { color: rgba(10, 10, 10, 0.92); } .studio-app-header-actions { display: flex; align-items: center; gap: 10px; } .studio-app-pill { height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--studio-line-soft); background: rgba(255, 255, 255, 0.06); color: var(--studio-text); display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; cursor: pointer; transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease; } html[data-studio-theme="light"] .studio-app-pill { background: rgba(0, 0, 0, 0.04); } .studio-app-pill:hover { transform: translateY(-1px); border-color: var(--studio-line); } .studio-theme-toggle { padding: 3px; gap: 4px; } .studio-theme-seg { height: 30px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--studio-muted); transition: background 0.18s ease, color 0.18s ease; } html:not([data-studio-theme="light"]) .studio-theme-toggle .is-dark { background: rgba(255, 255, 255, 0.12); color: var(--studio-text); } html[data-studio-theme="light"] .studio-theme-toggle .is-light { background: rgba(0, 0, 0, 0.06); color: var(--studio-text); } .studio-app-pill-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--studio-gold); box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.14); } .studio-app-menu { display: none; } .studio-app-menu-line { width: 16px; height: 2px; border-radius: 999px; background: currentColor; display: block; opacity: 0.9; } .studio-app-menu-line+.studio-app-menu-line { margin-top: 5px; opacity: 0.7; } .studio-app-main { min-height: 100vh; padding: 122px 0 84px; position: relative; z-index: 3; } .studio-app-main-inner { padding: 0; } .studio-onboarding-title { margin: 0; font-size: 13px; font-weight: 900; letter-spacing: -0.01em; } .studio-h1 { margin: 6px 0 0; font-size: clamp(1.4rem, 2.2vw, 1.85rem); letter-spacing: -0.02em; line-height: 1.1; font-weight: 700; } .studio-h1 .studio-h1-accent { font-family: inherit; font-style: normal; font-weight: 500; color: var(--studio-text); } .studio-page-head { display: grid; gap: 12px; margin-bottom: 14px; } .studio-dashboard-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; margin-bottom: 20px; } .studio-dashboard-left { display: grid; align-content: start; gap: 14px; } .studio-dashboard-right { display: grid; align-content: start; } .studio-dashboard-title { margin: 10px 0 0; font-size: clamp(2.1rem, 3.9vw, 3.25rem); letter-spacing: -0.035em; line-height: 0.98; font-weight: 800; } .studio-dashboard-title-accent { font-family: var(--font-serif), Georgia, serif; font-style: italic; font-weight: 500; color: var(--studio-text); letter-spacing: -0.015em; } .studio-dashboard-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; } .studio-dashboard-hero-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; } .studio-dashboard-composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .studio-dashboard-mode { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; } .studio-dashboard-media-grid { gap: 16px; } @media (max-width: 980px) { .studio-dashboard-hero { grid-template-columns: 1fr; } } .studio-btn { height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--studio-line-soft); display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; font-weight: 800; cursor: pointer; transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease; } .studio-btn:hover { transform: translateY(-1px); border-color: var(--studio-line); } .studio-btn-secondary { background: rgba(255, 255, 255, 0.06); color: var(--studio-text); } .studio-btn-ghost { background: transparent; color: var(--studio-text); } .studio-badge-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--studio-gold); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12); } html[data-studio-theme="light"] .studio-row { background: rgba(0, 0, 0, 0.03); } html[data-studio-theme="light"] .status-completed, html[data-studio-theme="light"] .status-needs_review { background: rgba(0, 0, 0, 0.05); } .studio-stepper { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .studio-step { height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--studio-line-soft); color: var(--studio-muted); font-size: 12px; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(255, 255, 255, 0.03); } .studio-step.is-active { color: var(--studio-text); border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.08); } .studio-composer { border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.14); background: var(--studio-panel); box-shadow: var(--studio-shadow); padding: 16px; display: grid; gap: 12px; } html[data-studio-theme="light"] .studio-composer { border-color: rgba(10, 10, 10, 0.14); background: linear-gradient(180deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.01)); } .studio-composer-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .studio-composer-label { color: var(--studio-subtle); text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; font-weight: 900; } .studio-composer-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .studio-chip { border: 1px solid var(--studio-line-soft); border-radius: 999px; padding: 5px 10px; font-size: 11px; color: var(--studio-subtle); background: rgba(255, 255, 255, 0.03); font-weight: 850; } .studio-composer-area { position: relative; border-radius: 14px; border: 1px solid var(--studio-line-soft); background: rgba(0, 0, 0, 0.35); padding: 12px; overflow: hidden; } html[data-studio-theme="light"] .studio-composer-area { background: rgba(255, 255, 255, 0.65); } .studio-composer-placeholder { position: absolute; top: 12px; left: 12px; right: 12px; color: var(--studio-muted); font-size: 14px; line-height: 1.4; font-weight: 650; pointer-events: none; font-family: var(--font-body), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; opacity: 0.9; } .studio-composer-textarea { width: 100%; min-height: 84px; resize: vertical; border: 0; background: transparent; color: var(--studio-text); font-size: 14px; line-height: 1.4; font-weight: 650; font-family: var(--font-body), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .studio-composer-textarea:focus { outline: none; } .studio-composer-textarea:focus-visible { outline: 2px solid rgba(136, 136, 136, 0.5); outline-offset: -2px; border-radius: 10px; } .studio-composer-textarea::placeholder { color: transparent; } .studio-composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .studio-composer-meta { display: inline-flex; align-items: center; gap: 10px; color: var(--studio-muted); font-size: 12px; font-weight: 800; } .studio-composer-meta-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--studio-gold); box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.12); } .studio-divider { height: 1px; width: 100%; background: var(--studio-line-soft); margin: 18px 0; } .studio-option-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .studio-step-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .studio-stepcard { text-align: left; border-radius: 16px; border: 1px solid var(--studio-line-soft); background: rgba(255, 255, 255, 0.03); padding: 14px; cursor: pointer; color: var(--studio-text); display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: center; transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease; } .studio-stepcard:hover { transform: translateY(-1px); border-color: var(--studio-line); background: rgba(255, 255, 255, 0.05); } .studio-stepcard.is-selected { border-color: rgba(255, 255, 255, 0.22); background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02)); } html[data-studio-theme="light"] .studio-stepcard-icon { background: rgba(255, 255, 255, 0.7); } .studio-stepcard-title { margin: 0; font-size: 13px; font-weight: 950; letter-spacing: -0.01em; } .studio-stepcard-desc { margin: 6px 0 0; font-size: 12px; font-weight: 650; color: var(--studio-muted); line-height: 1.35; } .studio-option { text-align: left; border-radius: 16px; border: 1px solid var(--studio-line-soft); background: rgba(255, 255, 255, 0.03); padding: 14px; cursor: pointer; color: var(--studio-text); transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease; } .studio-option:hover { transform: translateY(-1px); border-color: var(--studio-line); background: rgba(255, 255, 255, 0.05); } .studio-option.is-selected { border-color: rgba(255, 255, 255, 0.22); background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)); } .studio-option-title { margin: 0; font-size: 13px; font-weight: 900; letter-spacing: -0.01em; } .studio-option-desc { margin: 8px 0 0; color: var(--studio-muted); font-size: 12px; line-height: 1.35; font-weight: 650; } .studio-gen-tabs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .studio-gen-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; padding-bottom: 110px; } .studio-gen-left, .studio-gen-right { min-width: 0; } .studio-sidepanel { display: grid; gap: 14px; position: sticky; top: 92px; } .studio-sidepanel input[type="checkbox"] { width: 18px; height: 18px; accent-color: #ffffff; } html[data-studio-theme="light"] .studio-sidepanel input[type="checkbox"] { accent-color: #000000; } @media (max-width: 980px) { .studio-gen-layout { grid-template-columns: 1fr; } .studio-sidepanel { position: static; top: auto; } .studio-app-menu { display: inline-flex; } .studio-app-topnav { display: none; position: fixed; top: 70px; left: 0; right: 0; padding: 18px 24px 22px; flex-direction: column; gap: 14px; background: rgba(0, 0, 0, 0.94); backdrop-filter: blur(12px); border-bottom: 1px solid var(--studio-line-soft); z-index: 85; } html[data-studio-theme="light"] .studio-app-topnav { background: rgba(242, 242, 242, 0.97); } .studio-app-topnav.is-open { display: flex; } .studio-app-main { padding: 112px 0 74px; } .studio-grid-2, .studio-grid-3, .studio-grid-4 { grid-template-columns: 1fr; } .studio-option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .studio-thumbgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .studio-stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 88; border-top: 1px solid var(--studio-line-soft); background: rgba(0, 0, 0, 0.86); backdrop-filter: blur(12px); } html[data-studio-theme="light"] .studio-stickybar { background: rgba(242, 242, 242, 0.92); } .studio-stickybar-inner { padding: 12px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .studio-stickybar-left { min-width: 0; display: grid; gap: 6px; } .studio-stickybar-title { font-size: 13px; font-weight: 950; letter-spacing: -0.01em; } .studio-stickybar-meta { font-size: 12px; font-weight: 750; color: var(--studio-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62vw; } @media (max-width: 780px) { .studio-stickybar-inner { flex-direction: column; align-items: stretch; } .studio-stickybar-meta { max-width: none; } .studio-stickybar .studio-actions { justify-content: space-between; } .studio-stickybar .studio-btn { flex: 1; justify-content: center; } } @media (max-width: 980px) { .studio-step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .studio-step-grid { grid-template-columns: 1fr; } } .admin-login-error { margin: 0; color: #999999; font-size: 13px; } .editor-shell { width: min(1180px, calc(100% - 40px)); margin: 24px auto 60px; color: #f5f5f5; } .editor-shell.wide { width: min(1680px, calc(100% - 40px)); } .editor-layout { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 18px; align-items: start; } .editor-pane { min-width: 0; } .editor-preview { position: sticky; top: 24px; height: calc(100vh - 48px); border: 1px solid var(--landing-line); border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65); } .editor-preview-scroll { height: 100%; overflow: auto; } .editor-preview-scroll .landing-header { position: sticky; top: 0; left: 0; } .editor-preview-scroll .landing-root { min-height: auto; } .editor-preview-scroll [data-editor-selectable="true"] { cursor: pointer; } .editor-preview-scroll [data-editor-scope][data-editor-selectable="true"]:hover { outline: 2px solid rgba(255, 255, 255, 0.22); outline-offset: -2px; } .editor-preview-scroll [data-editor-block][data-editor-selectable="true"]:hover { outline: 2px solid rgba(255, 255, 255, 0.18); outline-offset: -2px; border-radius: 16px; } .editor-preview-scroll [data-editor-scope][data-editor-selected="true"] { outline: 2px solid rgba(255, 255, 255, 0.85); outline-offset: -2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55) inset; } .editor-preview-scroll [data-editor-block][data-editor-selected="true"] { outline: 2px solid rgba(255, 255, 255, 0.85); outline-offset: -2px; border-radius: 16px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55) inset; } .editor-preview-scroll section[data-editor-section-id]:hover>.landing-container { outline: 2px solid rgba(255, 255, 255, 0.16); outline-offset: -2px; border-radius: 16px; } .editor-preview-scroll section[data-editor-selected="true"]>.landing-container { outline: 2px solid rgba(255, 255, 255, 0.85); outline-offset: -2px; border-radius: 16px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55) inset; } .editor-preview-scroll section[data-editor-selected="true"] { outline: none; } .editor-preview-scroll section[data-editor-selected="true"]:focus-visible { outline: 2px solid rgba(136, 136, 136, 0.5); outline-offset: 2px; border-radius: 8px; } .editor-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; } .editor-topbar h1 { margin: 0; font-size: 1.6rem; } .editor-topbar p { margin: 8px 0 0; color: var(--landing-muted); } .editor-topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .editor-updated { color: var(--landing-muted); font-size: 12px; } .editor-banner { margin: 0 0 18px; padding: 10px 12px; border-radius: 10px; font-size: 13px; } .editor-banner.ok { border: 1px solid rgba(55, 210, 128, 0.5); background: rgba(55, 210, 128, 0.08); } .editor-banner.error { border: 1px solid rgba(255, 106, 106, 0.5); background: rgba(255, 106, 106, 0.08); } .editor-section { margin-top: 18px; border: 1px solid var(--landing-line); border-radius: 14px; background: #090909; padding: 18px; } .editor-section.is-selected { border-color: rgba(255, 255, 255, 0.45); box-shadow: 0 18px 46px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .editor-collapsible { padding: 0; } .editor-collapsible summary::-webkit-details-marker { display: none; } .editor-collapsible summary { list-style: none; } .editor-collapsible-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; cursor: pointer; } .editor-collapsible-summary-left { min-width: 0; display: grid; gap: 6px; } .editor-collapsible-meta { margin: 0; color: var(--landing-muted); font-size: 12px; line-height: 1.3; } .editor-collapsible-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .editor-collapsible-icon { width: 11px; height: 11px; margin-top: 6px; border-right: 2px solid rgba(255, 255, 255, 0.6); border-bottom: 2px solid rgba(255, 255, 255, 0.6); transform: rotate(45deg); opacity: 0.75; transition: transform 0.18s ease, opacity 0.18s ease; flex: 0 0 auto; } .editor-collapsible[open]>summary .editor-collapsible-icon { transform: rotate(225deg); opacity: 1; } .editor-collapsible-card[open]>summary .editor-collapsible-icon { transform: rotate(225deg); opacity: 1; } .editor-collapsible>summary.editor-collapsible-summary { padding: 18px; } .editor-collapsible[open]>summary.editor-collapsible-summary { border-bottom: 1px solid var(--landing-line-soft); } .editor-collapsible>.editor-collapsible-body { padding: 0 18px 18px; } .editor-section h2 { margin: 0; font-size: 1.1rem; } .editor-section h3 { margin: 0; font-size: 0.95rem; color: #f0f0f0; } .editor-section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .editor-grid-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; } .editor-grid-two label { display: grid; gap: 6px; font-size: 12px; color: #cfcfcf; } .editor-grid-two input, .editor-grid-two textarea, .editor-grid-two select { width: 100%; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 10px; background: #030303; color: #fff; padding: 9px 10px; font-family: inherit; font-size: 13px; } .editor-grid-two textarea { resize: vertical; } .editor-span-full { grid-column: 1 / -1; } .editor-cards { margin-top: 12px; display: grid; gap: 10px; } .editor-cards.compact { margin-top: 10px; } .editor-card { border: 1px solid var(--landing-line); border-radius: 12px; background: #111111; padding: 12px; } .editor-collapsible-card { padding: 0; } .editor-collapsible-card summary::-webkit-details-marker { display: none; } .editor-collapsible-card summary { list-style: none; } .editor-collapsible-card>summary.editor-collapsible-summary { padding: 12px; } .editor-collapsible-card[open]>summary.editor-collapsible-summary { border-bottom: 1px solid var(--landing-line-soft); } .editor-collapsible-card>.editor-collapsible-body { padding: 0 12px 12px; } .editor-card-title { font-size: 0.95rem; letter-spacing: -0.01em; } .editor-card-meta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .editor-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.05); color: #e9e9e9; font-size: 11px; font-weight: 800; letter-spacing: 0.02em; } .editor-pill.mono { font-family: JetBrains Mono, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; color: var(--landing-muted); } .editor-pill.pill-ugc { background: rgba(86, 194, 255, 0.12); border-color: rgba(86, 194, 255, 0.35); } .editor-pill.pill-media { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.18); } .editor-card.is-selected { border-color: rgba(255, 255, 255, 0.45); box-shadow: 0 18px 46px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .editor-card.is-selected .editor-media-thumb { border-color: rgba(255, 255, 255, 0.28); } .editor-card.nested { background: #030303; } .editor-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .editor-card-head strong { font-size: 0.9rem; } .editor-media-thumb { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; overflow: hidden; background: #000; margin-bottom: 10px; position: relative; } .editor-media-thumb img, .editor-media-thumb video { width: 100%; height: 100%; object-fit: cover; } .editor-media-thumb.placeholder { display: flex; align-items: center; justify-content: center; color: var(--landing-muted); font-size: 12px; padding: 18px 12px; } .editor-media-tag { position: absolute; top: 10px; left: 10px; z-index: 2; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 9px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(8px); color: #fff; } .editor-link-danger { color: #999999; background: transparent; border: 0; cursor: pointer; font-size: 12px; } .editor-inline-buttons { display: inline-flex; gap: 8px; } .editor-btn { height: 36px; border-radius: 999px; border: 1px solid var(--landing-line); background: transparent; color: #fff; font-size: 12px; font-weight: 700; padding: 0 14px; cursor: pointer; } .editor-btn.primary { background: #fff; color: #000; border-color: #fff; } .editor-btn.ghost { background: #0a0a0a; } .editor-btn.ghost.danger { border-color: rgba(255, 106, 106, 0.35); background: rgba(255, 106, 106, 0.08); color: rgba(255, 177, 177, 0.98); } .editor-btn.ghost:hover { border-color: rgba(255, 255, 255, 0.3); } .editor-btn.ghost.danger:hover { border-color: rgba(255, 106, 106, 0.65); } .editor-btn:disabled { opacity: 0.6; cursor: not-allowed; } .editor-mini-note { margin: 6px 0 0; font-size: 12px; color: var(--landing-muted); } .editor-assistant-subtitle { margin: 8px 0 0; font-size: 13px; color: var(--landing-muted); } .editor-assistant-field { display: grid; gap: 6px; margin-top: 12px; font-size: 12px; color: #cfcfcf; } .editor-assistant-field textarea { width: 100%; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 10px; background: #030303; color: #fff; padding: 10px 12px; font-family: inherit; font-size: 13px; resize: vertical; } .editor-assistant-error { margin: 10px 0 0; color: #999999; font-size: 12px; } .editor-assistant-output { margin-top: 12px; border: 1px solid var(--landing-line); border-radius: 12px; background: #111111; padding: 12px; } .editor-assistant-summary { margin: 0; color: #efefef; font-size: 13px; } .editor-assistant-warnings { margin: 10px 0 0; padding-left: 18px; color: #cccccc; font-size: 12px; display: grid; gap: 4px; } .editor-assistant-operations { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 6px; color: #d7d7d7; font-size: 12px; } .editor-assistant-operations code { font-family: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace; font-size: 11.5px; color: #f2f2f2; } .ops-shell { width: min(1180px, calc(100% - 40px)); margin: 24px auto 60px; color: #f5f5f5; } .ops-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; } .ops-topbar h1 { margin: 0; font-size: 1.6rem; } .ops-topbar p { margin: 8px 0 0; color: var(--landing-muted); } .ops-topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .ops-compose-row { display: grid; grid-template-columns: 1.7fr 0.8fr; gap: 14px; align-items: start; margin-top: 12px; } .ops-compose-prompt { display: grid; gap: 6px; font-size: 12px; color: #cfcfcf; } .ops-compose-prompt textarea { width: 100%; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; background: #030303; color: #fff; padding: 12px; font-family: inherit; font-size: 13px; resize: vertical; } .ops-compose-controls { display: grid; gap: 10px; } .ops-compose-controls label { display: grid; gap: 6px; font-size: 12px; color: #cfcfcf; } .ops-compose-controls select { width: 100%; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 10px; background: #030303; color: #fff; padding: 9px 10px; font-family: inherit; font-size: 13px; } .ops-grid { display: grid; grid-template-columns: 0.95fr 1.55fr; gap: 14px; margin-top: 14px; align-items: start; } .ops-job-list { display: grid; gap: 10px; margin-top: 12px; } .ops-job { text-align: left; border: 1px solid var(--landing-line); border-radius: 12px; background: #111111; padding: 12px; cursor: pointer; color: #fff; } .ops-job:hover { border-color: rgba(255, 255, 255, 0.22); } .ops-job.active { border-color: rgba(255, 255, 255, 0.35); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); } .ops-job-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ops-job-row-left { display: flex; align-items: center; gap: 10px; } .ops-job-id { color: var(--landing-muted); font-size: 11px; font-family: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: 0.01em; } .ops-job-status { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px; font-size: 11px; font-weight: 800; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.06); letter-spacing: 0.02em; } .ops-job-status.status-queued { color: #e8e8e8; } .ops-job-status.status-running { color: #cccccc; border-color: rgba(204, 204, 204, 0.35); background: rgba(204, 204, 204, 0.08); } .ops-job-status.status-succeeded { color: #e8e8e8; border-color: rgba(232, 232, 232, 0.35); background: rgba(232, 232, 232, 0.08); } .ops-job-status.status-failed { color: #999999; border-color: rgba(153, 153, 153, 0.35); background: rgba(153, 153, 153, 0.08); } .ops-job-time { color: var(--landing-muted); font-size: 11px; } .ops-job-prompt { margin-top: 10px; font-size: 12px; color: #d7d7d7; line-height: 1.35; } .ops-detail-meta { color: var(--landing-muted); font-size: 12px; } .ops-detail-actions { display: flex; align-items: center; gap: 10px; } .ops-detail-body { margin-top: 12px; display: grid; gap: 12px; } .ops-detail-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .ops-detail-kv>div { border: 1px solid var(--landing-line); border-radius: 12px; background: #111111; padding: 10px 12px; display: grid; gap: 6px; } .ops-k { color: var(--landing-muted); font-size: 11px; } .ops-v { font-size: 13px; color: #f0f0f0; } .ops-v-mono { font-family: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12px; word-break: break-all; } .ops-error { margin: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(153, 153, 153, 0.5); background: rgba(153, 153, 153, 0.08); color: #999999; font-size: 12px; } .ops-subhead { margin: 0; font-size: 0.95rem; color: #f0f0f0; } .ops-pre { margin: 0; white-space: pre-wrap; word-break: break-word; border: 1px solid var(--landing-line); border-radius: 12px; background: #030303; padding: 12px; color: #eaeaea; font-family: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace; font-size: 11.5px; line-height: 1.45; max-height: 520px; overflow: auto; } @media (max-width: 1160px) { .landing-nav { display: none; } .landing-mobile-menu { display: block; } .landing-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .span-6, .span-3, .span-4, .span-3-portrait, .span-6-portrait { grid-column: span 1; } .span-6, .span-3, .span-4, .span-6-portrait { aspect-ratio: 4 / 5; } .span-3-portrait { aspect-ratio: 9 / 16; } .landing-ugc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .editor-topbar { flex-direction: column; } .ops-topbar { flex-direction: column; } } @media (max-width: 960px) { .landing-ugc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .landing-container { width: min(1400px, calc(100% - 28px)); } .landing-header-inner { min-height: 62px; height: auto; gap: 8px; } .landing-brand img { height: 24px; } .landing-header-actions { gap: 6px; flex-shrink: 0; } .landing-header-cta { display: inline-flex; height: 30px; padding: 0 10px; font-size: 11px; white-space: nowrap; } .landing-mobile-menu-toggle { width: 30px; height: 30px; } .landing-mobile-menu-toggle span { width: 12px; } .landing-hero { padding-top: 118px; } .landing-hero-title { gap: 6px; } .landing-prompt-ui { padding: 12px; border-radius: 13px; } .landing-prompt-line { font-size: 13px; } .landing-media-grid, .landing-ugc-grid { grid-template-columns: 1fr; gap: 14px; } .span-6, .span-3, .span-4, .span-3-portrait, .span-6-portrait, .ugc-card { grid-column: auto; aspect-ratio: 4 / 5; } .landing-footer-row { flex-direction: column; align-items: flex-start; } .editor-shell { width: calc(100% - 24px); } .editor-layout { grid-template-columns: 1fr; } .editor-preview { position: static; height: auto; } .editor-grid-two { grid-template-columns: 1fr; } .ops-shell { width: calc(100% - 24px); } .ops-compose-row { grid-template-columns: 1fr; } .ops-grid { grid-template-columns: 1fr; } .ops-detail-kv { grid-template-columns: 1fr; } } .mono { font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, Menlo, monospace; } .r-scroll::-webkit-scrollbar { width: 10px; height: 10px; } .r-scroll::-webkit-scrollbar-track { background: transparent; } .r-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.06); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } .r-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.12); background-clip: padding-box; border: 2px solid transparent; } .top-hi::before { content: ""; position: absolute; inset-inline: 0; top: -1px; height: 1px; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.20), transparent); pointer-events: none; } @keyframes ripli-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .shimmer { background-image: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.04) 50%, transparent 70%); background-size: 200% 100%; animation: ripli-shimmer 2.6s linear infinite; } @keyframes ripli-pulse-soft { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .pulse-soft { animation: ripli-pulse-soft 2.2s ease-in-out infinite; } @keyframes ripli-panel-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .panel-in { animation: ripli-panel-in 360ms cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes ripli-fade-in { from { opacity: 0; } to { opacity: 1; } } .fade-in { animation: ripli-fade-in 200ms ease-out both; } .placeholder-stripe { background-color: rgba(255, 255, 255, 0.015); background-image: repeating-linear-gradient( 135deg, rgba(255, 255, 255, 0.018) 0, rgba(255, 255, 255, 0.018) 1px, transparent 1px, transparent 9px ); } .inset-hi { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-rotate-x { syntax: "*"; inherits: false; } @property --tw-rotate-y { syntax: "*"; inherits: false; } @property --tw-rotate-z { syntax: "*"; inherits: false; } @property --tw-skew-x { syntax: "*"; inherits: false; } @property --tw-skew-y { syntax: "*"; inherits: false; } @property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-divide-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-gradient-position { syntax: "*"; inherits: false; } @property --tw-gradient-from { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-via { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-to { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-stops { syntax: "*"; inherits: false; } @property --tw-gradient-via-stops { syntax: "*"; inherits: false; } @property --tw-gradient-from-position { syntax: ""; inherits: false; initial-value: 0%; } @property --tw-gradient-via-position { syntax: ""; inherits: false; initial-value: 50%; } @property --tw-gradient-to-position { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-leading { syntax: "*"; inherits: false; } @property --tw-font-weight { syntax: "*"; inherits: false; } @property --tw-tracking { syntax: "*"; inherits: false; } @property --tw-ordinal { syntax: "*"; inherits: false; } @property --tw-slashed-zero { syntax: "*"; inherits: false; } @property --tw-numeric-figure { syntax: "*"; inherits: false; } @property --tw-numeric-spacing { syntax: "*"; inherits: false; } @property --tw-numeric-fraction { syntax: "*"; inherits: false; } @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-shadow-color { syntax: "*"; inherits: false; } @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-shadow-color { syntax: "*"; inherits: false; } @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-ring-color { syntax: "*"; inherits: false; } @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-ring-color { syntax: "*"; inherits: false; } @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-ring-inset { syntax: "*"; inherits: false; } @property --tw-ring-offset-width { syntax: ""; inherits: false; initial-value: 0px; } @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-blur { syntax: "*"; inherits: false; } @property --tw-brightness { syntax: "*"; inherits: false; } @property --tw-contrast { syntax: "*"; inherits: false; } @property --tw-grayscale { syntax: "*"; inherits: false; } @property --tw-hue-rotate { syntax: "*"; inherits: false; } @property --tw-invert { syntax: "*"; inherits: false; } @property --tw-opacity { syntax: "*"; inherits: false; } @property --tw-saturate { syntax: "*"; inherits: false; } @property --tw-sepia { syntax: "*"; inherits: false; } @property --tw-drop-shadow { syntax: "*"; inherits: false; } @property --tw-drop-shadow-color { syntax: "*"; inherits: false; } @property --tw-drop-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-drop-shadow-size { syntax: "*"; inherits: false; } @property --tw-backdrop-blur { syntax: "*"; inherits: false; } @property --tw-backdrop-brightness { syntax: "*"; inherits: false; } @property --tw-backdrop-contrast { syntax: "*"; inherits: false; } @property --tw-backdrop-grayscale { syntax: "*"; inherits: false; } @property --tw-backdrop-hue-rotate { syntax: "*"; inherits: false; } @property --tw-backdrop-invert { syntax: "*"; inherits: false; } @property --tw-backdrop-opacity { syntax: "*"; inherits: false; } @property --tw-backdrop-saturate { syntax: "*"; inherits: false; } @property --tw-backdrop-sepia { syntax: "*"; inherits: false; } @property --tw-duration { syntax: "*"; inherits: false; } @property --tw-ease { syntax: "*"; inherits: false; } @property --tw-content { syntax: "*"; initial-value: ""; inherits: false; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 50% { opacity: 0.5; } } @layer properties { @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { *, ::before, ::after, ::backdrop { --tw-translate-x: 0; --tw-translate-y: 0; --tw-translate-z: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scale-z: 1; --tw-rotate-x: initial; --tw-rotate-y: initial; --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; --tw-space-y-reverse: 0; --tw-divide-y-reverse: 0; --tw-border-style: solid; --tw-gradient-position: initial; --tw-gradient-from: #0000; --tw-gradient-via: #0000; --tw-gradient-to: #0000; --tw-gradient-stops: initial; --tw-gradient-via-stops: initial; --tw-gradient-from-position: 0%; --tw-gradient-via-position: 50%; --tw-gradient-to-position: 100%; --tw-leading: initial; --tw-font-weight: initial; --tw-tracking: initial; --tw-ordinal: initial; --tw-slashed-zero: initial; --tw-numeric-figure: initial; --tw-numeric-spacing: initial; --tw-numeric-fraction: initial; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; --tw-inset-shadow: 0 0 #0000; --tw-inset-shadow-color: initial; --tw-inset-shadow-alpha: 100%; --tw-ring-color: initial; --tw-ring-shadow: 0 0 #0000; --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #0000; --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-outline-style: solid; --tw-blur: initial; --tw-brightness: initial; --tw-contrast: initial; --tw-grayscale: initial; --tw-hue-rotate: initial; --tw-invert: initial; --tw-opacity: initial; --tw-saturate: initial; --tw-sepia: initial; --tw-drop-shadow: initial; --tw-drop-shadow-color: initial; --tw-drop-shadow-alpha: 100%; --tw-drop-shadow-size: initial; --tw-backdrop-blur: initial; --tw-backdrop-brightness: initial; --tw-backdrop-contrast: initial; --tw-backdrop-grayscale: initial; --tw-backdrop-hue-rotate: initial; --tw-backdrop-invert: initial; --tw-backdrop-opacity: initial; --tw-backdrop-saturate: initial; --tw-backdrop-sepia: initial; --tw-duration: initial; --tw-ease: initial; --tw-content: ""; } } } /*!*******************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/app/studio-v3.css ***! \*******************************************************************************************************************************************************************************************************************************************************************/ /* ═══════════════════════════════════════════════════════════════════════════ * PALETTE LOCK — Read STUDIO_STYLE_NOTES.md before editing ANY colour. * * Rule: Every hex MUST have equal R=G=B channels (#XXYYZZ where XX==YY==ZZ). * Banned: #0b0d10, #0f1217, #121722, #9aa3ae, #14181c, #181c20, #12161b * If in doubt, use #111111 (bg) or #161616 (panel). * ═══════════════════════════════════════════════════════════════════════════ */ /* Skip-to-content link */ .studio-skip-link { position: absolute; top: -100%; left: 16px; z-index: 999; padding: 8px 16px; background: #ffffff; color: #111111; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; } /* Ask Ripli sidecar V1 — one assistant, separate Creative and Help spaces. */ .studio-copilot-overlay.is-assistant-v2 { padding: 14px; } .studio-copilot-overlay.is-assistant-v2 .studio-copilot-panel { width: min(480px, 100%); height: calc(100vh - 28px); padding: 14px; gap: 12px; border-radius: 24px; border-color: rgba(255, 255, 255, 0.11); background: rgba(17, 17, 17, 0.985); box-shadow: 0 26px 90px rgba(0, 0, 0, 0.58); } .studio-copilot-overlay.is-assistant-v2.is-pinned { padding: 8px; } .studio-copilot-overlay.is-assistant-v2.is-pinned .studio-copilot-panel { width: 100%; height: calc(100vh - 16px); box-shadow: none; } .studio-copilot-overlay.is-assistant-v2 .studio-copilot-header { grid-template-columns: 38px minmax(0, 1fr) auto; min-height: 42px; gap: 10px; } .studio-copilot-overlay.is-assistant-v2 .studio-copilot-brandmark { width: 36px; height: 36px; border-radius: 12px; background: rgba(255, 255, 255, 0.045); } .studio-copilot-overlay.is-assistant-v2 .studio-copilot-title-block h2 { font-size: 17px; font-weight: 720; } .ask-ripli-v1-header-controls { display: flex; align-items: center; gap: 6px; } .ask-ripli-v1-space-menu { position: relative; } .ask-ripli-v1-space-menu > button { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 999px; padding: 0 12px; color: rgba(255, 255, 255, 0.82); background: rgba(255, 255, 255, 0.045); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; } .ask-ripli-v1-space-menu [role="menu"] { position: absolute; z-index: 8; top: calc(100% + 7px); right: 0; width: 176px; display: grid; gap: 3px; padding: 6px; border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 15px; background: rgba(22, 22, 22, 0.99); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.52); } .ask-ripli-v1-space-menu [role="menu"] button { width: 100%; min-height: 34px; border: 0; border-radius: 10px; padding: 0 10px; color: rgba(255, 255, 255, 0.7); background: transparent; font: inherit; font-size: 12px; text-align: left; cursor: pointer; } .ask-ripli-v1-space-menu [role="menu"] button:hover, .ask-ripli-v1-space-menu [role="menu"] button:focus-visible { color: #ffffff; background: rgba(255, 255, 255, 0.07); } .studio-copilot-overlay.is-assistant-v2 .studio-copilot-close { width: 34px; height: 34px; border-radius: 12px; } .studio-copilot-overlay.is-assistant-v2 .studio-copilot-body { min-height: 0; overflow: hidden; } .ask-ripli-v1-front-door { height: 100%; display: grid; align-content: center; gap: 10px; padding: 22px 4px; overflow-y: auto; } .ask-ripli-v1-front-door > div { margin: 0 2px 9px; } .ask-ripli-v1-front-door > div > span { display: block; color: rgba(255, 255, 255, 0.92); font-size: 20px; font-weight: 720; } .ask-ripli-v1-front-door > div > p, .ask-ripli-v1-empty-chat p { margin: 5px 0 0; color: rgba(255, 255, 255, 0.43); font-size: 12px; line-height: 1.45; } .ask-ripli-v1-front-door > button { width: 100%; min-height: 74px; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 12px; border: 1px solid rgba(255, 255, 255, 0.095); border-radius: 18px; padding: 13px 14px; color: rgba(255, 255, 255, 0.88); background: rgba(255, 255, 255, 0.028); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease; } .ask-ripli-v1-front-door > button:hover, .ask-ripli-v1-front-door > button:focus-visible { border-color: rgba(255, 255, 255, 0.19); background: rgba(255, 255, 255, 0.055); transform: translateY(-1px); } .ask-ripli-v1-front-door > button > svg, .ask-ripli-v1-help-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; border: 1px solid rgba(255, 255, 255, 0.11); color: rgba(255, 255, 255, 0.76); background: rgba(255, 255, 255, 0.045); padding: 7px; font-size: 16px; font-weight: 700; } .ask-ripli-v1-front-door strong, .ask-ripli-v1-front-door small { display: block; } .ask-ripli-v1-recent-list { display: grid; gap: 4px; margin-top: 10px; } .ask-ripli-v1-recent-list > span { padding: 0 3px 4px; color: rgba(255, 255, 255, 0.38); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .ask-ripli-v1-recent-list button { width: 100%; border: 0; border-radius: 10px; padding: 9px 10px; color: rgba(255, 255, 255, 0.76); background: transparent; text-align: left; cursor: pointer; } .ask-ripli-v1-recent-list button:hover, .ask-ripli-v1-recent-list button:focus-visible { color: #ffffff; background: rgba(255, 255, 255, 0.045); } .ask-ripli-v1-recent-list strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ask-ripli-v1-recent-list small { margin-top: 2px; } .ask-ripli-v1-front-door strong { font-size: 14px; } .ask-ripli-v1-front-door small { margin-top: 4px; color: rgba(255, 255, 255, 0.43); font-size: 11px; line-height: 1.4; } .studio-copilot-overlay.is-assistant-v2 .studio-copilot-ask { gap: 8px; } .studio-copilot-overlay.is-assistant-v2 .studio-chat-log { border: 0; border-radius: 16px; padding: 8px 5px 13px; background: transparent; gap: 11px; } .ask-ripli-v1-empty-chat { max-width: 300px; margin: auto; padding: 24px; color: rgba(255, 255, 255, 0.82); text-align: center; } .ask-ripli-v1-empty-chat strong { font-size: 17px; font-weight: 690; } .studio-copilot-overlay.is-assistant-v2 .studio-chat-bubble { max-width: 91%; border-radius: 17px; padding: 11px 12px; box-shadow: none; } .studio-copilot-overlay.is-assistant-v2 .studio-chat-bubble.is-user { border-color: rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.13); color: rgba(255, 255, 255, 0.93); } .studio-copilot-overlay.is-assistant-v2 .studio-chat-bubble.is-user .studio-chat-content { color: rgba(255, 255, 255, 0.93); } .studio-copilot-overlay.is-assistant-v2 .studio-chat-bubble.is-assistant { max-width: 100%; border-color: transparent; background: transparent; padding-left: 2px; padding-right: 2px; } .studio-copilot-overlay.is-assistant-v2 .studio-chat-formatted { display: grid; gap: 7px; } .studio-copilot-overlay.is-assistant-v2 .studio-chat-formatted p { margin: 0; color: rgba(255, 255, 255, 0.76); font-size: 13px; line-height: 1.55; } .ask-ripli-v1-detail-stack { display: grid; gap: 9px; margin-top: 10px; } .ask-ripli-v1-quiet-update { display: inline-flex; align-items: center; gap: 7px; width: fit-content; color: rgba(255, 255, 255, 0.48); font-size: 11px; } .ask-ripli-v1-plan-card, .ask-ripli-v1-note, .ask-ripli-v1-details, .ask-ripli-v1-route-list > button { border: 1px solid rgba(255, 255, 255, 0.105); border-radius: 16px; background: rgba(255, 255, 255, 0.025); } .ask-ripli-v1-plan-card { display: grid; gap: 10px; padding: 13px; } .ask-ripli-v1-plan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .ask-ripli-v1-plan-head div small, .ask-ripli-v1-plan-head div strong { display: block; } .ask-ripli-v1-plan-head div small { margin-bottom: 4px; color: rgba(255, 255, 255, 0.38); font-size: 9px; font-weight: 760; letter-spacing: 0.13em; text-transform: uppercase; } .ask-ripli-v1-plan-head div strong { color: rgba(255, 255, 255, 0.9); font-size: 14px; } .ask-ripli-v1-plan-head > span { flex: 0 0 auto; min-height: 25px; display: inline-flex; align-items: center; border-radius: 999px; padding: 0 9px; color: rgba(255, 255, 255, 0.76); background: rgba(255, 255, 255, 0.07); font-size: 10px; font-weight: 670; } .ask-ripli-v1-plan-meta { display: flex; flex-wrap: wrap; gap: 6px; } .ask-ripli-v1-plan-meta span { border-radius: 999px; padding: 4px 8px; color: rgba(255, 255, 255, 0.48); background: rgba(255, 255, 255, 0.045); font-size: 10px; } .ask-ripli-v1-plan-card > p, .ask-ripli-v1-note p, .ask-ripli-v1-details p { margin: 0; color: rgba(255, 255, 255, 0.68); font-size: 12px; line-height: 1.5; } .ask-ripli-v1-plan-actions { display: flex; flex-wrap: wrap; gap: 6px; } .ask-ripli-v1-plan-actions button { min-height: 32px; border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 999px; padding: 0 11px; color: rgba(255, 255, 255, 0.69); background: transparent; font: inherit; font-size: 10.5px; font-weight: 670; cursor: pointer; } .ask-ripli-v1-plan-actions button:hover, .ask-ripli-v1-plan-actions button:focus-visible { color: #ffffff; background: rgba(255, 255, 255, 0.065); } .ask-ripli-v1-plan-actions button.is-primary { border-color: rgba(255, 255, 255, 0.88); color: #111111; background: rgba(255, 255, 255, 0.94); } .ask-ripli-v1-plan-status { width: fit-content; border-radius: 999px; padding: 5px 9px; color: rgba(255, 255, 255, 0.65); background: rgba(255, 255, 255, 0.06); font-size: 10px; font-weight: 680; } .ask-ripli-v1-session-approval { display: inline-flex; align-items: center; gap: 7px; width: fit-content; color: rgba(255, 255, 255, 0.48); font-size: 10px; } .ask-ripli-v1-session-approval button { border: 0; padding: 0; color: rgba(255, 255, 255, 0.78); background: transparent; font: inherit; font-weight: 680; cursor: pointer; } .ask-ripli-v1-details { padding: 9px 11px; } .ask-ripli-v1-details.is-inline { padding: 0; border: 0; background: transparent; } .ask-ripli-v1-details summary { color: rgba(255, 255, 255, 0.52); font-size: 11px; font-weight: 650; cursor: pointer; } .ask-ripli-v1-details[open] summary { margin-bottom: 8px; } .ask-ripli-v1-guide-list, .ask-ripli-v1-route-list { display: grid; gap: 6px; } .ask-ripli-v1-guide-list button, .ask-ripli-v1-route-list > button { width: 100%; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: 8px; border: 0; border-radius: 11px; padding: 8px; color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.035); font: inherit; text-align: left; cursor: pointer; } .ask-ripli-v1-guide-list button span:first-child { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px; background: rgba(255, 255, 255, 0.07); font-size: 10px; } .ask-ripli-v1-guide-list strong, .ask-ripli-v1-guide-list small, .ask-ripli-v1-route-list strong, .ask-ripli-v1-route-list small { display: block; } .ask-ripli-v1-guide-list small, .ask-ripli-v1-route-list small { margin-top: 3px; color: rgba(255, 255, 255, 0.4); line-height: 1.4; } .ask-ripli-v1-route-list > button { grid-template-columns: minmax(0, 1fr) auto; border: 1px solid rgba(255, 255, 255, 0.085); } .ask-ripli-v1-note { padding: 11px; } .ask-ripli-v1-note strong { display: block; margin-bottom: 5px; color: rgba(255, 255, 255, 0.78); font-size: 11px; } .ask-ripli-v1-note.is-alert { border-style: dashed; } .studio-copilot-overlay.is-assistant-v2 .studio-copilot-composer { border-radius: 18px; padding: 10px; background: rgba(22, 22, 22, 0.98); box-shadow: 0 -14px 30px rgba(0, 0, 0, 0.22); } .studio-copilot-overlay.is-assistant-v2 .studio-copilot-composer .studio-textarea { min-height: 54px; max-height: 126px; color: rgba(255, 255, 255, 0.88); font-size: 12px; } .ask-ripli-v1-error { margin: 0; color: rgba(255, 255, 255, 0.66); font-size: 11px; } .studio-copilot-overlay.is-assistant-v2 .studio-copilot-send-button { min-width: 66px; } @media (max-width: 640px) { .studio-copilot-overlay.is-assistant-v2 { padding: 0; } .studio-copilot-overlay.is-assistant-v2.is-pinned { inset: 0; width: 100%; } .studio-copilot-overlay.is-assistant-v2 .studio-copilot-panel { width: 100%; height: 100dvh; border-radius: 0; } .ask-ripli-v1-header-controls .studio-copilot-close:not(:last-child) { display: none; } .ask-ripli-v1-plan-actions button { flex: 1 1 calc(50% - 6px); } } .studio-skip-link:focus { top: 16px; } .studio-shell { --studio-bg: #111111; --studio-panel: #161616; --studio-panel-2: #141414; --studio-highlight: #1e1e1e; --studio-line: rgba(255, 255, 255, 0.1); --studio-line-soft: rgba(255, 255, 255, 0.06); --studio-text: rgba(255, 255, 255, 0.88); --studio-muted: rgba(255, 255, 255, 0.5); --studio-subtle: rgba(255, 255, 255, 0.68); --studio-accent: #888888; --studio-accent-soft: rgba(136, 136, 136, 0.14); --studio-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); --sidebar-expanded-width: 246px; --sidebar-collapsed-width: 64px; --ask-ripli-pinned-width: clamp(420px, 30vw, 520px); min-height: 100vh; background: var(--studio-bg); color: var(--studio-text); display: flex; position: relative; } html[data-studio-theme="light"] .studio-shell { --studio-bg: #f2f2f2; --studio-panel: #ffffff; --studio-panel-2: #f3f3f3; --studio-line: rgba(20, 20, 20, 0.15); --studio-line-soft: rgba(20, 20, 20, 0.08); --studio-text: rgba(16, 16, 16, 0.92); --studio-muted: rgba(16, 16, 16, 0.62); --studio-subtle: rgba(16, 16, 16, 0.8); --studio-shadow: 0 8px 22px rgba(20, 20, 20, 0.08); background: radial-gradient(circle at 18% 4%, rgba(0, 0, 0, 0.05), transparent 46%), radial-gradient(circle at 82% 10%, rgba(0, 0, 0, 0.04), transparent 50%), var(--studio-bg); } .studio-app-grain { opacity: 0.02; } .studio-shell-overlay { position: fixed; inset: 0; border: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 94; } html[data-studio-theme="light"] .studio-shell-overlay { background: rgba(16, 16, 16, 0.18); } .studio-sidebar { width: var(--sidebar-expanded-width); height: 100vh; position: sticky; top: 0; z-index: 95; border-right: 1px solid var(--studio-line-soft); background: var(--studio-panel); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; flex-shrink: 0; gap: 12px; padding: 12px 10px 12px; transition: width 0.2s ease, transform 0.2s ease; } .studio-shell.sidebar-collapsed.is-desktop .studio-sidebar { width: var(--sidebar-collapsed-width); } /* Short desktop windows retain keyboard/wheel access to the footer. */ @media (min-width: 1024px) and (max-height: 600px) { .studio-sidebar { overflow-y: auto; scrollbar-width: none; } .studio-sidebar::-webkit-scrollbar { width: 0; } .studio-shell.sidebar-collapsed.is-desktop .studio-nav-tooltip { position: fixed; left: calc(var(--sidebar-collapsed-width) + 8px); top: auto; transform: translateY(calc(0px - var(--studio-sidebar-scroll-top,0px))); } } .studio-sidebar-head { display: grid; gap: 9px; } .studio-sidebar-head-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .studio-sidebar-brand { min-height: 40px; display: inline-flex; align-items: center; gap: 10px; border-radius: 11px; padding: 0 8px; border: 1px solid transparent; } .studio-sidebar-brand:hover { border-color: var(--studio-line-soft); background: rgba(255, 255, 255, 0.02); } .studio-sidebar-brand-mark { width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--studio-line-soft); background: var(--studio-panel-2); color: var(--studio-text); font-size: 11px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; } .studio-sidebar-brand-logo { height: 22px; width: auto; object-fit: contain; filter: brightness(1.04); } .studio-sidebar-controls { display: inline-flex; align-items: center; gap: 6px; } .studio-sidebar-control { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--studio-line-soft); background: transparent; color: var(--studio-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease; } .studio-sidebar-control:hover { color: var(--studio-text); border-color: var(--studio-line); background: rgba(255, 255, 255, 0.03); } .studio-sidebar-control:disabled { opacity: 0.4; cursor: not-allowed; } .studio-sidebar-subtitle { margin: 0; color: var(--studio-muted); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .studio-sidebar-nav { display: grid; gap: 4px; align-content: start; } .studio-sidebar-link { min-height: 42px; border-radius: 12px; border: 1px solid transparent; color: var(--studio-muted); display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.01em; position: relative; transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease; } .studio-sidebar-link:hover { color: var(--studio-text); border-color: var(--studio-line-soft); background: rgba(255, 255, 255, 0.03); } .studio-sidebar-link.is-active { color: var(--studio-text); border-color: rgba(136, 136, 136, 0.22); background: var(--studio-accent-soft); } .studio-nav-icon-wrap { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .studio-nav-icon { color: var(--studio-muted); } .studio-sidebar-link.is-active .studio-nav-icon { color: var(--studio-accent); } .studio-nav-label { white-space: nowrap; } .studio-nav-tooltip { position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--studio-line-soft); background: var(--studio-panel); color: var(--studio-text); display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; opacity: 0; pointer-events: none; white-space: nowrap; transition: opacity 0.15s ease; box-shadow: var(--studio-shadow); } .studio-sidebar-foot { border-top: 1px solid var(--studio-line-soft); padding-top: 12px; display: grid; gap: 8px; } .studio-sidebar-link-support { margin-top: 2px; } .studio-upgrade-cta { position: relative; overflow: hidden; height: 40px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.72); display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 0 12px; font-size: 12px; font-weight: 640; letter-spacing: 0.01em; transition: border-color 0.2s ease, transform 0.2s ease; } html[data-studio-theme="light"] .studio-upgrade-cta { border-color: rgba(136, 136, 136, 0.4); background: linear-gradient( 180deg, rgba(136, 136, 136, 0.34), rgba(136, 136, 136, 0.24) ); color: rgba(18, 18, 18, 0.9); } .studio-upgrade-cta::before { content: ""; position: absolute; inset: -60% -35%; background: radial-gradient( circle at 28% 54%, rgba(255, 255, 255, 0.035), transparent 44% ), radial-gradient( circle at 74% 46%, rgba(255, 255, 255, 0.025), transparent 48% ); animation: studio-liquid-drift 7s ease-in-out infinite; pointer-events: none; } html[data-studio-theme="light"] .studio-upgrade-cta::before { background: radial-gradient( circle at 28% 54%, rgba(255, 255, 255, 0.48), transparent 44% ), radial-gradient( circle at 74% 46%, rgba(255, 255, 255, 0.22), transparent 48% ); } .studio-upgrade-cta:hover { border-color: rgba(136, 136, 136, 0.4); transform: translateY(-1px); } html[data-studio-theme="light"] .studio-upgrade-cta:hover { border-color: rgba(136, 136, 136, 0.56); } .studio-upgrade-cta-icon, .studio-upgrade-cta-label { position: relative; z-index: 1; } .studio-upgrade-cta-icon { width: 20px; height: 20px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.12); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } html[data-studio-theme="light"] .studio-upgrade-cta-icon { border-color: rgba(17, 17, 17, 0.2); background: rgba(17, 17, 17, 0.1); color: rgba(17, 17, 17, 0.86); } .studio-sidebar-meta-link { font-size: 12px; color: var(--studio-muted); font-weight: 650; } .studio-sidebar-meta-link:hover { color: var(--studio-text); } .studio-sidebar-hint { margin: 0; color: var(--studio-muted); font-size: 11px; line-height: 1.35; } .studio-shell.sidebar-collapsed.is-desktop .studio-sidebar-hint, .studio-shell.sidebar-collapsed.is-desktop .studio-sidebar-meta-link, .studio-shell.sidebar-collapsed.is-desktop .studio-nav-label, .studio-shell.sidebar-collapsed.is-desktop .studio-sidebar-brand-logo { display: none; } .studio-shell.sidebar-collapsed.is-desktop .studio-sidebar-subtitle { /* Keep navigation targets still while the sidebar expands on hover. */ visibility: hidden; white-space: nowrap; min-width: 0; overflow: hidden; } .studio-shell.sidebar-collapsed.is-desktop .studio-nav-lock { display: none; } .studio-shell.sidebar-collapsed.is-desktop .studio-sidebar-link { box-sizing: border-box; width: 100%; max-width: 42px; margin: 0 auto; justify-content: center; padding: 8px 0; gap: 0; } .studio-shell.sidebar-collapsed.is-desktop .studio-sidebar-link:hover .studio-nav-tooltip { opacity: 1; } .studio-shell.sidebar-collapsed.is-desktop .studio-upgrade-cta:hover .studio-nav-tooltip { opacity: 1; } .studio-shell.sidebar-collapsed.is-desktop .studio-sidebar-nav { justify-items: center; } .studio-shell.sidebar-collapsed.is-desktop .studio-nav-icon-wrap { margin: 0; } .studio-shell.sidebar-collapsed.is-desktop .studio-sidebar-head-row { justify-content: center; } .studio-shell.sidebar-collapsed.is-desktop .studio-sidebar-brand { box-sizing: border-box; padding: 0; width: 42px; margin: 0 auto; justify-content: center; } .studio-shell.sidebar-collapsed.is-desktop .studio-upgrade-cta { width: 42px; margin: 0 auto; justify-content: center; padding: 0; } .studio-shell.sidebar-collapsed.is-desktop .studio-upgrade-cta-label { display: none; } .studio-shell.sidebar-collapsed.is-desktop .studio-sidebar-controls { display: none; } .studio-shell.sidebar-collapsed.is-desktop .studio-sidebar-foot { border-top-color: transparent; } .studio-shell.sidebar-collapsed.is-desktop .studio-sidebar-access { width: 42px; max-width: 100%; min-width: 0; padding: 8px; margin: 0 auto; } .studio-shell.sidebar-collapsed.is-desktop .studio-sidebar-access > span { justify-content: center; padding: 0; margin: 0; } .studio-shell.sidebar-collapsed.is-desktop .studio-sidebar-access-label { display: none; } .studio-workspace { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; transition: padding-right 0.2s ease; } .studio-shell.ask-ripli-pinned.is-desktop .studio-workspace { padding-right: var(--ask-ripli-pinned-width); } .studio-topbar { min-height: 64px; position: sticky; top: 0; z-index: 90; border-bottom: 1px solid var(--studio-line-soft); background: rgba(17, 17, 17, 0.92); backdrop-filter: blur(8px); padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } html[data-studio-theme="light"] .studio-topbar { background: rgba(255, 255, 255, 0.9); } .studio-topbar-left { min-width: 0; display: flex; align-items: center; gap: 10px; } .studio-topbar-meta { min-width: 0; } .studio-topbar-kicker { margin: 0; color: var(--studio-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.03em; } .studio-topbar-title { margin: 4px 0 0; color: var(--studio-text); font-size: 14px; font-weight: 640; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .studio-topbar-actions { display: inline-flex; align-items: center; gap: 8px; } .studio-surface-switch { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.04); padding: 4px; } .studio-surface-switch-link { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; padding: 0 14px; color: rgba(255, 255, 255, 0.62); font-size: 12px; font-weight: 760; text-decoration: none; transition: background 0.18s ease, color 0.18s ease; } .studio-surface-switch-link:hover { color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.06); } .studio-surface-switch-link.is-active { color: rgba(255, 255, 255, 0.92); background: rgba(255, 255, 255, 0.1); } html[data-studio-theme="light"] .studio-surface-switch { border-color: rgba(17, 17, 17, 0.1); background: rgba(17, 17, 17, 0.04); } html[data-studio-theme="light"] .studio-surface-switch-link { color: rgba(17, 17, 17, 0.58); } html[data-studio-theme="light"] .studio-surface-switch-link:hover, html[data-studio-theme="light"] .studio-surface-switch-link.is-active { color: rgba(17, 17, 17, 0.92); background: rgba(17, 17, 17, 0.08); } .studio-ask-ripli-icon { color: #999999; } .studio-credit-pill { height: 36px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.72); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; font-size: 12px; font-weight: 620; } html[data-studio-theme="light"] .studio-credit-pill { border-color: rgba(17, 17, 17, 0.18); background: rgba(17, 17, 17, 0.08); color: rgba(17, 17, 17, 0.88); } html[data-studio-theme="light"] .studio-ask-ripli-icon { color: #666666; } .studio-topbar-action-label { font-size: 12px; font-weight: 620; } .studio-topbar .studio-mobile-nav-btn { display: none; } .studio-beta-notice { width: min(1400px, calc(100% - 64px)); margin: 12px auto 0; border: 1px solid rgba(255, 255, 255, 0.085); border-radius: 16px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.024) ), rgba(17, 17, 17, 0.84); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24); color: var(--studio-text); padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; z-index: 35; } .studio-beta-notice-copy { min-width: 0; display: flex; align-items: center; gap: 10px; } .studio-beta-notice-copy span { flex: 0 0 auto; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.075); color: rgba(255, 255, 255, 0.88); padding: 5px 8px; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .studio-beta-notice-copy p { margin: 0; color: var(--studio-subtle); font-size: 12px; line-height: 1.35; font-weight: 580; overflow-wrap: anywhere; } .studio-beta-notice-actions { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; } .studio-beta-notice-actions button { min-height: 32px; border: 1px solid rgba(255, 255, 255, 0.095); border-radius: 999px; background: rgba(255, 255, 255, 0.048); color: var(--studio-subtle); display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; font: inherit; font-size: 11px; font-weight: 760; white-space: nowrap; cursor: pointer; transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease; } .studio-beta-notice-actions button:hover { border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.082); color: var(--studio-text); } .studio-beta-notice-actions .studio-beta-notice-dismiss { width: 32px; padding: 0; color: var(--studio-muted); } html[data-studio-theme="light"] .studio-beta-notice { border-color: rgba(17, 17, 17, 0.11); background: linear-gradient(180deg, rgba(17, 17, 17, 0.038), rgba(17, 17, 17, 0.014)), rgba(255, 255, 255, 0.9); box-shadow: 0 14px 34px rgba(17, 17, 17, 0.1); } html[data-studio-theme="light"] .studio-beta-notice-copy span { border-color: rgba(17, 17, 17, 0.12); background: rgba(17, 17, 17, 0.07); color: rgba(17, 17, 17, 0.82); } html[data-studio-theme="light"] .studio-beta-notice-actions button { border-color: rgba(17, 17, 17, 0.11); background: rgba(17, 17, 17, 0.045); } html[data-studio-theme="light"] .studio-beta-notice-actions button:hover { border-color: rgba(17, 17, 17, 0.18); background: rgba(17, 17, 17, 0.075); } .studio-content { width: min(1400px, calc(100% - 64px)); margin: 0 auto; padding: 36px 0 100px; } .studio-content--marketing { width: 100%; max-width: none; padding: 0; } .studio-shell.is-marketing-route { background: var(--studio-bg); color: var(--studio-text); } .studio-shell.is-marketing-route .studio-content--marketing { width: 100%; margin: 0 auto; padding: 0; min-height: calc(100vh - 64px); } .ripli-marketing-board { min-height: calc(100vh - 64px); margin: -24px 0 0; position: relative; display: grid; background: #080808; color: white; overflow: hidden; } .ripli-marketing-board-bg { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient( rgba(255, 255, 255, 0.075) 1px, transparent 1px ); background-size: 24px 24px; } .ripli-marketing-board-main { position: relative; z-index: 1; min-height: 0; display: grid; } .ripli-marketing-board-scroll { min-width: 0; min-height: 0; overflow: auto; padding: 34px 40px 124px; } .ripli-marketing-board-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; } .ripli-marketing-board-title { min-width: 0; } .ripli-marketing-board-title h1 { margin: 0 0 6px; color: white; font-size: 28px; line-height: 1.05; font-weight: 420; letter-spacing: 0; } .ripli-marketing-board-title p { margin: 0; color: rgba(255, 255, 255, 0.42); font-size: 14px; line-height: 1.4; } .ripli-marketing-board-actions, .ripli-marketing-artboards { display: flex; align-items: flex-start; } .ripli-marketing-board-actions { align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 9px; } .ripli-marketing-board-actions .studio-btn { min-height: 40px; border-radius: 10px; padding: 9px 14px; } .ripli-marketing-artboards { justify-content: flex-start; gap: 34px; flex-wrap: wrap; } .ripli-marketing-reset { position: fixed; right: 24px; bottom: 24px; z-index: 21; display: flex; align-items: center; gap: 4px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(18, 18, 18, 0.88); backdrop-filter: blur(14px); padding: 5px; } .ripli-marketing-command-dock { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(760px, calc(100vw - 32px)); display: flex; align-items: center; flex-wrap: wrap; gap: 14px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(18, 18, 18, 0.94); box-shadow: 0 22px 80px rgba(0, 0, 0, 0.58); padding: 8px; z-index: 20; } .ripli-marketing-command-tabs { display: flex; gap: 4px; border-radius: 14px; background: rgba(0, 0, 0, 0.34); border: 1px solid rgba(255, 255, 255, 0.06); padding: 4px; } .ripli-marketing-command-tabs .studio-btn { min-height: 32px; padding: 7px 12px; } .ripli-marketing-command-tabs .studio-btn-secondary { background: rgba(255, 255, 255, 0.12); } .ripli-marketing-command-input { flex: 1; min-width: 190px; border: 0; outline: none; background: transparent; color: white; font-size: 13px; } .ripli-marketing-credit-chip { border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.72); padding: 7px 10px; font-size: 12px; font-weight: 800; white-space: nowrap; } @media (max-width: 720px) { .ripli-marketing-board-scroll { padding: 30px 16px 190px; overflow-x: hidden; } .ripli-marketing-board-header { flex-direction: column; gap: 14px; } .ripli-marketing-board-title h1 { font-size: 28px; } .ripli-marketing-board-actions { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; } .ripli-marketing-board-actions .studio-btn { width: 100%; min-width: 0; justify-content: center; padding: 9px 10px; white-space: normal; text-align: center; } .ripli-marketing-artboards { gap: 22px; } .ripli-marketing-reset { right: 12px; bottom: 138px; } .ripli-marketing-command-dock { left: 12px; right: auto; bottom: 12px; transform: none; width: calc(100vw - 24px); max-width: calc(100vw - 24px); box-sizing: border-box; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px; border-radius: 16px; padding: 8px; overflow: hidden; } .ripli-marketing-command-tabs { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column: 1 / -1; width: 100%; box-sizing: border-box; } .ripli-marketing-copy-tab, .ripli-marketing-export-button { display: none !important; } .ripli-marketing-command-tabs .studio-btn { width: 100%; box-sizing: border-box; min-width: 0; justify-content: center; gap: 0; padding: 7px 8px; font-size: 0; } .ripli-marketing-command-input { grid-column: 1 / -1; flex: none; min-width: 0; width: 100%; min-height: 28px; } .ripli-marketing-credit-chip { grid-column: 1 / -1; flex: none; max-width: none; text-align: center; } .ripli-marketing-command-dock > .studio-app-iconbtn { width: 44px; height: 38px; } .ripli-marketing-command-dock > .studio-btn-primary { grid-column: 2; width: 100%; box-sizing: border-box; justify-content: center; min-width: 0; } } .studio-content--canvas { width: calc(100% - 24px); max-width: none; padding: 12px 0 20px; } .studio-surface { border: 1px solid var(--studio-line-soft); border-radius: 18px; background: var(--studio-panel); box-shadow: var(--studio-shadow); padding: 22px; } .studio-dashboard-v3-hero { padding: 24px; } .studio-banner-slot { min-height: 86px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08); border-left: 3px solid rgba(255, 255, 255, 0.18); background: var(--studio-highlight); box-shadow: var(--studio-shadow); padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .studio-banner-copy { min-width: 0; display: grid; gap: 4px; } .studio-banner-title { margin: 0; font-size: 16px; font-weight: 620; letter-spacing: -0.01em; line-height: 1.2; } .studio-banner-body { margin: 0; color: var(--studio-muted); font-size: 13px; line-height: 1.35; font-weight: 520; } .studio-banner-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .studio-banner-dismiss { width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--studio-line-soft); background: transparent; color: var(--studio-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease; } .studio-banner-dismiss:hover { border-color: var(--studio-line); background: rgba(255, 255, 255, 0.04); color: var(--studio-text); } .studio-banner-modal-overlay { position: fixed; inset: 0; z-index: 98; background: rgba(0, 0, 0, 0.56); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 16px; } .studio-banner-modal { width: min(520px, 100%); border-radius: 16px; border: 1px solid var(--studio-line-soft); background: var(--studio-panel); box-shadow: var(--studio-shadow); padding: 14px; } .studio-banner-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .studio-banner-modal-copy { margin-top: 10px; color: var(--studio-muted); font-size: 13px; line-height: 1.45; } .studio-banner-modal-copy ul { margin: 0 0 10px; padding-left: 18px; } .studio-banner-modal-copy p { margin: 0; } /* Duplicate of globals.css — kept in sync with the compact tool-chrome * values so the cascade winner here matches DESIGN.md intent. */ .studio-page-head { display: grid; gap: 12px; margin-bottom: 14px; } .studio-page-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .studio-kicker { margin: 0; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--studio-muted); font-weight: 800; } /* Some rules here previously duplicated globals.css definitions; exact-duplicate (full property subset) twins were removed from globals.css on 2026-06-12 — 8 partial twins remain there with live-only properties. studio-v3.css is * imported AFTER globals.css in layout.tsx, so this file wins the cascade. * Kept in sync with the compact tool-chrome values in globals.css §3 * (DESIGN.md §3 — no serif on chrome, density over breathing room). */ .studio-h1 { margin: 6px 0 0; font-size: clamp(1.4rem, 2.2vw, 1.85rem); letter-spacing: -0.02em; line-height: 1.1; font-weight: 700; } /* Accent stays Manrope; lighter weight (500) against parent 700 gives * visual hierarchy without introducing a new colour. */ .studio-h1 .studio-h1-accent { color: var(--studio-text); font-family: inherit; font-style: normal; font-weight: 500; } .studio-subhead { margin: 6px 0 0; color: var(--studio-muted); font-size: 0.84rem; line-height: 1.4; max-width: 680px; font-weight: 500; } .studio-inline-tip { border-bottom: 1px dashed rgba(255, 255, 255, 0.35); color: var(--studio-text); cursor: help; } .studio-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .studio-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .studio-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .studio-ask-followups { margin-top: 10px; display: grid; gap: 7px; } .studio-ask-followups p { margin: 0; color: rgba(245, 245, 245, 0.58); font-size: 11px; font-weight: 720; } .studio-ask-followups div { display: flex; flex-wrap: wrap; gap: 6px; } .studio-ask-followups button { min-height: 30px; border: 1px solid rgba(255, 255, 255, 0.105); border-radius: 999px; background: rgba(255, 255, 255, 0.045); color: rgba(245, 245, 245, 0.9); padding: 0 12px; font-size: 11px; font-weight: 780; cursor: pointer; transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease; } .studio-ask-followups button:hover:not(:disabled) { transform: translateY(-1px); border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.08); } .studio-ask-followups button:disabled { cursor: not-allowed; opacity: 0.56; } .studio-actions { display: flex; gap: 10px; flex-wrap: wrap; } .studio-btn, .studio-app-pill { height: 38px; padding: 0 14px; border: 1px solid var(--studio-line-soft); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; font-weight: 620; color: var(--studio-text); background: transparent; cursor: pointer; transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease; } .studio-btn { border-radius: 13px; } .studio-app-pill { height: 36px; border-radius: 12px; } .studio-btn:hover, .studio-app-pill:hover { border-color: var(--studio-line); background: rgba(255, 255, 255, 0.03); } html[data-studio-theme="light"] .studio-btn:hover, html[data-studio-theme="light"] .studio-app-pill:hover { background: rgba(16, 16, 16, 0.05); } .studio-btn-primary { border-color: rgba(255, 255, 255, 0.28); background: #e8e8e8; color: #111111; } .studio-btn-primary:hover { background: #f0f0f0; border-color: rgba(255, 255, 255, 0.4); } .studio-btn-secondary { background: rgba(255, 255, 255, 0.03); } html[data-studio-theme="light"] .studio-btn-secondary { background: rgba(16, 16, 16, 0.05); } .studio-btn-ghost { background: transparent; } .studio-btn-attention { border-color: rgba(136, 136, 136, 0.48); box-shadow: 0 0 0 1px rgba(136, 136, 136, 0.24); animation: studio-attention-pulse 1.2s ease-in-out 2; } .studio-app-iconbtn { width: 40px; height: 36px; border-radius: 12px; border: 1px solid var(--studio-line-soft); background: rgba(255, 255, 255, 0.03); color: var(--studio-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease; } .studio-app-iconbtn:hover { border-color: var(--studio-line); background: rgba(255, 255, 255, 0.05); } .studio-app-credits-trigger { width: auto; min-width: 40px; gap: 6px; padding: 0 10px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; } .studio-app-credits-balance { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 720px) { .studio-app-credits-trigger { width: 40px; padding: 0; } .studio-app-credits-balance { display: none; } } html[data-studio-theme="light"] .studio-app-iconbtn, html[data-studio-theme="light"] .studio-app-pill { background: rgba(16, 16, 16, 0.04); } html[data-studio-theme="light"] .studio-app-iconbtn:hover { background: rgba(16, 16, 16, 0.07); } .studio-changelog-anchor { position: relative; display: inline-flex; } .studio-changelog-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; } .studio-changelog-unread-dot { position: absolute; top: -3px; right: -5px; width: 8px; height: 8px; border-radius: 999px; background: #ef4444; box-shadow: 0 0 0 2px var(--studio-bg); } .studio-changelog-popover { position: absolute; top: calc(100% + 8px); right: -2px; z-index: 90; width: min(344px, calc(100vw - 28px)); max-height: min(390px, calc(100vh - 86px)); overflow: hidden; display: flex; flex-direction: column; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.11); background: linear-gradient(180deg, rgba(26, 26, 26, 0.98), rgba(12, 12, 12, 0.98)), rgba(14, 14, 14, 0.96); box-shadow: 0 18px 52px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.045); backdrop-filter: blur(22px); padding: 8px; } .studio-changelog-popover::before { content: ""; position: absolute; top: -5px; right: 25px; width: 10px; height: 10px; border-left: 1px solid rgba(255, 255, 255, 0.11); border-top: 1px solid rgba(255, 255, 255, 0.11); background: rgba(26, 26, 26, 0.98); transform: rotate(45deg); } html[data-studio-theme="light"] .studio-changelog-popover { background: linear-gradient( 180deg, rgba(255, 255, 255, 0.99), rgba(247, 247, 247, 0.98) ), rgba(255, 255, 255, 0.96); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.16); } html[data-studio-theme="light"] .studio-changelog-popover::before { background: rgba(255, 255, 255, 0.99); border-color: rgba(16, 16, 16, 0.1); } .studio-changelog-head { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 8px 9px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.075); } .studio-changelog-head p, .studio-changelog-head span, .studio-changelog-item-head p, .studio-changelog-body, .studio-changelog-empty { margin: 0; } .studio-changelog-head p { color: var(--studio-text); font-size: 13px; font-weight: 780; } .studio-changelog-head span { display: block; margin-top: 3px; color: var(--studio-muted); font-size: 10px; line-height: 1.35; font-weight: 620; } .studio-changelog-count { flex: 0 0 auto; min-height: 22px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.035); color: var(--studio-subtle) !important; display: inline-flex !important; align-items: center; padding: 0 8px; font-size: 10px !important; line-height: 1; font-weight: 760 !important; } .studio-changelog-list { min-height: 0; overflow: auto; padding: 7px 0 0; } .studio-changelog-empty { padding: 24px 14px 26px; color: var(--studio-muted); font-size: 12px; line-height: 1.45; text-align: center; } .studio-changelog-item { display: grid; gap: 6px; padding: 10px 9px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.055); background: rgba(255, 255, 255, 0.018); } .studio-changelog-item + .studio-changelog-item { margin-top: 6px; } .studio-changelog-item:hover { border-color: rgba(255, 255, 255, 0.13); background: rgba(255, 255, 255, 0.035); } html[data-studio-theme="light"] .studio-changelog-item:hover { background: rgba(16, 16, 16, 0.035); } .studio-changelog-item-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; } .studio-changelog-item-head p { min-width: 0; color: var(--studio-text); font-size: 12px; line-height: 1.35; font-weight: 730; } .studio-changelog-item-head time { color: var(--studio-muted); font-size: 10px; line-height: 1.35; white-space: nowrap; } .studio-changelog-body { color: var(--studio-subtle); font-size: 11px; line-height: 1.45; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .studio-onboarding-banner { margin: 0 0 22px; } .studio-onboarding-banner-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--studio-line-soft); background: rgba(255, 255, 255, 0.02); box-shadow: var(--studio-shadow); } html[data-studio-theme="light"] .studio-onboarding-banner-inner { background: rgba(16, 16, 16, 0.03); } .studio-onboarding-title { margin: 0; font-size: 13px; font-weight: 640; } .studio-onboarding-desc { margin: 6px 0 0; color: var(--studio-muted); font-size: 12px; line-height: 1.4; font-weight: 500; max-width: 680px; } .studio-onboarding-actions { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .studio-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--studio-line-soft); color: var(--studio-subtle); font-size: 11px; font-weight: 640; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(255, 255, 255, 0.04); } .studio-badge-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--studio-accent); } .studio-list { display: grid; gap: 10px; } .studio-card { border-radius: 18px; border: 1px solid var(--studio-line-soft); background: var(--studio-panel); box-shadow: var(--studio-shadow); overflow: hidden; } html[data-studio-theme="light"] .studio-card { background: var(--studio-panel-2); } .studio-card-inner { padding: 18px; } .workspace-library-card { background: #101010; border-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.9); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22); } .workspace-library-card.is-active { border-color: rgba(255, 255, 255, 0.2); } .workspace-library-card.is-selected { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35), 0 18px 50px rgba(0, 0, 0, 0.22); } .workspace-library-card-trigger { color: inherit; } .workspace-library-card-preview { background: #101010; } .workspace-library-card-placeholder { color: rgba(255, 255, 255, 0.2); } .workspace-library-card-scrim { background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.12), transparent); } .workspace-library-card-primary-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } .workspace-library-card-primary-actions button:only-child { grid-column: 1 / -1; } .workspace-library-chip { border: 1px solid transparent; } .workspace-library-primary-action, .workspace-library-share-action, .workspace-library-icon-action, .workspace-library-select-toggle { border: 1px solid transparent; } .workspace-library-chip-kind, .workspace-library-chip-context, .workspace-library-icon-action { background: rgba(0, 0, 0, 0.55); color: rgba(245, 245, 245, 0.92); } .workspace-library-chip-origin, .workspace-library-chip-status, .workspace-library-primary-action, .workspace-library-share-action { background: rgba(255, 255, 255, 0.92); color: rgba(10, 10, 10, 0.94); } .workspace-library-primary-action { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); } .workspace-library-primary-action:hover, .workspace-library-share-action:hover, .workspace-library-icon-action:hover { background: rgba(232, 232, 232, 0.96); color: #101010; } .workspace-library-share-action { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35); } .workspace-library-select-toggle { background: rgba(0, 0, 0, 0.5); border-color: rgba(255, 255, 255, 0.15); color: rgba(245, 245, 245, 0.9); } .workspace-library-select-toggle:hover { border-color: rgba(255, 255, 255, 0.3); color: #ffffff; } .workspace-library-select-toggle.is-selected { background: #ffffff; border-color: #ffffff; color: #101010; } html[data-studio-theme="light"] .workspace-library-card { background: #f8f8f8; border-color: rgba(16, 16, 16, 0.12); color: rgba(16, 16, 16, 0.9); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 18px 40px rgba(16, 16, 16, 0.1); } html[data-studio-theme="light"] .workspace-library-card.is-active { border-color: rgba(16, 16, 16, 0.24); } html[data-studio-theme="light"] .workspace-library-card.is-selected { box-shadow: 0 0 0 2px rgba(16, 16, 16, 0.24), 0 18px 40px rgba(16, 16, 16, 0.1); } html[data-studio-theme="light"] .workspace-library-card-preview { background: #ededed; } html[data-studio-theme="light"] .workspace-library-card-placeholder { color: rgba(16, 16, 16, 0.28); } html[data-studio-theme="light"] .workspace-library-card-scrim { background: linear-gradient(to top, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.18), transparent); } html[data-studio-theme="light"] .workspace-library-chip-kind, html[data-studio-theme="light"] .workspace-library-chip-context, html[data-studio-theme="light"] .workspace-library-icon-action { background: rgba(255, 255, 255, 0.86); border-color: rgba(16, 16, 16, 0.1); color: rgba(16, 16, 16, 0.82); box-shadow: 0 8px 20px rgba(16, 16, 16, 0.08); } html[data-studio-theme="light"] .workspace-library-chip-origin, html[data-studio-theme="light"] .workspace-library-chip-status { background: rgba(16, 16, 16, 0.82); border-color: rgba(16, 16, 16, 0.12); color: #ffffff; } html[data-studio-theme="light"] .workspace-library-primary-action, html[data-studio-theme="light"] .workspace-library-share-action { background: rgba(16, 16, 16, 0.92); border-color: rgba(16, 16, 16, 0.14); color: #ffffff; box-shadow: 0 12px 28px rgba(16, 16, 16, 0.2); } html[data-studio-theme="light"] .workspace-library-primary-action:hover, html[data-studio-theme="light"] .workspace-library-share-action:hover { background: #000000; } html[data-studio-theme="light"] .workspace-library-icon-action:hover { background: rgba(16, 16, 16, 0.9); border-color: rgba(16, 16, 16, 0.15); color: #ffffff; } html[data-studio-theme="light"] .workspace-library-select-toggle { background: rgba(255, 255, 255, 0.88); border-color: rgba(16, 16, 16, 0.14); color: rgba(16, 16, 16, 0.78); box-shadow: 0 8px 22px rgba(16, 16, 16, 0.08); } html[data-studio-theme="light"] .workspace-library-select-toggle:hover { background: #ffffff; border-color: rgba(16, 16, 16, 0.24); color: #101010; } html[data-studio-theme="light"] .workspace-library-select-toggle.is-selected { background: #101010; border-color: #101010; color: #ffffff; } .studio-account-page { display: grid; gap: 18px; } .studio-account-hero { max-width: 1120px; margin-inline: auto; } .studio-account-summary-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .studio-account-summary-card { min-height: 154px; } .studio-account-summary-card.is-primary { grid-column: auto; } .studio-account-summary-value { margin-top: 10px; font-size: 15px; line-height: 1.28; color: var(--studio-ink); } .studio-account-sections { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .studio-account-panel { min-height: 168px; } .studio-account-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .studio-account-list { display: grid; gap: 8px; } .studio-account-list-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--studio-line-soft); padding-top: 9px; color: var(--studio-muted); font-size: 12px; line-height: 1.35; } .studio-account-list-row strong { min-width: 0; color: var(--studio-ink); font-weight: 720; text-align: right; overflow-wrap: anywhere; } @media (max-width: 980px) { .studio-account-summary-grid, .studio-account-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); } .studio-account-summary-card.is-primary { grid-column: auto; } } @media (max-width: 640px) { .studio-account-hero { margin-inline: 0; } .studio-account-summary-grid, .studio-account-sections { grid-template-columns: minmax(0, 1fr); } .studio-account-summary-card.is-primary { grid-column: auto; } .studio-account-panel-head { display: grid; } .studio-account-panel-head .studio-btn { width: 100%; } .studio-account-list-row { align-items: flex-start; display: grid; } .studio-account-list-row strong { text-align: left; } } .studio-card-title { margin: 0; font-size: 15px; font-weight: 640; letter-spacing: -0.01em; } .studio-card-desc { margin: 8px 0 0; color: var(--studio-muted); font-size: 13px; line-height: 1.45; font-weight: 500; } .studio-field { display: grid; gap: 8px; } .studio-subsurface { border: 1px solid var(--studio-line-soft); border-radius: 14px; background: rgba(255, 255, 255, 0.02); padding: 12px; } html[data-studio-theme="light"] .studio-subsurface { background: rgba(16, 16, 16, 0.03); } .studio-media-frame { position: relative; overflow: hidden; border-radius: 14px; border: 1px solid var(--studio-line-soft); background: rgba(255, 255, 255, 0.03); } html[data-studio-theme="light"] .studio-media-frame { background: rgba(16, 16, 16, 0.05); } .studio-media-4x5 { aspect-ratio: 4 / 5; } .studio-media-fill { width: 100%; height: 100%; object-fit: cover; display: block; } .studio-empty-center { width: 100%; height: 100%; display: grid; place-items: center; color: var(--studio-muted); font-size: 11px; font-weight: 620; letter-spacing: 0.08em; text-transform: uppercase; } .studio-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .studio-error { margin: 0; color: #cccccc; font-size: 13px; font-weight: 560; } .studio-shell .admin-login-error, .studio-shell .studio-error-message { margin: 0; color: #cccccc; font-size: 13px; font-weight: 560; } .studio-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 12px 13px; border-radius: 14px; border: 1px solid var(--studio-line-soft); background: rgba(255, 255, 255, 0.02); transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease; } .studio-row:hover { border-color: var(--studio-line); background: rgba(255, 255, 255, 0.04); transform: translateY(-1px); } .studio-row-title { font-size: 13px; font-weight: 620; margin: 0; letter-spacing: -0.01em; } .studio-row-title-with-icon { display: inline-flex; align-items: center; gap: 8px; } .studio-row-meta { margin: 6px 0 0; font-size: 12px; color: var(--studio-muted); font-weight: 500; } .studio-row-right { display: inline-flex; align-items: center; gap: 8px; } .studio-template-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .studio-template-card { border-radius: 14px; border: 1px solid var(--studio-line-soft); background: rgba(255, 255, 255, 0.02); overflow: hidden; transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease; } .studio-template-card:hover { border-color: var(--studio-line); background: rgba(255, 255, 255, 0.04); transform: translateY(-1px); } .studio-template-thumb { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 1px solid var(--studio-line-soft); } .studio-template-thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); } .studio-template-thumb .studio-status { position: absolute; top: 8px; right: 8px; height: 22px; font-size: 9px; padding: 0 8px; background: rgba(17, 17, 17, 0.75); } .studio-template-body { padding: 10px 11px 12px; } .studio-summary-head { display: inline-flex; align-items: center; gap: 9px; } .studio-dashboard-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; } .studio-dashboard-strip-left, .studio-dashboard-strip-right { min-width: 0; } .studio-dashboard-metrics { display: flex; flex-wrap: wrap; gap: 10px; } .studio-dashboard-metric { display: inline-flex; align-items: center; height: 38px; min-width: 132px; border-radius: 13px; border: 1px solid var(--studio-line-soft); background: rgba(255, 255, 255, 0.02); padding: 0 12px; } .studio-dashboard-metric-line { margin: 0; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .studio-dashboard-metric-label { font-size: 12px; color: var(--studio-muted); line-height: 1; font-weight: 560; } .studio-dashboard-metric-value { margin: 0; font-size: 14px; line-height: 1; font-weight: 640; color: var(--studio-text); } .studio-quick-actions { align-items: center; } .studio-btn-with-icon { padding-left: 10px; padding-right: 14px; } .studio-tone-icon-sm { width: 18px; height: 18px; border-radius: 6px; border: 1px solid var(--studio-line-soft); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .studio-tone-icon { width: 24px; height: 24px; border-radius: 8px; border: 1px solid var(--studio-line-soft); display: inline-flex; align-items: center; justify-content: center; } .studio-tone-peach { color: #d4d4d4; border-color: rgba(212, 212, 212, 0.32); background: rgba(212, 212, 212, 0.1); } .studio-tone-mint { color: #bbbbbb; border-color: rgba(187, 187, 187, 0.32); background: rgba(187, 187, 187, 0.1); } .studio-tone-lavender { color: #a3a3a3; border-color: rgba(163, 163, 163, 0.32); background: rgba(163, 163, 163, 0.1); } .studio-tone-slate { color: #b3b3b3; border-color: rgba(179, 179, 179, 0.34); background: rgba(179, 179, 179, 0.16); } .studio-status { height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--studio-line-soft); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--studio-muted); } .status-queued, .status-running { border-color: rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05); color: var(--studio-text); } html[data-studio-theme="light"] .status-queued, html[data-studio-theme="light"] .status-running { border-color: rgba(16, 16, 16, 0.18); background: rgba(16, 16, 16, 0.06); } .status-completed, .status-needs_review { border-color: rgba(136, 136, 136, 0.26); background: var(--studio-accent-soft); color: var(--studio-text); } .status-failed, .status-canceled { border-color: rgba(153, 153, 153, 0.35); background: rgba(153, 153, 153, 0.14); color: var(--studio-text); } .studio-status-note { color: #cccccc; } .studio-input { width: 100%; height: 40px; border-radius: 12px; border: 1px solid var(--studio-line-soft); background: var(--studio-panel); color: var(--studio-text); padding: 0 12px; font-size: 13px; font-weight: 520; } .studio-input:focus { outline: none; border-color: rgba(136, 136, 136, 0.52); } .studio-input:focus-visible { outline: 2px solid rgba(136, 136, 136, 0.5); outline-offset: -2px; } .studio-textarea { min-height: 94px; height: auto; padding: 12px; resize: vertical; } .studio-dropzone { border-radius: 16px; border: 1px dashed rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.02); padding: 16px; display: grid; gap: 8px; } .studio-dropzone.is-dragover { border-color: rgba(136, 136, 136, 0.48); background: rgba(255, 255, 255, 0.05); } .studio-dropzone strong { font-size: 13px; font-weight: 620; letter-spacing: -0.01em; } .studio-dropzone p { margin: 0; color: var(--studio-muted); font-size: 12px; font-weight: 520; } .studio-thumbgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; } .studio-thumb { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--studio-line-soft); background: rgba(255, 255, 255, 0.03); aspect-ratio: 1 / 1; } .studio-thumb img, .studio-thumb video { width: 100%; height: 100%; object-fit: cover; } .studio-thumb-actions { position: absolute; inset: auto 10px 10px 10px; display: flex; gap: 8px; justify-content: space-between; } .studio-mini { height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(17, 17, 17, 0.62); color: rgba(255, 255, 255, 0.92); font-size: 11px; font-weight: 620; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .studio-mini:disabled { opacity: 0.55; cursor: not-allowed; } html[data-studio-theme="light"] .studio-inline-tip { border-bottom-color: rgba(16, 16, 16, 0.35); } html[data-studio-theme="light"] .studio-dropzone { border-color: rgba(16, 16, 16, 0.22); background: rgba(16, 16, 16, 0.03); } html[data-studio-theme="light"] .studio-dropzone.is-dragover { border-color: rgba(136, 136, 136, 0.56); background: rgba(136, 136, 136, 0.14); } html[data-studio-theme="light"] .studio-mini { border-color: rgba(16, 16, 16, 0.2); background: rgba(255, 255, 255, 0.74); color: rgba(16, 16, 16, 0.88); } .studio-stepper-row { display: flex; gap: 8px; flex-wrap: wrap; } .studio-step-pill { height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--studio-line-soft); background: transparent; color: var(--studio-muted); display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 620; cursor: pointer; } .studio-step-pill span { width: 18px; height: 18px; border-radius: 999px; border: 1px solid var(--studio-line-soft); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; } .studio-step-pill.is-active { color: var(--studio-text); border-color: rgba(136, 136, 136, 0.26); background: var(--studio-accent-soft); } button.studio-step-pill, button.studio-stepcard, button.studio-option, button.studio-row { appearance: none; -webkit-appearance: none; font: inherit; color: inherit; } button.studio-row { width: 100%; text-align: left; } .studio-stepcard, .studio-option { text-align: left; border-radius: 14px; border: 1px solid var(--studio-line-soft); background: rgba(255, 255, 255, 0.02); padding: 14px; cursor: pointer; color: var(--studio-text); transition: border-color 0.18s ease, background 0.18s ease; } .studio-stepcard { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: center; } .studio-stepcard:hover, .studio-option:hover { border-color: var(--studio-line); background: rgba(255, 255, 255, 0.03); } .studio-stepcard.is-selected, .studio-option.is-selected { border-color: rgba(136, 136, 136, 0.28); background: var(--studio-accent-soft); } .studio-stepcard-icon { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--studio-line-soft); display: grid; place-items: center; background: var(--studio-panel); color: var(--studio-muted); } .studio-stepcard-icon-peach { color: #d4d4d4; border-color: rgba(212, 212, 212, 0.35); background: rgba(212, 212, 212, 0.1); } .studio-stepcard-icon-mint { color: #bbbbbb; border-color: rgba(187, 187, 187, 0.35); background: rgba(187, 187, 187, 0.1); } .studio-stepcard-icon-lavender { color: #a3a3a3; border-color: rgba(163, 163, 163, 0.35); background: rgba(163, 163, 163, 0.1); } .studio-stepcard-title, .studio-option-title { margin: 0; font-size: 13px; font-weight: 620; } .studio-stepcard-desc, .studio-option-desc { margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: var(--studio-muted); } .studio-advanced { margin-top: 16px; border: 1px solid var(--studio-line-soft); border-radius: 14px; padding: 12px; background: rgba(255, 255, 255, 0.015); } .studio-advanced summary { cursor: pointer; font-size: 11px; font-weight: 640; color: var(--studio-muted); letter-spacing: 0.08em; text-transform: uppercase; } .studio-drawer { position: fixed; inset: 0; z-index: 96; background: rgba(0, 0, 0, 0.46); backdrop-filter: blur(4px); padding: 18px; display: grid; align-items: end; } .studio-drawer-panel { max-height: min(88vh, 920px); overflow: auto; border-radius: 16px; border: 1px solid var(--studio-line-soft); background: var(--studio-panel); box-shadow: var(--studio-shadow); } .studio-copilot-overlay { position: fixed; inset: 0; z-index: 98; background: rgba(0, 0, 0, 0.58); backdrop-filter: blur(7px); display: flex; justify-content: flex-end; padding: 18px; } .studio-copilot-overlay.is-pinned { inset: 0 0 0 auto; width: var(--ask-ripli-pinned-width); background: transparent; backdrop-filter: none; padding: 10px; pointer-events: none; } .studio-copilot-overlay.is-floating { inset: 0; background: transparent; backdrop-filter: none; padding: 0; pointer-events: none; } .studio-copilot-panel { position: relative; width: min(660px, 100%); height: calc(100vh - 36px); border-radius: 22px; border: 1px solid var(--studio-line-soft); background: linear-gradient(180deg, rgba(28, 28, 28, 0.98), rgba(15, 15, 15, 0.985)), rgba(18, 18, 18, 0.98); box-shadow: 0 24px 90px rgba(0, 0, 0, 0.54); padding: 17px; overflow: hidden; display: flex; flex-direction: column; gap: 11px; } .studio-copilot-overlay.is-pinned .studio-copilot-panel { width: 100%; height: calc(100vh - 20px); border-radius: 18px; padding: 14px 14px 14px 18px; gap: 10px; pointer-events: auto; } .studio-copilot-overlay.is-floating .studio-copilot-panel { position: absolute; left: var(--ask-ripli-floating-x, 24px); top: var(--ask-ripli-floating-y, 72px); width: min(var(--ask-ripli-floating-width, 420px), calc(100vw - 24px)); height: min(var(--ask-ripli-floating-height, 560px), calc(100vh - 24px)); min-width: min(320px, calc(100vw - 24px)); min-height: min(380px, calc(100vh - 24px)); border-radius: 18px; padding: 14px; gap: 8px; pointer-events: auto; box-shadow: 0 26px 80px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(255, 255, 255, 0.035) inset; } .studio-copilot-overlay.is-resizing { cursor: col-resize; } .studio-copilot-overlay.is-floating.is-resizing { cursor: nwse-resize; } .studio-copilot-overlay.is-resizing .studio-copilot-panel { user-select: none; } .studio-copilot-overlay.is-floating.is-dragging .studio-copilot-panel { user-select: none; } .studio-copilot-overlay.is-floating .studio-copilot-header.is-drag-handle { cursor: grab; } .studio-copilot-overlay.is-floating .studio-copilot-header { grid-template-columns: 34px minmax(0, 1fr) auto; } .studio-copilot-overlay.is-floating .studio-copilot-title-block { display: none; } .studio-copilot-overlay.is-floating.is-dragging .studio-copilot-header.is-drag-handle { cursor: grabbing; } .studio-copilot-overlay.is-floating .studio-copilot-subtitle, .studio-copilot-overlay.is-pinned .studio-copilot-subtitle { display: none; } .studio-copilot-overlay.is-floating .studio-copilot-brandmark, .studio-copilot-overlay.is-floating .studio-copilot-close { width: 34px; height: 34px; border-radius: 12px; } .studio-copilot-overlay.is-floating .studio-copilot-composer { padding: 10px; } .studio-copilot-overlay.is-floating .studio-copilot-composer .studio-textarea { min-height: 60px; max-height: 118px; } .studio-copilot-overlay.is-floating .studio-copilot-composer-actions { gap: 8px; } .studio-copilot-resize-handle { position: absolute; left: 0; top: 14px; bottom: 14px; z-index: 4; width: 14px; border: 0; border-radius: 12px; background: transparent; color: var(--studio-muted); cursor: col-resize; display: grid; place-items: center; padding: 0; } .studio-copilot-resize-handle::before { content: ""; width: 3px; height: 58px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); opacity: 0.72; transition: opacity 0.16s ease, background 0.16s ease, transform 0.16s ease; } .studio-copilot-resize-handle:hover::before, .studio-copilot-resize-handle:focus-visible::before, .studio-copilot-overlay.is-resizing .studio-copilot-resize-handle::before { background: rgba(255, 255, 255, 0.42); opacity: 1; transform: scaleY(1.08); } .studio-copilot-resize-handle:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.56); outline-offset: 2px; } .studio-copilot-floating-resize-frame { position: absolute; left: var(--ask-ripli-floating-x, 24px); top: var(--ask-ripli-floating-y, 72px); width: min(var(--ask-ripli-floating-width, 420px), calc(100vw - 24px)); height: min(var(--ask-ripli-floating-height, 560px), calc(100vh - 24px)); z-index: 7; pointer-events: none; } .studio-copilot-floating-resize-edge { position: absolute; z-index: 1; border: 0; background: transparent; padding: 0; pointer-events: auto; touch-action: none; } .studio-copilot-overlay.is-floating .studio-copilot-panel:hover + .studio-copilot-floating-resize-frame .studio-copilot-floating-resize-edge::before { opacity: 0.72; } .studio-copilot-floating-resize-edge::before { content: ""; position: absolute; opacity: 0; transition: opacity 0.16s ease, background 0.16s ease, border-color 0.16s ease, transform 0.16s ease; } .studio-copilot-floating-resize-edge.is-n, .studio-copilot-floating-resize-edge.is-s { left: 22px; right: 22px; height: 12px; cursor: ns-resize; } .studio-copilot-floating-resize-edge.is-n { top: -6px; } .studio-copilot-floating-resize-edge.is-s { bottom: -6px; } .studio-copilot-floating-resize-edge.is-e, .studio-copilot-floating-resize-edge.is-w { top: 22px; bottom: 22px; width: 12px; cursor: ew-resize; } .studio-copilot-floating-resize-edge.is-e { right: -6px; } .studio-copilot-floating-resize-edge.is-w { left: -6px; } .studio-copilot-floating-resize-edge.is-ne, .studio-copilot-floating-resize-edge.is-se, .studio-copilot-floating-resize-edge.is-sw, .studio-copilot-floating-resize-edge.is-nw { width: 24px; height: 24px; } .studio-copilot-floating-resize-edge.is-ne, .studio-copilot-floating-resize-edge.is-sw { cursor: nesw-resize; } .studio-copilot-floating-resize-edge.is-se, .studio-copilot-floating-resize-edge.is-nw { cursor: nwse-resize; } .studio-copilot-floating-resize-edge.is-ne { top: -8px; right: -8px; } .studio-copilot-floating-resize-edge.is-se { right: -8px; bottom: -8px; } .studio-copilot-floating-resize-edge.is-sw { bottom: -8px; left: -8px; } .studio-copilot-floating-resize-edge.is-nw { top: -8px; left: -8px; } .studio-copilot-floating-resize-edge.is-n::before, .studio-copilot-floating-resize-edge.is-s::before { left: 18px; right: 18px; height: 2px; border-radius: 999px; background: rgba(255, 255, 255, 0.28); } .studio-copilot-floating-resize-edge.is-n::before { top: 5px; } .studio-copilot-floating-resize-edge.is-s::before { bottom: 5px; } .studio-copilot-floating-resize-edge.is-e::before, .studio-copilot-floating-resize-edge.is-w::before { top: 18px; bottom: 18px; width: 2px; border-radius: 999px; background: rgba(255, 255, 255, 0.28); } .studio-copilot-floating-resize-edge.is-e::before { right: 5px; } .studio-copilot-floating-resize-edge.is-w::before { left: 5px; } .studio-copilot-floating-resize-edge.is-ne::before, .studio-copilot-floating-resize-edge.is-se::before, .studio-copilot-floating-resize-edge.is-sw::before, .studio-copilot-floating-resize-edge.is-nw::before { width: 9px; height: 9px; border-color: rgba(255, 255, 255, 0.34); border-style: solid; } .studio-copilot-floating-resize-edge.is-ne::before { top: 8px; right: 8px; border-width: 2px 2px 0 0; border-radius: 0 4px 0 0; } .studio-copilot-floating-resize-edge.is-se::before { right: 8px; bottom: 8px; border-width: 0 2px 2px 0; border-radius: 0 0 4px 0; opacity: 0.58; } .studio-copilot-floating-resize-edge.is-sw::before { bottom: 8px; left: 8px; border-width: 0 0 2px 2px; border-radius: 0 0 0 4px; } .studio-copilot-floating-resize-edge.is-nw::before { top: 8px; left: 8px; border-width: 2px 0 0 2px; border-radius: 4px 0 0 0; } .studio-copilot-floating-resize-edge:hover::before, .studio-copilot-floating-resize-edge:focus-visible::before, .studio-copilot-overlay.is-floating.is-resizing .studio-copilot-floating-resize-edge::before { opacity: 1; } .studio-copilot-floating-resize-edge:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.56); outline-offset: 2px; } html[data-studio-theme="light"] .studio-copilot-floating-resize-edge.is-n::before, html[data-studio-theme="light"] .studio-copilot-floating-resize-edge.is-s::before, html[data-studio-theme="light"] .studio-copilot-floating-resize-edge.is-e::before, html[data-studio-theme="light"] .studio-copilot-floating-resize-edge.is-w::before { background: rgba(16, 16, 16, 0.5); } html[data-studio-theme="light"] .studio-copilot-floating-resize-edge.is-ne::before, html[data-studio-theme="light"] .studio-copilot-floating-resize-edge.is-se::before, html[data-studio-theme="light"] .studio-copilot-floating-resize-edge.is-sw::before, html[data-studio-theme="light"] .studio-copilot-floating-resize-edge.is-nw::before { border-color: rgba(16, 16, 16, 0.5); } html[data-studio-theme="light"] .studio-copilot-floating-resize-edge.is-se::before { opacity: 0.54; } html[data-studio-theme="light"] .studio-copilot-floating-resize-edge:hover::before, html[data-studio-theme="light"] .studio-copilot-floating-resize-edge:focus-visible::before, html[data-studio-theme="light"] .studio-copilot-overlay.is-floating.is-resizing .studio-copilot-floating-resize-edge::before { opacity: 1; border-color: rgba(16, 16, 16, 0.82); } html[data-studio-theme="light"] .studio-copilot-floating-resize-edge.is-n:hover::before, html[data-studio-theme="light"] .studio-copilot-floating-resize-edge.is-s:hover::before, html[data-studio-theme="light"] .studio-copilot-floating-resize-edge.is-e:hover::before, html[data-studio-theme="light"] .studio-copilot-floating-resize-edge.is-w:hover::before, html[data-studio-theme="light"] .studio-copilot-floating-resize-edge.is-n:focus-visible::before, html[data-studio-theme="light"] .studio-copilot-floating-resize-edge.is-s:focus-visible::before, html[data-studio-theme="light"] .studio-copilot-floating-resize-edge.is-e:focus-visible::before, html[data-studio-theme="light"] .studio-copilot-floating-resize-edge.is-w:focus-visible::before, html[data-studio-theme="light"] .studio-copilot-overlay.is-floating.is-resizing .studio-copilot-floating-resize-edge.is-n::before, html[data-studio-theme="light"] .studio-copilot-overlay.is-floating.is-resizing .studio-copilot-floating-resize-edge.is-s::before, html[data-studio-theme="light"] .studio-copilot-overlay.is-floating.is-resizing .studio-copilot-floating-resize-edge.is-e::before, html[data-studio-theme="light"] .studio-copilot-overlay.is-floating.is-resizing .studio-copilot-floating-resize-edge.is-w::before { background: rgba(16, 16, 16, 0.74); } html[data-studio-theme="light"] .studio-copilot-floating-resize-edge:focus-visible { outline: 2px solid rgba(16, 16, 16, 0.28); } html[data-studio-theme="light"] .studio-copilot-panel { border-color: rgba(16, 16, 16, 0.11); background: linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(248, 248, 248, 0.955)), rgba(255, 255, 255, 0.98); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.96) inset, 0 24px 76px rgba(16, 16, 16, 0.16); color: rgba(16, 16, 16, 0.9); } html[data-studio-theme="light"] .studio-copilot-overlay.is-floating .studio-copilot-panel { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.96) inset, 0 26px 70px rgba(16, 16, 16, 0.18), 0 0 0 1px rgba(16, 16, 16, 0.035) inset; } html[data-studio-theme="light"] .studio-copilot-brandmark, html[data-studio-theme="light"] .studio-copilot-close { border-color: rgba(16, 16, 16, 0.1); background: rgba(255, 255, 255, 0.74); color: rgba(16, 16, 16, 0.62); } html[data-studio-theme="light"] .studio-copilot-close:hover { border-color: rgba(16, 16, 16, 0.16); background: rgba(16, 16, 16, 0.06); color: rgba(16, 16, 16, 0.9); } .studio-copilot-header { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; } .studio-copilot-brandmark { width: 40px; height: 40px; border-radius: 13px; border: 1px solid rgba(255, 255, 255, 0.13); background: radial-gradient( circle at 30% 20%, rgba(255, 255, 255, 0.18), transparent 40% ), linear-gradient( 145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025) ); color: var(--studio-text); display: grid; place-items: center; } .studio-copilot-title-block { min-width: 0; } .studio-copilot-title-block .studio-kicker { margin: 0 0 3px; } .studio-copilot-title-block h2 { margin: 0; color: var(--studio-text); font-size: 20px; line-height: 1.15; font-weight: 780; letter-spacing: 0; } .studio-copilot-subtitle { margin: 3px 0 0; color: var(--studio-muted); font-size: 11px; line-height: 1.25; font-weight: 560; } .studio-copilot-header-actions { display: inline-flex; align-items: center; gap: 8px; } .studio-copilot-close { width: 36px; height: 36px; border-radius: 13px; border: 1px solid var(--studio-line-soft); background: transparent; color: var(--studio-muted); display: grid; place-items: center; cursor: pointer; transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease; } .studio-copilot-close:hover { border-color: var(--studio-line); background: var(--studio-panel-2); color: var(--studio-text); } .studio-copilot-guardrail-row { display: flex; flex-wrap: wrap; gap: 6px; } .studio-copilot-guardrail-row span, .studio-ask-provenance span, .studio-ask-metadata span, .studio-credit-badge, .studio-risk-badge { min-height: 26px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.085); background: rgba(255, 255, 255, 0.024); color: var(--studio-subtle); display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; font-size: 10px; line-height: 1; font-weight: 720; } .studio-copilot-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.018); border-radius: 13px; padding: 4px; } html[data-studio-theme="light"] .studio-copilot-tabs { background: rgba(16, 16, 16, 0.03); } .studio-copilot-tab { min-width: 0; height: 31px; border: 0; border-radius: 10px; background: transparent; color: var(--studio-muted); font: inherit; font-size: 11px; font-weight: 740; cursor: pointer; transition: color 0.16s ease, background 0.16s ease; } .studio-copilot-tab.is-active { background: rgba(232, 232, 232, 0.95); color: var(--studio-bg); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); } html[data-studio-theme="light"] .studio-copilot-tab.is-active { background: rgba(16, 16, 16, 0.08); color: rgba(16, 16, 16, 0.92); } .studio-copilot-body { min-height: 0; flex: 1; overflow: auto; padding-right: 2px; } .studio-copilot-body.is-ask { overflow: hidden; padding-right: 0; } .studio-copilot-ask { min-height: 0; height: 100%; display: flex; flex-direction: column; gap: 9px; } .studio-copilot-output { border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.085); background: linear-gradient( 150deg, rgba(255, 255, 255, 0.042), rgba(255, 255, 255, 0.015) ), rgba(255, 255, 255, 0.018); padding: 12px; } .studio-copilot-output pre { margin: 0; white-space: pre-wrap; word-break: break-word; color: var(--studio-subtle); font-size: 12px; line-height: 1.45; } .studio-ask-guide-card { display: grid; gap: 9px; } .studio-ask-guide-list { display: grid; gap: 7px; } .studio-ask-guide-step { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 9px; border-radius: 13px; border: 1px solid rgba(255, 255, 255, 0.075); background: rgba(255, 255, 255, 0.018); padding: 9px 10px; } .studio-safe-action-card { border-color: rgba(255, 255, 255, 0.13); background: linear-gradient( 145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018) ), rgba(255, 255, 255, 0.03); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045); } .studio-safe-action-list { display: grid; gap: 7px; } .studio-safe-action-item { min-width: 0; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 9px; align-items: start; border-radius: 12px; padding: 8px 9px; background: rgba(255, 255, 255, 0.035); } .studio-safe-action-dot { width: 8px; height: 8px; margin-top: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.82); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08); } .studio-ask-guide-step-index { width: 23px; height: 23px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); color: var(--studio-text); font-size: 11px; font-weight: 800; } .studio-ask-guide-step-copy { min-width: 0; } .studio-ask-guide-step-copy .studio-row-title, .studio-ask-guide-step-copy .studio-row-meta { margin: 0; } .studio-ask-guide-action { min-height: 31px; max-width: 100%; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.9); color: #101010; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 12px; font: inherit; font-size: 11px; font-weight: 650; line-height: 1.15; text-align: center; white-space: normal; overflow-wrap: anywhere; cursor: pointer; transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease; } .studio-ask-guide-action svg { flex: 0 0 auto; } .studio-ask-guide-action:hover { background: #ffffff; border-color: rgba(255, 255, 255, 0.32); transform: translateY(-1px); } .studio-copilot-overlay.is-pinned .studio-ask-guide-step { grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: 8px 10px; } .studio-copilot-overlay.is-pinned .studio-ask-guide-action { grid-column: 2; width: min(100%, 220px); justify-content: space-between; margin-top: 2px; } .studio-copilot-overlay.is-pinned .studio-copilot-suggestions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .studio-copilot-overlay.is-pinned .studio-chat-bubble { max-width: 100%; } .studio-copilot-overlay.is-pinned .studio-marketing-action-card-button { width: min(100%, 240px); } [data-ask-ripli-guide-target].studio-guide-target-highlight { outline: 2px solid rgba(255, 255, 255, 0.88); outline-offset: 4px; box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.12), 0 0 34px rgba(255, 255, 255, 0.18); animation: studio-guide-target-pulse 1.2s ease-in-out 2; } @keyframes studio-guide-target-pulse { 0%, 100% { outline-offset: 4px; } 50% { outline-offset: 8px; } } @media (max-width: 640px) { .studio-ask-guide-step { grid-template-columns: 24px minmax(0, 1fr); } .studio-ask-guide-action { grid-column: 2; width: fit-content; } } .studio-copilot-suggestions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; flex-shrink: 0; } .studio-copilot-suggestion { min-width: 0; min-height: 32px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.075); background: rgba(255, 255, 255, 0.024); color: var(--studio-text); display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 9px; font: inherit; font-size: 11px; font-weight: 730; line-height: 1.12; text-align: center; cursor: pointer; transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease; } .studio-copilot-suggestion svg { flex: 0 0 auto; } .studio-copilot-suggestion:hover:not(:disabled) { border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.045); transform: translateY(-1px); } .studio-copilot-suggestion:disabled { cursor: not-allowed; opacity: 0.54; } .studio-copilot-composer { display: grid; gap: 8px; padding: 12px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.115); background: linear-gradient(180deg, rgba(22, 22, 22, 0.98), rgba(12, 12, 12, 0.985)), rgba(18, 18, 18, 0.94); box-shadow: 0 -18px 34px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(255, 255, 255, 0.018) inset; flex-shrink: 0; position: sticky; bottom: 0; z-index: 2; } .studio-copilot-composer .studio-textarea { min-height: 70px; max-height: 150px; resize: none; border: 0; border-radius: 14px; background: transparent; padding: 2px 4px; box-shadow: none; } .studio-copilot-composer .studio-textarea:focus { outline: none; border-color: transparent; box-shadow: none; } html[data-studio-theme="light"] .studio-copilot-composer { border-color: rgba(16, 16, 16, 0.09); background: rgba(255, 255, 255, 0.98); box-shadow: 0 -14px 26px rgba(16, 16, 16, 0.07), 0 1px 0 rgba(255, 255, 255, 0.95) inset; } html[data-studio-theme="light"] .studio-copilot-icon-button, html[data-studio-theme="light"] .studio-copilot-send-button { border-color: rgba(16, 16, 16, 0.1); background: rgba(16, 16, 16, 0.045); color: rgba(16, 16, 16, 0.58); font-weight: 580; } html[data-studio-theme="light"] .studio-copilot-icon-button:hover:not(:disabled), html[data-studio-theme="light"] .studio-copilot-send-button:hover:not(:disabled) { border-color: rgba(16, 16, 16, 0.16); background: rgba(16, 16, 16, 0.075); color: rgba(16, 16, 16, 0.9); } html[data-studio-theme="light"] .studio-copilot-send-button:not(:disabled) { border-color: rgba(16, 16, 16, 0.88); background: rgba(16, 16, 16, 0.88); color: #ffffff; box-shadow: 0 8px 18px rgba(16, 16, 16, 0.12); } html[data-studio-theme="light"] .studio-copilot-send-button:hover:not(:disabled) { background: rgba(16, 16, 16, 0.76); color: #ffffff; } .studio-copilot-composer-actions { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .studio-copilot-composer-tools, .studio-copilot-composer-submit { min-width: 0; display: inline-flex; align-items: center; gap: 7px; } .studio-copilot-icon-button, .studio-copilot-send-button { min-width: 0; height: 34px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.095); background: rgba(255, 255, 255, 0.035); color: var(--studio-subtle); display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 11px; font: inherit; font-size: 11px; font-weight: 620; cursor: pointer; transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease; } .studio-copilot-icon-button { width: 34px; padding: 0; } .studio-copilot-starter-trigger { width: auto; padding: 0 9px 0 10px; } .studio-copilot-send-button { min-width: 72px; border-color: rgba(255, 255, 255, 0.26); background: rgba(238, 238, 238, 0.96); color: #111111; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28); } .studio-copilot-icon-button:hover:not(:disabled), .studio-copilot-send-button:hover:not(:disabled) { border-color: rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.07); color: var(--studio-text); transform: translateY(-1px); } .studio-copilot-send-button:hover:not(:disabled) { background: #ffffff; color: #111111; } .studio-copilot-icon-button:disabled, .studio-copilot-send-button:disabled { cursor: not-allowed; opacity: 0.48; transform: none; } .studio-copilot-starter-shell { position: relative; display: inline-flex; } .studio-copilot-starter-menu { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 8; width: min(260px, calc(100vw - 40px)); display: grid; gap: 5px; padding: 7px; border-radius: 15px; border: 1px solid rgba(255, 255, 255, 0.105); background: linear-gradient(180deg, rgba(28, 28, 28, 0.985), rgba(14, 14, 14, 0.985)), rgba(18, 18, 18, 0.98); box-shadow: 0 20px 54px rgba(0, 0, 0, 0.46); } .studio-copilot-starter-menu button { min-width: 0; border: 0; border-radius: 11px; background: transparent; color: var(--studio-subtle); display: flex; align-items: center; gap: 8px; padding: 9px 10px; font: inherit; font-size: 11px; font-weight: 720; text-align: left; cursor: pointer; } .studio-copilot-starter-menu button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.06); color: var(--studio-text); } html[data-studio-theme="light"] .studio-copilot-starter-menu { border-color: rgba(16, 16, 16, 0.1); background: linear-gradient( 180deg, rgba(255, 255, 255, 0.98), rgba(246, 246, 246, 0.98) ), rgba(255, 255, 255, 0.96); box-shadow: 0 20px 48px rgba(16, 16, 16, 0.12); } html[data-studio-theme="light"] .studio-copilot-starter-menu button { color: rgba(16, 16, 16, 0.72); } html[data-studio-theme="light"] .studio-copilot-starter-menu button:hover:not(:disabled) { background: rgba(16, 16, 16, 0.06); color: rgba(16, 16, 16, 0.92); } .studio-copilot-attachment-list { min-width: 0; display: flex; gap: 7px; overflow-x: auto; padding-bottom: 1px; } .studio-copilot-attachment-chip { min-width: 0; max-width: 100%; height: 44px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.085); background: rgba(255, 255, 255, 0.035); display: inline-grid; grid-template-columns: 36px minmax(70px, 1fr) auto 24px; align-items: center; gap: 7px; padding: 4px 5px 4px 4px; color: var(--studio-subtle); } .studio-copilot-attachment-chip img { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; } .studio-copilot-attachment-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; font-weight: 720; } .studio-copilot-attachment-chip small { color: var(--studio-muted); font-size: 9px; white-space: nowrap; } .studio-copilot-attachment-chip button { width: 24px; height: 24px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.055); color: var(--studio-muted); display: grid; place-items: center; cursor: pointer; } .studio-copilot-attachment-chip button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); color: var(--studio-text); } .studio-copilot-tool-panel { border-radius: 14px; border: 1px solid var(--studio-line-soft); background: rgba(255, 255, 255, 0.018); padding: 12px; } .studio-copilot-tool-head, .studio-ask-card-title { min-width: 0; color: var(--studio-text); display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; font-weight: 780; overflow-wrap: anywhere; } .studio-copilot-tool-actions { margin-top: 12px; } .studio-copilot-structured-output { margin-top: 14px; } .studio-copilot-structured-output .studio-row-title { margin-top: 0; } .studio-copilot-error { margin-top: 12px; } .studio-surface .studio-surface { box-shadow: none; background: rgba(255, 255, 255, 0.015); } html[data-studio-theme="light"] .studio-surface .studio-surface { background: rgba(16, 16, 16, 0.03); } .studio-library-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .studio-library-card { border-radius: 14px; border: 1px solid var(--studio-line-soft); background: var(--studio-panel-2); overflow: hidden; transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease; } .studio-library-card:hover { border-color: var(--studio-line); background: var(--studio-panel); transform: translateY(-1px); } .studio-library-thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--studio-line-soft); } .studio-library-thumb img, .studio-library-thumb video { width: 100%; height: 100%; object-fit: cover; } .studio-library-empty { width: 100%; height: 100%; display: grid; place-items: center; color: var(--studio-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .studio-library-body { padding: 13px; } .studio-timeline { margin-top: 10px; padding-left: 12px; border-left: 1px solid var(--studio-line-soft); display: grid; gap: 8px; } .studio-timeline-item { position: relative; padding-left: 8px; } .studio-timeline-item::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--studio-accent); position: absolute; left: -15px; top: 8px; } .studio-chat-log { flex: 1; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.055); background: radial-gradient( circle at 20% 0%, rgba(255, 255, 255, 0.055), transparent 32% ), linear-gradient( 180deg, rgba(255, 255, 255, 0.014), rgba(255, 255, 255, 0.006) ), rgba(255, 255, 255, 0.008); padding: 11px; min-height: 0; max-height: none; overflow: auto; display: grid; align-content: start; gap: 9px; } .studio-chat-bubble { max-width: min(84%, 520px); position: relative; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.075); padding: 11px 12px; font-size: 13px; line-height: 1.5; font-weight: 540; white-space: normal; animation: studio-chat-bubble-in 0.18s ease-out; } .studio-chat-bubble.is-user { justify-self: end; border-color: rgba(255, 255, 255, 0.36); background: linear-gradient( 180deg, rgba(255, 255, 255, 0.98), rgba(224, 224, 224, 0.94) ), #eeeeee; color: #111111; border-bottom-right-radius: 6px; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.26), 0 1px 0 rgba(255, 255, 255, 0.52) inset; } .studio-chat-bubble.is-assistant { justify-self: start; border-bottom-left-radius: 6px; background: linear-gradient( 145deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.018) ), rgba(255, 255, 255, 0.022); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.014) inset; } .studio-chat-bubble.is-welcome { max-width: min(94%, 560px); border-color: rgba(255, 255, 255, 0.12); background: linear-gradient( 145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02) ), rgba(255, 255, 255, 0.018); padding: 13px; } html[data-studio-theme="light"] .studio-chat-bubble.is-welcome { border-color: rgba(16, 16, 16, 0.12); background: linear-gradient(145deg, rgba(16, 16, 16, 0.045), rgba(16, 16, 16, 0.012)), var(--studio-panel-2); } .studio-chat-bubble.is-thinking { color: var(--studio-muted); min-width: 220px; background: radial-gradient( circle at 16px 18px, rgba(255, 255, 255, 0.11), transparent 28px ), linear-gradient( 145deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.016) ), rgba(255, 255, 255, 0.02); } .studio-thinking-content { display: inline-flex; align-items: center; gap: 8px; color: rgba(245, 245, 245, 0.78); white-space: nowrap; } .studio-thinking-orb { width: 8px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.82); box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.07); animation: studio-thinking-orb 1.45s ease-in-out infinite; } .studio-thinking-dots { display: inline-flex; gap: 3px; align-items: center; } .studio-thinking-dots i { width: 3px; height: 3px; border-radius: 999px; background: currentColor; opacity: 0.35; animation: studio-thinking-dot 1.2s ease-in-out infinite; } .studio-thinking-dots i:nth-child(2) { animation-delay: 0.14s; } .studio-thinking-dots i:nth-child(3) { animation-delay: 0.28s; } @keyframes studio-thinking-orb { 0%, 100% { transform: scale(0.9); opacity: 0.72; } 50% { transform: scale(1.12); opacity: 1; } } @keyframes studio-thinking-dot { 0%, 100% { opacity: 0.28; transform: translateY(0); } 50% { opacity: 0.92; transform: translateY(-2px); } } .studio-chat-role { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .studio-chat-content { color: var(--studio-text); white-space: pre-wrap; } .studio-chat-formatted { display: grid; gap: 8px; } .studio-chat-formatted p { margin: 0; } .studio-chat-heading { color: var(--studio-text); font-size: 11px; font-weight: 820; letter-spacing: 0.01em; } .studio-chat-list { margin: 0; padding: 0; display: grid; gap: 6px; list-style: none; } .studio-chat-list li { position: relative; margin: 0; padding: 8px 9px 8px 26px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.075); background: rgba(255, 255, 255, 0.032); color: rgba(245, 245, 245, 0.88); } .studio-chat-list li::before { content: ""; position: absolute; left: 10px; top: 14px; width: 6px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.72); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.075); } .studio-chat-list:is(ol) { counter-reset: studio-chat-step; } .studio-chat-list:is(ol) li { counter-increment: studio-chat-step; padding-left: 34px; } .studio-chat-list:is(ol) li::before { content: counter(studio-chat-step); left: 9px; top: 8px; width: 18px; height: 18px; background: rgba(255, 255, 255, 0.11); color: var(--studio-text); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 820; box-shadow: none; } .studio-chat-bubble.is-user .studio-chat-content { color: #111111; } .studio-chat-bubble.is-user .studio-chat-formatted, .studio-chat-bubble.is-user .studio-chat-formatted p { display: block; } .studio-chat-attachment-list { display: grid; gap: 6px; margin-top: 8px; } .studio-chat-attachment { min-width: 0; border-radius: 13px; border: 1px solid rgba(255, 255, 255, 0.11); background: rgba(255, 255, 255, 0.045); color: inherit; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 8px; padding: 5px; text-decoration: none; } .studio-chat-bubble.is-user .studio-chat-attachment { border-color: rgba(17, 17, 17, 0.12); background: rgba(17, 17, 17, 0.06); } .studio-chat-attachment img { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; } html[data-studio-theme="light"] .studio-chat-log { border-color: rgba(16, 16, 16, 0.08); background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(248, 248, 248, 0.62)), rgba(255, 255, 255, 0.66); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); } html[data-studio-theme="light"] .studio-chat-bubble.is-assistant { border-color: rgba(16, 16, 16, 0.095); background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(250, 250, 250, 0.97)), #ffffff; color: rgba(16, 16, 16, 0.9); box-shadow: 0 12px 28px rgba(16, 16, 16, 0.09), 0 1px 0 rgba(255, 255, 255, 0.9) inset; font-weight: 500; } html[data-studio-theme="light"] .studio-chat-bubble.is-assistant .studio-chat-content, html[data-studio-theme="light"] .studio-chat-bubble.is-assistant .studio-chat-heading { color: rgba(16, 16, 16, 0.9); } html[data-studio-theme="light"] .studio-chat-bubble.is-assistant .studio-chat-formatted p { color: rgba(16, 16, 16, 0.76); } html[data-studio-theme="light"] .studio-chat-bubble.is-assistant .studio-chat-list li { border-color: rgba(16, 16, 16, 0.09); background: rgba(16, 16, 16, 0.035); color: rgba(16, 16, 16, 0.76); } html[data-studio-theme="light"] .studio-chat-bubble.is-assistant .studio-chat-list li::before { background: rgba(16, 16, 16, 0.62); box-shadow: 0 0 0 3px rgba(16, 16, 16, 0.08); } html[data-studio-theme="light"] .studio-chat-bubble.is-assistant .studio-chat-list:is(ol) li::before { background: rgba(16, 16, 16, 0.08); color: rgba(16, 16, 16, 0.82); box-shadow: none; } html[data-studio-theme="light"] .studio-chat-bubble.is-thinking { border-color: rgba(16, 16, 16, 0.1); background: radial-gradient(circle at 16px 18px, rgba(16, 16, 16, 0.08), transparent 28px), rgba(255, 255, 255, 0.94); color: rgba(16, 16, 16, 0.58); } html[data-studio-theme="light"] .studio-thinking-content { color: rgba(16, 16, 16, 0.62); } html[data-studio-theme="light"] .studio-thinking-orb { background: rgba(16, 16, 16, 0.68); box-shadow: 0 0 0 5px rgba(16, 16, 16, 0.08); } html[data-studio-theme="light"] .studio-chat-bubble.is-assistant .studio-chat-attachment { border-color: rgba(16, 16, 16, 0.1); background: rgba(16, 16, 16, 0.04); } html[data-studio-theme="light"] .studio-chat-bubble .studio-copilot-output, html[data-studio-theme="light"] .studio-chat-bubble .studio-ask-card, html[data-studio-theme="light"] .studio-chat-bubble .studio-safe-action-item, html[data-studio-theme="light"] .studio-chat-bubble .studio-ask-guide-step, html[data-studio-theme="light"] .studio-chat-bubble .studio-risk-factor { border-color: rgba(16, 16, 16, 0.085); background: rgba(16, 16, 16, 0.026); color: rgba(16, 16, 16, 0.76); } html[data-studio-theme="light"] .studio-chat-bubble .studio-copilot-output pre, html[data-studio-theme="light"] .studio-chat-bubble .studio-card-desc, html[data-studio-theme="light"] .studio-chat-bubble .studio-ask-card-copy { color: rgba(16, 16, 16, 0.62); font-weight: 480; } html[data-studio-theme="light"] .studio-chat-bubble .studio-row-title, html[data-studio-theme="light"] .studio-chat-bubble .studio-ask-card-title { color: rgba(16, 16, 16, 0.84); font-weight: 610; } .studio-chat-attachment span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; font-weight: 720; } @keyframes studio-chat-bubble-in { from { opacity: 0; transform: translateY(3px) scale(0.99); } to { opacity: 1; transform: translateY(0) scale(1); } } .studio-ask-detail-stack { display: grid; gap: 8px; margin-top: 8px; } .studio-ask-card { display: grid; gap: 9px; } .studio-ask-card-alert { border-color: rgba(248, 113, 113, 0.36); } .studio-ask-card-head { min-width: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 10px; } .studio-ask-card-copy, .studio-risk-factor .studio-card-desc, .studio-safer-draft .studio-card-desc { min-width: 0; margin: 0; overflow-wrap: anywhere; } .studio-risk-factor-list { display: grid; gap: 7px; } .studio-risk-factor { border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.016); padding: 9px; } .studio-risk-factor .studio-row-title, .studio-safer-draft .studio-row-title, .studio-copilot-structured-output .studio-row-title { margin: 0; } .studio-risk-factor .studio-row-meta { margin: 3px 0 4px; } .studio-risk-badge.is-low { color: #bbf7d0; border-color: rgba(74, 222, 128, 0.28); } .studio-risk-badge.is-medium { color: #fde68a; border-color: rgba(245, 158, 11, 0.32); } .studio-risk-badge.is-high { color: #fecaca; border-color: rgba(248, 113, 113, 0.36); } .studio-credit-badge { max-width: 100%; color: var(--studio-text); white-space: normal; overflow-wrap: anywhere; } .studio-ask-metadata, .studio-ask-provenance { min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; } .studio-ask-metadata span { max-width: 100%; white-space: normal; overflow-wrap: anywhere; } .studio-ask-provenance { margin-top: 1px; color: var(--studio-muted); font-size: 10px; line-height: 1.2; gap: 4px 8px; } .studio-ask-provenance span { min-height: auto; border: 0; background: transparent; padding: 0; color: inherit; font-size: inherit; font-weight: 650; } .studio-ask-provenance span:not(:last-child)::after { content: "•"; margin-left: 8px; color: var(--studio-muted); opacity: 0.62; } .studio-safer-draft { display: grid; gap: 6px; border-radius: 12px; border: 1px solid rgba(245, 158, 11, 0.24); background: rgba(245, 158, 11, 0.055); padding: 9px; } .studio-marketing-action-card-shell { background: rgba(255, 255, 255, 0.025); } .studio-marketing-action-card-list { display: grid; gap: 8px; } .studio-marketing-action-card { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: start; border-radius: 13px; border: 1px solid rgba(255, 255, 255, 0.075); background: rgba(255, 255, 255, 0.018); padding: 10px; } .studio-marketing-action-card-copy { min-width: 0; display: grid; gap: 6px; } .studio-marketing-action-card-copy .studio-row-title, .studio-marketing-action-card-copy .studio-row-meta { min-width: 0; margin: 0; overflow-wrap: anywhere; } .studio-marketing-route-badge, .studio-marketing-action-card-tags span { min-height: 22px; max-width: 100%; border-radius: 999px; border: 1px solid var(--studio-line-soft); background: rgba(255, 255, 255, 0.04); color: var(--studio-subtle); display: inline-flex; align-items: center; padding: 3px 8px; font-size: 10px; line-height: 1.15; font-weight: 620; white-space: normal; overflow-wrap: anywhere; } .studio-marketing-action-card-tags { display: flex; flex-wrap: wrap; gap: 5px; } .studio-marketing-action-card-button { width: fit-content; justify-content: center; justify-self: start; letter-spacing: 0; } html[data-studio-theme="light"] .studio-marketing-action-card-shell { background: rgba(255, 255, 255, 0.6); } html[data-studio-theme="light"] .studio-marketing-action-card { border-color: rgba(16, 16, 16, 0.085); background: rgba(255, 255, 255, 0.72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82); } html[data-studio-theme="light"] .studio-marketing-route-badge, html[data-studio-theme="light"] .studio-marketing-action-card-tags span { border-color: rgba(16, 16, 16, 0.08); background: rgba(16, 16, 16, 0.045); color: rgba(16, 16, 16, 0.55); font-weight: 560; } html[data-studio-theme="light"] .studio-ask-guide-action { border-color: rgba(16, 16, 16, 0.12); background: rgba(16, 16, 16, 0.88); color: #ffffff; box-shadow: 0 8px 18px rgba(16, 16, 16, 0.11); font-weight: 580; } html[data-studio-theme="light"] .studio-ask-guide-action:hover { border-color: rgba(16, 16, 16, 0.2); background: rgba(16, 16, 16, 0.76); } .studio-marketing-action-card-button:disabled { cursor: default; border-color: rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.035); color: rgba(255, 255, 255, 0.52); box-shadow: none; font-size: 10.5px; font-weight: 560; transform: none; } .studio-marketing-action-card-button:disabled:hover { border-color: rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.035); color: rgba(255, 255, 255, 0.52); transform: none; } .studio-marketing-action-card-button:disabled svg { display: none; } html[data-studio-theme="light"] .studio-marketing-action-card-button:disabled { border-color: rgba(16, 16, 16, 0.08); background: rgba(16, 16, 16, 0.04); color: rgba(16, 16, 16, 0.54); box-shadow: none; } html[data-studio-theme="light"] .studio-marketing-action-card-button:disabled:hover { border-color: rgba(16, 16, 16, 0.08); background: rgba(16, 16, 16, 0.04); color: rgba(16, 16, 16, 0.54); } .studio-ask-action-row { margin-top: 0; } @media (max-width: 760px) { .studio-copilot-overlay { padding: 10px; } .studio-copilot-panel { width: 100%; height: calc(100vh - 20px); border-radius: 16px; padding: 14px; } .studio-copilot-overlay.is-floating { padding: 10px; pointer-events: auto; background: rgba(0, 0, 0, 0.58); backdrop-filter: blur(7px); } .studio-copilot-overlay.is-floating .studio-copilot-panel { position: relative; left: auto; top: auto; width: 100%; height: calc(100vh - 20px); } .studio-copilot-floating-resize-frame { display: none; } .studio-copilot-header { grid-template-columns: 38px minmax(0, 1fr) auto; } .studio-copilot-brandmark, .studio-copilot-close { width: 38px; height: 38px; } .studio-copilot-suggestions { grid-template-columns: repeat(2, minmax(0, 1fr)); } .studio-chat-bubble { max-width: 100%; } .studio-changelog-popover { position: fixed; top: 58px; right: 12px; left: 12px; width: auto; max-height: min(430px, calc(100vh - 82px)); } } /* Palette lock for protected app shell so legacy globals cannot tint pages differently. */ .studio-shell .studio-topbar { border-bottom-color: var(--studio-line-soft); background: rgba(17, 17, 17, 0.92); } html[data-studio-theme="light"] .studio-shell .studio-topbar { background: rgba(255, 255, 255, 0.9); } @keyframes studio-attention-pulse { 0% { box-shadow: 0 0 0 0 rgba(136, 136, 136, 0.32); } 100% { box-shadow: 0 0 0 8px rgba(136, 136, 136, 0); } } @keyframes studio-liquid-drift { 0% { transform: translateX(-6%) translateY(0) rotate(0deg); } 50% { transform: translateX(6%) translateY(-2%) rotate(4deg); } 100% { transform: translateX(-6%) translateY(0) rotate(0deg); } } @media (max-width: 1240px) { .studio-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .studio-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .studio-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .studio-dashboard-strip { grid-template-columns: 1fr; } } @media (max-width: 1023px) { .studio-shell { display: block; } .studio-shell-overlay.is-visible { opacity: 1; pointer-events: auto; } .studio-sidebar { width: min(320px, calc(100% - 56px)); position: fixed; left: 0; top: 0; height: 100vh; transform: translateX(-100%); z-index: 96; overflow: hidden auto; } .studio-shell.sidebar-expanded.is-desktop .studio-sidebar, .studio-shell.sidebar-collapsed.is-desktop .studio-sidebar, .studio-shell.sidebar-expanded.is-mobile .studio-sidebar, .studio-shell.sidebar-collapsed.is-mobile .studio-sidebar { width: min(320px, calc(100% - 56px)); } .studio-sidebar.is-open { transform: translateX(0); } .studio-shell.is-mobile .studio-sidebar-controls, .studio-shell.is-mobile .studio-sidebar-hint, .studio-shell.is-mobile .studio-nav-tooltip { display: none; } .studio-shell.is-mobile .studio-sidebar-brand-logo { width: auto; height: 22px; opacity: 1; } .studio-shell.is-mobile .studio-nav-label, .studio-shell.is-mobile .studio-sidebar-subtitle { opacity: 1; width: auto; height: auto; pointer-events: auto; } .studio-topbar .studio-mobile-nav-btn { display: inline-flex; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--studio-line-soft); background: transparent; color: var(--studio-text); align-items: center; justify-content: center; cursor: pointer; } .studio-content { width: min(1400px, calc(100% - 34px)); padding: 20px 0 84px; } .studio-beta-notice { width: min(1400px, calc(100% - 34px)); align-items: flex-start; flex-direction: column; } .studio-beta-notice-actions { width: 100%; flex-wrap: wrap; } .studio-content--canvas { width: calc(100% - 20px); padding: 10px 0 18px; } } @media (max-width: 760px) { .studio-content { width: calc(100% - 24px); } .studio-beta-notice { width: calc(100% - 24px); margin-top: 10px; } .studio-beta-notice-copy { align-items: flex-start; flex-direction: column; gap: 7px; } .studio-beta-notice-actions button:not(.studio-beta-notice-dismiss) { flex: 1 1 130px; } .studio-content--canvas { width: calc(100% - 12px); padding: 8px 0 14px; } .studio-banner-slot { min-height: 0; align-items: flex-start; flex-direction: column; } .studio-banner-actions { width: 100%; justify-content: flex-start; } .studio-grid-2, .studio-grid-3, .studio-grid-4, .studio-library-grid, .studio-template-grid { grid-template-columns: 1fr; } .studio-topbar { padding: 10px 12px; flex-direction: column; align-items: stretch; gap: 8px; } .studio-topbar-left { width: 100%; } .studio-topbar-actions { width: 100%; justify-content: space-between; gap: 4px; flex-wrap: wrap; } .studio-topbar .studio-mobile-nav-btn { flex-shrink: 0; } .studio-topbar-action-label { display: none; } .studio-stepper-row { display: grid; grid-template-columns: 1fr 1fr; } .studio-step-pill { width: 100%; justify-content: center; } .studio-dashboard-metric { min-width: 0; width: calc(50% - 5px); } .studio-btn-with-icon { width: 100%; justify-content: flex-start; } } /* Create flow refinement */ .studio-create-head { margin-bottom: 8px; } .studio-create-head-body { max-width: 760px; } .studio-create-title { margin: 6px 0 0; font-size: clamp(28px, 2.8vw, 36px); line-height: 1.08; letter-spacing: -0.02em; } .studio-create-subhead { margin-top: 8px; max-width: 620px; } .studio-create-toolbar { align-items: center; gap: 8px; padding: 8px; border-radius: 14px; border: 1px solid var(--studio-line-soft); background: rgba(255, 255, 255, 0.02); } .studio-create-stepper-wrap { padding: 12px; } .studio-create-stepper-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .studio-create-stepper-row .studio-step-pill { width: 100%; min-height: 38px; height: auto; justify-content: flex-start; padding: 8px 11px; border-radius: 12px; background: rgba(255, 255, 255, 0.015); border-color: var(--studio-line-soft); } .studio-create-stepper-row .studio-step-pill span { width: 20px; height: 20px; font-size: 10px; } .studio-create-stepper-row .studio-step-pill.is-active { border-color: rgba(136, 136, 136, 0.3); background: rgba(136, 136, 136, 0.16); color: var(--studio-text); } .studio-create-section { padding: 18px; border-radius: 18px; } .studio-create-section-head { display: grid; gap: 6px; } .studio-create-inline-card { padding: 12px 14px; } .studio-create-card { border: 1px solid var(--studio-line-soft); border-radius: 16px; background: rgba(255, 255, 255, 0.02); padding: 14px; } .studio-create-card-head { display: grid; gap: 2px; } .studio-create-chip-row { gap: 8px; } .studio-create-output-grid { align-items: end; } .studio-create-field { margin: 0; padding: 10px; border-radius: 12px; border: 1px solid var(--studio-line-soft); background: rgba(255, 255, 255, 0.015); } .studio-create-inline-note { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--studio-line-soft); background: rgba(255, 255, 255, 0.015); } .studio-create-quality-wrap .studio-row-meta { margin-top: 4px; } .studio-create-quality-option { min-height: 92px; } .studio-create-quality-option.is-locked { border-style: dashed; opacity: 0.72; } .studio-create-credit-stack { display: grid; gap: 8px; } .studio-create-credit-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--studio-line-soft); background: rgba(255, 255, 255, 0.015); } .studio-create-credit-row span { font-size: 12px; color: var(--studio-muted); } .studio-create-credit-row strong { font-size: 13px; font-weight: 640; color: var(--studio-text); } .studio-create-review-grid { align-items: start; } .studio-create-review-card { min-height: 100%; } .studio-create-summary-list { margin: 0; display: grid; gap: 8px; } .studio-create-summary-item { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 12px; align-items: start; padding-top: 8px; border-top: 1px solid var(--studio-line-soft); } .studio-create-summary-item:first-child { padding-top: 0; border-top: 0; } .studio-create-summary-item dt { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--studio-muted); } .studio-create-summary-item dd { margin: 0; font-size: 13px; line-height: 1.45; color: var(--studio-text); } .studio-create-review-cta { position: sticky; bottom: 10px; justify-content: space-between; gap: 10px; padding: 10px; border-radius: 14px; border: 1px solid var(--studio-line-soft); background: rgba(17, 17, 17, 0.86); backdrop-filter: blur(6px); } .studio-create-generate-btn { min-width: 180px; } html[data-studio-theme="light"] .studio-create-toolbar, html[data-studio-theme="light"] .studio-create-card, html[data-studio-theme="light"] .studio-create-field, html[data-studio-theme="light"] .studio-create-inline-note, html[data-studio-theme="light"] .studio-create-credit-row { background: rgba(16, 16, 16, 0.035); } html[data-studio-theme="light"] .studio-create-review-cta { background: rgba(255, 255, 255, 0.92); } @media (max-width: 1023px) { .studio-create-stepper-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .studio-create-toolbar { width: 100%; justify-content: flex-start; } } @media (max-width: 760px) { .studio-create-section { padding: 14px; } .studio-create-stepper-row { grid-template-columns: 1fr 1fr; } .studio-create-review-cta { position: static; padding: 0; border: 0; background: transparent; backdrop-filter: none; } .studio-create-generate-btn { min-width: 0; width: 100%; } .studio-create-summary-item { grid-template-columns: 1fr; gap: 4px; } } /* Canvas create workspace */ .studio-canvas-head { margin-bottom: 8px; } .studio-canvas-title { margin-top: 8px; font-size: clamp(1.7rem, 2.6vw, 2.35rem); } .studio-canvas-subhead { margin-top: 10px; max-width: 760px; } .studio-canvas-credits { height: 30px; padding: 0 12px; letter-spacing: 0.06em; } .studio-canvas-layout { margin-top: 14px; display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) minmax( 250px, 300px ); gap: 14px; align-items: start; } .studio-canvas-panel { padding: 16px; display: grid; gap: 12px; align-content: start; } .studio-canvas-preview-panel { padding: 16px; display: grid; gap: 12px; } .studio-canvas-tool-summary { border: 1px solid var(--studio-line-soft); border-radius: 12px; background: rgba(255, 255, 255, 0.02); padding: 11px 12px; } .studio-canvas-tool-summary .studio-row-meta { margin-top: 6px; } .studio-canvas-tool-fields { display: grid; gap: 10px; } .studio-canvas-generate { width: 100%; } .studio-canvas-preview-frame { position: relative; min-height: 560px; border: 1px solid var(--studio-line-soft); border-radius: 16px; background: rgba(255, 255, 255, 0.02); overflow: hidden; display: grid; place-items: center; } .studio-canvas-preview-media { width: 100%; height: 100%; object-fit: contain; display: block; background: rgba(0, 0, 0, 0.2); } .studio-canvas-empty { display: inline-grid; gap: 8px; text-align: center; color: var(--studio-muted); } .studio-canvas-empty p { margin: 0; font-size: 12px; font-weight: 520; letter-spacing: 0.01em; text-transform: none; } .studio-canvas-overlay { position: absolute; inset: 0; background: rgba(17, 17, 17, 0.58); backdrop-filter: blur(8px); display: grid; place-items: center; } .studio-canvas-overlay-shimmer { position: absolute; inset: 0; background: repeating-linear-gradient( 90deg, rgba(255, 255, 255, 0.02) 0, rgba(255, 255, 255, 0.02) 8px, rgba(255, 255, 255, 0.045) 8px, rgba(255, 255, 255, 0.045) 16px ); opacity: 0.28; animation: studio-canvas-shimmer 2.2s linear infinite; } .studio-canvas-overlay-copy { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 34px; border-radius: 999px; border: 1px solid var(--studio-line); background: rgba(17, 17, 17, 0.7); color: var(--studio-text); padding: 0 14px; font-size: 12px; font-weight: 620; } .studio-canvas-history-list { display: grid; gap: 10px; } .studio-canvas-history-item { width: 100%; text-align: left; border-radius: 12px; border: 1px solid var(--studio-line-soft); background: rgba(255, 255, 255, 0.02); color: var(--studio-text); padding: 9px; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; align-items: center; cursor: pointer; transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease; } .studio-canvas-history-item:hover { border-color: var(--studio-line); background: rgba(255, 255, 255, 0.04); transform: translateY(-1px); } .studio-canvas-history-item.is-selected { border-color: rgba(136, 136, 136, 0.3); background: var(--studio-accent-soft); } .studio-canvas-history-thumb { width: 84px; height: 64px; border-radius: 9px; overflow: hidden; border: 1px solid var(--studio-line-soft); background: rgba(255, 255, 255, 0.02); } .studio-canvas-history-media { width: 100%; height: 100%; object-fit: cover; display: block; } .studio-canvas-history-copy .studio-row-meta { margin-top: 5px; } html[data-studio-theme="light"] .studio-canvas-tool-summary, html[data-studio-theme="light"] .studio-canvas-preview-frame, html[data-studio-theme="light"] .studio-canvas-history-item, html[data-studio-theme="light"] .studio-canvas-history-thumb { background: rgba(16, 16, 16, 0.03); } html[data-studio-theme="light"] .studio-canvas-overlay { background: rgba(255, 255, 255, 0.62); } html[data-studio-theme="light"] .studio-canvas-overlay-copy { background: rgba(255, 255, 255, 0.84); } @keyframes studio-canvas-shimmer { 0% { transform: translateX(-8%); } 100% { transform: translateX(8%); } } .studio-skeleton { display: inline-block; border-radius: 6px; background: linear-gradient( 90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.04) 75% ); background-size: 200% 100%; animation: studio-skeleton-pulse 1.6s ease infinite; } @keyframes studio-skeleton-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } html[data-studio-theme="light"] .studio-skeleton { background: linear-gradient( 90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.06) 75% ); background-size: 200% 100%; } @media (max-width: 1380px) { .studio-canvas-layout { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); } .studio-canvas-preview-panel { grid-column: 1 / -1; order: 3; } } @media (max-width: 1023px) { .studio-canvas-layout { grid-template-columns: 1fr; } .studio-canvas-preview-panel { order: 2; } .studio-canvas-preview-frame { min-height: 420px; } } @media (max-width: 760px) { .studio-canvas-history-item { grid-template-columns: 72px minmax(0, 1fr); gap: 8px; } .studio-canvas-history-thumb { width: 72px; height: 56px; } .studio-canvas-preview-frame { min-height: 320px; } } /* Home canvas entry-point */ .studio-home-start { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; } .studio-home-start-copy { min-width: 0; } .studio-home-start-actions { display: grid; justify-items: end; gap: 8px; } .studio-home-start-cta { min-width: 216px; justify-content: center; } .studio-home-start-secondary { color: var(--studio-muted); font-size: 12px; font-weight: 640; letter-spacing: 0.01em; display: inline-flex; align-items: center; } .studio-home-start-secondary:hover { color: var(--studio-text); } @media (max-width: 1240px) { .studio-home-start { grid-template-columns: 1fr; } .studio-home-start-actions { justify-items: start; } } @media (max-width: 760px) { .studio-home-start-cta { width: 100%; min-width: 0; } } /* ── Toast notifications ────────────────────────────────────────────────── */ .studio-feedback-rail { position: fixed; top: var(--studio-feedback-top, calc(var(--studio-topbar-height, 64px) + 12px)); right: 16px; z-index: 80; width: min(344px, calc(100vw - 32px)); max-height: min(40dvh, calc(100dvh - var(--studio-feedback-top, calc(var(--studio-topbar-height, 64px) + 12px)) - 16px)); display: flex; flex-direction: column; gap: 8px; overflow-y: auto; overscroll-behavior: contain; pointer-events: none; font-family: "Manrope", sans-serif; } .studio-feedback-card { box-sizing: border-box; flex-shrink: 0; min-width: 0; width: 100%; border: 1px solid var(--studio-line-soft, #444); border-radius: 12px; padding: 12px 14px; background: var(--studio-panel, #161616); color: var(--studio-text, #eee); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; pointer-events: auto; } /* Hostless prepared/admin errors stay compact and in their content flow. */ .studio-feedback-inline { box-sizing: border-box; width: min(344px, 100%); margin: 12px 0; padding: 12px 14px; border: 1px solid var(--studio-line-soft, #444); border-radius: 12px; background: var(--studio-panel, #161616); color: var(--studio-text, #eee); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; } .studio-feedback-actions { margin-top: 8px; } .studio-workspace-feedback { position: relative; padding-right: 40px; } .studio-feedback-title { margin: 0 0 4px; font-size: 13px; font-weight: 700; } .studio-feedback-message { margin: 0; font-size: 13px; line-height: 1.5; } .studio-feedback-context { margin-top: 6px; color: var(--studio-muted); font-size: 12px; } .studio-feedback-context summary { cursor: pointer; } .studio-feedback-context p { margin: 4px 0 0; } .studio-workspace-feedback .workspace-graph-notice-actions { margin-top: 8px; } .studio-feedback-dismiss { position: absolute; right: 8px; top: 8px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: inherit; opacity: 0.65; cursor: pointer; } .studio-feedback-dismiss:hover { opacity: 1; background: var(--studio-hover); } .studio-feedback-card .studio-btn { min-height: 30px; padding: 5px 9px; font-size: 12px; } .studio-feedback-card .studio-actions { flex-wrap: wrap; gap: 6px; } .studio-toast-container { display: contents; } .studio-toast { display: flex; align-items: center; gap: 10px; animation: studio-toast-in 0.25s ease-out; } @media (max-width: 1023px) { .studio-feedback-rail { right: 12px; width: min(344px, calc(100vw - 24px)); } } @media (pointer: coarse) { .studio-workspace-feedback { padding-right: 56px; min-height: 52px; } .studio-feedback-dismiss { right: 4px; top: 4px; width: 44px; height: 44px; } .studio-feedback-card .workspace-graph-notice-actions button, .studio-feedback-card .studio-btn, .studio-feedback-context summary { min-height: 44px; } .studio-feedback-context summary { display: flex; align-items: center; } .studio-toast-dismiss { min-width: 44px; min-height: 44px; margin: -10px -12px -10px 0; } } .studio-toast-msg { flex: 1; } .studio-toast-dismiss { background: none; border: none; color: inherit; opacity: 0.7; cursor: pointer; padding: 2px; } .studio-toast-dismiss:hover { opacity: 1; } @keyframes studio-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ── Error boundary ─────────────────────────────────────────────────────── */ .studio-error-boundary { display: flex; align-items: center; justify-content: center; min-height: 60vh; padding: 40px 20px; } .studio-error-content { text-align: center; max-width: 380px; } .studio-error-code { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--studio-muted, #777777); margin: 0 0 8px; } .studio-error-title { font-size: 22px; font-weight: 700; color: var(--studio-text, #eeeeee); margin: 0 0 8px; } .studio-error-desc { font-size: 14px; color: var(--studio-muted, #777777); line-height: 1.5; margin: 0 0 20px; } .studio-error-actions { display: flex; gap: 8px; justify-content: center; } @media (max-width: 760px) { .ripli-marketing-workspace { min-width: 0 !important; overflow-x: hidden !important; grid-template-rows: auto minmax(0, 1fr) !important; } .ripli-marketing-workspace-header { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: start !important; gap: 10px !important; max-height: none !important; overflow: visible !important; padding: 12px !important; } .ripli-marketing-workspace-header > div { min-width: 0 !important; justify-content: flex-start !important; overflow-x: auto !important; } .ripli-marketing-workspace-main { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; min-width: 0 !important; } .ripli-marketing-source-panel { border-right: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; min-height: auto !important; max-height: none !important; overflow: visible !important; } .ripli-marketing-canvas { min-height: auto !important; overflow: visible !important; } .ripli-marketing-canvas-inner { width: 100% !important; min-width: 0 !important; max-width: 100% !important; padding: 18px 12px 112px !important; } .ripli-marketing-inspector { border-left: 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; min-height: auto !important; max-height: none !important; overflow: visible !important; padding-bottom: 128px !important; } .ripli-marketing-command-panel { left: 10px !important; right: 10px !important; bottom: 10px !important; width: auto !important; transform: none !important; display: grid !important; grid-template-columns: 34px minmax(0, 1fr) 34px !important; gap: 6px !important; border-radius: 18px !important; } .ripli-marketing-command-panel input { width: 100% !important; } .ripli-marketing-command-panel > svg, .ripli-marketing-command-panel .studio-btn { display: none !important; } } /* --- Ask Ripli follow-up suggestions: light-theme legibility --- Dark-theme values use near-white text/borders (rgba(245,245,245,...)) that vanish on a light surface. Additive, light-only override; dark theme unchanged. */ html[data-studio-theme="light"] .studio-ask-followups p { color: rgba(16, 16, 16, 0.55); } html[data-studio-theme="light"] .studio-ask-followups button { border-color: rgba(16, 16, 16, 0.14); background: rgba(16, 16, 16, 0.04); color: rgba(16, 16, 16, 0.82); } html[data-studio-theme="light"] .studio-ask-followups button:hover:not(:disabled) { border-color: rgba(16, 16, 16, 0.24); background: rgba(16, 16, 16, 0.08); } /* Keep the repaired header reachable on touch screens without enlarging desktop chrome. */ @media (pointer: coarse) { .studio-topbar button { min-width: 44px; min-height: 44px; } }