From 994b4aa741cf50c9954bc49afa8b02972a864975 Mon Sep 17 00:00:00 2001 From: Raydo Matthee Date: Wed, 21 Aug 2024 23:34:32 +0200 Subject: [PATCH] Update styles.css --- css/styles.css | 26248 +---------------------------------------------- 1 file changed, 375 insertions(+), 25873 deletions(-) diff --git a/css/styles.css b/css/styles.css index 05b36f33..1f5141d6 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,25970 +1,472 @@ -@charset "UTF-8"; -html, -body, -div, -span, -applet, -object, -iframe, -h1, -h2, -h3, -h4, -h5, -h6, -p, -blockquote, -pre, -a, -abbr, -acronym, -address, -big, -cite, -code, -del, -dfn, -em, -img, -ins, -kbd, -q, -s, -samp, -small, -strike, -strong, -sub, -sup, -tt, -var, -b, -u, -i, -center, -dl, -dt, -dd, -ol, -ul, -li, -fieldset, -form, -label, -legend, -table, -caption, -tbody, -tfoot, -thead, -tr, -th, -td, -article, -aside, -canvas, -details, -embed, -figure, -figcaption, -footer, -header, -hgroup, -menu, -nav, -output, -ruby, -section, -summary, -time, -mark, -audio, -video { - padding: 0; - border: 0; - margin: 0; - font: inherit; - font-size: 100%; - vertical-align: baseline; -} - -button, -select, -input, -textarea { - border-radius: 0; - font-family: inherit; -} - -/* HTML5 display-role reset for older browsers */ -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -menu, -nav, -section { - display: block; -} - -body { - background-color: var(--cds-background, #ffffff); - color: var(--cds-text-primary, #161616); - line-height: 1; -} - -ol, -ul { - list-style: none; -} - -blockquote, -q { - quotes: none; -} - -blockquote::before, -blockquote::after, -q::before, -q::after { - content: ""; - content: none; -} - -table { - border-collapse: collapse; - border-spacing: 0; -} - -html { - box-sizing: border-box; -} - -*, -*::before, -*::after { - box-sizing: inherit; -} - -html { - font-size: 100%; -} - -body { - font-weight: 400; - font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; -} - -code { - font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace; -} - -strong { - font-weight: 600; -} - -@media screen and (-ms-high-contrast: active) { - svg { - fill: ButtonText; - } -} -h1 { - font-size: var(--cds-heading-06-font-size, 2.625rem); - font-weight: var(--cds-heading-06-font-weight, 300); - line-height: var(--cds-heading-06-line-height, 1.199); - letter-spacing: var(--cds-heading-06-letter-spacing, 0); -} - -h2 { - font-size: var(--cds-heading-05-font-size, 2rem); - font-weight: var(--cds-heading-05-font-weight, 400); - line-height: var(--cds-heading-05-line-height, 1.25); - letter-spacing: var(--cds-heading-05-letter-spacing, 0); -} - -h3 { - font-size: var(--cds-heading-04-font-size, 1.75rem); - font-weight: var(--cds-heading-04-font-weight, 400); - line-height: var(--cds-heading-04-line-height, 1.28572); - letter-spacing: var(--cds-heading-04-letter-spacing, 0); -} - -h4 { - font-size: var(--cds-heading-03-font-size, 1.25rem); - font-weight: var(--cds-heading-03-font-weight, 400); - line-height: var(--cds-heading-03-line-height, 1.4); - letter-spacing: var(--cds-heading-03-letter-spacing, 0); -} - -h5 { - font-size: var(--cds-heading-02-font-size, 1rem); - font-weight: var(--cds-heading-02-font-weight, 600); - line-height: var(--cds-heading-02-line-height, 1.5); - letter-spacing: var(--cds-heading-02-letter-spacing, 0); -} - -h6 { - font-size: var(--cds-heading-01-font-size, 0.875rem); - font-weight: var(--cds-heading-01-font-weight, 600); - line-height: var(--cds-heading-01-line-height, 1.42857); - letter-spacing: var(--cds-heading-01-letter-spacing, 0.16px); -} - -p { - font-size: var(--cds-body-02-font-size, 1rem); - font-weight: var(--cds-body-02-font-weight, 400); - line-height: var(--cds-body-02-line-height, 1.5); - letter-spacing: var(--cds-body-02-letter-spacing, 0); -} - -a { - color: var(--cds-link-primary, #0062fe); -} - -em { - font-style: italic; -} - -@font-face { - font-display: "swap"; - font-family: "IBM Plex Mono"; - font-style: normal; - font-weight: 300; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Light-Cyrillic.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff/IBMPlexMono-Light-Cyrillic.woff") format("woff"); - unicode-range: "U+0400-045F", "U+0472-0473", "U+0490-049D", "U+04A0-04A5", "U+04AA-04AB", "U+04AE-04B3", "U+04B6-04BB", "U+04C0-04C2", "U+04CF-04D9", "U+04DC-04DF", "U+04E2-04E9", "U+04EE-04F5", "U+04F8-04F9"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Mono"; - font-style: normal; - font-weight: 300; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Light-Pi.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff/IBMPlexMono-Light-Pi.woff") format("woff"); - unicode-range: "U+0E3F", "U+2032-2033", "U+2070", "U+2075-2079", "U+2080-2081", "U+2083", "U+2085-2089", "U+2113", "U+2116", "U+2126", "U+212E", "U+2150-2151", "U+2153-215E", "U+2190-2199", "U+21A9-21AA", "U+21B0-21B3", "U+21B6-21B7", "U+21BA-21BB", "U+21C4", "U+21C6", "U+2202", "U+2206", "U+220F", "U+2211", "U+221A", "U+221E", "U+222B", "U+2248", "U+2260", "U+2264-2265", "U+25CA", "U+2713", "U+274C", "U+2B0E-2B11", "U+EBE1-EBE7", "U+ECE0", "U+EFCC"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Mono"; - font-style: normal; - font-weight: 300; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Light-Latin3.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff/IBMPlexMono-Light-Latin3.woff") format("woff"); - unicode-range: "U+0102-0103", "U+1EA0-1EF9", "U+20AB"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Mono"; - font-style: normal; - font-weight: 300; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Light-Latin2.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff/IBMPlexMono-Light-Latin2.woff") format("woff"); - unicode-range: "U+0100-024F", "U+0259", "U+1E00-1EFF", "U+20A0-20AB", "U+20AD-20CF", "U+2C60-2C7F", "U+A720-A7FF", "U+FB01-FB02"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Mono"; - font-style: normal; - font-weight: 300; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Light-Latin1.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff/IBMPlexMono-Light-Latin1.woff") format("woff"); - unicode-range: "U+0000", "U+000D", "U+0020-007E", "U+00A0-00A3", "U+00A4-00FF", "U+0131", "U+0152-0153", "U+02C6", "U+02DA", "U+02DC", "U+2013-2014", "U+2018-201A", "U+201C-201E", "U+2020-2022", "U+2026", "U+2030", "U+2039-203A", "U+2044", "U+2074", "U+20AC", "U+2122", "U+2212", "U+FB01-FB02"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Mono"; - font-style: italic; - font-weight: 300; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-LightItalic-Cyrillic.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff/IBMPlexMono-LightItalic-Cyrillic.woff") format("woff"); - unicode-range: "U+0400-045F", "U+0472-0473", "U+0490-049D", "U+04A0-04A5", "U+04AA-04AB", "U+04AE-04B3", "U+04B6-04BB", "U+04C0-04C2", "U+04CF-04D9", "U+04DC-04DF", "U+04E2-04E9", "U+04EE-04F5", "U+04F8-04F9"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Mono"; - font-style: italic; - font-weight: 300; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-LightItalic-Pi.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff/IBMPlexMono-LightItalic-Pi.woff") format("woff"); - unicode-range: "U+0E3F", "U+2032-2033", "U+2070", "U+2075-2079", "U+2080-2081", "U+2083", "U+2085-2089", "U+2113", "U+2116", "U+2126", "U+212E", "U+2150-2151", "U+2153-215E", "U+2190-2199", "U+21A9-21AA", "U+21B0-21B3", "U+21B6-21B7", "U+21BA-21BB", "U+21C4", "U+21C6", "U+2202", "U+2206", "U+220F", "U+2211", "U+221A", "U+221E", "U+222B", "U+2248", "U+2260", "U+2264-2265", "U+25CA", "U+2713", "U+274C", "U+2B0E-2B11", "U+EBE1-EBE7", "U+ECE0", "U+EFCC"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Mono"; - font-style: italic; - font-weight: 300; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-LightItalic-Latin3.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff/IBMPlexMono-LightItalic-Latin3.woff") format("woff"); - unicode-range: "U+0102-0103", "U+1EA0-1EF9", "U+20AB"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Mono"; - font-style: italic; - font-weight: 300; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-LightItalic-Latin2.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff/IBMPlexMono-LightItalic-Latin2.woff") format("woff"); - unicode-range: "U+0100-024F", "U+0259", "U+1E00-1EFF", "U+20A0-20AB", "U+20AD-20CF", "U+2C60-2C7F", "U+A720-A7FF", "U+FB01-FB02"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Mono"; - font-style: italic; - font-weight: 300; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-LightItalic-Latin1.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff/IBMPlexMono-LightItalic-Latin1.woff") format("woff"); - unicode-range: "U+0000", "U+000D", "U+0020-007E", "U+00A0-00A3", "U+00A4-00FF", "U+0131", "U+0152-0153", "U+02C6", "U+02DA", "U+02DC", "U+2013-2014", "U+2018-201A", "U+201C-201E", "U+2020-2022", "U+2026", "U+2030", "U+2039-203A", "U+2044", "U+2074", "U+20AC", "U+2122", "U+2212", "U+FB01-FB02"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Mono"; - font-style: normal; - font-weight: 400; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Regular-Cyrillic.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff/IBMPlexMono-Regular-Cyrillic.woff") format("woff"); - unicode-range: "U+0400-045F", "U+0472-0473", "U+0490-049D", "U+04A0-04A5", "U+04AA-04AB", "U+04AE-04B3", "U+04B6-04BB", "U+04C0-04C2", "U+04CF-04D9", "U+04DC-04DF", "U+04E2-04E9", "U+04EE-04F5", "U+04F8-04F9"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Mono"; - font-style: normal; - font-weight: 400; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Regular-Pi.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff/IBMPlexMono-Regular-Pi.woff") format("woff"); - unicode-range: "U+0E3F", "U+2032-2033", "U+2070", "U+2075-2079", "U+2080-2081", "U+2083", "U+2085-2089", "U+2113", "U+2116", "U+2126", "U+212E", "U+2150-2151", "U+2153-215E", "U+2190-2199", "U+21A9-21AA", "U+21B0-21B3", "U+21B6-21B7", "U+21BA-21BB", "U+21C4", "U+21C6", "U+2202", "U+2206", "U+220F", "U+2211", "U+221A", "U+221E", "U+222B", "U+2248", "U+2260", "U+2264-2265", "U+25CA", "U+2713", "U+274C", "U+2B0E-2B11", "U+EBE1-EBE7", "U+ECE0", "U+EFCC"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Mono"; - font-style: normal; - font-weight: 400; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Regular-Latin3.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff/IBMPlexMono-Regular-Latin3.woff") format("woff"); - unicode-range: "U+0102-0103", "U+1EA0-1EF9", "U+20AB"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Mono"; - font-style: normal; - font-weight: 400; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Regular-Latin2.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff/IBMPlexMono-Regular-Latin2.woff") format("woff"); - unicode-range: "U+0100-024F", "U+0259", "U+1E00-1EFF", "U+20A0-20AB", "U+20AD-20CF", "U+2C60-2C7F", "U+A720-A7FF", "U+FB01-FB02"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Mono"; - font-style: normal; - font-weight: 400; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Regular-Latin1.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff/IBMPlexMono-Regular-Latin1.woff") format("woff"); - unicode-range: "U+0000", "U+000D", "U+0020-007E", "U+00A0-00A3", "U+00A4-00FF", "U+0131", "U+0152-0153", "U+02C6", "U+02DA", "U+02DC", "U+2013-2014", "U+2018-201A", "U+201C-201E", "U+2020-2022", "U+2026", "U+2030", "U+2039-203A", "U+2044", "U+2074", "U+20AC", "U+2122", "U+2212", "U+FB01-FB02"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Mono"; - font-style: italic; - font-weight: 400; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Italic-Cyrillic.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff/IBMPlexMono-Italic-Cyrillic.woff") format("woff"); - unicode-range: "U+0400-045F", "U+0472-0473", "U+0490-049D", "U+04A0-04A5", "U+04AA-04AB", "U+04AE-04B3", "U+04B6-04BB", "U+04C0-04C2", "U+04CF-04D9", "U+04DC-04DF", "U+04E2-04E9", "U+04EE-04F5", "U+04F8-04F9"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Mono"; - font-style: italic; - font-weight: 400; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Italic-Pi.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff/IBMPlexMono-Italic-Pi.woff") format("woff"); - unicode-range: "U+0E3F", "U+2032-2033", "U+2070", "U+2075-2079", "U+2080-2081", "U+2083", "U+2085-2089", "U+2113", "U+2116", "U+2126", "U+212E", "U+2150-2151", "U+2153-215E", "U+2190-2199", "U+21A9-21AA", "U+21B0-21B3", "U+21B6-21B7", "U+21BA-21BB", "U+21C4", "U+21C6", "U+2202", "U+2206", "U+220F", "U+2211", "U+221A", "U+221E", "U+222B", "U+2248", "U+2260", "U+2264-2265", "U+25CA", "U+2713", "U+274C", "U+2B0E-2B11", "U+EBE1-EBE7", "U+ECE0", "U+EFCC"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Mono"; - font-style: italic; - font-weight: 400; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Italic-Latin3.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff/IBMPlexMono-Italic-Latin3.woff") format("woff"); - unicode-range: "U+0102-0103", "U+1EA0-1EF9", "U+20AB"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Mono"; - font-style: italic; - font-weight: 400; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Italic-Latin2.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff/IBMPlexMono-Italic-Latin2.woff") format("woff"); - unicode-range: "U+0100-024F", "U+0259", "U+1E00-1EFF", "U+20A0-20AB", "U+20AD-20CF", "U+2C60-2C7F", "U+A720-A7FF", "U+FB01-FB02"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Mono"; - font-style: italic; - font-weight: 400; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Italic-Latin1.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff/IBMPlexMono-Italic-Latin1.woff") format("woff"); - unicode-range: "U+0000", "U+000D", "U+0020-007E", "U+00A0-00A3", "U+00A4-00FF", "U+0131", "U+0152-0153", "U+02C6", "U+02DA", "U+02DC", "U+2013-2014", "U+2018-201A", "U+201C-201E", "U+2020-2022", "U+2026", "U+2030", "U+2039-203A", "U+2044", "U+2074", "U+20AC", "U+2122", "U+2212", "U+FB01-FB02"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Mono"; - font-style: normal; - font-weight: 600; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-SemiBold-Cyrillic.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff/IBMPlexMono-SemiBold-Cyrillic.woff") format("woff"); - unicode-range: "U+0400-045F", "U+0472-0473", "U+0490-049D", "U+04A0-04A5", "U+04AA-04AB", "U+04AE-04B3", "U+04B6-04BB", "U+04C0-04C2", "U+04CF-04D9", "U+04DC-04DF", "U+04E2-04E9", "U+04EE-04F5", "U+04F8-04F9"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Mono"; - font-style: normal; - font-weight: 600; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-SemiBold-Pi.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff/IBMPlexMono-SemiBold-Pi.woff") format("woff"); - unicode-range: "U+0E3F", "U+2032-2033", "U+2070", "U+2075-2079", "U+2080-2081", "U+2083", "U+2085-2089", "U+2113", "U+2116", "U+2126", "U+212E", "U+2150-2151", "U+2153-215E", "U+2190-2199", "U+21A9-21AA", "U+21B0-21B3", "U+21B6-21B7", "U+21BA-21BB", "U+21C4", "U+21C6", "U+2202", "U+2206", "U+220F", "U+2211", "U+221A", "U+221E", "U+222B", "U+2248", "U+2260", "U+2264-2265", "U+25CA", "U+2713", "U+274C", "U+2B0E-2B11", "U+EBE1-EBE7", "U+ECE0", "U+EFCC"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Mono"; - font-style: normal; - font-weight: 600; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-SemiBold-Latin3.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff/IBMPlexMono-SemiBold-Latin3.woff") format("woff"); - unicode-range: "U+0102-0103", "U+1EA0-1EF9", "U+20AB"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Mono"; - font-style: normal; - font-weight: 600; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-SemiBold-Latin2.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff/IBMPlexMono-SemiBold-Latin2.woff") format("woff"); - unicode-range: "U+0100-024F", "U+0259", "U+1E00-1EFF", "U+20A0-20AB", "U+20AD-20CF", "U+2C60-2C7F", "U+A720-A7FF", "U+FB01-FB02"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Mono"; - font-style: normal; - font-weight: 600; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-SemiBold-Latin1.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff/IBMPlexMono-SemiBold-Latin1.woff") format("woff"); - unicode-range: "U+0000", "U+000D", "U+0020-007E", "U+00A0-00A3", "U+00A4-00FF", "U+0131", "U+0152-0153", "U+02C6", "U+02DA", "U+02DC", "U+2013-2014", "U+2018-201A", "U+201C-201E", "U+2020-2022", "U+2026", "U+2030", "U+2039-203A", "U+2044", "U+2074", "U+20AC", "U+2122", "U+2212", "U+FB01-FB02"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Mono"; - font-style: italic; - font-weight: 600; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Cyrillic.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff/IBMPlexMono-SemiBoldItalic-Cyrillic.woff") format("woff"); - unicode-range: "U+0400-045F", "U+0472-0473", "U+0490-049D", "U+04A0-04A5", "U+04AA-04AB", "U+04AE-04B3", "U+04B6-04BB", "U+04C0-04C2", "U+04CF-04D9", "U+04DC-04DF", "U+04E2-04E9", "U+04EE-04F5", "U+04F8-04F9"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Mono"; - font-style: italic; - font-weight: 600; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Pi.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff/IBMPlexMono-SemiBoldItalic-Pi.woff") format("woff"); - unicode-range: "U+0E3F", "U+2032-2033", "U+2070", "U+2075-2079", "U+2080-2081", "U+2083", "U+2085-2089", "U+2113", "U+2116", "U+2126", "U+212E", "U+2150-2151", "U+2153-215E", "U+2190-2199", "U+21A9-21AA", "U+21B0-21B3", "U+21B6-21B7", "U+21BA-21BB", "U+21C4", "U+21C6", "U+2202", "U+2206", "U+220F", "U+2211", "U+221A", "U+221E", "U+222B", "U+2248", "U+2260", "U+2264-2265", "U+25CA", "U+2713", "U+274C", "U+2B0E-2B11", "U+EBE1-EBE7", "U+ECE0", "U+EFCC"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Mono"; - font-style: italic; - font-weight: 600; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Latin3.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff/IBMPlexMono-SemiBoldItalic-Latin3.woff") format("woff"); - unicode-range: "U+0102-0103", "U+1EA0-1EF9", "U+20AB"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Mono"; - font-style: italic; - font-weight: 600; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Latin2.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff/IBMPlexMono-SemiBoldItalic-Latin2.woff") format("woff"); - unicode-range: "U+0100-024F", "U+0259", "U+1E00-1EFF", "U+20A0-20AB", "U+20AD-20CF", "U+2C60-2C7F", "U+A720-A7FF", "U+FB01-FB02"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Mono"; - font-style: italic; - font-weight: 600; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Latin1.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Mono/fonts/split/woff/IBMPlexMono-SemiBoldItalic-Latin1.woff") format("woff"); - unicode-range: "U+0000", "U+000D", "U+0020-007E", "U+00A0-00A3", "U+00A4-00FF", "U+0131", "U+0152-0153", "U+02C6", "U+02DA", "U+02DC", "U+2013-2014", "U+2018-201A", "U+201C-201E", "U+2020-2022", "U+2026", "U+2030", "U+2039-203A", "U+2044", "U+2074", "U+20AC", "U+2122", "U+2212", "U+FB01-FB02"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans Arabic"; - font-style: normal; - font-weight: 300; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Arabic/fonts/complete/woff2/IBMPlexSansArabic-Light.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Arabic/fonts/complete/woff/IBMPlexSansArabic-Light.woff") format("woff"); -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans Arabic"; - font-style: normal; - font-weight: 400; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Arabic/fonts/complete/woff2/IBMPlexSansArabic-Regular.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Arabic/fonts/complete/woff/IBMPlexSansArabic-Regular.woff") format("woff"); -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans Arabic"; - font-style: normal; - font-weight: 500; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Arabic/fonts/complete/woff2/IBMPlexSansArabic-SemiBold.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Arabic/fonts/complete/woff/IBMPlexSansArabic-SemiBold.woff") format("woff"); -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans Devanagari"; - font-style: normal; - font-weight: 300; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Devanagari/fonts/complete/woff2/IBMPlexSansDevanagari-Light.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Devanagari/fonts/complete/woff/IBMPlexSansDevanagari-Light.woff") format("woff"); -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans Devanagari"; - font-style: normal; - font-weight: 400; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Devanagari/fonts/complete/woff2/IBMPlexSansDevanagari-Regular.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Devanagari/fonts/complete/woff/IBMPlexSansDevanagari-Regular.woff") format("woff"); -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans Devanagari"; - font-style: normal; - font-weight: 500; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Devanagari/fonts/complete/woff2/IBMPlexSansDevanagari-SemiBold.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Devanagari/fonts/complete/woff/IBMPlexSansDevanagari-SemiBold.woff") format("woff"); -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans Hebrew"; - font-style: normal; - font-weight: 300; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Hebrew/fonts/complete/woff2/IBMPlexSansHebrew-Light.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Hebrew/fonts/complete/woff/IBMPlexSansHebrew-Light.woff") format("woff"); -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans Hebrew"; - font-style: normal; - font-weight: 400; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Hebrew/fonts/complete/woff2/IBMPlexSansHebrew-Regular.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Hebrew/fonts/complete/woff/IBMPlexSansHebrew-Regular.woff") format("woff"); -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans Hebrew"; - font-style: normal; - font-weight: 500; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Hebrew/fonts/complete/woff2/IBMPlexSansHebrew-SemiBold.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Hebrew/fonts/complete/woff/IBMPlexSansHebrew-SemiBold.woff") format("woff"); -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans Thai Looped"; - font-style: normal; - font-weight: 300; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Thai-Looped/fonts/complete/woff2/IBMPlexSansThaiLooped-Light.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Thai-Looped/fonts/complete/woff/IBMPlexSansThaiLooped-Light.woff") format("woff"); -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans Thai Looped"; - font-style: normal; - font-weight: 400; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Thai-Looped/fonts/complete/woff2/IBMPlexSansThaiLooped-Regular.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Thai-Looped/fonts/complete/woff/IBMPlexSansThaiLooped-Regular.woff") format("woff"); -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans Thai Looped"; - font-style: normal; - font-weight: 500; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Thai-Looped/fonts/complete/woff2/IBMPlexSansThaiLooped-SemiBold.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Thai-Looped/fonts/complete/woff/IBMPlexSansThaiLooped-SemiBold.woff") format("woff"); -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans Thai"; - font-style: normal; - font-weight: 300; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Thai/fonts/complete/woff2/IBMPlexSansThai-Light.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Thai/fonts/complete/woff/IBMPlexSansThai-Light.woff") format("woff"); -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans Thai"; - font-style: normal; - font-weight: 400; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Thai/fonts/complete/woff2/IBMPlexSansThai-Regular.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Thai/fonts/complete/woff/IBMPlexSansThai-Regular.woff") format("woff"); -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans Thai"; - font-style: normal; - font-weight: 500; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Thai/fonts/complete/woff2/IBMPlexSansThai-SemiBold.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans-Thai/fonts/complete/woff/IBMPlexSansThai-SemiBold.woff") format("woff"); -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans"; - font-style: normal; - font-weight: 300; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Light-Cyrillic.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff/IBMPlexSans-Light-Cyrillic.woff") format("woff"); - unicode-range: "U+0400-045F", "U+0472-0473", "U+0490-049D", "U+04A0-04A5", "U+04AA-04AB", "U+04AE-04B3", "U+04B6-04BB", "U+04C0-04C2", "U+04CF-04D9", "U+04DC-04DF", "U+04E2-04E9", "U+04EE-04F5", "U+04F8-04F9"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans"; - font-style: normal; - font-weight: 300; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Light-Pi.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff/IBMPlexSans-Light-Pi.woff") format("woff"); - unicode-range: "U+0E3F", "U+2032-2033", "U+2070", "U+2075-2079", "U+2080-2081", "U+2083", "U+2085-2089", "U+2113", "U+2116", "U+2126", "U+212E", "U+2150-2151", "U+2153-215E", "U+2190-2199", "U+21A9-21AA", "U+21B0-21B3", "U+21B6-21B7", "U+21BA-21BB", "U+21C4", "U+21C6", "U+2202", "U+2206", "U+220F", "U+2211", "U+221A", "U+221E", "U+222B", "U+2248", "U+2260", "U+2264-2265", "U+25CA", "U+2713", "U+274C", "U+2B0E-2B11", "U+EBE1-EBE7", "U+ECE0", "U+EFCC"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans"; - font-style: normal; - font-weight: 300; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Light-Latin3.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff/IBMPlexSans-Light-Latin3.woff") format("woff"); - unicode-range: "U+0102-0103", "U+1EA0-1EF9", "U+20AB"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans"; - font-style: normal; - font-weight: 300; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Light-Latin2.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff/IBMPlexSans-Light-Latin2.woff") format("woff"); - unicode-range: "U+0100-024F", "U+0259", "U+1E00-1EFF", "U+20A0-20AB", "U+20AD-20CF", "U+2C60-2C7F", "U+A720-A7FF", "U+FB01-FB02"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans"; - font-style: normal; - font-weight: 300; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Light-Latin1.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff/IBMPlexSans-Light-Latin1.woff") format("woff"); - unicode-range: "U+0000", "U+000D", "U+0020-007E", "U+00A0-00A3", "U+00A4-00FF", "U+0131", "U+0152-0153", "U+02C6", "U+02DA", "U+02DC", "U+2013-2014", "U+2018-201A", "U+201C-201E", "U+2020-2022", "U+2026", "U+2030", "U+2039-203A", "U+2044", "U+2074", "U+20AC", "U+2122", "U+2212", "U+FB01-FB02"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans"; - font-style: italic; - font-weight: 300; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-LightItalic-Cyrillic.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff/IBMPlexSans-LightItalic-Cyrillic.woff") format("woff"); - unicode-range: "U+0400-045F", "U+0472-0473", "U+0490-049D", "U+04A0-04A5", "U+04AA-04AB", "U+04AE-04B3", "U+04B6-04BB", "U+04C0-04C2", "U+04CF-04D9", "U+04DC-04DF", "U+04E2-04E9", "U+04EE-04F5", "U+04F8-04F9"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans"; - font-style: italic; - font-weight: 300; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-LightItalic-Pi.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff/IBMPlexSans-LightItalic-Pi.woff") format("woff"); - unicode-range: "U+0E3F", "U+2032-2033", "U+2070", "U+2075-2079", "U+2080-2081", "U+2083", "U+2085-2089", "U+2113", "U+2116", "U+2126", "U+212E", "U+2150-2151", "U+2153-215E", "U+2190-2199", "U+21A9-21AA", "U+21B0-21B3", "U+21B6-21B7", "U+21BA-21BB", "U+21C4", "U+21C6", "U+2202", "U+2206", "U+220F", "U+2211", "U+221A", "U+221E", "U+222B", "U+2248", "U+2260", "U+2264-2265", "U+25CA", "U+2713", "U+274C", "U+2B0E-2B11", "U+EBE1-EBE7", "U+ECE0", "U+EFCC"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans"; - font-style: italic; - font-weight: 300; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-LightItalic-Latin3.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff/IBMPlexSans-LightItalic-Latin3.woff") format("woff"); - unicode-range: "U+0102-0103", "U+1EA0-1EF9", "U+20AB"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans"; - font-style: italic; - font-weight: 300; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-LightItalic-Latin2.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff/IBMPlexSans-LightItalic-Latin2.woff") format("woff"); - unicode-range: "U+0100-024F", "U+0259", "U+1E00-1EFF", "U+20A0-20AB", "U+20AD-20CF", "U+2C60-2C7F", "U+A720-A7FF", "U+FB01-FB02"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans"; - font-style: italic; - font-weight: 300; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-LightItalic-Latin1.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff/IBMPlexSans-LightItalic-Latin1.woff") format("woff"); - unicode-range: "U+0000", "U+000D", "U+0020-007E", "U+00A0-00A3", "U+00A4-00FF", "U+0131", "U+0152-0153", "U+02C6", "U+02DA", "U+02DC", "U+2013-2014", "U+2018-201A", "U+201C-201E", "U+2020-2022", "U+2026", "U+2030", "U+2039-203A", "U+2044", "U+2074", "U+20AC", "U+2122", "U+2212", "U+FB01-FB02"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans"; - font-style: normal; - font-weight: 400; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Regular-Cyrillic.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff/IBMPlexSans-Regular-Cyrillic.woff") format("woff"); - unicode-range: "U+0400-045F", "U+0472-0473", "U+0490-049D", "U+04A0-04A5", "U+04AA-04AB", "U+04AE-04B3", "U+04B6-04BB", "U+04C0-04C2", "U+04CF-04D9", "U+04DC-04DF", "U+04E2-04E9", "U+04EE-04F5", "U+04F8-04F9"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans"; - font-style: normal; - font-weight: 400; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Regular-Pi.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff/IBMPlexSans-Regular-Pi.woff") format("woff"); - unicode-range: "U+0E3F", "U+2032-2033", "U+2070", "U+2075-2079", "U+2080-2081", "U+2083", "U+2085-2089", "U+2113", "U+2116", "U+2126", "U+212E", "U+2150-2151", "U+2153-215E", "U+2190-2199", "U+21A9-21AA", "U+21B0-21B3", "U+21B6-21B7", "U+21BA-21BB", "U+21C4", "U+21C6", "U+2202", "U+2206", "U+220F", "U+2211", "U+221A", "U+221E", "U+222B", "U+2248", "U+2260", "U+2264-2265", "U+25CA", "U+2713", "U+274C", "U+2B0E-2B11", "U+EBE1-EBE7", "U+ECE0", "U+EFCC"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans"; - font-style: normal; - font-weight: 400; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Regular-Latin3.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff/IBMPlexSans-Regular-Latin3.woff") format("woff"); - unicode-range: "U+0102-0103", "U+1EA0-1EF9", "U+20AB"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans"; - font-style: normal; - font-weight: 400; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Regular-Latin2.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff/IBMPlexSans-Regular-Latin2.woff") format("woff"); - unicode-range: "U+0100-024F", "U+0259", "U+1E00-1EFF", "U+20A0-20AB", "U+20AD-20CF", "U+2C60-2C7F", "U+A720-A7FF", "U+FB01-FB02"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans"; - font-style: normal; - font-weight: 400; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Regular-Latin1.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff/IBMPlexSans-Regular-Latin1.woff") format("woff"); - unicode-range: "U+0000", "U+000D", "U+0020-007E", "U+00A0-00A3", "U+00A4-00FF", "U+0131", "U+0152-0153", "U+02C6", "U+02DA", "U+02DC", "U+2013-2014", "U+2018-201A", "U+201C-201E", "U+2020-2022", "U+2026", "U+2030", "U+2039-203A", "U+2044", "U+2074", "U+20AC", "U+2122", "U+2212", "U+FB01-FB02"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans"; - font-style: italic; - font-weight: 400; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Italic-Cyrillic.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff/IBMPlexSans-Italic-Cyrillic.woff") format("woff"); - unicode-range: "U+0400-045F", "U+0472-0473", "U+0490-049D", "U+04A0-04A5", "U+04AA-04AB", "U+04AE-04B3", "U+04B6-04BB", "U+04C0-04C2", "U+04CF-04D9", "U+04DC-04DF", "U+04E2-04E9", "U+04EE-04F5", "U+04F8-04F9"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans"; - font-style: italic; - font-weight: 400; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Italic-Pi.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff/IBMPlexSans-Italic-Pi.woff") format("woff"); - unicode-range: "U+0E3F", "U+2032-2033", "U+2070", "U+2075-2079", "U+2080-2081", "U+2083", "U+2085-2089", "U+2113", "U+2116", "U+2126", "U+212E", "U+2150-2151", "U+2153-215E", "U+2190-2199", "U+21A9-21AA", "U+21B0-21B3", "U+21B6-21B7", "U+21BA-21BB", "U+21C4", "U+21C6", "U+2202", "U+2206", "U+220F", "U+2211", "U+221A", "U+221E", "U+222B", "U+2248", "U+2260", "U+2264-2265", "U+25CA", "U+2713", "U+274C", "U+2B0E-2B11", "U+EBE1-EBE7", "U+ECE0", "U+EFCC"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans"; - font-style: italic; - font-weight: 400; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Italic-Latin3.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff/IBMPlexSans-Italic-Latin3.woff") format("woff"); - unicode-range: "U+0102-0103", "U+1EA0-1EF9", "U+20AB"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans"; - font-style: italic; - font-weight: 400; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Italic-Latin2.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff/IBMPlexSans-Italic-Latin2.woff") format("woff"); - unicode-range: "U+0100-024F", "U+0259", "U+1E00-1EFF", "U+20A0-20AB", "U+20AD-20CF", "U+2C60-2C7F", "U+A720-A7FF", "U+FB01-FB02"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans"; - font-style: italic; - font-weight: 400; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Italic-Latin1.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff/IBMPlexSans-Italic-Latin1.woff") format("woff"); - unicode-range: "U+0000", "U+000D", "U+0020-007E", "U+00A0-00A3", "U+00A4-00FF", "U+0131", "U+0152-0153", "U+02C6", "U+02DA", "U+02DC", "U+2013-2014", "U+2018-201A", "U+201C-201E", "U+2020-2022", "U+2026", "U+2030", "U+2039-203A", "U+2044", "U+2074", "U+20AC", "U+2122", "U+2212", "U+FB01-FB02"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans"; - font-style: normal; - font-weight: 600; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-SemiBold-Cyrillic.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff/IBMPlexSans-SemiBold-Cyrillic.woff") format("woff"); - unicode-range: "U+0400-045F", "U+0472-0473", "U+0490-049D", "U+04A0-04A5", "U+04AA-04AB", "U+04AE-04B3", "U+04B6-04BB", "U+04C0-04C2", "U+04CF-04D9", "U+04DC-04DF", "U+04E2-04E9", "U+04EE-04F5", "U+04F8-04F9"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans"; - font-style: normal; - font-weight: 600; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-SemiBold-Pi.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff/IBMPlexSans-SemiBold-Pi.woff") format("woff"); - unicode-range: "U+0E3F", "U+2032-2033", "U+2070", "U+2075-2079", "U+2080-2081", "U+2083", "U+2085-2089", "U+2113", "U+2116", "U+2126", "U+212E", "U+2150-2151", "U+2153-215E", "U+2190-2199", "U+21A9-21AA", "U+21B0-21B3", "U+21B6-21B7", "U+21BA-21BB", "U+21C4", "U+21C6", "U+2202", "U+2206", "U+220F", "U+2211", "U+221A", "U+221E", "U+222B", "U+2248", "U+2260", "U+2264-2265", "U+25CA", "U+2713", "U+274C", "U+2B0E-2B11", "U+EBE1-EBE7", "U+ECE0", "U+EFCC"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans"; - font-style: normal; - font-weight: 600; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-SemiBold-Latin3.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff/IBMPlexSans-SemiBold-Latin3.woff") format("woff"); - unicode-range: "U+0102-0103", "U+1EA0-1EF9", "U+20AB"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans"; - font-style: normal; - font-weight: 600; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-SemiBold-Latin2.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff/IBMPlexSans-SemiBold-Latin2.woff") format("woff"); - unicode-range: "U+0100-024F", "U+0259", "U+1E00-1EFF", "U+20A0-20AB", "U+20AD-20CF", "U+2C60-2C7F", "U+A720-A7FF", "U+FB01-FB02"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans"; - font-style: normal; - font-weight: 600; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff/IBMPlexSans-SemiBold-Latin1.woff") format("woff"); - unicode-range: "U+0000", "U+000D", "U+0020-007E", "U+00A0-00A3", "U+00A4-00FF", "U+0131", "U+0152-0153", "U+02C6", "U+02DA", "U+02DC", "U+2013-2014", "U+2018-201A", "U+201C-201E", "U+2020-2022", "U+2026", "U+2030", "U+2039-203A", "U+2044", "U+2074", "U+20AC", "U+2122", "U+2212", "U+FB01-FB02"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans"; - font-style: italic; - font-weight: 600; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Cyrillic.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff/IBMPlexSans-SemiBoldItalic-Cyrillic.woff") format("woff"); - unicode-range: "U+0400-045F", "U+0472-0473", "U+0490-049D", "U+04A0-04A5", "U+04AA-04AB", "U+04AE-04B3", "U+04B6-04BB", "U+04C0-04C2", "U+04CF-04D9", "U+04DC-04DF", "U+04E2-04E9", "U+04EE-04F5", "U+04F8-04F9"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans"; - font-style: italic; - font-weight: 600; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Pi.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff/IBMPlexSans-SemiBoldItalic-Pi.woff") format("woff"); - unicode-range: "U+0E3F", "U+2032-2033", "U+2070", "U+2075-2079", "U+2080-2081", "U+2083", "U+2085-2089", "U+2113", "U+2116", "U+2126", "U+212E", "U+2150-2151", "U+2153-215E", "U+2190-2199", "U+21A9-21AA", "U+21B0-21B3", "U+21B6-21B7", "U+21BA-21BB", "U+21C4", "U+21C6", "U+2202", "U+2206", "U+220F", "U+2211", "U+221A", "U+221E", "U+222B", "U+2248", "U+2260", "U+2264-2265", "U+25CA", "U+2713", "U+274C", "U+2B0E-2B11", "U+EBE1-EBE7", "U+ECE0", "U+EFCC"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans"; - font-style: italic; - font-weight: 600; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Latin3.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff/IBMPlexSans-SemiBoldItalic-Latin3.woff") format("woff"); - unicode-range: "U+0102-0103", "U+1EA0-1EF9", "U+20AB"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans"; - font-style: italic; - font-weight: 600; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Latin2.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff/IBMPlexSans-SemiBoldItalic-Latin2.woff") format("woff"); - unicode-range: "U+0100-024F", "U+0259", "U+1E00-1EFF", "U+20A0-20AB", "U+20AD-20CF", "U+2C60-2C7F", "U+A720-A7FF", "U+FB01-FB02"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Sans"; - font-style: italic; - font-weight: 600; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Latin1.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/split/woff/IBMPlexSans-SemiBoldItalic-Latin1.woff") format("woff"); - unicode-range: "U+0000", "U+000D", "U+0020-007E", "U+00A0-00A3", "U+00A4-00FF", "U+0131", "U+0152-0153", "U+02C6", "U+02DA", "U+02DC", "U+2013-2014", "U+2018-201A", "U+201C-201E", "U+2020-2022", "U+2026", "U+2030", "U+2039-203A", "U+2044", "U+2074", "U+20AC", "U+2122", "U+2212", "U+FB01-FB02"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Serif"; - font-style: normal; - font-weight: 300; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-Light-Cyrillic.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff/IBMPlexSerif-Light-Cyrillic.woff") format("woff"); - unicode-range: "U+0400-045F", "U+0472-0473", "U+0490-049D", "U+04A0-04A5", "U+04AA-04AB", "U+04AE-04B3", "U+04B6-04BB", "U+04C0-04C2", "U+04CF-04D9", "U+04DC-04DF", "U+04E2-04E9", "U+04EE-04F5", "U+04F8-04F9"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Serif"; - font-style: normal; - font-weight: 300; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-Light-Pi.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff/IBMPlexSerif-Light-Pi.woff") format("woff"); - unicode-range: "U+0E3F", "U+2032-2033", "U+2070", "U+2075-2079", "U+2080-2081", "U+2083", "U+2085-2089", "U+2113", "U+2116", "U+2126", "U+212E", "U+2150-2151", "U+2153-215E", "U+2190-2199", "U+21A9-21AA", "U+21B0-21B3", "U+21B6-21B7", "U+21BA-21BB", "U+21C4", "U+21C6", "U+2202", "U+2206", "U+220F", "U+2211", "U+221A", "U+221E", "U+222B", "U+2248", "U+2260", "U+2264-2265", "U+25CA", "U+2713", "U+274C", "U+2B0E-2B11", "U+EBE1-EBE7", "U+ECE0", "U+EFCC"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Serif"; - font-style: normal; - font-weight: 300; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-Light-Latin3.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff/IBMPlexSerif-Light-Latin3.woff") format("woff"); - unicode-range: "U+0102-0103", "U+1EA0-1EF9", "U+20AB"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Serif"; - font-style: normal; - font-weight: 300; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-Light-Latin2.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff/IBMPlexSerif-Light-Latin2.woff") format("woff"); - unicode-range: "U+0100-024F", "U+0259", "U+1E00-1EFF", "U+20A0-20AB", "U+20AD-20CF", "U+2C60-2C7F", "U+A720-A7FF", "U+FB01-FB02"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Serif"; - font-style: normal; - font-weight: 300; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-Light-Latin1.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff/IBMPlexSerif-Light-Latin1.woff") format("woff"); - unicode-range: "U+0000", "U+000D", "U+0020-007E", "U+00A0-00A3", "U+00A4-00FF", "U+0131", "U+0152-0153", "U+02C6", "U+02DA", "U+02DC", "U+2013-2014", "U+2018-201A", "U+201C-201E", "U+2020-2022", "U+2026", "U+2030", "U+2039-203A", "U+2044", "U+2074", "U+20AC", "U+2122", "U+2212", "U+FB01-FB02"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Serif"; - font-style: italic; - font-weight: 300; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-LightItalic-Cyrillic.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff/IBMPlexSerif-LightItalic-Cyrillic.woff") format("woff"); - unicode-range: "U+0400-045F", "U+0472-0473", "U+0490-049D", "U+04A0-04A5", "U+04AA-04AB", "U+04AE-04B3", "U+04B6-04BB", "U+04C0-04C2", "U+04CF-04D9", "U+04DC-04DF", "U+04E2-04E9", "U+04EE-04F5", "U+04F8-04F9"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Serif"; - font-style: italic; - font-weight: 300; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-LightItalic-Pi.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff/IBMPlexSerif-LightItalic-Pi.woff") format("woff"); - unicode-range: "U+0E3F", "U+2032-2033", "U+2070", "U+2075-2079", "U+2080-2081", "U+2083", "U+2085-2089", "U+2113", "U+2116", "U+2126", "U+212E", "U+2150-2151", "U+2153-215E", "U+2190-2199", "U+21A9-21AA", "U+21B0-21B3", "U+21B6-21B7", "U+21BA-21BB", "U+21C4", "U+21C6", "U+2202", "U+2206", "U+220F", "U+2211", "U+221A", "U+221E", "U+222B", "U+2248", "U+2260", "U+2264-2265", "U+25CA", "U+2713", "U+274C", "U+2B0E-2B11", "U+EBE1-EBE7", "U+ECE0", "U+EFCC"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Serif"; - font-style: italic; - font-weight: 300; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-LightItalic-Latin3.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff/IBMPlexSerif-LightItalic-Latin3.woff") format("woff"); - unicode-range: "U+0102-0103", "U+1EA0-1EF9", "U+20AB"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Serif"; - font-style: italic; - font-weight: 300; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-LightItalic-Latin2.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff/IBMPlexSerif-LightItalic-Latin2.woff") format("woff"); - unicode-range: "U+0100-024F", "U+0259", "U+1E00-1EFF", "U+20A0-20AB", "U+20AD-20CF", "U+2C60-2C7F", "U+A720-A7FF", "U+FB01-FB02"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Serif"; - font-style: italic; - font-weight: 300; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-LightItalic-Latin1.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff/IBMPlexSerif-LightItalic-Latin1.woff") format("woff"); - unicode-range: "U+0000", "U+000D", "U+0020-007E", "U+00A0-00A3", "U+00A4-00FF", "U+0131", "U+0152-0153", "U+02C6", "U+02DA", "U+02DC", "U+2013-2014", "U+2018-201A", "U+201C-201E", "U+2020-2022", "U+2026", "U+2030", "U+2039-203A", "U+2044", "U+2074", "U+20AC", "U+2122", "U+2212", "U+FB01-FB02"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Serif"; - font-style: normal; - font-weight: 400; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-Regular-Cyrillic.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff/IBMPlexSerif-Regular-Cyrillic.woff") format("woff"); - unicode-range: "U+0400-045F", "U+0472-0473", "U+0490-049D", "U+04A0-04A5", "U+04AA-04AB", "U+04AE-04B3", "U+04B6-04BB", "U+04C0-04C2", "U+04CF-04D9", "U+04DC-04DF", "U+04E2-04E9", "U+04EE-04F5", "U+04F8-04F9"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Serif"; - font-style: normal; - font-weight: 400; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-Regular-Pi.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff/IBMPlexSerif-Regular-Pi.woff") format("woff"); - unicode-range: "U+0E3F", "U+2032-2033", "U+2070", "U+2075-2079", "U+2080-2081", "U+2083", "U+2085-2089", "U+2113", "U+2116", "U+2126", "U+212E", "U+2150-2151", "U+2153-215E", "U+2190-2199", "U+21A9-21AA", "U+21B0-21B3", "U+21B6-21B7", "U+21BA-21BB", "U+21C4", "U+21C6", "U+2202", "U+2206", "U+220F", "U+2211", "U+221A", "U+221E", "U+222B", "U+2248", "U+2260", "U+2264-2265", "U+25CA", "U+2713", "U+274C", "U+2B0E-2B11", "U+EBE1-EBE7", "U+ECE0", "U+EFCC"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Serif"; - font-style: normal; - font-weight: 400; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-Regular-Latin3.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff/IBMPlexSerif-Regular-Latin3.woff") format("woff"); - unicode-range: "U+0102-0103", "U+1EA0-1EF9", "U+20AB"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Serif"; - font-style: normal; - font-weight: 400; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-Regular-Latin2.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff/IBMPlexSerif-Regular-Latin2.woff") format("woff"); - unicode-range: "U+0100-024F", "U+0259", "U+1E00-1EFF", "U+20A0-20AB", "U+20AD-20CF", "U+2C60-2C7F", "U+A720-A7FF", "U+FB01-FB02"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Serif"; - font-style: normal; - font-weight: 400; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-Regular-Latin1.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff/IBMPlexSerif-Regular-Latin1.woff") format("woff"); - unicode-range: "U+0000", "U+000D", "U+0020-007E", "U+00A0-00A3", "U+00A4-00FF", "U+0131", "U+0152-0153", "U+02C6", "U+02DA", "U+02DC", "U+2013-2014", "U+2018-201A", "U+201C-201E", "U+2020-2022", "U+2026", "U+2030", "U+2039-203A", "U+2044", "U+2074", "U+20AC", "U+2122", "U+2212", "U+FB01-FB02"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Serif"; - font-style: italic; - font-weight: 400; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-Italic-Cyrillic.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff/IBMPlexSerif-Italic-Cyrillic.woff") format("woff"); - unicode-range: "U+0400-045F", "U+0472-0473", "U+0490-049D", "U+04A0-04A5", "U+04AA-04AB", "U+04AE-04B3", "U+04B6-04BB", "U+04C0-04C2", "U+04CF-04D9", "U+04DC-04DF", "U+04E2-04E9", "U+04EE-04F5", "U+04F8-04F9"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Serif"; - font-style: italic; - font-weight: 400; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-Italic-Pi.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff/IBMPlexSerif-Italic-Pi.woff") format("woff"); - unicode-range: "U+0E3F", "U+2032-2033", "U+2070", "U+2075-2079", "U+2080-2081", "U+2083", "U+2085-2089", "U+2113", "U+2116", "U+2126", "U+212E", "U+2150-2151", "U+2153-215E", "U+2190-2199", "U+21A9-21AA", "U+21B0-21B3", "U+21B6-21B7", "U+21BA-21BB", "U+21C4", "U+21C6", "U+2202", "U+2206", "U+220F", "U+2211", "U+221A", "U+221E", "U+222B", "U+2248", "U+2260", "U+2264-2265", "U+25CA", "U+2713", "U+274C", "U+2B0E-2B11", "U+EBE1-EBE7", "U+ECE0", "U+EFCC"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Serif"; - font-style: italic; - font-weight: 400; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-Italic-Latin3.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff/IBMPlexSerif-Italic-Latin3.woff") format("woff"); - unicode-range: "U+0102-0103", "U+1EA0-1EF9", "U+20AB"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Serif"; - font-style: italic; - font-weight: 400; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-Italic-Latin2.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff/IBMPlexSerif-Italic-Latin2.woff") format("woff"); - unicode-range: "U+0100-024F", "U+0259", "U+1E00-1EFF", "U+20A0-20AB", "U+20AD-20CF", "U+2C60-2C7F", "U+A720-A7FF", "U+FB01-FB02"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Serif"; - font-style: italic; - font-weight: 400; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-Italic-Latin1.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff/IBMPlexSerif-Italic-Latin1.woff") format("woff"); - unicode-range: "U+0000", "U+000D", "U+0020-007E", "U+00A0-00A3", "U+00A4-00FF", "U+0131", "U+0152-0153", "U+02C6", "U+02DA", "U+02DC", "U+2013-2014", "U+2018-201A", "U+201C-201E", "U+2020-2022", "U+2026", "U+2030", "U+2039-203A", "U+2044", "U+2074", "U+20AC", "U+2122", "U+2212", "U+FB01-FB02"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Serif"; - font-style: normal; - font-weight: 600; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-SemiBold-Cyrillic.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff/IBMPlexSerif-SemiBold-Cyrillic.woff") format("woff"); - unicode-range: "U+0400-045F", "U+0472-0473", "U+0490-049D", "U+04A0-04A5", "U+04AA-04AB", "U+04AE-04B3", "U+04B6-04BB", "U+04C0-04C2", "U+04CF-04D9", "U+04DC-04DF", "U+04E2-04E9", "U+04EE-04F5", "U+04F8-04F9"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Serif"; - font-style: normal; - font-weight: 600; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-SemiBold-Pi.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff/IBMPlexSerif-SemiBold-Pi.woff") format("woff"); - unicode-range: "U+0E3F", "U+2032-2033", "U+2070", "U+2075-2079", "U+2080-2081", "U+2083", "U+2085-2089", "U+2113", "U+2116", "U+2126", "U+212E", "U+2150-2151", "U+2153-215E", "U+2190-2199", "U+21A9-21AA", "U+21B0-21B3", "U+21B6-21B7", "U+21BA-21BB", "U+21C4", "U+21C6", "U+2202", "U+2206", "U+220F", "U+2211", "U+221A", "U+221E", "U+222B", "U+2248", "U+2260", "U+2264-2265", "U+25CA", "U+2713", "U+274C", "U+2B0E-2B11", "U+EBE1-EBE7", "U+ECE0", "U+EFCC"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Serif"; - font-style: normal; - font-weight: 600; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-SemiBold-Latin3.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff/IBMPlexSerif-SemiBold-Latin3.woff") format("woff"); - unicode-range: "U+0102-0103", "U+1EA0-1EF9", "U+20AB"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Serif"; - font-style: normal; - font-weight: 600; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-SemiBold-Latin2.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff/IBMPlexSerif-SemiBold-Latin2.woff") format("woff"); - unicode-range: "U+0100-024F", "U+0259", "U+1E00-1EFF", "U+20A0-20AB", "U+20AD-20CF", "U+2C60-2C7F", "U+A720-A7FF", "U+FB01-FB02"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Serif"; - font-style: normal; - font-weight: 600; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-SemiBold-Latin1.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff/IBMPlexSerif-SemiBold-Latin1.woff") format("woff"); - unicode-range: "U+0000", "U+000D", "U+0020-007E", "U+00A0-00A3", "U+00A4-00FF", "U+0131", "U+0152-0153", "U+02C6", "U+02DA", "U+02DC", "U+2013-2014", "U+2018-201A", "U+201C-201E", "U+2020-2022", "U+2026", "U+2030", "U+2039-203A", "U+2044", "U+2074", "U+20AC", "U+2122", "U+2212", "U+FB01-FB02"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Serif"; - font-style: italic; - font-weight: 600; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-SemiBoldItalic-Cyrillic.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff/IBMPlexSerif-SemiBoldItalic-Cyrillic.woff") format("woff"); - unicode-range: "U+0400-045F", "U+0472-0473", "U+0490-049D", "U+04A0-04A5", "U+04AA-04AB", "U+04AE-04B3", "U+04B6-04BB", "U+04C0-04C2", "U+04CF-04D9", "U+04DC-04DF", "U+04E2-04E9", "U+04EE-04F5", "U+04F8-04F9"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Serif"; - font-style: italic; - font-weight: 600; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-SemiBoldItalic-Pi.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff/IBMPlexSerif-SemiBoldItalic-Pi.woff") format("woff"); - unicode-range: "U+0E3F", "U+2032-2033", "U+2070", "U+2075-2079", "U+2080-2081", "U+2083", "U+2085-2089", "U+2113", "U+2116", "U+2126", "U+212E", "U+2150-2151", "U+2153-215E", "U+2190-2199", "U+21A9-21AA", "U+21B0-21B3", "U+21B6-21B7", "U+21BA-21BB", "U+21C4", "U+21C6", "U+2202", "U+2206", "U+220F", "U+2211", "U+221A", "U+221E", "U+222B", "U+2248", "U+2260", "U+2264-2265", "U+25CA", "U+2713", "U+274C", "U+2B0E-2B11", "U+EBE1-EBE7", "U+ECE0", "U+EFCC"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Serif"; - font-style: italic; - font-weight: 600; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-SemiBoldItalic-Latin3.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff/IBMPlexSerif-SemiBoldItalic-Latin3.woff") format("woff"); - unicode-range: "U+0102-0103", "U+1EA0-1EF9", "U+20AB"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Serif"; - font-style: italic; - font-weight: 600; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-SemiBoldItalic-Latin2.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff/IBMPlexSerif-SemiBoldItalic-Latin2.woff") format("woff"); - unicode-range: "U+0100-024F", "U+0259", "U+1E00-1EFF", "U+20A0-20AB", "U+20AD-20CF", "U+2C60-2C7F", "U+A720-A7FF", "U+FB01-FB02"; -} -@font-face { - font-display: "swap"; - font-family: "IBM Plex Serif"; - font-style: italic; - font-weight: 600; - src: url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-SemiBoldItalic-Latin1.woff2") format("woff2"), url("https://1.www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Serif/fonts/split/woff/IBMPlexSerif-SemiBoldItalic-Latin1.woff") format("woff"); - unicode-range: "U+0000", "U+000D", "U+0020-007E", "U+00A0-00A3", "U+00A4-00FF", "U+0131", "U+0152-0153", "U+02C6", "U+02DA", "U+02DC", "U+2013-2014", "U+2018-201A", "U+201C-201E", "U+2020-2022", "U+2026", "U+2030", "U+2039-203A", "U+2044", "U+2074", "U+20AC", "U+2122", "U+2212", "U+FB01-FB02"; -} -:root { - --cds-grid-gutter: 2rem; - --cds-grid-columns: 4; - --cds-grid-margin: 0; -} -@media (min-width: 42rem) { - :root { - --cds-grid-columns: 8; - --cds-grid-margin: 1rem; - } -} -@media (min-width: 66rem) { - :root { - --cds-grid-columns: 16; - } -} -@media (min-width: 99rem) { - :root { - --cds-grid-margin: 1.5rem; - } -} - -.cds--css-grid { - --cds-grid-gutter-start: calc(var(--cds-grid-gutter) / 2); - --cds-grid-gutter-end: calc(var(--cds-grid-gutter) / 2); - --cds-grid-column-hang: calc(var(--cds-grid-gutter) / 2); - display: grid; - grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr)); - inline-size: 100%; - margin-inline: auto; - max-inline-size: 99rem; - padding-inline: var(--cds-grid-margin); -} - -.cds--css-grid--full-width { - max-inline-size: 100%; -} - -.cds--css-grid-column { - --cds-grid-mode-start: var(--cds-grid-gutter-start); - --cds-grid-mode-end: var(--cds-grid-gutter-end); - margin-inline: var(--cds-grid-gutter-start) var(--cds-grid-gutter-end); -} -[dir=rtl] .cds--css-grid-column { - margin-inline: var(--cds-grid-gutter-end) var(--cds-grid-gutter-start); -} - -.cds--css-grid--narrow { - --cds-grid-gutter-start: 0; -} - -.cds--css-grid--condensed { - --cds-grid-gutter: 0.0625rem; - --cds-grid-column-hang: 0.96875rem; -} - -.cds--subgrid { - display: grid; - grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr)); - margin-inline: calc(var(--cds-grid-mode-start) * -1) calc(var(--cds-grid-mode-end) * -1); -} -[dir=rtl] .cds--subgrid { - margin-inline: calc(var(--cds-grid-mode-end) * -1) calc(var(--cds-grid-mode-start) * -1); -} - -.cds--subgrid--wide { - --cds-grid-gutter-start: 1rem; - --cds-grid-gutter-end: 1rem; - --cds-grid-column-hang: 0; -} - -.cds--subgrid--narrow { - --cds-grid-gutter-start: 0; - --cds-grid-gutter-end: 1rem; - --cds-grid-column-hang: 1rem; -} - -.cds--subgrid--condensed { - --cds-grid-gutter-start: 0.03125rem; - --cds-grid-gutter-end: 0.03125rem; - --cds-grid-column-hang: 0.96875rem; -} - -.cds--grid-column-hang { - margin-inline-start: var(--cds-grid-column-hang); -} -[dir=rtl] .cds--grid-column-hang { - margin-inline: initial var(--cds-grid-column-hang); -} - -.cds--col-span-0 { - display: none; -} - -.cds--col-span-1 { - --cds-grid-columns: 1; - display: block; - grid-column: span 1/span 1; -} - -.cds--col-span-2 { - --cds-grid-columns: 2; - display: block; - grid-column: span 2/span 2; -} - -.cds--col-span-3 { - --cds-grid-columns: 3; - display: block; - grid-column: span 3/span 3; -} - -.cds--col-span-4 { - --cds-grid-columns: 4; - display: block; - grid-column: span 4/span 4; -} - -.cds--col-span-5 { - --cds-grid-columns: 5; - display: block; - grid-column: span 5/span 5; -} - -.cds--col-span-6 { - --cds-grid-columns: 6; - display: block; - grid-column: span 6/span 6; -} - -.cds--col-span-7 { - --cds-grid-columns: 7; - display: block; - grid-column: span 7/span 7; -} - -.cds--col-span-8 { - --cds-grid-columns: 8; - display: block; - grid-column: span 8/span 8; -} - -.cds--col-span-9 { - --cds-grid-columns: 9; - display: block; - grid-column: span 9/span 9; -} - -.cds--col-span-10 { - --cds-grid-columns: 10; - display: block; - grid-column: span 10/span 10; -} - -.cds--col-span-11 { - --cds-grid-columns: 11; - display: block; - grid-column: span 11/span 11; -} - -.cds--col-span-12 { - --cds-grid-columns: 12; - display: block; - grid-column: span 12/span 12; -} - -.cds--col-span-13 { - --cds-grid-columns: 13; - display: block; - grid-column: span 13/span 13; -} - -.cds--col-span-14 { - --cds-grid-columns: 14; - display: block; - grid-column: span 14/span 14; -} - -.cds--col-span-15 { - --cds-grid-columns: 15; - display: block; - grid-column: span 15/span 15; -} - -.cds--col-span-16 { - --cds-grid-columns: 16; - display: block; - grid-column: span 16/span 16; -} - -.cds--sm\:col-span-0 { - display: none; -} - -.cds--sm\:col-span-1 { - --cds-grid-columns: 1; - display: block; - grid-column: span 1/span 1; -} - -.cds--sm\:col-span-2 { - --cds-grid-columns: 2; - display: block; - grid-column: span 2/span 2; -} - -.cds--sm\:col-span-3 { - --cds-grid-columns: 3; - display: block; - grid-column: span 3/span 3; -} - -.cds--sm\:col-span-4 { - --cds-grid-columns: 4; - display: block; - grid-column: span 4/span 4; -} - -.cds--sm\:col-span-auto { - grid-column: auto; -} - -.cds--sm\:col-span-100 { - grid-column: 1/-1; -} - -.cds--sm\:col-span-75 { - --cds-grid-columns: 3; - grid-column: span 3 / span 3; -} - -.cds--sm\:col-span-50 { - --cds-grid-columns: 2; - grid-column: span 2 / span 2; -} - -.cds--sm\:col-span-25 { - --cds-grid-columns: 1; - grid-column: span 1 / span 1; -} - -@media (min-width: 42rem) { - .cds--md\:col-span-0 { - display: none; - } -} -@media (min-width: 42rem) { - .cds--md\:col-span-1 { - --cds-grid-columns: 1; - display: block; - grid-column: span 1/span 1; - } -} -@media (min-width: 42rem) { - .cds--md\:col-span-2 { - --cds-grid-columns: 2; - display: block; - grid-column: span 2/span 2; - } -} -@media (min-width: 42rem) { - .cds--md\:col-span-3 { - --cds-grid-columns: 3; - display: block; - grid-column: span 3/span 3; - } -} -@media (min-width: 42rem) { - .cds--md\:col-span-4 { - --cds-grid-columns: 4; - display: block; - grid-column: span 4/span 4; - } -} -@media (min-width: 42rem) { - .cds--md\:col-span-5 { - --cds-grid-columns: 5; - display: block; - grid-column: span 5/span 5; - } -} -@media (min-width: 42rem) { - .cds--md\:col-span-6 { - --cds-grid-columns: 6; - display: block; - grid-column: span 6/span 6; - } -} -@media (min-width: 42rem) { - .cds--md\:col-span-7 { - --cds-grid-columns: 7; - display: block; - grid-column: span 7/span 7; - } -} -@media (min-width: 42rem) { - .cds--md\:col-span-8 { - --cds-grid-columns: 8; - display: block; - grid-column: span 8/span 8; - } -} -@media (min-width: 42rem) { - .cds--md\:col-span-auto { - grid-column: auto; - } - .cds--md\:col-span-100 { - grid-column: 1/-1; - } - .cds--md\:col-span-75 { - --cds-grid-columns: 6; - grid-column: span 6 / span 6; - } - .cds--md\:col-span-50 { - --cds-grid-columns: 4; - grid-column: span 4 / span 4; - } - .cds--md\:col-span-25 { - --cds-grid-columns: 2; - grid-column: span 2 / span 2; - } -} -@media (min-width: 66rem) { - .cds--lg\:col-span-0 { - display: none; - } -} -@media (min-width: 66rem) { - .cds--lg\:col-span-1 { - --cds-grid-columns: 1; - display: block; - grid-column: span 1/span 1; - } -} -@media (min-width: 66rem) { - .cds--lg\:col-span-2 { - --cds-grid-columns: 2; - display: block; - grid-column: span 2/span 2; - } -} -@media (min-width: 66rem) { - .cds--lg\:col-span-3 { - --cds-grid-columns: 3; - display: block; - grid-column: span 3/span 3; - } -} -@media (min-width: 66rem) { - .cds--lg\:col-span-4 { - --cds-grid-columns: 4; - display: block; - grid-column: span 4/span 4; - } -} -@media (min-width: 66rem) { - .cds--lg\:col-span-5 { - --cds-grid-columns: 5; - display: block; - grid-column: span 5/span 5; - } -} -@media (min-width: 66rem) { - .cds--lg\:col-span-6 { - --cds-grid-columns: 6; - display: block; - grid-column: span 6/span 6; - } -} -@media (min-width: 66rem) { - .cds--lg\:col-span-7 { - --cds-grid-columns: 7; - display: block; - grid-column: span 7/span 7; - } -} -@media (min-width: 66rem) { - .cds--lg\:col-span-8 { - --cds-grid-columns: 8; - display: block; - grid-column: span 8/span 8; - } -} -@media (min-width: 66rem) { - .cds--lg\:col-span-9 { - --cds-grid-columns: 9; - display: block; - grid-column: span 9/span 9; - } -} -@media (min-width: 66rem) { - .cds--lg\:col-span-10 { - --cds-grid-columns: 10; - display: block; - grid-column: span 10/span 10; - } -} -@media (min-width: 66rem) { - .cds--lg\:col-span-11 { - --cds-grid-columns: 11; - display: block; - grid-column: span 11/span 11; - } -} -@media (min-width: 66rem) { - .cds--lg\:col-span-12 { - --cds-grid-columns: 12; - display: block; - grid-column: span 12/span 12; - } -} -@media (min-width: 66rem) { - .cds--lg\:col-span-13 { - --cds-grid-columns: 13; - display: block; - grid-column: span 13/span 13; - } -} -@media (min-width: 66rem) { - .cds--lg\:col-span-14 { - --cds-grid-columns: 14; - display: block; - grid-column: span 14/span 14; - } -} -@media (min-width: 66rem) { - .cds--lg\:col-span-15 { - --cds-grid-columns: 15; - display: block; - grid-column: span 15/span 15; - } -} -@media (min-width: 66rem) { - .cds--lg\:col-span-16 { - --cds-grid-columns: 16; - display: block; - grid-column: span 16/span 16; - } -} -@media (min-width: 66rem) { - .cds--lg\:col-span-auto { - grid-column: auto; - } - .cds--lg\:col-span-100 { - grid-column: 1/-1; - } - .cds--lg\:col-span-75 { - --cds-grid-columns: 12; - grid-column: span 12 / span 12; - } - .cds--lg\:col-span-50 { - --cds-grid-columns: 8; - grid-column: span 8 / span 8; - } - .cds--lg\:col-span-25 { - --cds-grid-columns: 4; - grid-column: span 4 / span 4; - } -} -@media (min-width: 82rem) { - .cds--xlg\:col-span-0 { - display: none; - } -} -@media (min-width: 82rem) { - .cds--xlg\:col-span-1 { - --cds-grid-columns: 1; - display: block; - grid-column: span 1/span 1; - } -} -@media (min-width: 82rem) { - .cds--xlg\:col-span-2 { - --cds-grid-columns: 2; - display: block; - grid-column: span 2/span 2; - } -} -@media (min-width: 82rem) { - .cds--xlg\:col-span-3 { - --cds-grid-columns: 3; - display: block; - grid-column: span 3/span 3; - } -} -@media (min-width: 82rem) { - .cds--xlg\:col-span-4 { - --cds-grid-columns: 4; - display: block; - grid-column: span 4/span 4; - } -} -@media (min-width: 82rem) { - .cds--xlg\:col-span-5 { - --cds-grid-columns: 5; - display: block; - grid-column: span 5/span 5; - } -} -@media (min-width: 82rem) { - .cds--xlg\:col-span-6 { - --cds-grid-columns: 6; - display: block; - grid-column: span 6/span 6; - } -} -@media (min-width: 82rem) { - .cds--xlg\:col-span-7 { - --cds-grid-columns: 7; - display: block; - grid-column: span 7/span 7; - } -} -@media (min-width: 82rem) { - .cds--xlg\:col-span-8 { - --cds-grid-columns: 8; - display: block; - grid-column: span 8/span 8; - } -} -@media (min-width: 82rem) { - .cds--xlg\:col-span-9 { - --cds-grid-columns: 9; - display: block; - grid-column: span 9/span 9; - } -} -@media (min-width: 82rem) { - .cds--xlg\:col-span-10 { - --cds-grid-columns: 10; - display: block; - grid-column: span 10/span 10; - } -} -@media (min-width: 82rem) { - .cds--xlg\:col-span-11 { - --cds-grid-columns: 11; - display: block; - grid-column: span 11/span 11; - } -} -@media (min-width: 82rem) { - .cds--xlg\:col-span-12 { - --cds-grid-columns: 12; - display: block; - grid-column: span 12/span 12; - } -} -@media (min-width: 82rem) { - .cds--xlg\:col-span-13 { - --cds-grid-columns: 13; - display: block; - grid-column: span 13/span 13; - } -} -@media (min-width: 82rem) { - .cds--xlg\:col-span-14 { - --cds-grid-columns: 14; - display: block; - grid-column: span 14/span 14; - } -} -@media (min-width: 82rem) { - .cds--xlg\:col-span-15 { - --cds-grid-columns: 15; - display: block; - grid-column: span 15/span 15; - } -} -@media (min-width: 82rem) { - .cds--xlg\:col-span-16 { - --cds-grid-columns: 16; - display: block; - grid-column: span 16/span 16; - } -} -@media (min-width: 82rem) { - .cds--xlg\:col-span-auto { - grid-column: auto; - } - .cds--xlg\:col-span-100 { - grid-column: 1/-1; - } - .cds--xlg\:col-span-75 { - --cds-grid-columns: 12; - grid-column: span 12 / span 12; - } - .cds--xlg\:col-span-50 { - --cds-grid-columns: 8; - grid-column: span 8 / span 8; - } - .cds--xlg\:col-span-25 { - --cds-grid-columns: 4; - grid-column: span 4 / span 4; - } -} -@media (min-width: 99rem) { - .cds--max\:col-span-0 { - display: none; - } -} -@media (min-width: 99rem) { - .cds--max\:col-span-1 { - --cds-grid-columns: 1; - display: block; - grid-column: span 1/span 1; - } -} -@media (min-width: 99rem) { - .cds--max\:col-span-2 { - --cds-grid-columns: 2; - display: block; - grid-column: span 2/span 2; - } -} -@media (min-width: 99rem) { - .cds--max\:col-span-3 { - --cds-grid-columns: 3; - display: block; - grid-column: span 3/span 3; - } -} -@media (min-width: 99rem) { - .cds--max\:col-span-4 { - --cds-grid-columns: 4; - display: block; - grid-column: span 4/span 4; - } -} -@media (min-width: 99rem) { - .cds--max\:col-span-5 { - --cds-grid-columns: 5; - display: block; - grid-column: span 5/span 5; - } -} -@media (min-width: 99rem) { - .cds--max\:col-span-6 { - --cds-grid-columns: 6; - display: block; - grid-column: span 6/span 6; - } -} -@media (min-width: 99rem) { - .cds--max\:col-span-7 { - --cds-grid-columns: 7; - display: block; - grid-column: span 7/span 7; - } -} -@media (min-width: 99rem) { - .cds--max\:col-span-8 { - --cds-grid-columns: 8; - display: block; - grid-column: span 8/span 8; - } -} -@media (min-width: 99rem) { - .cds--max\:col-span-9 { - --cds-grid-columns: 9; - display: block; - grid-column: span 9/span 9; - } -} -@media (min-width: 99rem) { - .cds--max\:col-span-10 { - --cds-grid-columns: 10; - display: block; - grid-column: span 10/span 10; - } -} -@media (min-width: 99rem) { - .cds--max\:col-span-11 { - --cds-grid-columns: 11; - display: block; - grid-column: span 11/span 11; - } -} -@media (min-width: 99rem) { - .cds--max\:col-span-12 { - --cds-grid-columns: 12; - display: block; - grid-column: span 12/span 12; - } -} -@media (min-width: 99rem) { - .cds--max\:col-span-13 { - --cds-grid-columns: 13; - display: block; - grid-column: span 13/span 13; - } -} -@media (min-width: 99rem) { - .cds--max\:col-span-14 { - --cds-grid-columns: 14; - display: block; - grid-column: span 14/span 14; - } -} -@media (min-width: 99rem) { - .cds--max\:col-span-15 { - --cds-grid-columns: 15; - display: block; - grid-column: span 15/span 15; - } -} -@media (min-width: 99rem) { - .cds--max\:col-span-16 { - --cds-grid-columns: 16; - display: block; - grid-column: span 16/span 16; - } -} -@media (min-width: 99rem) { - .cds--max\:col-span-auto { - grid-column: auto; - } - .cds--max\:col-span-100 { - grid-column: 1/-1; - } - .cds--max\:col-span-75 { - --cds-grid-columns: 12; - grid-column: span 12 / span 12; - } - .cds--max\:col-span-50 { - --cds-grid-columns: 8; - grid-column: span 8 / span 8; - } - .cds--max\:col-span-25 { - --cds-grid-columns: 4; - grid-column: span 4 / span 4; - } -} -.cds--col-span-auto { - grid-column: auto; -} - -.cds--col-span-100 { - grid-column: 1/-1; -} - -.cds--col-span-75 { - --cds-grid-columns: 3; - grid-column: span 3 / span 3; -} -@media (min-width: 42rem) { - .cds--col-span-75 { - --cds-grid-columns: 6; - grid-column: span 6 / span 6; - } -} -@media (min-width: 66rem) { - .cds--col-span-75 { - --cds-grid-columns: 12; - grid-column: span 12 / span 12; - } -} - -.cds--col-span-50 { - --cds-grid-columns: 2; - grid-column: span 2 / span 2; -} -@media (min-width: 42rem) { - .cds--col-span-50 { - --cds-grid-columns: 4; - grid-column: span 4 / span 4; - } -} -@media (min-width: 66rem) { - .cds--col-span-50 { - --cds-grid-columns: 8; - grid-column: span 8 / span 8; - } -} - -.cds--col-span-25 { - --cds-grid-columns: 1; - grid-column: span 1 / span 1; -} -@media (min-width: 42rem) { - .cds--col-span-25 { - --cds-grid-columns: 2; - grid-column: span 2 / span 2; - } -} -@media (min-width: 66rem) { - .cds--col-span-25 { - --cds-grid-columns: 4; - grid-column: span 4 / span 4; - } -} - -.cds--col-start-1 { - grid-column-start: 1; -} - -.cds--col-start-2 { - grid-column-start: 2; -} - -.cds--col-start-3 { - grid-column-start: 3; -} - -.cds--col-start-4 { - grid-column-start: 4; -} - -.cds--col-start-5 { - grid-column-start: 5; -} - -.cds--col-start-6 { - grid-column-start: 6; -} - -.cds--col-start-7 { - grid-column-start: 7; -} - -.cds--col-start-8 { - grid-column-start: 8; -} - -.cds--col-start-9 { - grid-column-start: 9; -} - -.cds--col-start-10 { - grid-column-start: 10; -} - -.cds--col-start-11 { - grid-column-start: 11; -} - -.cds--col-start-12 { - grid-column-start: 12; -} - -.cds--col-start-13 { - grid-column-start: 13; -} - -.cds--col-start-14 { - grid-column-start: 14; -} - -.cds--col-start-15 { - grid-column-start: 15; -} - -.cds--col-start-16 { - grid-column-start: 16; -} - -.cds--col-end-2 { - grid-column-end: 2; -} - -.cds--col-end-3 { - grid-column-end: 3; -} - -.cds--col-end-4 { - grid-column-end: 4; -} - -.cds--col-end-5 { - grid-column-end: 5; -} - -.cds--col-end-6 { - grid-column-end: 6; -} - -.cds--col-end-7 { - grid-column-end: 7; -} - -.cds--col-end-8 { - grid-column-end: 8; -} - -.cds--col-end-9 { - grid-column-end: 9; -} - -.cds--col-end-10 { - grid-column-end: 10; -} - -.cds--col-end-11 { - grid-column-end: 11; -} - -.cds--col-end-12 { - grid-column-end: 12; -} - -.cds--col-end-13 { - grid-column-end: 13; -} - -.cds--col-end-14 { - grid-column-end: 14; -} - -.cds--col-end-15 { - grid-column-end: 15; -} - -.cds--col-end-16 { - grid-column-end: 16; -} - -.cds--col-end-17 { - grid-column-end: 17; -} - -.cds--col-start-auto { - grid-column-start: auto; -} - -.cds--col-end-auto { - grid-column-end: auto; -} - -.cds--sm\:col-start-1 { - grid-column-start: 1; -} - -.cds--sm\:col-start-2 { - grid-column-start: 2; -} - -.cds--sm\:col-start-3 { - grid-column-start: 3; -} - -.cds--sm\:col-start-4 { - grid-column-start: 4; -} - -.cds--sm\:col-start-5 { - grid-column-start: 5; -} - -.cds--sm\:col-start-6 { - grid-column-start: 6; -} - -.cds--sm\:col-start-7 { - grid-column-start: 7; -} - -.cds--sm\:col-start-8 { - grid-column-start: 8; -} - -.cds--sm\:col-start-9 { - grid-column-start: 9; -} - -.cds--sm\:col-start-10 { - grid-column-start: 10; -} - -.cds--sm\:col-start-11 { - grid-column-start: 11; -} - -.cds--sm\:col-start-12 { - grid-column-start: 12; -} - -.cds--sm\:col-start-13 { - grid-column-start: 13; -} - -.cds--sm\:col-start-14 { - grid-column-start: 14; -} - -.cds--sm\:col-start-15 { - grid-column-start: 15; -} - -.cds--sm\:col-start-16 { - grid-column-start: 16; -} - -.cds--sm\:col-end-2 { - grid-column-end: 2; -} - -.cds--sm\:col-end-3 { - grid-column-end: 3; -} - -.cds--sm\:col-end-4 { - grid-column-end: 4; -} - -.cds--sm\:col-end-5 { - grid-column-end: 5; -} - -.cds--sm\:col-end-6 { - grid-column-end: 6; -} - -.cds--sm\:col-end-7 { - grid-column-end: 7; -} - -.cds--sm\:col-end-8 { - grid-column-end: 8; -} - -.cds--sm\:col-end-9 { - grid-column-end: 9; -} - -.cds--sm\:col-end-10 { - grid-column-end: 10; -} - -.cds--sm\:col-end-11 { - grid-column-end: 11; -} - -.cds--sm\:col-end-12 { - grid-column-end: 12; -} - -.cds--sm\:col-end-13 { - grid-column-end: 13; -} - -.cds--sm\:col-end-14 { - grid-column-end: 14; -} - -.cds--sm\:col-end-15 { - grid-column-end: 15; -} - -.cds--sm\:col-end-16 { - grid-column-end: 16; -} - -.cds--sm\:col-end-17 { - grid-column-end: 17; -} - -.cds--sm\:col-start-auto { - grid-column-start: auto; -} - -.cds--sm\:col-end-auto { - grid-column-end: auto; -} - -@media (min-width: 42rem) { - .cds--md\:col-start-1 { - grid-column-start: 1; - } - .cds--md\:col-start-2 { - grid-column-start: 2; - } - .cds--md\:col-start-3 { - grid-column-start: 3; - } - .cds--md\:col-start-4 { - grid-column-start: 4; - } - .cds--md\:col-start-5 { - grid-column-start: 5; - } - .cds--md\:col-start-6 { - grid-column-start: 6; - } - .cds--md\:col-start-7 { - grid-column-start: 7; - } - .cds--md\:col-start-8 { - grid-column-start: 8; - } - .cds--md\:col-start-9 { - grid-column-start: 9; - } - .cds--md\:col-start-10 { - grid-column-start: 10; - } - .cds--md\:col-start-11 { - grid-column-start: 11; - } - .cds--md\:col-start-12 { - grid-column-start: 12; - } - .cds--md\:col-start-13 { - grid-column-start: 13; - } - .cds--md\:col-start-14 { - grid-column-start: 14; - } - .cds--md\:col-start-15 { - grid-column-start: 15; - } - .cds--md\:col-start-16 { - grid-column-start: 16; - } - .cds--md\:col-end-2 { - grid-column-end: 2; - } - .cds--md\:col-end-3 { - grid-column-end: 3; - } - .cds--md\:col-end-4 { - grid-column-end: 4; - } - .cds--md\:col-end-5 { - grid-column-end: 5; - } - .cds--md\:col-end-6 { - grid-column-end: 6; - } - .cds--md\:col-end-7 { - grid-column-end: 7; - } - .cds--md\:col-end-8 { - grid-column-end: 8; - } - .cds--md\:col-end-9 { - grid-column-end: 9; - } - .cds--md\:col-end-10 { - grid-column-end: 10; - } - .cds--md\:col-end-11 { - grid-column-end: 11; - } - .cds--md\:col-end-12 { - grid-column-end: 12; - } - .cds--md\:col-end-13 { - grid-column-end: 13; - } - .cds--md\:col-end-14 { - grid-column-end: 14; - } - .cds--md\:col-end-15 { - grid-column-end: 15; - } - .cds--md\:col-end-16 { - grid-column-end: 16; - } - .cds--md\:col-end-17 { - grid-column-end: 17; - } - .cds--md\:col-start-auto { - grid-column-start: auto; - } - .cds--md\:col-end-auto { - grid-column-end: auto; - } -} -@media (min-width: 66rem) { - .cds--lg\:col-start-1 { - grid-column-start: 1; - } - .cds--lg\:col-start-2 { - grid-column-start: 2; - } - .cds--lg\:col-start-3 { - grid-column-start: 3; - } - .cds--lg\:col-start-4 { - grid-column-start: 4; - } - .cds--lg\:col-start-5 { - grid-column-start: 5; - } - .cds--lg\:col-start-6 { - grid-column-start: 6; - } - .cds--lg\:col-start-7 { - grid-column-start: 7; - } - .cds--lg\:col-start-8 { - grid-column-start: 8; - } - .cds--lg\:col-start-9 { - grid-column-start: 9; - } - .cds--lg\:col-start-10 { - grid-column-start: 10; - } - .cds--lg\:col-start-11 { - grid-column-start: 11; - } - .cds--lg\:col-start-12 { - grid-column-start: 12; - } - .cds--lg\:col-start-13 { - grid-column-start: 13; - } - .cds--lg\:col-start-14 { - grid-column-start: 14; - } - .cds--lg\:col-start-15 { - grid-column-start: 15; - } - .cds--lg\:col-start-16 { - grid-column-start: 16; - } - .cds--lg\:col-end-2 { - grid-column-end: 2; - } - .cds--lg\:col-end-3 { - grid-column-end: 3; - } - .cds--lg\:col-end-4 { - grid-column-end: 4; - } - .cds--lg\:col-end-5 { - grid-column-end: 5; - } - .cds--lg\:col-end-6 { - grid-column-end: 6; - } - .cds--lg\:col-end-7 { - grid-column-end: 7; - } - .cds--lg\:col-end-8 { - grid-column-end: 8; - } - .cds--lg\:col-end-9 { - grid-column-end: 9; - } - .cds--lg\:col-end-10 { - grid-column-end: 10; - } - .cds--lg\:col-end-11 { - grid-column-end: 11; - } - .cds--lg\:col-end-12 { - grid-column-end: 12; - } - .cds--lg\:col-end-13 { - grid-column-end: 13; - } - .cds--lg\:col-end-14 { - grid-column-end: 14; - } - .cds--lg\:col-end-15 { - grid-column-end: 15; - } - .cds--lg\:col-end-16 { - grid-column-end: 16; - } - .cds--lg\:col-end-17 { - grid-column-end: 17; - } - .cds--lg\:col-start-auto { - grid-column-start: auto; - } - .cds--lg\:col-end-auto { - grid-column-end: auto; - } -} -@media (min-width: 82rem) { - .cds--xlg\:col-start-1 { - grid-column-start: 1; - } - .cds--xlg\:col-start-2 { - grid-column-start: 2; - } - .cds--xlg\:col-start-3 { - grid-column-start: 3; - } - .cds--xlg\:col-start-4 { - grid-column-start: 4; - } - .cds--xlg\:col-start-5 { - grid-column-start: 5; - } - .cds--xlg\:col-start-6 { - grid-column-start: 6; - } - .cds--xlg\:col-start-7 { - grid-column-start: 7; - } - .cds--xlg\:col-start-8 { - grid-column-start: 8; - } - .cds--xlg\:col-start-9 { - grid-column-start: 9; - } - .cds--xlg\:col-start-10 { - grid-column-start: 10; - } - .cds--xlg\:col-start-11 { - grid-column-start: 11; - } - .cds--xlg\:col-start-12 { - grid-column-start: 12; - } - .cds--xlg\:col-start-13 { - grid-column-start: 13; - } - .cds--xlg\:col-start-14 { - grid-column-start: 14; - } - .cds--xlg\:col-start-15 { - grid-column-start: 15; - } - .cds--xlg\:col-start-16 { - grid-column-start: 16; - } - .cds--xlg\:col-end-2 { - grid-column-end: 2; - } - .cds--xlg\:col-end-3 { - grid-column-end: 3; - } - .cds--xlg\:col-end-4 { - grid-column-end: 4; - } - .cds--xlg\:col-end-5 { - grid-column-end: 5; - } - .cds--xlg\:col-end-6 { - grid-column-end: 6; - } - .cds--xlg\:col-end-7 { - grid-column-end: 7; - } - .cds--xlg\:col-end-8 { - grid-column-end: 8; - } - .cds--xlg\:col-end-9 { - grid-column-end: 9; - } - .cds--xlg\:col-end-10 { - grid-column-end: 10; - } - .cds--xlg\:col-end-11 { - grid-column-end: 11; - } - .cds--xlg\:col-end-12 { - grid-column-end: 12; - } - .cds--xlg\:col-end-13 { - grid-column-end: 13; - } - .cds--xlg\:col-end-14 { - grid-column-end: 14; - } - .cds--xlg\:col-end-15 { - grid-column-end: 15; - } - .cds--xlg\:col-end-16 { - grid-column-end: 16; - } - .cds--xlg\:col-end-17 { - grid-column-end: 17; - } - .cds--xlg\:col-start-auto { - grid-column-start: auto; - } - .cds--xlg\:col-end-auto { - grid-column-end: auto; - } -} -@media (min-width: 99rem) { - .cds--max\:col-start-1 { - grid-column-start: 1; - } - .cds--max\:col-start-2 { - grid-column-start: 2; - } - .cds--max\:col-start-3 { - grid-column-start: 3; - } - .cds--max\:col-start-4 { - grid-column-start: 4; - } - .cds--max\:col-start-5 { - grid-column-start: 5; - } - .cds--max\:col-start-6 { - grid-column-start: 6; - } - .cds--max\:col-start-7 { - grid-column-start: 7; - } - .cds--max\:col-start-8 { - grid-column-start: 8; - } - .cds--max\:col-start-9 { - grid-column-start: 9; - } - .cds--max\:col-start-10 { - grid-column-start: 10; - } - .cds--max\:col-start-11 { - grid-column-start: 11; - } - .cds--max\:col-start-12 { - grid-column-start: 12; - } - .cds--max\:col-start-13 { - grid-column-start: 13; - } - .cds--max\:col-start-14 { - grid-column-start: 14; - } - .cds--max\:col-start-15 { - grid-column-start: 15; - } - .cds--max\:col-start-16 { - grid-column-start: 16; - } - .cds--max\:col-end-2 { - grid-column-end: 2; - } - .cds--max\:col-end-3 { - grid-column-end: 3; - } - .cds--max\:col-end-4 { - grid-column-end: 4; - } - .cds--max\:col-end-5 { - grid-column-end: 5; - } - .cds--max\:col-end-6 { - grid-column-end: 6; - } - .cds--max\:col-end-7 { - grid-column-end: 7; - } - .cds--max\:col-end-8 { - grid-column-end: 8; - } - .cds--max\:col-end-9 { - grid-column-end: 9; - } - .cds--max\:col-end-10 { - grid-column-end: 10; - } - .cds--max\:col-end-11 { - grid-column-end: 11; - } - .cds--max\:col-end-12 { - grid-column-end: 12; - } - .cds--max\:col-end-13 { - grid-column-end: 13; - } - .cds--max\:col-end-14 { - grid-column-end: 14; - } - .cds--max\:col-end-15 { - grid-column-end: 15; - } - .cds--max\:col-end-16 { - grid-column-end: 16; - } - .cds--max\:col-end-17 { - grid-column-end: 17; - } - .cds--max\:col-start-auto { - grid-column-start: auto; - } - .cds--max\:col-end-auto { - grid-column-end: auto; - } -} -:root { - --cds-layer: var(--cds-layer-01, #f4f4f4); - --cds-layer-active: var(--cds-layer-active-01, #c6c6c6); - --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8); - --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0); - --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1); - --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0); - --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1); - --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8); - --cds-field: var(--cds-field-01, #f4f4f4); - --cds-field-hover: var(--cds-field-hover-01, #e8e8e8); - --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0); - --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6); - --cds-border-strong: var(--cds-border-strong-01, #8d8d8d); - --cds-border-tile: var(--cds-border-tile-01, #c6c6c6); -} - -.cds--layer-one { - --cds-layer: var(--cds-layer-01, #f4f4f4); - --cds-layer-active: var(--cds-layer-active-01, #c6c6c6); - --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8); - --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0); - --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1); - --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0); - --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1); - --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8); - --cds-field: var(--cds-field-01, #f4f4f4); - --cds-field-hover: var(--cds-field-hover-01, #e8e8e8); - --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0); - --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6); - --cds-border-strong: var(--cds-border-strong-01, #8d8d8d); - --cds-border-tile: var(--cds-border-tile-01, #c6c6c6); -} - -.cds--layer-two { - --cds-layer: var(--cds-layer-02, #ffffff); - --cds-layer-active: var(--cds-layer-active-02, #c6c6c6); - --cds-layer-hover: var(--cds-layer-hover-02, #e8e8e8); - --cds-layer-selected: var(--cds-layer-selected-02, #e0e0e0); - --cds-layer-selected-hover: var(--cds-layer-selected-hover-02, #d1d1d1); - --cds-layer-accent: var(--cds-layer-accent-02, #e0e0e0); - --cds-layer-accent-hover: var(--cds-layer-accent-hover-02, #d1d1d1); - --cds-layer-accent-active: var(--cds-layer-accent-active-02, #a8a8a8); - --cds-field: var(--cds-field-02, #ffffff); - --cds-field-hover: var(--cds-field-hover-02, #e8e8e8); - --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6); - --cds-border-subtle-selected: var(--cds-border-subtle-selected-02, #c6c6c6); - --cds-border-strong: var(--cds-border-strong-02, #8d8d8d); - --cds-border-tile: var(--cds-border-tile-02, #a8a8a8); -} - -.cds--layer-three { - --cds-layer: var(--cds-layer-03, #f4f4f4); - --cds-layer-active: var(--cds-layer-active-03, #c6c6c6); - --cds-layer-hover: var(--cds-layer-hover-03, #e8e8e8); - --cds-layer-selected: var(--cds-layer-selected-03, #e0e0e0); - --cds-layer-selected-hover: var(--cds-layer-selected-hover-03, #d1d1d1); - --cds-layer-accent: var(--cds-layer-accent-03, #e0e0e0); - --cds-layer-accent-hover: var(--cds-layer-accent-hover-03, #d1d1d1); - --cds-layer-accent-active: var(--cds-layer-accent-active-03, #a8a8a8); - --cds-field: var(--cds-field-03, #f4f4f4); - --cds-field-hover: var(--cds-field-hover-03, #e8e8e8); - --cds-border-subtle: var(--cds-border-subtle-02, #e0e0e0); - --cds-border-subtle-selected: var(--cds-border-subtle-selected-03, #c6c6c6); - --cds-border-strong: var(--cds-border-strong-03, #8d8d8d); - --cds-border-tile: var(--cds-border-tile-03, #c6c6c6); -} - -.cds--layout--size-xs { - --cds-layout-size-height-context: var(--cds-layout-size-height-xs, 1.5rem); - --cds-layout-size-height: var(--cds-layout-size-height-context); -} - -.cds--layout-constraint--size__default-xs { - --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem)); -} - -.cds--layout-constraint--size__min-xs { - --cds-layout-size-height-min: var(--cds-layout-size-height-xs, 1.5rem); -} - -.cds--layout-constraint--size__max-xs { - --cds-layout-size-height-max: var(--cds-layout-size-height-xs, 1.5rem); -} - -.cds--layout--size-sm { - --cds-layout-size-height-context: var(--cds-layout-size-height-sm, 2rem); - --cds-layout-size-height: var(--cds-layout-size-height-context); -} - -.cds--layout-constraint--size__default-sm { - --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem)); -} - -.cds--layout-constraint--size__min-sm { - --cds-layout-size-height-min: var(--cds-layout-size-height-sm, 2rem); -} - -.cds--layout-constraint--size__max-sm { - --cds-layout-size-height-max: var(--cds-layout-size-height-sm, 2rem); -} - -.cds--layout--size-md { - --cds-layout-size-height-context: var(--cds-layout-size-height-md, 2.5rem); - --cds-layout-size-height: var(--cds-layout-size-height-context); -} - -.cds--layout-constraint--size__default-md { - --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-md, 2.5rem)); -} - -.cds--layout-constraint--size__min-md { - --cds-layout-size-height-min: var(--cds-layout-size-height-md, 2.5rem); -} - -.cds--layout-constraint--size__max-md { - --cds-layout-size-height-max: var(--cds-layout-size-height-md, 2.5rem); -} - -.cds--layout--size-lg { - --cds-layout-size-height-context: var(--cds-layout-size-height-lg, 3rem); - --cds-layout-size-height: var(--cds-layout-size-height-context); -} - -.cds--layout-constraint--size__default-lg { - --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem)); -} - -.cds--layout-constraint--size__min-lg { - --cds-layout-size-height-min: var(--cds-layout-size-height-lg, 3rem); -} - -.cds--layout-constraint--size__max-lg { - --cds-layout-size-height-max: var(--cds-layout-size-height-lg, 3rem); -} - -.cds--layout--size-xl { - --cds-layout-size-height-context: var(--cds-layout-size-height-xl, 4rem); - --cds-layout-size-height: var(--cds-layout-size-height-context); -} - -.cds--layout-constraint--size__default-xl { - --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem)); -} - -.cds--layout-constraint--size__min-xl { - --cds-layout-size-height-min: var(--cds-layout-size-height-xl, 4rem); -} - -.cds--layout-constraint--size__max-xl { - --cds-layout-size-height-max: var(--cds-layout-size-height-xl, 4rem); -} - -.cds--layout--size-2xl { - --cds-layout-size-height-context: var(--cds-layout-size-height-2xl, 5rem); - --cds-layout-size-height: var(--cds-layout-size-height-context); -} - -.cds--layout-constraint--size__default-2xl { - --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem)); -} - -.cds--layout-constraint--size__min-2xl { - --cds-layout-size-height-min: var(--cds-layout-size-height-2xl, 5rem); -} - -.cds--layout-constraint--size__max-2xl { - --cds-layout-size-height-max: var(--cds-layout-size-height-2xl, 5rem); -} - -.cds--layout--density-condensed { - --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-condensed, 0.5rem); - --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context); -} - -.cds--layout-constraint--density__default-condensed { - --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-condensed, 0.5rem)); -} - -.cds--layout-constraint--density__min-condensed { - --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-condensed, 0.5rem); -} - -.cds--layout-constraint--density__max-condensed { - --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-condensed, 0.5rem); -} - -.cds--layout--density-normal { - --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-normal, 1rem); - --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context); -} - -.cds--layout-constraint--density__default-normal { - --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-normal, 1rem)); -} - -.cds--layout-constraint--density__min-normal { - --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-normal, 1rem); -} - -.cds--layout-constraint--density__max-normal { - --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-normal, 1rem); -} - -:root { - --cds-layout-size-height-xs: 1.5rem; - --cds-layout-size-height-sm: 2rem; - --cds-layout-size-height-md: 2.5rem; - --cds-layout-size-height-lg: 3rem; - --cds-layout-size-height-xl: 4rem; - --cds-layout-size-height-2xl: 5rem; - --cds-layout-size-height-min: 0px; - --cds-layout-size-height-max: 999999999px; - --cds-layout-density-padding-inline-condensed: 0.5rem; - --cds-layout-density-padding-inline-normal: 1rem; - --cds-layout-density-padding-inline-min: 0px; - --cds-layout-density-padding-inline-max: 999999999px; -} - -.cds--white { - background-color: var(--cds-background); - color: var(--cds-text-primary); - --cds-ai-aura-end: rgba(255, 255, 255, 0); - --cds-ai-aura-hover-background: #edf5ff; - --cds-ai-aura-hover-end: rgba(255, 255, 255, 0); - --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.32); - --cds-ai-aura-start: rgba(69, 137, 255, 0.1); - --cds-ai-aura-start-sm: rgba(69, 137, 255, 0.16); - --cds-ai-border-end: #78a9ff; - --cds-ai-border-start: rgba(166, 200, 255, 0.64); - --cds-ai-border-strong: #4589ff; - --cds-ai-drop-shadow: rgba(15, 98, 254, 0.1); - --cds-ai-inner-shadow: rgba(69, 137, 255, 0.1); - --cds-ai-overlay: rgba(0, 17, 65, 0.5); - --cds-ai-popover-background: #ffffff; - --cds-ai-popover-caret-bottom: #78a9ff; - --cds-ai-popover-caret-bottom-background: #eaf1ff; - --cds-ai-popover-caret-bottom-background-actions: #e9effa; - --cds-ai-popover-caret-center: #a0c3ff; - --cds-ai-popover-shadow-outer-01: rgba(0, 67, 206, 0.06); - --cds-ai-popover-shadow-outer-02: rgba(0, 0, 0, 0.04); - --cds-ai-skeleton-background: #d0e2ff; - --cds-ai-skeleton-element-background: #4589ff; - --cds-background: #ffffff; - --cds-background-active: rgba(141, 141, 141, 0.5); - --cds-background-brand: #0f62fe; - --cds-background-hover: rgba(141, 141, 141, 0.12); - --cds-background-inverse: #393939; - --cds-background-inverse-hover: #474747; - --cds-background-selected: rgba(141, 141, 141, 0.2); - --cds-background-selected-hover: rgba(141, 141, 141, 0.32); - --cds-border-disabled: #c6c6c6; - --cds-border-interactive: #0f62fe; - --cds-border-inverse: #161616; - --cds-border-strong-01: #8d8d8d; - --cds-border-strong-02: #8d8d8d; - --cds-border-strong-03: #8d8d8d; - --cds-border-subtle-00: #e0e0e0; - --cds-border-subtle-01: #c6c6c6; - --cds-border-subtle-02: #e0e0e0; - --cds-border-subtle-03: #c6c6c6; - --cds-border-subtle-selected-01: #c6c6c6; - --cds-border-subtle-selected-02: #c6c6c6; - --cds-border-subtle-selected-03: #c6c6c6; - --cds-border-tile-01: #c6c6c6; - --cds-border-tile-02: #a8a8a8; - --cds-border-tile-03: #c6c6c6; - --cds-chat-avatar-agent: #393939; - --cds-chat-avatar-bot: #6f6f6f; - --cds-chat-avatar-user: #0f62fe; - --cds-chat-bubble-agent: #ffffff; - --cds-chat-bubble-border: #e0e0e0; - --cds-chat-bubble-user: #e0e0e0; - --cds-chat-button: #0f62fe; - --cds-chat-button-active: rgba(141, 141, 141, 0.5); - --cds-chat-button-hover: rgba(141, 141, 141, 0.12); - --cds-chat-button-selected: rgba(141, 141, 141, 0.2); - --cds-chat-button-text-hover: #0043ce; - --cds-chat-button-text-selected: #525252; - --cds-chat-header-background: #ffffff; - --cds-chat-prompt-background: #ffffff; - --cds-chat-prompt-border-end: rgba(244, 244, 244, 0); - --cds-chat-prompt-border-start: #f4f4f4; - --cds-chat-shell-background: #ffffff; - --cds-field-01: #f4f4f4; - --cds-field-02: #ffffff; - --cds-field-03: #f4f4f4; - --cds-field-hover-01: #e8e8e8; - --cds-field-hover-02: #e8e8e8; - --cds-field-hover-03: #e8e8e8; - --cds-focus: #0f62fe; - --cds-focus-inset: #ffffff; - --cds-focus-inverse: #ffffff; - --cds-highlight: #d0e2ff; - --cds-icon-disabled: rgba(22, 22, 22, 0.25); - --cds-icon-interactive: #0f62fe; - --cds-icon-inverse: #ffffff; - --cds-icon-on-color: #ffffff; - --cds-icon-on-color-disabled: #8d8d8d; - --cds-icon-primary: #161616; - --cds-icon-secondary: #525252; - --cds-interactive: #0f62fe; - --cds-layer-01: #f4f4f4; - --cds-layer-02: #ffffff; - --cds-layer-03: #f4f4f4; - --cds-layer-accent-01: #e0e0e0; - --cds-layer-accent-02: #e0e0e0; - --cds-layer-accent-03: #e0e0e0; - --cds-layer-accent-active-01: #a8a8a8; - --cds-layer-accent-active-02: #a8a8a8; - --cds-layer-accent-active-03: #a8a8a8; - --cds-layer-accent-hover-01: #d1d1d1; - --cds-layer-accent-hover-02: #d1d1d1; - --cds-layer-accent-hover-03: #d1d1d1; - --cds-layer-active-01: #c6c6c6; - --cds-layer-active-02: #c6c6c6; - --cds-layer-active-03: #c6c6c6; - --cds-layer-hover-01: #e8e8e8; - --cds-layer-hover-02: #e8e8e8; - --cds-layer-hover-03: #e8e8e8; - --cds-layer-selected-01: #e0e0e0; - --cds-layer-selected-02: #e0e0e0; - --cds-layer-selected-03: #e0e0e0; - --cds-layer-selected-disabled: #8d8d8d; - --cds-layer-selected-hover-01: #d1d1d1; - --cds-layer-selected-hover-02: #d1d1d1; - --cds-layer-selected-hover-03: #d1d1d1; - --cds-layer-selected-inverse: #161616; - --cds-link-inverse: #78a9ff; - --cds-link-inverse-active: #f4f4f4; - --cds-link-inverse-hover: #a6c8ff; - --cds-link-inverse-visited: #be95ff; - --cds-link-primary: #0f62fe; - --cds-link-primary-hover: #0043ce; - --cds-link-secondary: #0043ce; - --cds-link-visited: #8a3ffc; - --cds-overlay: rgba(22, 22, 22, 0.5); - --cds-shadow: rgba(0, 0, 0, 0.3); - --cds-skeleton-background: #e8e8e8; - --cds-skeleton-element: #c6c6c6; - --cds-support-caution-major: #ff832b; - --cds-support-caution-minor: #f1c21b; - --cds-support-caution-undefined: #8a3ffc; - --cds-support-error: #da1e28; - --cds-support-error-inverse: #fa4d56; - --cds-support-info: #0043ce; - --cds-support-info-inverse: #4589ff; - --cds-support-success: #24a148; - --cds-support-success-inverse: #42be65; - --cds-support-warning: #f1c21b; - --cds-support-warning-inverse: #f1c21b; - --cds-text-disabled: rgba(22, 22, 22, 0.25); - --cds-text-error: #da1e28; - --cds-text-helper: #6f6f6f; - --cds-text-inverse: #ffffff; - --cds-text-on-color: #ffffff; - --cds-text-on-color-disabled: #8d8d8d; - --cds-text-placeholder: rgba(22, 22, 22, 0.4); - --cds-text-primary: #161616; - --cds-text-secondary: #525252; - --cds-toggle-off: #8d8d8d; - --cds-layer: var(--cds-layer-01, #f4f4f4); - --cds-layer-active: var(--cds-layer-active-01, #c6c6c6); - --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8); - --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0); - --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1); - --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0); - --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1); - --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8); - --cds-field: var(--cds-field-01, #f4f4f4); - --cds-field-hover: var(--cds-field-hover-01, #e8e8e8); - --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0); - --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6); - --cds-border-strong: var(--cds-border-strong-01, #8d8d8d); - --cds-border-tile: var(--cds-border-tile-01, #c6c6c6); - --cds-button-separator: #e0e0e0; - --cds-button-primary: #0f62fe; - --cds-button-secondary: #393939; - --cds-button-tertiary: #0f62fe; - --cds-button-danger-primary: #da1e28; - --cds-button-danger-secondary: #da1e28; - --cds-button-danger-active: #750e13; - --cds-button-primary-active: #002d9c; - --cds-button-secondary-active: #6f6f6f; - --cds-button-tertiary-active: #002d9c; - --cds-button-danger-hover: #b81921; - --cds-button-primary-hover: #0050e6; - --cds-button-secondary-hover: #474747; - --cds-button-tertiary-hover: #0050e6; - --cds-button-disabled: #c6c6c6; - --cds-notification-background-error: #fff1f1; - --cds-notification-background-success: #defbe6; - --cds-notification-background-info: #edf5ff; - --cds-notification-background-warning: #fdf6dd; - --cds-notification-action-hover: #ffffff; - --cds-notification-action-tertiary-inverse: #ffffff; - --cds-notification-action-tertiary-inverse-active: #c6c6c6; - --cds-notification-action-tertiary-inverse-hover: #f4f4f4; - --cds-notification-action-tertiary-inverse-text: #161616; - --cds-notification-action-tertiary-inverse-text-on-color-disabled: rgba(255, 255, 255, 0.25); - --cds-tag-background-red: #ffd7d9; - --cds-tag-color-red: #750e13; - --cds-tag-hover-red: #ffc2c5; - --cds-tag-background-magenta: #ffd6e8; - --cds-tag-color-magenta: #740937; - --cds-tag-hover-magenta: #ffbdda; - --cds-tag-background-purple: #e8daff; - --cds-tag-color-purple: #491d8b; - --cds-tag-hover-purple: #dcc7ff; - --cds-tag-background-blue: #d0e2ff; - --cds-tag-color-blue: #002d9c; - --cds-tag-hover-blue: #b8d3ff; - --cds-tag-background-cyan: #bae6ff; - --cds-tag-color-cyan: #003a6d; - --cds-tag-hover-cyan: #99daff; - --cds-tag-background-teal: #9ef0f0; - --cds-tag-color-teal: #004144; - --cds-tag-hover-teal: #57e5e5; - --cds-tag-background-green: #a7f0ba; - --cds-tag-color-green: #044317; - --cds-tag-hover-green: #74e792; - --cds-tag-background-gray: #e0e0e0; - --cds-tag-color-gray: #161616; - --cds-tag-hover-gray: #d1d1d1; - --cds-tag-border-red: #ff8389; - --cds-tag-border-blue: #78a9ff; - --cds-tag-border-cyan: #33b1ff; - --cds-tag-border-teal: #08bdba; - --cds-tag-border-green: #42be65; - --cds-tag-border-magenta: #ff7eb6; - --cds-tag-border-purple: #be95ff; - --cds-tag-border-gray: #a8a8a8; - --cds-tag-border-cool-gray: #a2a9b0; - --cds-tag-border-warm-gray: #ada8a8; - --cds-tag-background-cool-gray: #dde1e6; - --cds-tag-color-cool-gray: #121619; - --cds-tag-hover-cool-gray: #cdd3da; - --cds-tag-background-warm-gray: #e5e0df; - --cds-tag-color-warm-gray: #171414; - --cds-tag-hover-warm-gray: #d8d0cf; -} - -.cds--g10 { - background-color: var(--cds-background); - color: var(--cds-text-primary); - --cds-ai-aura-end: rgba(255, 255, 255, 0); - --cds-ai-aura-hover-background: #edf5ff; - --cds-ai-aura-hover-end: rgba(255, 255, 255, 0); - --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.32); - --cds-ai-aura-start: rgba(69, 137, 255, 0.1); - --cds-ai-aura-start-sm: rgba(69, 137, 255, 0.16); - --cds-ai-border-end: #78a9ff; - --cds-ai-border-start: rgba(166, 200, 255, 0.64); - --cds-ai-border-strong: #4589ff; - --cds-ai-drop-shadow: rgba(15, 98, 254, 0.1); - --cds-ai-inner-shadow: rgba(69, 137, 255, 0.1); - --cds-ai-overlay: rgba(0, 17, 65, 0.5); - --cds-ai-popover-background: #ffffff; - --cds-ai-popover-caret-bottom: #78a9ff; - --cds-ai-popover-caret-bottom-background: #eaf1ff; - --cds-ai-popover-caret-bottom-background-actions: #e9effa; - --cds-ai-popover-caret-center: #a0c3ff; - --cds-ai-popover-shadow-outer-01: rgba(0, 67, 206, 0.06); - --cds-ai-popover-shadow-outer-02: rgba(0, 0, 0, 0.04); - --cds-ai-skeleton-background: #d0e2ff; - --cds-ai-skeleton-element-background: #4589ff; - --cds-background: #f4f4f4; - --cds-background-active: rgba(141, 141, 141, 0.5); - --cds-background-brand: #0f62fe; - --cds-background-hover: rgba(141, 141, 141, 0.12); - --cds-background-inverse: #393939; - --cds-background-inverse-hover: #474747; - --cds-background-selected: rgba(141, 141, 141, 0.2); - --cds-background-selected-hover: rgba(141, 141, 141, 0.32); - --cds-border-disabled: #c6c6c6; - --cds-border-interactive: #0f62fe; - --cds-border-inverse: #161616; - --cds-border-strong-01: #8d8d8d; - --cds-border-strong-02: #8d8d8d; - --cds-border-strong-03: #8d8d8d; - --cds-border-subtle-00: #c6c6c6; - --cds-border-subtle-01: #e0e0e0; - --cds-border-subtle-02: #c6c6c6; - --cds-border-subtle-03: #e0e0e0; - --cds-border-subtle-selected-01: #c6c6c6; - --cds-border-subtle-selected-02: #c6c6c6; - --cds-border-subtle-selected-03: #c6c6c6; - --cds-border-tile-01: #a8a8a8; - --cds-border-tile-02: #c6c6c6; - --cds-border-tile-03: #a8a8a8; - --cds-chat-avatar-agent: #393939; - --cds-chat-avatar-bot: #6f6f6f; - --cds-chat-avatar-user: #0f62fe; - --cds-chat-bubble-agent: #ffffff; - --cds-chat-bubble-border: #e0e0e0; - --cds-chat-bubble-user: #e0e0e0; - --cds-chat-button: #0f62fe; - --cds-chat-button-active: rgba(141, 141, 141, 0.5); - --cds-chat-button-hover: rgba(141, 141, 141, 0.12); - --cds-chat-button-selected: rgba(141, 141, 141, 0.2); - --cds-chat-button-text-hover: #0043ce; - --cds-chat-button-text-selected: #525252; - --cds-chat-header-background: #ffffff; - --cds-chat-prompt-background: #ffffff; - --cds-chat-prompt-border-end: rgba(244, 244, 244, 0); - --cds-chat-prompt-border-start: #f4f4f4; - --cds-chat-shell-background: #ffffff; - --cds-field-01: #ffffff; - --cds-field-02: #f4f4f4; - --cds-field-03: #ffffff; - --cds-field-hover-01: #e8e8e8; - --cds-field-hover-02: #e8e8e8; - --cds-field-hover-03: #e8e8e8; - --cds-focus: #0f62fe; - --cds-focus-inset: #ffffff; - --cds-focus-inverse: #ffffff; - --cds-highlight: #d0e2ff; - --cds-icon-disabled: rgba(22, 22, 22, 0.25); - --cds-icon-interactive: #0f62fe; - --cds-icon-inverse: #ffffff; - --cds-icon-on-color: #ffffff; - --cds-icon-on-color-disabled: #8d8d8d; - --cds-icon-primary: #161616; - --cds-icon-secondary: #525252; - --cds-interactive: #0f62fe; - --cds-layer-01: #ffffff; - --cds-layer-02: #f4f4f4; - --cds-layer-03: #ffffff; - --cds-layer-accent-01: #e0e0e0; - --cds-layer-accent-02: #e0e0e0; - --cds-layer-accent-03: #e0e0e0; - --cds-layer-accent-active-01: #a8a8a8; - --cds-layer-accent-active-02: #a8a8a8; - --cds-layer-accent-active-03: #a8a8a8; - --cds-layer-accent-hover-01: #d1d1d1; - --cds-layer-accent-hover-02: #d1d1d1; - --cds-layer-accent-hover-03: #d1d1d1; - --cds-layer-active-01: #c6c6c6; - --cds-layer-active-02: #c6c6c6; - --cds-layer-active-03: #c6c6c6; - --cds-layer-hover-01: #e8e8e8; - --cds-layer-hover-02: #e8e8e8; - --cds-layer-hover-03: #e8e8e8; - --cds-layer-selected-01: #e0e0e0; - --cds-layer-selected-02: #e0e0e0; - --cds-layer-selected-03: #e0e0e0; - --cds-layer-selected-disabled: #8d8d8d; - --cds-layer-selected-hover-01: #d1d1d1; - --cds-layer-selected-hover-02: #d1d1d1; - --cds-layer-selected-hover-03: #d1d1d1; - --cds-layer-selected-inverse: #161616; - --cds-link-inverse: #78a9ff; - --cds-link-inverse-active: #f4f4f4; - --cds-link-inverse-hover: #a6c8ff; - --cds-link-inverse-visited: #be95ff; - --cds-link-primary: #0f62fe; - --cds-link-primary-hover: #0043ce; - --cds-link-secondary: #0043ce; - --cds-link-visited: #8a3ffc; - --cds-overlay: rgba(22, 22, 22, 0.5); - --cds-shadow: rgba(0, 0, 0, 0.3); - --cds-skeleton-background: #e8e8e8; - --cds-skeleton-element: #c6c6c6; - --cds-support-caution-major: #ff832b; - --cds-support-caution-minor: #f1c21b; - --cds-support-caution-undefined: #8a3ffc; - --cds-support-error: #da1e28; - --cds-support-error-inverse: #fa4d56; - --cds-support-info: #0043ce; - --cds-support-info-inverse: #4589ff; - --cds-support-success: #24a148; - --cds-support-success-inverse: #42be65; - --cds-support-warning: #f1c21b; - --cds-support-warning-inverse: #f1c21b; - --cds-text-disabled: rgba(22, 22, 22, 0.25); - --cds-text-error: #da1e28; - --cds-text-helper: #6f6f6f; - --cds-text-inverse: #ffffff; - --cds-text-on-color: #ffffff; - --cds-text-on-color-disabled: #8d8d8d; - --cds-text-placeholder: rgba(22, 22, 22, 0.4); - --cds-text-primary: #161616; - --cds-text-secondary: #525252; - --cds-toggle-off: #8d8d8d; - --cds-layer: var(--cds-layer-01, #f4f4f4); - --cds-layer-active: var(--cds-layer-active-01, #c6c6c6); - --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8); - --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0); - --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1); - --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0); - --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1); - --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8); - --cds-field: var(--cds-field-01, #f4f4f4); - --cds-field-hover: var(--cds-field-hover-01, #e8e8e8); - --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0); - --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6); - --cds-border-strong: var(--cds-border-strong-01, #8d8d8d); - --cds-border-tile: var(--cds-border-tile-01, #c6c6c6); - --cds-button-separator: #e0e0e0; - --cds-button-primary: #0f62fe; - --cds-button-secondary: #393939; - --cds-button-tertiary: #0f62fe; - --cds-button-danger-primary: #da1e28; - --cds-button-danger-secondary: #da1e28; - --cds-button-danger-active: #750e13; - --cds-button-primary-active: #002d9c; - --cds-button-secondary-active: #6f6f6f; - --cds-button-tertiary-active: #002d9c; - --cds-button-danger-hover: #b81921; - --cds-button-primary-hover: #0050e6; - --cds-button-secondary-hover: #474747; - --cds-button-tertiary-hover: #0050e6; - --cds-button-disabled: #c6c6c6; - --cds-notification-background-error: #fff1f1; - --cds-notification-background-success: #defbe6; - --cds-notification-background-info: #edf5ff; - --cds-notification-background-warning: #fdf6dd; - --cds-notification-action-hover: #ffffff; - --cds-notification-action-tertiary-inverse: #ffffff; - --cds-notification-action-tertiary-inverse-active: #c6c6c6; - --cds-notification-action-tertiary-inverse-hover: #f4f4f4; - --cds-notification-action-tertiary-inverse-text: #161616; - --cds-notification-action-tertiary-inverse-text-on-color-disabled: rgba(255, 255, 255, 0.25); - --cds-tag-background-red: #ffd7d9; - --cds-tag-color-red: #750e13; - --cds-tag-hover-red: #ffc2c5; - --cds-tag-background-magenta: #ffd6e8; - --cds-tag-color-magenta: #740937; - --cds-tag-hover-magenta: #ffbdda; - --cds-tag-background-purple: #e8daff; - --cds-tag-color-purple: #491d8b; - --cds-tag-hover-purple: #dcc7ff; - --cds-tag-background-blue: #d0e2ff; - --cds-tag-color-blue: #002d9c; - --cds-tag-hover-blue: #b8d3ff; - --cds-tag-background-cyan: #bae6ff; - --cds-tag-color-cyan: #003a6d; - --cds-tag-hover-cyan: #99daff; - --cds-tag-background-teal: #9ef0f0; - --cds-tag-color-teal: #004144; - --cds-tag-hover-teal: #57e5e5; - --cds-tag-background-green: #a7f0ba; - --cds-tag-color-green: #044317; - --cds-tag-hover-green: #74e792; - --cds-tag-background-gray: #e0e0e0; - --cds-tag-color-gray: #161616; - --cds-tag-hover-gray: #d1d1d1; - --cds-tag-border-red: #ff8389; - --cds-tag-border-blue: #78a9ff; - --cds-tag-border-cyan: #33b1ff; - --cds-tag-border-teal: #08bdba; - --cds-tag-border-green: #42be65; - --cds-tag-border-magenta: #ff7eb6; - --cds-tag-border-purple: #be95ff; - --cds-tag-border-gray: #a8a8a8; - --cds-tag-border-cool-gray: #a2a9b0; - --cds-tag-border-warm-gray: #ada8a8; - --cds-tag-background-cool-gray: #dde1e6; - --cds-tag-color-cool-gray: #121619; - --cds-tag-hover-cool-gray: #cdd3da; - --cds-tag-background-warm-gray: #e5e0df; - --cds-tag-color-warm-gray: #171414; - --cds-tag-hover-warm-gray: #d8d0cf; -} - -.cds--g90 { - background-color: var(--cds-background); - color: var(--cds-text-primary); - --cds-ai-aura-end: rgba(0, 0, 0, 0); - --cds-ai-aura-hover-background: #474747; - --cds-ai-aura-hover-end: rgba(0, 0, 0, 0); - --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4); - --cds-ai-aura-start: rgba(69, 137, 255, 0.1); - --cds-ai-aura-start-sm: rgba(69, 137, 255, 0.16); - --cds-ai-border-end: #4589ff; - --cds-ai-border-start: rgba(166, 200, 255, 0.36); - --cds-ai-border-strong: #78a9ff; - --cds-ai-drop-shadow: rgba(0, 0, 0, 0.28); - --cds-ai-inner-shadow: rgba(69, 137, 255, 0.16); - --cds-ai-overlay: rgba(0, 0, 0, 0.5); - --cds-ai-popover-background: #161616; - --cds-ai-popover-caret-bottom: #4589ff; - --cds-ai-popover-caret-bottom-background: #202d45; - --cds-ai-popover-caret-bottom-background-actions: #1e283a; - --cds-ai-popover-caret-center: #4870b5; - --cds-ai-popover-shadow-outer-01: rgba(0, 0, 0, 0.12); - --cds-ai-popover-shadow-outer-02: rgba(0, 0, 0, 0.08); - --cds-ai-skeleton-background: rgba(120, 169, 255, 0.5); - --cds-ai-skeleton-element-background: rgba(120, 169, 255, 0.3); - --cds-background: #262626; - --cds-background-active: rgba(141, 141, 141, 0.4); - --cds-background-brand: #0f62fe; - --cds-background-hover: rgba(141, 141, 141, 0.16); - --cds-background-inverse: #f4f4f4; - --cds-background-inverse-hover: #e8e8e8; - --cds-background-selected: rgba(141, 141, 141, 0.24); - --cds-background-selected-hover: rgba(141, 141, 141, 0.32); - --cds-border-disabled: rgba(141, 141, 141, 0.5); - --cds-border-interactive: #4589ff; - --cds-border-inverse: #f4f4f4; - --cds-border-strong-01: #8d8d8d; - --cds-border-strong-02: #a8a8a8; - --cds-border-strong-03: #c6c6c6; - --cds-border-subtle-00: #525252; - --cds-border-subtle-01: #6f6f6f; - --cds-border-subtle-02: #8d8d8d; - --cds-border-subtle-03: #8d8d8d; - --cds-border-subtle-selected-01: #8d8d8d; - --cds-border-subtle-selected-02: #a8a8a8; - --cds-border-subtle-selected-03: #a8a8a8; - --cds-border-tile-01: #6f6f6f; - --cds-border-tile-02: #8d8d8d; - --cds-border-tile-03: #a8a8a8; - --cds-chat-avatar-agent: #c6c6c6; - --cds-chat-avatar-bot: #8d8d8d; - --cds-chat-avatar-user: #4589ff; - --cds-chat-bubble-agent: #262626; - --cds-chat-bubble-border: #525252; - --cds-chat-bubble-user: #393939; - --cds-chat-button: #78a9ff; - --cds-chat-button-active: rgba(141, 141, 141, 0.4); - --cds-chat-button-hover: rgba(141, 141, 141, 0.16); - --cds-chat-button-selected: rgba(141, 141, 141, 0.24); - --cds-chat-button-text-hover: #a6c8ff; - --cds-chat-button-text-selected: #c6c6c6; - --cds-chat-header-background: #262626; - --cds-chat-prompt-background: #161616; - --cds-chat-prompt-border-end: rgba(38, 38, 38, 0); - --cds-chat-prompt-border-start: #262626; - --cds-chat-shell-background: #262626; - --cds-field-01: #393939; - --cds-field-02: #525252; - --cds-field-03: #6f6f6f; - --cds-field-hover-01: #474747; - --cds-field-hover-02: #636363; - --cds-field-hover-03: #5e5e5e; - --cds-focus: #ffffff; - --cds-focus-inset: #161616; - --cds-focus-inverse: #0f62fe; - --cds-highlight: #0043ce; - --cds-icon-disabled: rgba(244, 244, 244, 0.25); - --cds-icon-interactive: #ffffff; - --cds-icon-inverse: #161616; - --cds-icon-on-color: #ffffff; - --cds-icon-on-color-disabled: rgba(255, 255, 255, 0.25); - --cds-icon-primary: #f4f4f4; - --cds-icon-secondary: #c6c6c6; - --cds-interactive: #4589ff; - --cds-layer-01: #393939; - --cds-layer-02: #525252; - --cds-layer-03: #6f6f6f; - --cds-layer-accent-01: #525252; - --cds-layer-accent-02: #6f6f6f; - --cds-layer-accent-03: #8d8d8d; - --cds-layer-accent-active-01: #8d8d8d; - --cds-layer-accent-active-02: #393939; - --cds-layer-accent-active-03: #525252; - --cds-layer-accent-hover-01: #636363; - --cds-layer-accent-hover-02: #5e5e5e; - --cds-layer-accent-hover-03: #7a7a7a; - --cds-layer-active-01: #6f6f6f; - --cds-layer-active-02: #8d8d8d; - --cds-layer-active-03: #393939; - --cds-layer-hover-01: #474747; - --cds-layer-hover-02: #636363; - --cds-layer-hover-03: #5e5e5e; - --cds-layer-selected-01: #525252; - --cds-layer-selected-02: #6f6f6f; - --cds-layer-selected-03: #525252; - --cds-layer-selected-disabled: #a8a8a8; - --cds-layer-selected-hover-01: #636363; - --cds-layer-selected-hover-02: #5e5e5e; - --cds-layer-selected-hover-03: #636363; - --cds-layer-selected-inverse: #f4f4f4; - --cds-link-inverse: #0f62fe; - --cds-link-inverse-active: #161616; - --cds-link-inverse-hover: #0043ce; - --cds-link-inverse-visited: #8a3ffc; - --cds-link-primary: #78a9ff; - --cds-link-primary-hover: #a6c8ff; - --cds-link-secondary: #a6c8ff; - --cds-link-visited: #be95ff; - --cds-overlay: rgba(0, 0, 0, 0.65); - --cds-shadow: rgba(0, 0, 0, 0.8); - --cds-skeleton-background: #333333; - --cds-skeleton-element: #525252; - --cds-support-caution-major: #ff832b; - --cds-support-caution-minor: #f1c21b; - --cds-support-caution-undefined: #a56eff; - --cds-support-error: #ff8389; - --cds-support-error-inverse: #da1e28; - --cds-support-info: #4589ff; - --cds-support-info-inverse: #0043ce; - --cds-support-success: #42be65; - --cds-support-success-inverse: #24a148; - --cds-support-warning: #f1c21b; - --cds-support-warning-inverse: #f1c21b; - --cds-text-disabled: rgba(244, 244, 244, 0.25); - --cds-text-error: #ffb3b8; - --cds-text-helper: #c6c6c6; - --cds-text-inverse: #161616; - --cds-text-on-color: #ffffff; - --cds-text-on-color-disabled: rgba(255, 255, 255, 0.25); - --cds-text-placeholder: rgba(244, 244, 244, 0.4); - --cds-text-primary: #f4f4f4; - --cds-text-secondary: #c6c6c6; - --cds-toggle-off: #8d8d8d; - --cds-layer: var(--cds-layer-01, #f4f4f4); - --cds-layer-active: var(--cds-layer-active-01, #c6c6c6); - --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8); - --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0); - --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1); - --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0); - --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1); - --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8); - --cds-field: var(--cds-field-01, #f4f4f4); - --cds-field-hover: var(--cds-field-hover-01, #e8e8e8); - --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0); - --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6); - --cds-border-strong: var(--cds-border-strong-01, #8d8d8d); - --cds-border-tile: var(--cds-border-tile-01, #c6c6c6); - --cds-button-separator: #161616; - --cds-button-primary: #0f62fe; - --cds-button-secondary: #6f6f6f; - --cds-button-tertiary: #ffffff; - --cds-button-danger-primary: #da1e28; - --cds-button-danger-secondary: #ff8389; - --cds-button-danger-active: #750e13; - --cds-button-primary-active: #002d9c; - --cds-button-secondary-active: #393939; - --cds-button-tertiary-active: #c6c6c6; - --cds-button-danger-hover: #b81921; - --cds-button-primary-hover: #0050e6; - --cds-button-secondary-hover: #5e5e5e; - --cds-button-tertiary-hover: #f4f4f4; - --cds-button-disabled: rgba(141, 141, 141, 0.3); - --cds-notification-background-error: #393939; - --cds-notification-background-success: #393939; - --cds-notification-background-info: #393939; - --cds-notification-background-warning: #393939; - --cds-notification-action-tertiary-inverse: #0f62fe; - --cds-notification-action-tertiary-inverse-active: #002d9c; - --cds-notification-action-tertiary-inverse-hover: #0050e6; - --cds-notification-action-tertiary-inverse-text: #ffffff; - --cds-notification-action-tertiary-inverse-text-on-color-disabled: #8d8d8d; - --cds-tag-background-red: #a2191f; - --cds-tag-color-red: #ffd7d9; - --cds-tag-hover-red: #c21e25; - --cds-tag-background-magenta: #9f1853; - --cds-tag-color-magenta: #ffd6e8; - --cds-tag-hover-magenta: #bf1d63; - --cds-tag-background-purple: #6929c4; - --cds-tag-color-purple: #e8daff; - --cds-tag-hover-purple: #7c3dd6; - --cds-tag-background-blue: #0043ce; - --cds-tag-color-blue: #d0e2ff; - --cds-tag-hover-blue: #0053ff; - --cds-tag-background-cyan: #00539a; - --cds-tag-color-cyan: #bae6ff; - --cds-tag-hover-cyan: #0066bd; - --cds-tag-background-teal: #005d5d; - --cds-tag-color-teal: #9ef0f0; - --cds-tag-hover-teal: #007070; - --cds-tag-background-green: #0e6027; - --cds-tag-color-green: #a7f0ba; - --cds-tag-hover-green: #11742f; - --cds-tag-background-gray: #525252; - --cds-tag-color-gray: #f4f4f4; - --cds-tag-hover-gray: #636363; - --cds-tag-border-red: #fa4d56; - --cds-tag-border-blue: #4589ff; - --cds-tag-border-cyan: #1192e8; - --cds-tag-border-teal: #009d9a; - --cds-tag-border-green: #24a148; - --cds-tag-border-magenta: #ee5396; - --cds-tag-border-purple: #a56eff; - --cds-tag-border-gray: #8d8d8d; - --cds-tag-border-cool-gray: #878d96; - --cds-tag-border-warm-gray: #8f8b8b; - --cds-tag-background-cool-gray: #4d5358; - --cds-tag-color-cool-gray: #f2f4f8; - --cds-tag-hover-cool-gray: #5d646a; - --cds-tag-background-warm-gray: #565151; - --cds-tag-color-warm-gray: #f7f3f2; - --cds-tag-hover-warm-gray: #696363; -} - -.cds--g100 { - background-color: var(--cds-background); - color: var(--cds-text-primary); - --cds-ai-aura-end: rgba(0, 0, 0, 0); - --cds-ai-aura-hover-background: #333333; - --cds-ai-aura-hover-end: rgba(0, 0, 0, 0); - --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4); - --cds-ai-aura-start: rgba(69, 137, 255, 0.1); - --cds-ai-aura-start-sm: rgba(69, 137, 255, 0.16); - --cds-ai-border-end: #4589ff; - --cds-ai-border-start: rgba(166, 200, 255, 0.36); - --cds-ai-border-strong: #78a9ff; - --cds-ai-drop-shadow: rgba(0, 0, 0, 0.28); - --cds-ai-inner-shadow: rgba(69, 137, 255, 0.16); - --cds-ai-overlay: rgba(0, 0, 0, 0.5); - --cds-ai-popover-background: #161616; - --cds-ai-popover-caret-bottom: #4589ff; - --cds-ai-popover-caret-bottom-background: #202d45; - --cds-ai-popover-caret-bottom-background-actions: #1e283a; - --cds-ai-popover-caret-center: #4870b5; - --cds-ai-popover-shadow-outer-01: rgba(0, 0, 0, 0.12); - --cds-ai-popover-shadow-outer-02: rgba(0, 0, 0, 0.08); - --cds-ai-skeleton-background: rgba(120, 169, 255, 0.5); - --cds-ai-skeleton-element-background: rgba(120, 169, 255, 0.3); - --cds-background: #161616; - --cds-background-active: rgba(141, 141, 141, 0.4); - --cds-background-brand: #0f62fe; - --cds-background-hover: rgba(141, 141, 141, 0.16); - --cds-background-inverse: #f4f4f4; - --cds-background-inverse-hover: #e8e8e8; - --cds-background-selected: rgba(141, 141, 141, 0.24); - --cds-background-selected-hover: rgba(141, 141, 141, 0.32); - --cds-border-disabled: rgba(141, 141, 141, 0.5); - --cds-border-interactive: #4589ff; - --cds-border-inverse: #f4f4f4; - --cds-border-strong-01: #6f6f6f; - --cds-border-strong-02: #8d8d8d; - --cds-border-strong-03: #a8a8a8; - --cds-border-subtle-00: #393939; - --cds-border-subtle-01: #525252; - --cds-border-subtle-02: #6f6f6f; - --cds-border-subtle-03: #6f6f6f; - --cds-border-subtle-selected-01: #6f6f6f; - --cds-border-subtle-selected-02: #8d8d8d; - --cds-border-subtle-selected-03: #8d8d8d; - --cds-border-tile-01: #525252; - --cds-border-tile-02: #6f6f6f; - --cds-border-tile-03: #8d8d8d; - --cds-chat-avatar-agent: #c6c6c6; - --cds-chat-avatar-bot: #8d8d8d; - --cds-chat-avatar-user: #4589ff; - --cds-chat-bubble-agent: #262626; - --cds-chat-bubble-border: #525252; - --cds-chat-bubble-user: #393939; - --cds-chat-button: #78a9ff; - --cds-chat-button-active: rgba(141, 141, 141, 0.4); - --cds-chat-button-hover: rgba(141, 141, 141, 0.16); - --cds-chat-button-selected: rgba(141, 141, 141, 0.24); - --cds-chat-button-text-hover: #a6c8ff; - --cds-chat-button-text-selected: #c6c6c6; - --cds-chat-header-background: #262626; - --cds-chat-prompt-background: #161616; - --cds-chat-prompt-border-end: rgba(38, 38, 38, 0); - --cds-chat-prompt-border-start: #262626; - --cds-chat-shell-background: #262626; - --cds-field-01: #262626; - --cds-field-02: #393939; - --cds-field-03: #525252; - --cds-field-hover-01: #333333; - --cds-field-hover-02: #474747; - --cds-field-hover-03: #636363; - --cds-focus: #ffffff; - --cds-focus-inset: #161616; - --cds-focus-inverse: #0f62fe; - --cds-highlight: #002d9c; - --cds-icon-disabled: rgba(244, 244, 244, 0.25); - --cds-icon-interactive: #ffffff; - --cds-icon-inverse: #161616; - --cds-icon-on-color: #ffffff; - --cds-icon-on-color-disabled: rgba(255, 255, 255, 0.25); - --cds-icon-primary: #f4f4f4; - --cds-icon-secondary: #c6c6c6; - --cds-interactive: #4589ff; - --cds-layer-01: #262626; - --cds-layer-02: #393939; - --cds-layer-03: #525252; - --cds-layer-accent-01: #393939; - --cds-layer-accent-02: #525252; - --cds-layer-accent-03: #6f6f6f; - --cds-layer-accent-active-01: #6f6f6f; - --cds-layer-accent-active-02: #8d8d8d; - --cds-layer-accent-active-03: #393939; - --cds-layer-accent-hover-01: #474747; - --cds-layer-accent-hover-02: #636363; - --cds-layer-accent-hover-03: #5e5e5e; - --cds-layer-active-01: #525252; - --cds-layer-active-02: #6f6f6f; - --cds-layer-active-03: #8d8d8d; - --cds-layer-hover-01: #333333; - --cds-layer-hover-02: #474747; - --cds-layer-hover-03: #636363; - --cds-layer-selected-01: #393939; - --cds-layer-selected-02: #525252; - --cds-layer-selected-03: #6f6f6f; - --cds-layer-selected-disabled: #a8a8a8; - --cds-layer-selected-hover-01: #474747; - --cds-layer-selected-hover-02: #636363; - --cds-layer-selected-hover-03: #5e5e5e; - --cds-layer-selected-inverse: #f4f4f4; - --cds-link-inverse: #0f62fe; - --cds-link-inverse-active: #161616; - --cds-link-inverse-hover: #0043ce; - --cds-link-inverse-visited: #8a3ffc; - --cds-link-primary: #78a9ff; - --cds-link-primary-hover: #a6c8ff; - --cds-link-secondary: #a6c8ff; - --cds-link-visited: #be95ff; - --cds-overlay: rgba(0, 0, 0, 0.65); - --cds-shadow: rgba(0, 0, 0, 0.8); - --cds-skeleton-background: #292929; - --cds-skeleton-element: #393939; - --cds-support-caution-major: #ff832b; - --cds-support-caution-minor: #f1c21b; - --cds-support-caution-undefined: #a56eff; - --cds-support-error: #fa4d56; - --cds-support-error-inverse: #da1e28; - --cds-support-info: #4589ff; - --cds-support-info-inverse: #0043ce; - --cds-support-success: #42be65; - --cds-support-success-inverse: #24a148; - --cds-support-warning: #f1c21b; - --cds-support-warning-inverse: #f1c21b; - --cds-text-disabled: rgba(244, 244, 244, 0.25); - --cds-text-error: #ff8389; - --cds-text-helper: #a8a8a8; - --cds-text-inverse: #161616; - --cds-text-on-color: #ffffff; - --cds-text-on-color-disabled: rgba(255, 255, 255, 0.25); - --cds-text-placeholder: rgba(244, 244, 244, 0.4); - --cds-text-primary: #f4f4f4; - --cds-text-secondary: #c6c6c6; - --cds-toggle-off: #6f6f6f; - --cds-layer: var(--cds-layer-01, #f4f4f4); - --cds-layer-active: var(--cds-layer-active-01, #c6c6c6); - --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8); - --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0); - --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1); - --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0); - --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1); - --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8); - --cds-field: var(--cds-field-01, #f4f4f4); - --cds-field-hover: var(--cds-field-hover-01, #e8e8e8); - --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0); - --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6); - --cds-border-strong: var(--cds-border-strong-01, #8d8d8d); - --cds-border-tile: var(--cds-border-tile-01, #c6c6c6); - --cds-button-separator: #161616; - --cds-button-primary: #0f62fe; - --cds-button-secondary: #6f6f6f; - --cds-button-tertiary: #ffffff; - --cds-button-danger-primary: #da1e28; - --cds-button-danger-secondary: #fa4d56; - --cds-button-danger-active: #750e13; - --cds-button-primary-active: #002d9c; - --cds-button-secondary-active: #393939; - --cds-button-tertiary-active: #c6c6c6; - --cds-button-danger-hover: #b81921; - --cds-button-primary-hover: #0050e6; - --cds-button-secondary-hover: #5e5e5e; - --cds-button-tertiary-hover: #f4f4f4; - --cds-button-disabled: rgba(141, 141, 141, 0.3); - --cds-notification-background-error: #262626; - --cds-notification-background-success: #262626; - --cds-notification-background-info: #262626; - --cds-notification-background-warning: #262626; - --cds-notification-action-tertiary-inverse: #0f62fe; - --cds-notification-action-tertiary-inverse-active: #002d9c; - --cds-notification-action-tertiary-inverse-hover: #0050e6; - --cds-notification-action-tertiary-inverse-text: #ffffff; - --cds-notification-action-tertiary-inverse-text-on-color-disabled: #8d8d8d; - --cds-tag-background-red: #a2191f; - --cds-tag-color-red: #ffd7d9; - --cds-tag-hover-red: #c21e25; - --cds-tag-background-magenta: #9f1853; - --cds-tag-color-magenta: #ffd6e8; - --cds-tag-hover-magenta: #bf1d63; - --cds-tag-background-purple: #6929c4; - --cds-tag-color-purple: #e8daff; - --cds-tag-hover-purple: #7c3dd6; - --cds-tag-background-blue: #0043ce; - --cds-tag-color-blue: #d0e2ff; - --cds-tag-hover-blue: #0053ff; - --cds-tag-background-cyan: #00539a; - --cds-tag-color-cyan: #bae6ff; - --cds-tag-hover-cyan: #0066bd; - --cds-tag-background-teal: #005d5d; - --cds-tag-color-teal: #9ef0f0; - --cds-tag-hover-teal: #007070; - --cds-tag-background-green: #0e6027; - --cds-tag-color-green: #a7f0ba; - --cds-tag-hover-green: #11742f; - --cds-tag-background-gray: #525252; - --cds-tag-color-gray: #f4f4f4; - --cds-tag-hover-gray: #636363; - --cds-tag-border-red: #fa4d56; - --cds-tag-border-blue: #4589ff; - --cds-tag-border-cyan: #1192e8; - --cds-tag-border-teal: #009d9a; - --cds-tag-border-green: #24a148; - --cds-tag-border-magenta: #ee5396; - --cds-tag-border-purple: #a56eff; - --cds-tag-border-gray: #8d8d8d; - --cds-tag-border-cool-gray: #878d96; - --cds-tag-border-warm-gray: #8f8b8b; - --cds-tag-background-cool-gray: #4d5358; - --cds-tag-color-cool-gray: #f2f4f8; - --cds-tag-hover-cool-gray: #5d646a; - --cds-tag-background-warm-gray: #565151; - --cds-tag-color-warm-gray: #f7f3f2; - --cds-tag-hover-warm-gray: #696363; -} - -.cds--accordion { - --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-md)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-lg))); - --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max)); - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - inline-size: 100%; - list-style: none; -} -.cds--accordion *, -.cds--accordion *::before, -.cds--accordion *::after { - box-sizing: inherit; -} - -.cds--accordion__item { - display: list-item; - overflow: visible; - border-block-start: 1px solid var(--cds-border-subtle); - transition: border-color cubic-bezier(0.2, 0, 0.38, 0.9) 110ms; -} -.cds--accordion__item:last-child { - border-block-end: 1px solid var(--cds-border-subtle); -} - -.cds--accordion__item:not(.cds--accordion__item--active):hover, .cds--accordion__item:not(.cds--accordion__item--active):hover + .cds--accordion__item { - border-block-start-color: var(--cds-layer-hover); -} -.cds--accordion__item:not(.cds--accordion__item--active):last-child:hover { - border-block-end-color: var(--cds-layer-hover); -} - -.cds--accordion__heading { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: inline-block; - padding: 0; - border: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: none; - cursor: pointer; - text-align: start; - inline-size: 100%; - position: relative; - display: flex; - flex-direction: row-reverse; - align-items: center; - justify-content: flex-start; - margin: 0; - color: var(--cds-text-primary, #161616); - cursor: pointer; - inline-size: 100%; - min-block-size: var(--cds-layout-size-height-local); - padding-inline-end: var(--cds-layout-density-padding-inline-local); - transition: background-color cubic-bezier(0.2, 0, 0.38, 0.9) 110ms; -} -.cds--accordion__heading *, -.cds--accordion__heading *::before, -.cds--accordion__heading *::after { - box-sizing: inherit; -} -.cds--accordion__heading::-moz-focus-inner { - border: 0; -} -.cds--accordion__heading:hover { - background-color: var(--cds-layer-hover); - outline: none; -} -.cds--accordion__heading:focus { - position: relative; - z-index: 2; - box-shadow: 0 -1px 0 0 var(--cds-focus, #0f62fe), inset 0 1px 0 0 var(--cds-focus, #0f62fe), inset 2px 0 0 0 var(--cds-focus, #0f62fe), 0 1px 0 0 var(--cds-focus, #0f62fe), inset 0 -1px 0 0 var(--cds-focus, #0f62fe), inset -2px 0 0 0 var(--cds-focus, #0f62fe); - outline: none; -} - -.cds--accordion__heading[disabled] { - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); - cursor: not-allowed; -} - -.cds--accordion__heading[disabled] .cds--accordion__arrow { - fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--accordion__heading[disabled]:hover::before { - background-color: transparent; -} - -.cds--accordion__item--disabled, -.cds--accordion__item--disabled + .cds--accordion__item { - border-block-start: 1px solid var(--cds-border-subtle); -} - -li.cds--accordion__item--disabled:last-of-type { - border-block-end: 1px solid var(--cds-border-subtle); -} - -.cds--accordion__arrow { - outline: 2px solid transparent; - outline-offset: -2px; - flex: 0 0 1rem; - block-size: 1rem; - fill: var(--cds-icon-primary, #161616); - inline-size: 1rem; - transform: rotate(-270deg) /*rtl:ignore*/; - transition: all 110ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -.cds--accordion__title { - font-size: var(--cds-body-01-font-size, 0.875rem); - font-weight: var(--cds-body-01-font-weight, 400); - line-height: var(--cds-body-01-line-height, 1.42857); - letter-spacing: var(--cds-body-01-letter-spacing, 0.16px); - z-index: 1; - inline-size: 100%; - padding-inline-start: 1rem; - text-align: start; -} - -.cds--accordion__wrapper { - overflow: hidden; - padding: 0; - max-block-size: 0; - opacity: 0; - transition: all 110ms cubic-bezier(0, 0, 0.38, 0.9); - writing-mode: horizontal-tb; -} - -.cds--accordion__content { - padding-inline: var(--cds-layout-density-padding-inline-local); -} -@media (min-width: 480px) { - .cds--accordion__content { - padding-inline-end: 3rem; - } -} -@media (min-width: 640px) { - .cds--accordion__content { - padding-inline-end: 25%; - } -} -.cds--accordion__content > p { - font-size: var(--cds-body-01-font-size, 0.875rem); - font-weight: var(--cds-body-01-font-weight, 400); - line-height: var(--cds-body-01-line-height, 1.42857); - letter-spacing: var(--cds-body-01-letter-spacing, 0.16px); -} - -.cds--accordion--start .cds--accordion__heading { - flex-direction: row; -} - -.cds--accordion--start .cds--accordion__arrow { - margin: 2px 0 0 var(--cds-layout-density-padding-inline-local); -} - -.cds--accordion--start .cds--accordion__title { - margin-inline-end: 1rem; -} - -.cds--accordion--start .cds--accordion__content { - margin-inline-start: calc( - var(--cds-layout-density-padding-inline-local) + 1rem - ); -} - -.cds--accordion__item--collapsing .cds--accordion__content, -.cds--accordion__item--expanding .cds--accordion__content { - display: block; -} - -.cds--accordion__item--active { - overflow: visible; -} -.cds--accordion__item--active .cds--accordion__wrapper { - overflow: visible; - max-block-size: -moz-fit-content; - max-block-size: fit-content; - opacity: 1; - padding-block: 0.5rem; - padding-block-end: 1.5rem; -} -.cds--accordion__item--active .cds--accordion__arrow { - fill: var(--cds-icon-primary, #161616); - transform: rotate(-90deg) /*rtl:ignore*/; -} - -.cds--accordion--flush .cds--accordion__item { - position: relative; - border-color: transparent; -} -.cds--accordion--flush .cds--accordion__item:last-child, .cds--accordion--flush .cds--accordion__item:hover, .cds--accordion--flush .cds--accordion__item:last-child:hover, .cds--accordion--flush .cds--accordion__item:hover + .cds--accordion__item { - border-color: transparent; -} -.cds--accordion--flush .cds--accordion__item::before, .cds--accordion--flush .cds--accordion__item::after { - position: absolute; - display: block; - block-size: 1px; - content: ""; - inline-size: calc(100% - 1rem - 1rem); - margin-inline-start: 1rem; - transition: background cubic-bezier(0.2, 0, 0.38, 0.9) 110ms; -} -@media screen and (prefers-reduced-motion: reduce) { - .cds--accordion--flush .cds--accordion__item::before, .cds--accordion--flush .cds--accordion__item::after { - transition: none; - } -} -.cds--accordion--flush .cds--accordion__item::before { - background: var(--cds-border-subtle); - inset-block-start: -1px; -} -.cds--accordion--flush .cds--accordion__item:last-child::after { - background: var(--cds-border-subtle); - inset-block-end: -1px; -} - -.cds--accordion--flush .cds--accordion__heading:hover { - position: relative; - z-index: 1; -} -.cds--accordion--flush .cds--accordion__heading:hover::before, .cds--accordion--flush .cds--accordion__heading:hover::after { - position: absolute; - display: block; - background: var(--cds-layer-hover); - block-size: 1px; - content: ""; - inline-size: 100%; - inset-inline-start: 0; - transition: background cubic-bezier(0.2, 0, 0.38, 0.9) 110ms; -} -@media screen and (prefers-reduced-motion: reduce) { - .cds--accordion--flush .cds--accordion__heading:hover::before, .cds--accordion--flush .cds--accordion__heading:hover::after { - transition: none; - } -} -.cds--accordion--flush .cds--accordion__heading:hover::before { - inset-block-start: -1px; -} -.cds--accordion--flush .cds--accordion__heading:hover::after { - inset-block-end: -1px; -} -.cds--accordion--flush .cds--accordion__heading:hover:focus::after, .cds--accordion--flush .cds--accordion__heading:hover:focus::before { - background: none; -} - -.cds--accordion.cds--skeleton .cds--accordion__heading, -.cds--accordion.cds--skeleton .cds--accordion__button { - cursor: default; -} - -.cds--accordion.cds--skeleton .cds--accordion__arrow { - cursor: default; - fill: var(--cds-icon-primary, #161616); - pointer-events: none; -} -.cds--accordion.cds--skeleton .cds--accordion__arrow:hover, .cds--accordion.cds--skeleton .cds--accordion__arrow:focus, .cds--accordion.cds--skeleton .cds--accordion__arrow:active { - border: none; - cursor: default; - outline: none; -} - -.cds--accordion.cds--skeleton .cds--accordion__heading:hover::before, -.cds--accordion.cds--skeleton .cds--accordion__heading:hover { - background-color: transparent; -} - -.cds--accordion--end.cds--skeleton .cds--accordion__arrow { - margin-inline-start: 1rem; -} - -.cds--skeleton .cds--accordion__heading:focus .cds--accordion__arrow { - border: none; - cursor: default; - outline: none; -} - -.cds--accordion__title.cds--skeleton__text { - margin-block-end: 0; -} - -.cds--accordion.cds--skeleton .cds--accordion__title { - margin-inline-start: 1rem; -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--accordion__arrow, - .cds--accordion__item--active .cds--accordion__arrow { - fill: ButtonText; - } -} - -[dir=rtl] .cds--accordion--start .cds--accordion__heading { - padding-inline-end: 0; - padding-inline-start: var(--cds-layout-density-padding-inline-local); -} - -[dir=rtl] .cds--accordion--start .cds--accordion__title { - margin-inline-end: 0; - padding-inline-start: 0; -} - -.cds--aspect-ratio { - position: relative; -} - -.cds--aspect-ratio::before { - block-size: 0; - content: ""; - float: left; - inline-size: 1px; - margin-inline-start: -1px; -} - -.cds--aspect-ratio::after { - display: table; - clear: both; - content: ""; -} - -.cds--aspect-ratio--16x9::before { - padding-block-start: 56.25%; -} - -.cds--aspect-ratio--9x16::before { - padding-block-start: 177.7777777778%; -} - -.cds--aspect-ratio--2x1::before { - padding-block-start: 50%; -} - -.cds--aspect-ratio--1x2::before { - padding-block-start: 200%; -} - -.cds--aspect-ratio--4x3::before { - padding-block-start: 75%; -} - -.cds--aspect-ratio--3x4::before { - padding-block-start: 133.3333333333%; -} - -.cds--aspect-ratio--3x2::before { - padding-block-start: 66.6666666667%; -} - -.cds--aspect-ratio--2x3::before { - padding-block-start: 150%; -} - -.cds--aspect-ratio--1x1::before { - padding-block-start: 100%; -} - -@keyframes cds--hide-feedback { - 0% { - opacity: 1; - visibility: inherit; - } - 100% { - opacity: 0; - visibility: hidden; - } -} -@keyframes cds--show-feedback { - 0% { - opacity: 0; - visibility: hidden; - } - 100% { - opacity: 1; - visibility: inherit; - } -} -@keyframes cds--skeleton { - 0% { - opacity: 0.3; - transform: scaleX(0); - transform-origin: left; - } - 20% { - opacity: 1; - transform: scaleX(1); - transform-origin: left; - } - 28% { - transform: scaleX(1); - transform-origin: right; - } - 51% { - transform: scaleX(0); - transform-origin: right; - } - 58% { - transform: scaleX(0); - transform-origin: right; - } - 82% { - transform: scaleX(1); - transform-origin: right; - } - 83% { - transform: scaleX(1); - transform-origin: left; - } - 96% { - transform: scaleX(0); - transform-origin: left; - } - 100% { - opacity: 0.3; - transform: scaleX(0); - transform-origin: left; - } -} -.cds--assistive-text, -.cds--visually-hidden { - position: absolute; - overflow: hidden; - padding: 0; - border: 0; - margin: -1px; - block-size: 1px; - clip: rect(0, 0, 0, 0); - inline-size: 1px; - visibility: inherit; - white-space: nowrap; -} - -.cds--popover-container { - display: inline-block; -} - -.cds--popover-container:not(.cds--popover--auto-align) { - position: relative; -} - -.cds--popover--high-contrast .cds--popover { - --cds-popover-background-color: var(--cds-background-inverse, #393939); - --cds-popover-text-color: var(--cds-text-inverse, #ffffff); -} - -.cds--popover--drop-shadow .cds--popover { - --cds-popover-drop-shadow: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2)); -} - -.cds--popover--caret { - --cds-popover-offset: 0.625rem; -} - -.cds--popover { - position: absolute; - z-index: 6000; - filter: var(--cds-popover-drop-shadow, none); - inset: 0; - pointer-events: none; -} - -.cds--popover-content { - --cds-layout-size-height-sm: 2rem; - --cds-layout-size-height-md: 2.5rem; - --cds-layout-size-height-lg: 3rem; - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - position: absolute; - z-index: 6000; - display: none; - border-radius: var(--cds-popover-border-radius, 2px); - background-color: var(--cds-popover-background-color, var(--cds-layer)); - color: var(--cds-popover-text-color, var(--cds-text-primary, #161616)); - inline-size: -moz-max-content; - inline-size: max-content; - max-inline-size: 23rem; - pointer-events: auto; -} -.cds--layout--size-sm .cds--popover-content { - --cds-layout-size-height: var(--cds-layout-size-height-sm); -} -.cds--layout--size-md .cds--popover-content { - --cds-layout-size-height: var(--cds-layout-size-height-md); -} -.cds--layout--size-lg .cds--popover-content { - --cds-layout-size-height: var(--cds-layout-size-height-lg); -} -.cds--popover-content *, -.cds--popover-content *::before, -.cds--popover-content *::after { - box-sizing: inherit; -} - -.cds--popover--open > .cds--popover > .cds--popover-content { - display: block; -} - -.cds--popover-content::before { - position: absolute; - display: none; - content: ""; -} - -.cds--popover--open > .cds--popover > .cds--popover-content::before { - display: block; -} - -.cds--popover-caret, -.cds--popover--auto-align.cds--popover-caret { - position: absolute; - z-index: 6000; - display: none; - background-color: var(--cds-popover-background-color, var(--cds-layer)); - will-change: transform; -} - -.cds--popover--caret.cds--popover--open > .cds--popover > .cds--popover-caret { - display: block; -} - -.cds--popover--auto-align.cds--popover--caret.cds--popover--open > .cds--popover > .cds--popover-content > .cds--popover-caret { - display: block; -} - -.cds--popover--tab-tip > .cds--popover > .cds--popover-caret { - display: none; -} - -.cds--popover--bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - inset-block-end: 0; - inset-inline-start: 50%; - transform: translate(-50%, calc(100% + var(--cds-popover-offset, 0rem))); -} - -[dir=rtl] .cds--popover--bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - transform: translate(50%, calc(100% + var(--cds-popover-offset, 0rem))); -} - -.cds--popover--bottom-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -.cds--popover--bottom-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - inset-block-end: 0; - inset-inline-start: 0; - transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(100% + var(--cds-popover-offset, 0rem))); -} - -[dir=rtl] .cds--popover--bottom-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -[dir=rtl] .cds--popover--bottom-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - inset-inline-end: 0; - inset-inline-start: initial; -} - -.cds--popover--bottom-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -.cds--popover--bottom-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - inset-block-end: 0; - inset-inline-end: 0; - transform: translate(var(--cds-popover-offset, 0rem), calc(100% + var(--cds-popover-offset, 0rem))); -} - -[dir=rtl] .cds--popover--bottom-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -[dir=rtl] .cds--popover--bottom-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - inset-inline-start: 0; -} - -.cds--popover--bottom > .cds--popover > .cds--popover-content::before, -.cds--popover--bottom-left > .cds--popover > .cds--popover-content::before, -.cds--popover--bottom-start > .cds--popover > .cds--popover-content::before, -.cds--popover--bottom-right > .cds--popover > .cds--popover-content::before, -.cds--popover--bottom-end > .cds--popover > .cds--popover-content::before { - block-size: var(--cds-popover-offset, 0rem); - inset-block-start: 0; - inset-inline-end: 0; - inset-inline-start: 0; - transform: translateY(-100%); -} - -.cds--popover--bottom > .cds--popover > .cds--popover-caret, -.cds--popover--bottom-left > .cds--popover > .cds--popover-caret, -.cds--popover--bottom-start > .cds--popover > .cds--popover-caret, -.cds--popover--bottom-right > .cds--popover > .cds--popover-caret, -.cds--popover--bottom-end > .cds--popover > .cds--popover-caret { - block-size: var(--cds-popover-caret-height, 0.375rem); - clip-path: polygon(0% 100%, 50% 0%, 100% 100%); - inline-size: var(--cds-popover-caret-width, 0.75rem); - inset-block-end: 0; - inset-inline-start: 50%; - transform: translate(-50%, var(--cds-popover-offset, 0rem)); -} - -[dir=rtl] .cds--popover--bottom > .cds--popover > .cds--popover-caret, -[dir=rtl] .cds--popover--bottom-left > .cds--popover > .cds--popover-caret, -[dir=rtl] .cds--popover--bottom-start > .cds--popover > .cds--popover-caret, -[dir=rtl] .cds--popover--bottom-right > .cds--popover > .cds--popover-caret, -[dir=rtl] .cds--popover--bottom-end > .cds--popover > .cds--popover-caret { - transform: translate(50%, var(--cds-popover-offset, 0rem)); -} - -.cds--popover--bottom.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret, -.cds--popover--bottom-left.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret, -.cds--popover--bottom-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret, -.cds--popover--bottom-right.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret, -.cds--popover--bottom-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret { - block-size: var(--cds-popover-caret-height, 0.375rem); - clip-path: polygon(0% 100%, 50% 0%, 100% 100%); - inline-size: var(--cds-popover-caret-width, 0.75rem); -} - -.cds--popover--top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - inset-block-start: 0; - inset-inline-start: 50%; - transform: translate(-50%, calc(-100% - var(--cds-popover-offset, 0rem))); -} - -[dir=rtl] .cds--popover--top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - transform: translate(50%, calc(-100% - var(--cds-popover-offset, 0rem))); -} - -.cds--popover--top-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -.cds--popover--top-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - inset-block-start: 0; - inset-inline-start: 0; - transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-100% - var(--cds-popover-offset, 0rem))); -} - -[dir=rtl] .cds--popover--top-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -[dir=rtl] .cds--popover--top-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - inset-inline-end: 0; - inset-inline-start: initial; -} - -.cds--popover--top-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -.cds--popover--top-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - inset-block-start: 0; - inset-inline-end: 0; - transform: translate(var(--cds-popover-offset, 0rem), calc(-100% - var(--cds-popover-offset, 0rem))); -} - -[dir=rtl] .cds--popover--top-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -[dir=rtl] .cds--popover--top-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - inset-inline-start: 0; -} - -.cds--popover--top > .cds--popover > .cds--popover-content::before, -.cds--popover--top-left > .cds--popover > .cds--popover-content::before, -.cds--popover--top-start > .cds--popover > .cds--popover-content::before, -.cds--popover--top-right > .cds--popover > .cds--popover-content::before, -.cds--popover--top-end > .cds--popover > .cds--popover-content::before { - block-size: var(--cds-popover-offset, 0rem); - inset-block-end: 0; - inset-inline-end: 0; - inset-inline-start: 0; - transform: translateY(100%); -} - -.cds--popover--top > .cds--popover > .cds--popover-caret, -.cds--popover--top-left > .cds--popover > .cds--popover-caret, -.cds--popover--top-start > .cds--popover > .cds--popover-caret, -.cds--popover--top-right > .cds--popover > .cds--popover-caret, -.cds--popover--top-end > .cds--popover > .cds--popover-caret { - block-size: var(--cds-popover-caret-height, 0.375rem); - clip-path: polygon(0% 0%, 50% 100%, 100% 0%); - inline-size: var(--cds-popover-caret-width, 0.75rem); - inset-block-start: 0; - inset-inline-start: 50%; - transform: translate(-50%, calc(-1 * var(--cds-popover-offset, 0rem))); -} - -[dir=rtl] .cds--popover--top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -[dir=rtl] .cds--popover--top-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -[dir=rtl] .cds--popover--top-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -[dir=rtl] .cds--popover--top-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -[dir=rtl] .cds--popover--top-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret { - transform: translate(50%, calc(-1 * var(--cds-popover-offset, 0rem))); -} - -.cds--popover--top.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret, -.cds--popover--top-left.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret, -.cds--popover--top-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret, -.cds--popover--top-right.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret, -.cds--popover--top-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret { - block-size: var(--cds-popover-caret-height, 0.375rem); - clip-path: polygon(0% 0%, 50% 100%, 100% 0%); - inline-size: var(--cds-popover-caret-width, 0.75rem); -} - -.cds--popover--right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - inset-block-start: 50%; - inset-inline-start: 100%; - transform: translate(var(--cds-popover-offset, 0rem), -50%); -} - -.cds--popover--right-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -.cds--popover--right-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - inset-block-start: 50%; - inset-inline-start: 100%; - transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) * -1 - 16px)); -} - -.cds--popover--right-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -.cds--popover--right-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - inset-block-end: 50%; - inset-inline-start: 100%; - transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) + 16px)); -} - -[dir=rtl] .cds--popover--right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -[dir=rtl] .cds--popover--right-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -[dir=rtl] .cds--popover--right-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -[dir=rtl] .cds--popover--right-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -[dir=rtl] .cds--popover--right-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - inset-inline-end: 100%; - inset-inline-start: initial; -} - -.cds--popover--right > .cds--popover > .cds--popover-content::before, -.cds--popover--right-top > .cds--popover > .cds--popover-content::before, -.cds--popover--right-start > .cds--popover > .cds--popover-content::before, -.cds--popover--right-bottom > .cds--popover > .cds--popover-content::before, -.cds--popover--right-end > .cds--popover > .cds--popover-content::before { - inline-size: var(--cds-popover-offset, 0rem); - inset-block-end: 0; - inset-block-start: 0; - inset-inline-start: 0; - transform: translateX(-100%); -} - -.cds--popover--right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -.cds--popover--right-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -.cds--popover--right-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -.cds--popover--right-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -.cds--popover--right-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret { - block-size: var(--cds-popover-caret-width, 0.75rem); - clip-path: polygon(0% 50%, 100% 0%, 100% 100%); - inline-size: var(--cds-popover-caret-height, 0.375rem); - inset-block-start: 50%; - inset-inline-start: 100%; - transform: translate(calc(var(--cds-popover-offset, 0rem) - 100%), -50%); -} - -[dir=rtl] .cds--popover--right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -[dir=rtl] .cds--popover--right-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -[dir=rtl] .cds--popover--right-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -[dir=rtl] .cds--popover--right-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -[dir=rtl] .cds--popover--right-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret { - inset-inline-end: 100%; - inset-inline-start: initial; -} - -.cds--popover--right.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret, -.cds--popover--right-top.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret, -.cds--popover--right-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret, -.cds--popover--right-bottom.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret, -.cds--popover--right-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret { - block-size: var(--cds-popover-caret-width, 0.75rem); - clip-path: polygon(0% 50%, 100% 0%, 100% 100%); - inline-size: var(--cds-popover-caret-height, 0.375rem); -} - -.cds--popover--left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - inset-block-start: 50%; - inset-inline-end: 100%; - transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 0.1px), -50%); -} - -.cds--popover--left-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -.cds--popover--left-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - inset-block-start: 50%; - inset-inline-end: 100%; - transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) - 16px)); -} - -.cds--popover--left-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -.cds--popover--left-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - inset-block-end: 50%; - inset-inline-end: 100%; - transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) + 16px)); -} - -[dir=rtl] .cds--popover--left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -[dir=rtl] .cds--popover--left-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -[dir=rtl] .cds--popover--left-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -[dir=rtl] .cds--popover--left-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -[dir=rtl] .cds--popover--left-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - inset-inline-end: initial; - inset-inline-start: 100%; -} - -.cds--popover--left > .cds--popover > .cds--popover-content::before, -.cds--popover--left-top > .cds--popover > .cds--popover-content::before, -.cds--popover--left-start > .cds--popover > .cds--popover-content::before, -.cds--popover--left-bottom > .cds--popover > .cds--popover-content::before, -.cds--popover--left-end > .cds--popover > .cds--popover-content::before { - inline-size: var(--cds-popover-offset, 0rem); - inset-block-end: 0; - inset-block-start: 0; - inset-inline-end: 0; - transform: translateX(100%); -} - -.cds--popover--left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -.cds--popover--left-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -.cds--popover--left-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -.cds--popover--left-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -.cds--popover--left-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret { - block-size: var(--cds-popover-caret-width, 0.75rem); - clip-path: polygon(0% 0%, 100% 50%, 0% 100%); - inline-size: var(--cds-popover-caret-height, 0.375rem); - inset-block-start: 50%; - inset-inline-end: 100%; - transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 100%), -50%); -} - -[dir=rtl] .cds--popover--left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -[dir=rtl] .cds--popover--left-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -[dir=rtl] .cds--popover--left-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -[dir=rtl] .cds--popover--left-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -[dir=rtl] .cds--popover--left-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret { - inset-inline-end: initial; - inset-inline-start: 100%; -} - -.cds--popover--left.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret, -.cds--popover--left-top.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret, -.cds--popover--left-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret, -.cds--popover--left-bottom.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret, -.cds--popover--left-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret { - block-size: var(--cds-popover-caret-width, 0.75rem); - clip-path: polygon(0% 0%, 100% 50%, 0% 100%); - inline-size: var(--cds-popover-caret-height, 0.375rem); -} - -.cds--popover--tab-tip > .cds--popover > .cds--popover-content { - border-radius: 0; -} - -.cds--popover--tab-tip .cds--popover { - will-change: filter; -} - -.cds--popover--tab-tip__button { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: inline-block; - padding: 0; - border: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: none; - cursor: pointer; - text-align: start; - inline-size: 100%; - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - block-size: 2rem; - inline-size: 2rem; -} -.cds--popover--tab-tip__button *, -.cds--popover--tab-tip__button *::before, -.cds--popover--tab-tip__button *::after { - box-sizing: inherit; -} -.cds--popover--tab-tip__button::-moz-focus-inner { - border: 0; -} -.cds--popover--tab-tip__button:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--popover--tab-tip__button:focus { - outline-style: dotted; - } -} -.cds--popover--tab-tip__button:hover { - background-color: var(--cds-layer-hover); -} - -.cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button { - background: var(--cds-layer); - box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); -} - -.cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button:not(:focus)::after { - position: absolute; - z-index: 6001; - background: var(--cds-layer); - block-size: 2px; - content: ""; - inline-size: 100%; - inset-block-end: 0; -} - -.cds--popover--tab-tip__button svg { - fill: var(--cds-icon-primary, #161616); -} - -.cds--tooltip { - --cds-popover-offset: 12px; -} - -.cds--tooltip-content { - font-size: var(--cds-body-01-font-size, 0.875rem); - font-weight: var(--cds-body-01-font-weight, 400); - line-height: var(--cds-body-01-line-height, 1.42857); - letter-spacing: var(--cds-body-01-letter-spacing, 0.16px); - padding: var(--cds-tooltip-padding-block, 1rem) var(--cds-tooltip-padding-inline, 1rem); - color: var(--cds-text-inverse, #ffffff); - max-inline-size: 18rem; -} - -.cds--icon-tooltip { - --cds-tooltip-padding-block: 0.125rem; - --cds-popover-caret-width: 0.5rem; - --cds-popover-caret-height: 0.25rem; - --cds-popover-offset: 0.5rem; -} - -.cds--icon-tooltip .cds--tooltip-content { - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); -} - -.cds--definition-term { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: inline-block; - padding: 0; - border: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: none; - cursor: pointer; - text-align: start; - inline-size: 100%; - border-radius: 0; - border-block-end: 1px dotted var(--cds-border-strong); - color: var(--cds-text-primary, #161616); -} -.cds--definition-term *, -.cds--definition-term *::before, -.cds--definition-term *::after { - box-sizing: inherit; -} -.cds--definition-term::-moz-focus-inner { - border: 0; -} - -.cds--definition-term:focus { - outline: 1px solid var(--cds-focus, #0f62fe); - border-block-end-color: var(--cds-border-interactive, #0f62fe); -} -@media screen and (prefers-contrast) { - .cds--definition-term:focus { - outline-style: dotted; - } -} - -.cds--definition-term:hover { - border-block-end-color: var(--cds-border-interactive, #0f62fe); -} - -.cds--definition-tooltip { - font-size: var(--cds-body-01-font-size, 0.875rem); - font-weight: var(--cds-body-01-font-weight, 400); - line-height: var(--cds-body-01-line-height, 1.42857); - letter-spacing: var(--cds-body-01-letter-spacing, 0.16px); - padding: 0.5rem 1rem; - max-inline-size: 11rem; -} - -.cds--btn { - --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-lg)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-2xl))); - --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max)); - --temp-1lh: ( - var(--cds-body-compact-01-line-height, 1.28572) * 1em - ); - --temp-expressive-1lh: ( - var(--cds-body-compact-02-line-height, 1.375) * 1em - ); - --temp-padding-block-max: calc( - (var(--cds-layout-size-height-lg) - var(--temp-1lh)) / 2 - - 0.0625rem - ); - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - position: relative; - display: inline-flex; - flex-shrink: 0; - justify-content: space-between; - border-radius: 0; - margin: 0; - cursor: pointer; - inline-size: -moz-max-content; - inline-size: max-content; - max-inline-size: 20rem; - min-block-size: var(--cds-layout-size-height-local); - outline: none; - padding-block: min((var(--cds-layout-size-height-local) - var(--temp-1lh)) / 2 - 0.0625rem, var(--temp-padding-block-max)); - padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) * 3 + 1rem - 0.0625rem); - padding-inline-start: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem); - text-align: start; - text-decoration: none; - transition: background 70ms cubic-bezier(0, 0, 0.38, 0.9), box-shadow 70ms cubic-bezier(0, 0, 0.38, 0.9), border-color 70ms cubic-bezier(0, 0, 0.38, 0.9), outline 70ms cubic-bezier(0, 0, 0.38, 0.9); - vertical-align: top; -} -.cds--btn *, -.cds--btn *::before, -.cds--btn *::after { - box-sizing: inherit; -} -.cds--btn:disabled, .cds--btn:hover:disabled, .cds--btn:focus:disabled, .cds--btn.cds--btn--disabled, .cds--btn.cds--btn--disabled:hover, .cds--btn.cds--btn--disabled:focus { - border-color: var(--cds-button-disabled, #c6c6c6); - background: var(--cds-button-disabled, #c6c6c6); - box-shadow: none; - color: var(--cds-text-on-color-disabled, #8d8d8d); - cursor: not-allowed; -} -.cds--btn .cds--btn__icon { - position: absolute; - flex-shrink: 0; - block-size: 1rem; - inline-size: 1rem; - inset-block-start: min((var(--cds-layout-size-height-local) - 1rem) / 2 - 0.0625rem, var(--temp-padding-block-max)); - inset-inline-end: var(--cds-layout-density-padding-inline-local); - margin-block-start: 0.0625rem; -} - -.cds--btn::-moz-focus-inner { - padding: 0; - border: 0; -} - -.cds--btn--primary { - border-width: 1px; - border-style: solid; - border-color: transparent; - background-color: var(--cds-button-primary, #0f62fe); - color: var(--cds-text-on-color, #ffffff); -} -.cds--btn--primary:hover { - background-color: var(--cds-button-primary-hover, #0050e6); -} -.cds--btn--primary:focus { - border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe)); - box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff); -} -.cds--btn--primary:active { - background-color: var(--cds-button-primary-active, #002d9c); -} -.cds--btn--primary .cds--btn__icon, -.cds--btn--primary .cds--btn__icon path:not([data-icon-path]):not([fill=none]) { - fill: currentColor; -} -.cds--btn--primary:hover { - color: var(--cds-text-on-color, #ffffff); -} - -.cds--btn--secondary { - border-width: 1px; - border-style: solid; - border-color: transparent; - background-color: var(--cds-button-secondary, #393939); - color: var(--cds-text-on-color, #ffffff); -} -.cds--btn--secondary:hover { - background-color: var(--cds-button-secondary-hover, #474747); -} -.cds--btn--secondary:focus { - border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe)); - box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff); -} -.cds--btn--secondary:active { - background-color: var(--cds-button-secondary-active, #6f6f6f); -} -.cds--btn--secondary .cds--btn__icon, -.cds--btn--secondary .cds--btn__icon path:not([data-icon-path]):not([fill=none]) { - fill: currentColor; -} -.cds--btn--secondary:hover, .cds--btn--secondary:focus { - color: var(--cds-text-on-color, #ffffff); -} - -.cds--btn--tertiary { - border-width: 1px; - border-style: solid; - border-color: var(--cds-button-tertiary, #0f62fe); - background-color: transparent; - color: var(--cds-button-tertiary, #0f62fe); -} -.cds--btn--tertiary:hover { - background-color: var(--cds-button-tertiary-hover, #0050e6); -} -.cds--btn--tertiary:focus { - border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe)); - box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff); -} -.cds--btn--tertiary:active { - background-color: var(--cds-button-tertiary-active, #002d9c); -} -.cds--btn--tertiary .cds--btn__icon, -.cds--btn--tertiary .cds--btn__icon path:not([data-icon-path]):not([fill=none]) { - fill: currentColor; -} -.cds--btn--tertiary:hover { - color: var(--cds-text-inverse, #ffffff); -} -.cds--btn--tertiary:focus { - background-color: var(--cds-button-tertiary, #0f62fe); - color: var(--cds-text-inverse, #ffffff); -} -.cds--btn--tertiary:active { - border-color: transparent; - background-color: var(--cds-button-tertiary-active, #002d9c); - color: var(--cds-text-inverse, #ffffff); -} -.cds--btn--tertiary:disabled, .cds--btn--tertiary:hover:disabled, .cds--btn--tertiary:focus:disabled, .cds--btn--tertiary.cds--btn--disabled, .cds--btn--tertiary.cds--btn--disabled:hover, .cds--btn--tertiary.cds--btn--disabled:focus { - background: transparent; - color: var(--cds-text-on-color-disabled, #8d8d8d); - outline: none; -} - -.cds--btn--ghost { - border-width: 1px; - border-style: solid; - border-color: transparent; - background-color: transparent; - color: var(--cds-link-primary, #0f62fe); - padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem); -} -.cds--btn--ghost:hover { - background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12)); -} -.cds--btn--ghost:focus { - border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe)); - box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff); -} -.cds--btn--ghost:active { - background-color: var(--cds-background-active, rgba(141, 141, 141, 0.5)); -} -.cds--btn--ghost .cds--btn__icon, -.cds--btn--ghost .cds--btn__icon path:not([data-icon-path]):not([fill=none]) { - fill: currentColor; -} -.cds--btn--ghost .cds--btn__icon { - position: static; - margin-inline-start: 0.5rem; -} -.cds--btn--ghost:hover, .cds--btn--ghost:active { - color: var(--cds-link-primary-hover, #0043ce); -} -.cds--btn--ghost:active { - background-color: var(--cds-background-active, rgba(141, 141, 141, 0.5)); -} -.cds--btn--ghost:disabled, .cds--btn--ghost:hover:disabled, .cds--btn--ghost:focus:disabled, .cds--btn--ghost.cds--btn--disabled, .cds--btn--ghost.cds--btn--disabled:hover, .cds--btn--ghost.cds--btn--disabled:focus { - border-color: transparent; - background: transparent; - color: var(--cds-text-on-color-disabled, #8d8d8d); - outline: none; -} -.cds--btn--ghost:not([disabled]) svg { - fill: var(--cds-icon-primary, #161616); -} - -.cds--btn--icon-only { - justify-content: center; - padding: 0; - block-size: var(--cds-layout-size-height-local); - inline-size: var(--cds-layout-size-height-local); - padding-block-start: min((var(--cds-layout-size-height-local) - 1rem) / 2 - 0.0625rem, var(--temp-padding-block-max)); -} -.cds--btn--icon-only > :first-child { - margin-block-start: 0.0625rem; - min-inline-size: 1rem; -} -.cds--btn--icon-only .cds--btn__icon { - position: static; -} -.cds--btn--icon-only.cds--btn--ghost .cds--btn__icon, .cds--btn--icon-only.cds--btn--danger--ghost .cds--btn__icon { - margin: 0; -} - -.cds--btn--sm:not(.cds--btn--icon-only) .cds--btn__icon, -.cds--btn--md:not(.cds--btn--icon-only) .cds--btn__icon { - margin-block-start: 0; -} - -.cds--btn--icon-only.cds--btn--selected { - background: var(--cds-background-selected, rgba(141, 141, 141, 0.2)); -} - -.cds--btn path[data-icon-path=inner-path] { - fill: none; -} - -.cds--btn--ghost.cds--btn--icon-only .cds--btn__icon path:not([data-icon-path]):not([fill=none]), -.cds--btn--ghost.cds--btn--icon-only .cds--btn__icon { - fill: var(--cds-icon-primary, #161616); -} - -.cds--btn--ghost.cds--btn--icon-only[disabled] .cds--btn__icon path:not([data-icon-path]):not([fill=none]), -.cds--btn--ghost.cds--btn--icon-only[disabled] .cds--btn__icon, -.cds--btn.cds--btn--icon-only.cds--btn--ghost[disabled]:hover .cds--btn__icon { - fill: var(--cds-icon-on-color-disabled, #8d8d8d); -} - -.cds--btn--ghost.cds--btn--icon-only[disabled] { - cursor: not-allowed; -} - -.cds--icon-tooltip--disabled .cds--tooltip-trigger__wrapper { - cursor: not-allowed; -} - -.cds--icon-tooltip--disabled .cds--btn--icon-only[disabled] { - pointer-events: none; -} - -.cds--btn--danger { - border-width: 1px; - border-style: solid; - border-color: transparent; - background-color: var(--cds-button-danger-primary, #da1e28); - color: var(--cds-text-on-color, #ffffff); -} -.cds--btn--danger:hover { - background-color: var(--cds-button-danger-hover, #b81921); -} -.cds--btn--danger:focus { - border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe)); - box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff); -} -.cds--btn--danger:active { - background-color: var(--cds-button-danger-active, #750e13); -} -.cds--btn--danger .cds--btn__icon, -.cds--btn--danger .cds--btn__icon path:not([data-icon-path]):not([fill=none]) { - fill: currentColor; -} -.cds--btn--danger:hover { - color: var(--cds-text-on-color, #ffffff); -} -.cds--btn--danger--tertiary { - border-width: 1px; - border-style: solid; - border-color: var(--cds-button-danger-secondary, #da1e28); - background-color: transparent; - color: var(--cds-button-danger-secondary, #da1e28); -} -.cds--btn--danger--tertiary:hover { - background-color: var(--cds-button-danger-hover, #b81921); -} -.cds--btn--danger--tertiary:focus { - border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe)); - box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff); -} -.cds--btn--danger--tertiary:active { - background-color: var(--cds-button-danger-active, #750e13); -} -.cds--btn--danger--tertiary .cds--btn__icon, -.cds--btn--danger--tertiary .cds--btn__icon path:not([data-icon-path]):not([fill=none]) { - fill: currentColor; -} -.cds--btn--danger--tertiary:hover { - border-color: var(--cds-button-danger-hover, #b81921); - color: var(--cds-text-on-color, #ffffff); -} -.cds--btn--danger--tertiary:focus { - background-color: var(--cds-button-danger-primary, #da1e28); - color: var(--cds-text-on-color, #ffffff); -} -.cds--btn--danger--tertiary:active { - border-color: var(--cds-button-danger-active, #750e13); - background-color: var(--cds-button-danger-active, #750e13); - color: var(--cds-text-on-color, #ffffff); -} -.cds--btn--danger--tertiary:disabled, .cds--btn--danger--tertiary:hover:disabled, .cds--btn--danger--tertiary:focus:disabled, .cds--btn--danger--tertiary.cds--btn--disabled, .cds--btn--danger--tertiary.cds--btn--disabled:hover, .cds--btn--danger--tertiary.cds--btn--disabled:focus { - background: transparent; - color: var(--cds-text-on-color-disabled, #8d8d8d); - outline: none; -} -.cds--btn--danger--ghost { - border-width: 1px; - border-style: solid; - border-color: transparent; - background-color: transparent; - color: var(--cds-button-danger-secondary, #da1e28); - padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem); -} -.cds--btn--danger--ghost:hover { - background-color: var(--cds-button-danger-hover, #b81921); -} -.cds--btn--danger--ghost:focus { - border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe)); - box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff); -} -.cds--btn--danger--ghost:active { - background-color: var(--cds-button-danger-active, #750e13); -} -.cds--btn--danger--ghost .cds--btn__icon, -.cds--btn--danger--ghost .cds--btn__icon path:not([data-icon-path]):not([fill=none]) { - fill: currentColor; -} -.cds--btn--danger--ghost .cds--btn__icon { - position: static; - margin-inline-start: 0.5rem; -} -.cds--btn--danger--ghost:hover, .cds--btn--danger--ghost:active { - color: var(--cds-text-on-color, #ffffff); -} -.cds--btn--danger--ghost:disabled, .cds--btn--danger--ghost:hover:disabled, .cds--btn--danger--ghost:focus:disabled, .cds--btn--danger--ghost.cds--btn--disabled, .cds--btn--danger--ghost.cds--btn--disabled:hover, .cds--btn--danger--ghost.cds--btn--disabled:focus { - border-color: transparent; - background: transparent; - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); - outline: none; -} - -.cds--btn--expressive { - font-size: var(--cds-body-compact-02-font-size, 1rem); - font-weight: var(--cds-body-compact-02-font-weight, 400); - line-height: var(--cds-body-compact-02-line-height, 1.375); - letter-spacing: var(--cds-body-compact-02-letter-spacing, 0); - padding-block: min((var(--cds-layout-size-height-local) - var(--temp-expressive-1lh)) / 2 - 0.0625rem, var(--temp-padding-block-max)); -} - -.cds--btn--icon-only.cds--btn--expressive { - padding: 12px 13px; -} - -.cds--btn.cds--btn--expressive .cds--btn__icon { - block-size: 1.25rem; - inline-size: 1.25rem; -} - -.cds--btn-set .cds--btn.cds--btn--expressive { - max-inline-size: 20rem; -} - -.cds--btn.cds--skeleton { - position: relative; - padding: 0; - border: none; - background: var(--cds-skeleton-background, #e8e8e8); - box-shadow: none; - pointer-events: none; - inline-size: 9.375rem; -} -.cds--btn.cds--skeleton:hover, .cds--btn.cds--skeleton:focus, .cds--btn.cds--skeleton:active { - border: none; - cursor: default; - outline: none; -} -.cds--btn.cds--skeleton::before { - position: absolute; - animation: 3000ms ease-in-out cds--skeleton infinite; - background: var(--cds-skeleton-element, #c6c6c6); - block-size: 100%; - content: ""; - inline-size: 100%; - will-change: transform-origin, transform, opacity; -} -@media (prefers-reduced-motion: reduce) { - .cds--btn.cds--skeleton::before { - animation: none; - } -} - -.cds--btn-set { - display: flex; -} - -.cds--btn-set--stacked { - flex-direction: column; -} - -.cds--btn-set .cds--btn { - inline-size: 100%; - max-inline-size: 12.25rem; -} -.cds--btn-set .cds--btn:not(:focus) { - box-shadow: -0.0625rem 0 0 0 var(--cds-button-separator, #e0e0e0); -} -.cds--btn-set .cds--btn:first-of-type:not(:focus) { - box-shadow: inherit; -} - -.cds--btn-set .cds--btn:focus + .cds--btn { - box-shadow: inherit; -} - -.cds--btn-set--stacked .cds--btn:not(:focus) { - box-shadow: 0 -0.0625rem 0 0 var(--cds-button-separator, #e0e0e0); -} - -.cds--btn-set--stacked .cds--btn:first-of-type:not(:focus) { - box-shadow: inherit; -} - -.cds--btn-set .cds--btn.cds--btn--disabled { - box-shadow: -0.0625rem 0 0 0 var(--cds-icon-on-color-disabled, #8d8d8d); -} -.cds--btn-set .cds--btn.cds--btn--disabled:first-of-type { - box-shadow: none; -} - -.cds--btn-set--stacked .cds--btn.cds--btn--disabled { - box-shadow: 0 -0.0625rem 0 0 var(--cds-layer-selected-disabled, #8d8d8d); -} -.cds--btn-set--stacked .cds--btn.cds--btn--disabled:first-of-type { - box-shadow: none; -} - -.cds--btn-set .cds--btn.cds--btn--loading { - border-color: transparent; - background-color: transparent; - box-shadow: none; -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--btn:focus { - color: Highlight; - outline: 1px solid Highlight; - } -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--btn--ghost.cds--btn--icon-only .cds--btn__icon path:not([data-icon-path]):not([fill=none]), - .cds--btn--ghost.cds--btn--icon-only .cds--btn__icon { - fill: ButtonText; - } -} - -[dir=rtl] .cds--btn-set .cds--btn:not(:focus) { - box-shadow: 0.0625rem 0 0 0 var(--cds-button-separator, #e0e0e0); -} - -.cds--overflow-menu, -.cds--overflow-menu__trigger { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: inline-block; - padding: 0; - border: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: none; - cursor: pointer; - text-align: start; - inline-size: 100%; - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - outline: 2px solid transparent; - outline-offset: -2px; - position: relative; - display: flex; - align-items: center; - justify-content: center; - block-size: 2.5rem; - cursor: pointer; - inline-size: 2.5rem; - min-block-size: 2.5rem; - transition: outline 110ms cubic-bezier(0, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0, 0, 0.38, 0.9); -} -.cds--overflow-menu *, -.cds--overflow-menu *::before, -.cds--overflow-menu *::after, -.cds--overflow-menu__trigger *, -.cds--overflow-menu__trigger *::before, -.cds--overflow-menu__trigger *::after { - box-sizing: inherit; -} -.cds--overflow-menu::-moz-focus-inner, -.cds--overflow-menu__trigger::-moz-focus-inner { - border: 0; -} -.cds--overflow-menu *, -.cds--overflow-menu *::before, -.cds--overflow-menu *::after, -.cds--overflow-menu__trigger *, -.cds--overflow-menu__trigger *::before, -.cds--overflow-menu__trigger *::after { - box-sizing: inherit; -} -.cds--overflow-menu:focus, -.cds--overflow-menu__trigger:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--overflow-menu:focus, - .cds--overflow-menu__trigger:focus { - outline-style: dotted; - } -} -.cds--overflow-menu:hover, -.cds--overflow-menu__trigger:hover { - background-color: var(--cds-layer-hover); -} - -.cds--overflow-menu > :first-child { - margin-block-start: 0; -} - -.cds--overflow-menu--sm { - block-size: 2rem; - inline-size: 2rem; - min-block-size: 2rem; -} - -.cds--overflow-menu--lg { - block-size: 3rem; - inline-size: 3rem; -} - -.cds--overflow-menu__trigger.cds--tooltip--a11y.cds--tooltip__trigger:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--overflow-menu__trigger.cds--tooltip--a11y.cds--tooltip__trigger:focus { - outline-style: dotted; - } -} -.cds--overflow-menu__trigger.cds--tooltip--a11y.cds--tooltip__trigger:focus svg { - outline: none; -} - -.cds--overflow-menu.cds--overflow-menu--open, -.cds--overflow-menu.cds--overflow-menu--open .cds--overflow-menu__trigger { - box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3)); - background-color: var(--cds-layer); - transition: none; -} - -.cds--overflow-menu--light.cds--overflow-menu--open, -.cds--overflow-menu--light.cds--overflow-menu--open .cds--overflow-menu__trigger { - background-color: var(--cds-layer); -} - -.cds--overflow-menu__icon { - block-size: 1rem; - fill: var(--cds-icon-primary, #161616); - inline-size: 1rem; -} - -.cds--overflow-menu__wrapper { - line-height: 0; -} - -.cds--overflow-menu-options { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3)); - position: absolute; - z-index: 6000; - display: none; - flex-direction: column; - align-items: flex-start; - background-color: var(--cds-layer); - inline-size: 10rem; - inset-block-start: 32px; - inset-inline-start: 0; - list-style: none; -} -.cds--overflow-menu-options *, -.cds--overflow-menu-options *::before, -.cds--overflow-menu-options *::after { - box-sizing: inherit; -} -.cds--overflow-menu-options::after { - position: absolute; - display: block; - background-color: var(--cds-layer); - content: ""; - transition: background-color 110ms cubic-bezier(0, 0, 0.38, 0.9); -} -@media screen and (prefers-reduced-motion: reduce) { - .cds--overflow-menu-options::after { - transition: none; - } -} - -.cds--overflow-menu.cds--overflow-menu--open:hover { - background-color: var(--cds-layer); -} - -.cds--overflow-menu-options--light { - background-color: var(--cds-layer); -} -.cds--overflow-menu-options--light::after { - background-color: var(--cds-layer); -} - -.cds--overflow-menu.cds--overflow-menu--light.cds--overflow-menu--open:hover { - background-color: var(--cds-layer); -} - -.cds--overflow-menu-options[data-floating-menu-direction=bottom]:not(.cds--breadcrumb-menu-options)::after { - block-size: 0.1875rem; - inline-size: 2.5rem; - inset-block-start: -0.1875rem; - inset-inline-start: 0; -} - -.cds--overflow-menu-options[data-floating-menu-direction=top]::after { - block-size: 0.5rem; - inline-size: 2.5rem; - inset-block-end: -0.5rem; - inset-inline-start: 0; -} - -.cds--overflow-menu-options[data-floating-menu-direction=left]::after { - block-size: 2.5rem; - inline-size: 0.375rem; - inset-block-start: 0; - inset-inline-end: -0.375rem; -} - -.cds--overflow-menu-options[data-floating-menu-direction=right]::after { - block-size: 2.5rem; - inline-size: 0.375rem; - inset-block-start: 0; - inset-inline-start: -0.375rem; -} - -.cds--overflow-menu-options--sm.cds--overflow-menu-options[data-floating-menu-direction=bottom]::after, .cds--overflow-menu-options--sm.cds--overflow-menu-options[data-floating-menu-direction=top]::after { - inline-size: 2rem; -} -.cds--overflow-menu-options--sm.cds--overflow-menu-options[data-floating-menu-direction=left]::after, .cds--overflow-menu-options--sm.cds--overflow-menu-options[data-floating-menu-direction=right]::after { - block-size: 2rem; -} - -.cds--overflow-menu-options--lg.cds--overflow-menu-options[data-floating-menu-direction=bottom]::after, .cds--overflow-menu-options--lg.cds--overflow-menu-options[data-floating-menu-direction=top]::after { - inline-size: 3rem; -} -.cds--overflow-menu-options--lg.cds--overflow-menu-options[data-floating-menu-direction=left]::after, .cds--overflow-menu-options--lg.cds--overflow-menu-options[data-floating-menu-direction=right]::after { - block-size: 3rem; -} - -.cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction=top]::after, -.cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction=bottom]::after { - inset-inline-end: 0; - inset-inline-start: auto; -} - -.cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction=left]::after, -.cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction=right]::after { - inset-block-end: 0; - inset-block-start: auto; -} - -.cds--overflow-menu-options--open { - display: flex; -} - -.cds--overflow-menu-options__content { - inline-size: 100%; -} - -.cds--overflow-menu-options__option { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: flex; - align-items: center; - padding: 0; - background-color: transparent; - block-size: 2.5rem; - inline-size: 100%; - transition: background-color 110ms cubic-bezier(0, 0, 0.38, 0.9); -} -.cds--overflow-menu-options__option *, -.cds--overflow-menu-options__option *::before, -.cds--overflow-menu-options__option *::after { - box-sizing: inherit; -} - -.cds--overflow-menu-options--sm .cds--overflow-menu-options__option { - block-size: 2rem; -} - -.cds--overflow-menu-options--lg .cds--overflow-menu-options__option { - block-size: 3rem; -} - -.cds--overflow-menu--divider { - border-block-start: 1px solid var(--cds-border-subtle); -} - -.cds--overflow-menu--light .cds--overflow-menu--divider { - border-block-start: 1px solid var(--cds-border-subtle); -} - -a.cds--overflow-menu-options__btn::before { - display: inline-block; - block-size: 100%; - content: ""; - vertical-align: middle; -} - -.cds--overflow-menu-options__btn { - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - outline: 2px solid transparent; - outline-offset: -2px; - display: inline-flex; - align-items: center; - padding: 0 1rem; - border: none; - background-color: transparent; - block-size: 100%; - color: var(--cds-text-secondary, #525252); - cursor: pointer; - font-family: inherit; - font-weight: 400; - inline-size: 100%; - max-inline-size: 11.25rem; - text-align: start; - transition: outline 110ms cubic-bezier(0, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0, 0, 0.38, 0.9), color 110ms cubic-bezier(0, 0, 0.38, 0.9); -} -.cds--overflow-menu-options__btn:hover { - color: var(--cds-text-primary, #161616); -} -.cds--overflow-menu-options__btn:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--overflow-menu-options__btn:focus { - outline-style: dotted; - } -} -.cds--overflow-menu-options__btn::-moz-focus-inner { - border: none; -} - -.cds--overflow-menu-options__btn svg { - fill: var(--cds-icon-secondary, #525252); -} - -.cds--overflow-menu-options__btn:hover svg { - fill: var(--cds-icon-primary, #161616); -} - -.cds--overflow-menu-options__option-content { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.cds--overflow-menu-options__option:hover { - background-color: var(--cds-layer-hover); -} - -.cds--overflow-menu-options__option--danger .cds--overflow-menu-options__btn:hover, -.cds--overflow-menu-options__option--danger .cds--overflow-menu-options__btn:focus { - background-color: var(--cds-button-danger-primary, #da1e28); - color: var(--cds-text-on-color, #ffffff); -} -.cds--overflow-menu-options__option--danger .cds--overflow-menu-options__btn:hover svg, -.cds--overflow-menu-options__option--danger .cds--overflow-menu-options__btn:focus svg { - fill: currentColor; -} - -.cds--overflow-menu-options__option--disabled:hover { - background-color: var(--cds-layer); - cursor: not-allowed; -} - -.cds--overflow-menu-options__option--disabled .cds--overflow-menu-options__btn { - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); - cursor: not-allowed; -} -.cds--overflow-menu-options__option--disabled .cds--overflow-menu-options__btn:hover, .cds--overflow-menu-options__option--disabled .cds--overflow-menu-options__btn:active, .cds--overflow-menu-options__option--disabled .cds--overflow-menu-options__btn:focus { - outline: 2px solid transparent; - outline-offset: -2px; - background-color: var(--cds-layer); - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--overflow-menu-options__option--disabled .cds--overflow-menu-options__btn svg { - fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--overflow-menu--flip { - inset-inline-start: -140px; -} -.cds--overflow-menu--flip::before { - inset-inline-start: 145px; -} - -/* stylelint-disable */ -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--overflow-menu:focus, - .cds--overflow-menu-options__btn:focus { - color: Highlight; - outline: 1px solid Highlight; - } -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--overflow-menu svg { - fill: ButtonText; - } -} - -/*stylelint-enable */ -.cds--overflow-menu__top-start { - transform: translate(0, calc(-100% - var(--cds-popover-offset, 2.5rem))); -} - -.cds--overflow-menu__top-end { - transform: translate(0, calc(-100% - var(--cds-popover-offset, 2.5rem))); -} - -.cds--breadcrumb { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - display: inline; -} -.cds--breadcrumb *, -.cds--breadcrumb *::before, -.cds--breadcrumb *::after { - box-sizing: inherit; -} -@media (min-width: 42rem) { - .cds--breadcrumb { - display: flex; - flex-wrap: wrap; - } -} - -.cds--breadcrumb-item { - position: relative; - display: flex; - align-items: center; - margin-inline-end: 0.5rem; -} - -.cds--breadcrumb-item .cds--link:visited { - color: var(--cds-link-primary, #0f62fe); -} -.cds--breadcrumb-item .cds--link:visited:hover { - color: var(--cds-link-primary-hover, #0043ce); -} - -.cds--breadcrumb-item::after { - color: var(--cds-text-primary, #161616); - content: "/"; - margin-inline-start: 0.5rem; -} - -.cds--breadcrumb--no-trailing-slash .cds--breadcrumb-item:last-child::after { - content: ""; -} - -.cds--breadcrumb-item:last-child, -.cds--breadcrumb-item:last-child::after { - margin-inline-end: 0; -} - -.cds--breadcrumb .cds--link { - white-space: nowrap; -} - -.cds--breadcrumb-item [aria-current=page], -.cds--breadcrumb-item.cds--breadcrumb-item--current .cds--link { - color: var(--cds-text-primary, #161616); - cursor: auto; -} -.cds--breadcrumb-item [aria-current=page]:hover, -.cds--breadcrumb-item.cds--breadcrumb-item--current .cds--link:hover { - text-decoration: none; -} - -.cds--breadcrumb-item .cds--overflow-menu { - position: relative; - block-size: 1.125rem; - inline-size: 1.25rem; -} -.cds--breadcrumb-item .cds--overflow-menu:focus { - outline: 1px solid var(--cds-focus, #0f62fe); -} -.cds--breadcrumb-item .cds--overflow-menu:hover { - background: transparent; -} -.cds--breadcrumb-item .cds--overflow-menu::after { - position: absolute; - background: var(--cds-link-primary-hover, #0043ce); - block-size: 1px; - content: ""; - inline-size: 0.75rem; - inset-block-end: 2px; - opacity: 0; - transition: opacity 70ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -@media screen and (prefers-reduced-motion: reduce) { - .cds--breadcrumb-item .cds--overflow-menu::after { - transition: none; - } -} - -.cds--breadcrumb-item .cds--overflow-menu:hover::after { - opacity: 1; -} - -.cds--breadcrumb-item .cds--overflow-menu.cds--overflow-menu--open { - background: transparent; - box-shadow: none; -} - -.cds--breadcrumb-item .cds--overflow-menu__icon { - position: relative; - fill: var(--cds-link-primary, #0f62fe); - transform: translateY(4px); -} - -.cds--breadcrumb-item .cds--overflow-menu:hover .cds--overflow-menu__icon { - fill: var(--cds-link-primary-hover, #0043ce); -} - -.cds--breadcrumb-menu-options:focus { - outline: none; -} - -.cds--breadcrumb-menu-options.cds--overflow-menu-options::after { - margin: 0 auto; - background: transparent; - block-size: 0; - border-block-end: 0.4375rem solid var(--cds-field); - border-inline-end: 0.4375rem solid transparent; - border-inline-start: 0.4375rem solid transparent; - inline-size: 0; - inset-block-start: -0.4375rem; - inset-inline-start: 0.875rem; -} - -[dir=rtl] .cds--breadcrumb-menu-options.cds--overflow-menu-options::after { - inset-inline-end: 0.875rem; - inset-inline-start: initial; -} - -.cds--breadcrumb.cds--skeleton .cds--link { - position: relative; - padding: 0; - border: none; - background: var(--cds-skeleton-background, #e8e8e8); - box-shadow: none; - pointer-events: none; - block-size: 1rem; - inline-size: 6.25rem; -} -.cds--breadcrumb.cds--skeleton .cds--link:hover, .cds--breadcrumb.cds--skeleton .cds--link:focus, .cds--breadcrumb.cds--skeleton .cds--link:active { - border: none; - cursor: default; - outline: none; -} -.cds--breadcrumb.cds--skeleton .cds--link::before { - position: absolute; - animation: 3000ms ease-in-out cds--skeleton infinite; - background: var(--cds-skeleton-element, #c6c6c6); - block-size: 100%; - content: ""; - inline-size: 100%; - will-change: transform-origin, transform, opacity; -} -@media (prefers-reduced-motion: reduce) { - .cds--breadcrumb.cds--skeleton .cds--link::before { - animation: none; - } -} - -.cds--breadcrumb .cds--overflow-menu.cds--btn--icon-only { - min-block-size: 1.125rem; - padding-inline-end: 0; - padding-inline-start: 0; -} - -.cds--link { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - display: inline-flex; - color: var(--cds-link-text-color, var(--cds-link-primary, #0f62fe)); - outline: none; - text-decoration: none; - transition: color 70ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -.cds--link *, -.cds--link *::before, -.cds--link *::after { - box-sizing: inherit; -} -.cds--link:hover { - color: var(--cds-link-hover-text-color, var(--cds-link-primary-hover, #0043ce)); - text-decoration: underline; -} -.cds--link:active, .cds--link:active:visited, .cds--link:active:visited:hover { - outline: 1px solid var(--cds-focus, #0f62fe); - color: var(--cds-link-text-color, var(--cds-link-primary, #0f62fe)); - outline-color: var(--cds-link-focus-text-color, var(--cds-focus, #0f62fe)); - text-decoration: underline; -} -@media screen and (prefers-contrast) { - .cds--link:active, .cds--link:active:visited, .cds--link:active:visited:hover { - outline-style: dotted; - } -} -.cds--link:focus { - outline: 1px solid var(--cds-focus, #0f62fe); - outline-color: var(--cds-link-focus-text-color, var(--cds-focus, #0f62fe)); - text-decoration: underline; -} -@media screen and (prefers-contrast) { - .cds--link:focus { - outline-style: dotted; - } -} -.cds--link:visited { - color: var(--cds-link-text-color, var(--cds-link-primary, #0f62fe)); -} -.cds--link:visited:hover { - color: var(--cds-link-hover-text-color, var(--cds-link-primary-hover, #0043ce)); -} - -.cds--link--disabled, -.cds--link--disabled:hover { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); - cursor: not-allowed; - font-weight: 400; - text-decoration: none; -} -.cds--link--disabled *, -.cds--link--disabled *::before, -.cds--link--disabled *::after, -.cds--link--disabled:hover *, -.cds--link--disabled:hover *::before, -.cds--link--disabled:hover *::after { - box-sizing: inherit; -} - -.cds--link.cds--link--visited:visited { - color: var(--cds-link-visited-text-color, var(--cds-link-visited, #8a3ffc)); -} - -.cds--link.cds--link--visited:visited:hover { - color: var(--cds-link-hover-text-color, var(--cds-link-primary-hover, #0043ce)); -} - -.cds--link.cds--link--inline { - display: inline; - text-decoration: underline; -} - -.cds--link--disabled.cds--link--inline { - text-decoration: underline; -} - -.cds--link--sm, -.cds--link--sm.cds--link--disabled:hover { - font-size: var(--cds-helper-text-01-font-size, 0.75rem); - line-height: var(--cds-helper-text-01-line-height, 1.33333); - letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px); -} - -.cds--link--lg, -.cds--link--lg.cds--link--disabled:hover { - font-size: var(--cds-body-compact-02-font-size, 1rem); - font-weight: var(--cds-body-compact-02-font-weight, 400); - line-height: var(--cds-body-compact-02-line-height, 1.375); - letter-spacing: var(--cds-body-compact-02-letter-spacing, 0); -} - -.cds--link__icon { - display: inline-flex; - align-self: center; - margin-inline-start: 0.5rem; -} - -.cds--chat-btn { - border-radius: 1.5rem; -} - -.cds--chat-btn:not(.cds--chat-btn--with-icon) { - padding-inline-end: 0.9375rem; -} - -.cds--chat-btn.cds--btn--md { - border-radius: 1.25rem; -} - -.cds--chat-btn.cds--btn--sm { - border-radius: 1rem; -} - -.cds--chat-btn--quick-action { - align-items: center; - border: 1px solid var(--cds-chat-button, #0f62fe); - background: transparent; - color: var(--cds-chat-button, #0f62fe); -} - -.cds--chat-btn--quick-action:hover:not(:active):not([disabled]) { - border-color: transparent; - background: var(--cds-chat-button-hover, rgba(141, 141, 141, 0.12)); - color: var(--cds-chat-button-text-hover, #0043ce); -} - -.cds--chat-btn--quick-action:active { - border-color: transparent; - background: var(--cds-chat-button-active, rgba(141, 141, 141, 0.5)); - color: var(--cds-chat-button-text-hover, #0043ce); -} - -.cds--chat-btn--quick-action.cds--btn--ghost:focus { - border-color: var(--cds-focus, #0f62fe); - box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe); -} - -.cds--chat-btn--quick-action.cds--btn--ghost:hover:focus { - border-color: var(--cds-focus, #0f62fe); - box-shadow: inset 0 0 0 1px var(--cds-focus-inset, #ffffff); -} - -.cds--chat-btn--quick-action[disabled], -.cds--chat-btn--quick-action[disabled]:hover { - border-color: var(--cds-button-disabled, #c6c6c6); - color: var(--cds-button-disabled, #c6c6c6); -} - -.cds--chat-btn--quick-action--selected, -.cds--chat-btn--quick-action--selected[disabled], -.cds--chat-btn--quick-action--selected[disabled]:hover { - border-color: transparent; - background: var(--cds-chat-button-selected, rgba(141, 141, 141, 0.2)); - color: var(--cds-chat-button-text-selected, #525252); -} - -.cds--chat-btn--quick-action.cds--chat-btn--quick-action--selected:not([disabled]):hover, -.cds--chat-btn--quick-action.cds--chat-btn--quick-action--selected:not([disabled]):active { - color: var(--cds-chat-button-text-selected, #525252); -} - -.cds--chat-btn.cds--skeleton { - overflow: hidden; -} - -input:-webkit-autofill, -input:-webkit-autofill:hover, -input:-webkit-autofill:focus, -textarea:-webkit-autofill, -textarea:-webkit-autofill:hover, -textarea:-webkit-autofill:focus { - box-shadow: 0 0 0 1000px var(--cds-field) inset; - -webkit-text-fill-color: var(--cds-text-primary, #161616); -} - -.cds--fieldset { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; -} -.cds--fieldset *, -.cds--fieldset *::before, -.cds--fieldset *::after { - box-sizing: inherit; -} - -.cds--form-item { - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - display: flex; - flex: 1 1 auto; - flex-direction: column; - align-items: flex-start; -} - -.cds--label { - font-size: var(--cds-label-01-font-size, 0.75rem); - font-weight: var(--cds-label-01-font-weight, 400); - line-height: var(--cds-label-01-line-height, 1.33333); - letter-spacing: var(--cds-label-01-letter-spacing, 0.32px); - display: inline-block; - color: var(--cds-text-secondary, #525252); - font-weight: 400; - line-height: 1rem; - margin-block-end: 0.5rem; - vertical-align: baseline; -} -.cds--label html { - font-size: 100%; -} -.cds--label body { - font-weight: 400; - font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; -} -.cds--label code { - font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace; -} -.cds--label strong { - font-weight: 600; -} - -.cds--label .cds--toggletip-label { - font-size: var(--cds-label-01-font-size, 0.75rem); - font-weight: var(--cds-label-01-font-weight, 400); - line-height: var(--cds-label-01-line-height, 1.33333); - letter-spacing: var(--cds-label-01-letter-spacing, 0.32px); -} - -.cds--label--no-margin { - margin-block-end: 0; -} - -.cds--label + .cds--tooltip { - position: relative; - inset-block-start: 0.2rem; - inset-inline-start: 0.5rem; -} - -.cds--label + .cds--tooltip .cds--tooltip__trigger { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: inline-block; - padding: 0; - border: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: none; - cursor: pointer; - text-align: start; - inline-size: 100%; - display: flex; - align-items: center; - justify-content: center; - font-size: var(--cds-label-01-font-size, 0.75rem); - font-weight: var(--cds-label-01-font-weight, 400); - line-height: var(--cds-label-01-line-height, 1.33333); - letter-spacing: var(--cds-label-01-letter-spacing, 0.32px); -} -.cds--label + .cds--tooltip .cds--tooltip__trigger *, -.cds--label + .cds--tooltip .cds--tooltip__trigger *::before, -.cds--label + .cds--tooltip .cds--tooltip__trigger *::after { - box-sizing: inherit; -} -.cds--label + .cds--tooltip .cds--tooltip__trigger::-moz-focus-inner { - border: 0; -} - -.cds--label + .cds--tooltip .cds--tooltip__trigger:focus { - outline: 1px solid var(--cds-focus, #0f62fe); -} - -.cds--label + .cds--tooltip .cds--tooltip__trigger svg { - fill: var(--cds-icon-secondary, #525252); -} - -.cds--label + .cds--tooltip .cds--tooltip__trigger svg :hover { - fill: var(--cds-icon-primary, #161616); -} - -.cds--label + .cds--toggletip { - inset-block-start: 0.2rem; - inset-inline-start: 0.5rem; -} - -.cds--label.cds--skeleton { - position: relative; - padding: 0; - border: none; - background: var(--cds-skeleton-background, #e8e8e8); - box-shadow: none; - pointer-events: none; - block-size: 0.875rem; - inline-size: 4.6875rem; -} -.cds--label.cds--skeleton:hover, .cds--label.cds--skeleton:focus, .cds--label.cds--skeleton:active { - border: none; - cursor: default; - outline: none; -} -.cds--label.cds--skeleton::before { - position: absolute; - animation: 3000ms ease-in-out cds--skeleton infinite; - background: var(--cds-skeleton-element, #c6c6c6); - block-size: 100%; - content: ""; - inline-size: 100%; - will-change: transform-origin, transform, opacity; -} -@media (prefers-reduced-motion: reduce) { - .cds--label.cds--skeleton::before { - animation: none; - } -} - -input[type=number] { - font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; -} - -input[data-invalid]:not(:focus), -.cds--number[data-invalid] input[type=number]:not(:focus), -.cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:not(:focus), -.cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus), -.cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus), -.cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused), -.cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus) { - outline: 2px solid var(--cds-support-error, #da1e28); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - input[data-invalid]:not(:focus), - .cds--number[data-invalid] input[type=number]:not(:focus), - .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:not(:focus), - .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus), - .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus), - .cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused), - .cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus) { - outline-style: dotted; - } -} - -input[data-invalid] ~ .cds--form-requirement, -.cds--number[data-invalid] .cds--number__input-wrapper ~ .cds--form-requirement, -.cds--number__input-wrapper--warning ~ .cds--form-requirement, -.cds--date-picker-input__wrapper ~ .cds--form-requirement, -.cds--date-picker-input__wrapper--warn ~ .cds--form-requirement, -.cds--date-picker-input__wrapper--invalid ~ .cds--form-requirement, -.cds--time-picker--invalid ~ .cds--form-requirement, -.cds--time-picker--warning ~ .cds--form-requirement, -.cds--text-input__field-wrapper[data-invalid] ~ .cds--form-requirement, -.cds--text-input__field-wrapper--warning ~ .cds--form-requirement, -.cds--text-input__field-wrapper--warning > .cds--text-input ~ .cds--form-requirement, -.cds--text-area__wrapper[data-invalid] ~ .cds--form-requirement, -.cds--text-area__wrapper--warn ~ .cds--form-requirement, -.cds--select-input__wrapper[data-invalid] ~ .cds--form-requirement, -.cds--select--warning .cds--select-input__wrapper ~ .cds--form-requirement, -.cds--time-picker[data-invalid] ~ .cds--form-requirement, -.cds--list-box[data-invalid] ~ .cds--form-requirement, -.cds--list-box--warning ~ .cds--form-requirement { - display: block; - overflow: visible; - font-weight: 400; - max-block-size: 12.5rem; -} - -input[data-invalid] ~ .cds--form-requirement, -.cds--number[data-invalid] .cds--number__input-wrapper ~ .cds--form-requirement, -.cds--date-picker-input__wrapper ~ .cds--form-requirement, -.cds--date-picker-input__wrapper--invalid ~ .cds--form-requirement, -.cds--time-picker--invalid ~ .cds--form-requirement, -.cds--text-input__field-wrapper[data-invalid] ~ .cds--form-requirement, -.cds--text-area__wrapper[data-invalid] ~ .cds--form-requirement, -.cds--select-input__wrapper[data-invalid] ~ .cds--form-requirement, -.cds--time-picker[data-invalid] ~ .cds--form-requirement, -.cds--list-box[data-invalid] ~ .cds--form-requirement { - color: var(--cds-text-error, #da1e28); -} - -.cds--form--fluid .cds--text-input__field-wrapper[data-invalid], -.cds--form--fluid .cds--text-input__field-wrapper--warning { - display: block; -} - -.cds--form--fluid input[data-invalid] { - outline: none; -} - -.cds--form--fluid .cds--form-requirement { - padding: 0.5rem 2.5rem 0.5rem 1rem; - margin: 0; -} - -input:not(output, [data-invalid]):-moz-ui-invalid { - box-shadow: none; -} - -.cds--form-requirement { - font-size: var(--cds-label-01-font-size, 0.75rem); - font-weight: var(--cds-label-01-font-weight, 400); - line-height: var(--cds-label-01-line-height, 1.33333); - letter-spacing: var(--cds-label-01-letter-spacing, 0.32px); - display: none; - overflow: hidden; - margin: 0.25rem 0 0; - max-block-size: 0; -} -.cds--form-requirement html { - font-size: 100%; -} -.cds--form-requirement body { - font-weight: 400; - font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; -} -.cds--form-requirement code { - font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace; -} -.cds--form-requirement strong { - font-weight: 600; -} - -.cds--select--inline .cds--form__helper-text { - margin-block-start: 0; -} - -.cds--form__helper-text { - font-size: var(--cds-helper-text-01-font-size, 0.75rem); - line-height: var(--cds-helper-text-01-line-height, 1.33333); - letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px); - z-index: 0; - color: var(--cds-text-secondary, #525252); - inline-size: 100%; - margin-block-start: 0.25rem; - opacity: 1; -} - -.cds--label--disabled, -.cds--form__helper-text--disabled { - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); -} - -fieldset[disabled] .cds--label, -fieldset[disabled] .cds--form__helper-text { - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--checkbox-group { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; -} -.cds--checkbox-group *, -.cds--checkbox-group *::before, -.cds--checkbox-group *::after { - box-sizing: inherit; -} - -.cds--form-item.cds--checkbox-wrapper { - position: relative; - margin-block-end: 0.375rem; -} - -.cds--form-item.cds--checkbox-wrapper:first-of-type { - margin-block-start: 0; -} - -.cds--label + .cds--form-item.cds--checkbox-wrapper { - margin-block-start: -0.125rem; -} - -.cds--form-item.cds--checkbox-wrapper:last-of-type { - margin-block-end: 0.1875rem; -} - -.cds--checkbox { - position: absolute; - overflow: hidden; - padding: 0; - border: 0; - margin: -1px; - block-size: 1px; - clip: rect(0, 0, 0, 0); - inline-size: 1px; - visibility: inherit; - white-space: nowrap; - inset-block-start: 1.25rem; - inset-inline-start: 0.7rem; -} - -.cds--checkbox-label { - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - position: relative; - display: flex; - cursor: pointer; - min-block-size: 1.25rem; - padding-block-start: 0.125rem; - padding-inline-start: 1.25rem; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} -.cds--checkbox-label html { - font-size: 100%; -} -.cds--checkbox-label body { - font-weight: 400; - font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; -} -.cds--checkbox-label code { - font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace; -} -.cds--checkbox-label strong { - font-weight: 600; -} - -.cds--checkbox-label-text { - padding-inline-start: 0.625rem; -} - -.cds--checkbox-label::before, -.cds--checkbox-label::after { - box-sizing: border-box; -} -@media print { - .cds--checkbox-label::before, - .cds--checkbox-label::after { - -webkit-print-color-adjust: exact; - print-color-adjust: exact; - } -} - -.cds--checkbox-label::before { - position: absolute; - border: 1px solid var(--cds-icon-primary, #161616); - border-radius: 2px; - background-color: transparent; - block-size: 1rem; - content: ""; - inline-size: 1rem; - inset-block-start: 0.125rem; - inset-inline-start: 0; - margin-block: 0.0625rem 0.125rem; - margin-inline: 0.1875rem 0; -} - -.cds--checkbox-label::after { - position: absolute; - background: none; - block-size: 0.3125rem; - border-block-end: 1.5px solid var(--cds-icon-inverse, #ffffff); - border-inline-start: 1.5px solid var(--cds-icon-inverse, #ffffff); - content: ""; - inline-size: 0.5625rem; - inset-block-start: 0.40625rem; - inset-inline-start: 0.4375rem; - margin-block-start: -0.1875rem; - transform: scale(0) rotate(-45deg); - transform-origin: bottom right; -} - -.cds--checkbox:checked + .cds--checkbox-label::before, -.cds--checkbox:indeterminate + .cds--checkbox-label::before, -.cds--checkbox-label[data-contained-checkbox-state=true]::before { - border: none; - border-width: 1px; - background-color: var(--cds-icon-primary, #161616); -} - -.cds--checkbox:checked + .cds--checkbox-label::after, -.cds--checkbox-label[data-contained-checkbox-state=true]::after { - transform: scale(1) rotate(-45deg); -} - -.cds--checkbox:indeterminate + .cds--checkbox-label::after { - border-block-end: 2px solid var(--cds-icon-inverse, #ffffff); - border-inline-start: 0 solid var(--cds-icon-inverse, #ffffff); - inline-size: 0.5rem; - inset-block-start: 0.6875rem; - transform: scale(1) rotate(0deg); -} - -.cds--checkbox:focus + .cds--checkbox-label::before, -.cds--checkbox-label__focus::before, -.cds--checkbox:checked:focus + .cds--checkbox-label::before, -.cds--checkbox-label[data-contained-checkbox-state=true].cds--checkbox-label__focus::before, -.cds--checkbox:indeterminate:focus + .cds--checkbox-label::before { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: 1px; -} - -.cds--checkbox:disabled + .cds--checkbox-label, -.cds--checkbox-label[data-contained-checkbox-disabled=true] { - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); - cursor: not-allowed; -} - -.cds--checkbox:disabled + .cds--checkbox-label::before, -.cds--checkbox-label[data-contained-checkbox-disabled=true]::before { - border-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--checkbox:checked:disabled + .cds--checkbox-label::before, -.cds--checkbox:indeterminate:disabled + .cds--checkbox-label::before, -.cds--checkbox-label[data-contained-checkbox-state=true][data-contained-checkbox-disabled=true]::before { - background-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--checkbox-group[data-invalid] .cds--checkbox-label::before, -.cds--checkbox-wrapper--invalid .cds--checkbox-label::before, -.cds--checkbox-wrapper--invalid .cds--checkbox:checked + .cds--checkbox-label::before { - border: 1px solid var(--cds-support-error, #da1e28); -} - -.cds--checkbox-group .cds--checkbox-wrapper--invalid > .cds--checkbox__validation-msg, -.cds--checkbox-group .cds--checkbox-wrapper--warning > .cds--checkbox__validation-msg, -.cds--checkbox-group .cds--checkbox-wrapper > .cds--form__helper-text { - display: none; -} - -.cds--checkbox-group:not(.cds--checkbox-group[data-invalid]) .cds--checkbox-wrapper--invalid .cds--checkbox-label::before, -.cds--checkbox-group:not(.cds--checkbox-group[data-invalid]) .cds--checkbox-wrapper--invalid .cds--checkbox:checked + .cds--checkbox-label::before { - border: 1px solid var(--cds-icon-primary, #161616); -} - -.cds--checkbox-group__validation-msg, -.cds--checkbox__validation-msg { - display: none; - align-items: flex-start; - margin-block-start: 0.25rem; -} - -.cds--checkbox__invalid-icon { - margin: 0.0625rem 0.0625rem 0 0.1875rem; - fill: var(--cds-support-error, #da1e28); - min-inline-size: 1rem; -} - -.cds--checkbox__invalid-icon--warning { - fill: var(--cds-support-warning, #f1c21b); -} - -.cds--checkbox__invalid-icon--warning path:first-of-type { - fill: #000000; -} - -.cds--checkbox-group--invalid .cds--checkbox-group__validation-msg, -.cds--checkbox-group--warning .cds--checkbox-group__validation-msg, -.cds--checkbox-wrapper--invalid > .cds--checkbox__validation-msg, -.cds--checkbox-wrapper--warning > .cds--checkbox__validation-msg { - display: flex; -} - -.cds--checkbox-group--invalid .cds--checkbox-group__validation-msg .cds--form-requirement, -.cds--checkbox-group--warning .cds--checkbox-group__validation-msg .cds--form-requirement, -.cds--checkbox-wrapper--invalid .cds--checkbox__validation-msg .cds--form-requirement, -.cds--checkbox-wrapper--warning .cds--checkbox__validation-msg .cds--form-requirement { - display: block; - overflow: visible; - margin-block-start: 0; - margin-inline-start: 0.5rem; - max-block-size: 100%; -} - -.cds--checkbox-group--invalid .cds--checkbox-group__validation-msg .cds--form-requirement, -.cds--checkbox-wrapper--invalid .cds--checkbox__validation-msg .cds--form-requirement { - color: var(--cds-text-error, #da1e28); -} - -.cds--checkbox-group--readonly .cds--checkbox-label, -.cds--checkbox-wrapper--readonly .cds--checkbox-label { - cursor: default; -} - -.cds--checkbox-group--readonly .cds--checkbox-label-text, -.cds--checkbox-wrapper--readonly .cds--checkbox-label-text { - cursor: text; - -webkit-user-select: text; - -moz-user-select: text; - user-select: text; -} - -.cds--checkbox-group--readonly .cds--checkbox + .cds--checkbox-label::before, -.cds--checkbox-wrapper--readonly .cds--checkbox + .cds--checkbox-label::before { - border-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--checkbox-group--readonly .cds--checkbox:checked + .cds--checkbox-label::before, -.cds--checkbox-wrapper--readonly .cds--checkbox:checked + .cds--checkbox-label::before { - border: 1px solid var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); - background: transparent; -} - -.cds--checkbox-group--readonly .cds--checkbox:checked + .cds--checkbox-label::after, -.cds--checkbox-wrapper--readonly .cds--checkbox:checked + .cds--checkbox-label::after { - border-color: var(--cds-text-primary, #161616); -} - -.cds--checkbox-skeleton .cds--checkbox-label { - cursor: default; -} - -.cds--checkbox-label-text.cds--skeleton { - position: relative; - padding: 0; - border: none; - background: var(--cds-skeleton-background, #e8e8e8); - box-shadow: none; - pointer-events: none; - block-size: 1rem; - inline-size: 6.25rem; - margin-block: 0.0625rem 0; - margin-inline: 0.375rem 0; -} -.cds--checkbox-label-text.cds--skeleton:hover, .cds--checkbox-label-text.cds--skeleton:focus, .cds--checkbox-label-text.cds--skeleton:active { - border: none; - cursor: default; - outline: none; -} -.cds--checkbox-label-text.cds--skeleton::before { - position: absolute; - animation: 3000ms ease-in-out cds--skeleton infinite; - background: var(--cds-skeleton-element, #c6c6c6); - block-size: 100%; - content: ""; - inline-size: 100%; - will-change: transform-origin, transform, opacity; -} -@media (prefers-reduced-motion: reduce) { - .cds--checkbox-label-text.cds--skeleton::before { - animation: none; - } -} - -.cds--checkbox--inline { - position: relative; -} - -[dir=rtl] .cds--checkbox-label::after { - margin-block-start: 0; - margin-inline-start: -0.0625rem; - transform-origin: center; -} - -[dir=rtl] .cds--checkbox:checked + .cds--checkbox-label::after, -[dir=rtl] .cds--checkbox-label[data-contained-checkbox-state=true]::after { - transform: scale(1.2) rotate3d(0.5, 1, 0, 158deg); -} - -.cds--checkbox-group--slug legend.cds--label, -.cds--checkbox-wrapper--slug .cds--checkbox-label-text { - display: flex; -} - -.cds--checkbox-group--slug legend.cds--label .cds--slug, -.cds--checkbox-wrapper--slug .cds--checkbox-label-text .cds--slug { - margin-inline-start: 0.5rem; -} - -.cds--checkbox-wrapper--slug .cds--checkbox-label-text .cds--slug__button--inline { - line-height: inherit; - margin-block-start: -0.0625rem; -} - -.cds--checkbox-group--horizontal { - position: relative; - display: flex; - flex-flow: row wrap; - justify-content: flex-start; -} -.cds--checkbox-group--horizontal .cds--form-item { - flex: none; - margin-block-end: 0; -} -.cds--checkbox-group--horizontal .cds--form-item:not(:last-of-type) { - margin-inline-end: 1rem; -} -.cds--checkbox-group--horizontal .cds--checkbox-label-text { - padding-inline-start: 0.5rem; -} -.cds--checkbox-group--horizontal .cds--label + .cds--form-item.cds--checkbox-wrapper { - margin-block-start: 0; -} - -.cds--copy-btn { - position: relative; - display: flex; - align-items: center; - justify-content: center; - padding: 0; - border: none; - background-color: var(--cds-layer); - cursor: pointer; -} -.cds--copy-btn html { - font-size: 100%; -} -.cds--copy-btn body { - font-weight: 400; - font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; -} -.cds--copy-btn code { - font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace; -} -.cds--copy-btn strong { - font-weight: 600; -} -.cds--copy-btn:hover { - background-color: var(--cds-layer-hover); -} -.cds--copy-btn:active { - background-color: var(--cds-layer-active); -} -.cds--copy-btn::before { - position: absolute; - z-index: 6000; - border-style: solid; - block-size: 0; - content: ""; - inline-size: 0; - display: none; -} -.cds--copy-btn .cds--copy-btn__feedback { - box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3)); - z-index: 6000; - padding: 0.1875rem 1rem; - border-radius: 0.125rem; - background-color: var(--cds-background-inverse, #393939); - block-size: auto; - color: var(--cds-text-inverse, #ffffff); - font-weight: 400; - inline-size: -moz-max-content; - inline-size: max-content; - max-inline-size: 13rem; - min-inline-size: 1.5rem; - text-align: start; - transform: translateX(-50%); - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - display: none; - overflow: visible; - box-sizing: content-box; - margin: auto; - clip: auto; -} -@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { - .cds--copy-btn .cds--copy-btn__feedback { - inline-size: auto; - } -} -@supports (-ms-accelerator: true) { - .cds--copy-btn .cds--copy-btn__feedback { - inline-size: auto; - } -} -@supports (-ms-ime-align: auto) { - .cds--copy-btn .cds--copy-btn__feedback { - inline-size: auto; - } -} -@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) { - .cds--copy-btn .cds--copy-btn__feedback { - border: 1px solid transparent; - } -} -.cds--copy-btn:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; - outline-color: var(--cds-focus, #0f62fe); -} -@media screen and (prefers-contrast) { - .cds--copy-btn:focus { - outline-style: dotted; - } -} -.cds--copy-btn.cds--copy-btn--animating::before, .cds--copy-btn.cds--copy-btn--animating .cds--copy-btn__feedback { - display: block; -} -.cds--copy-btn.cds--copy-btn--animating::before { - border: none; -} -.cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-out::before, .cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-out .cds--copy-btn__feedback { - animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) cds--hide-feedback; -} -.cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-in::before, .cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-in .cds--copy-btn__feedback { - animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) cds--show-feedback; -} - -.cds--copy-btn svg { - fill: var(--cds-icon-primary, #161616); -} - -.cds--copy { - font-size: 0; -} - -.cds--snippet html { - font-size: 100%; -} -.cds--snippet body { - font-weight: 400; - font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; -} -.cds--snippet code { - font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace; -} -.cds--snippet strong { - font-weight: 600; -} - -.cds--snippet--disabled, -.cds--snippet--disabled .cds--btn.cds--snippet-btn--expand { - background-color: var(--cds-layer); - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--snippet--disabled .cds--snippet-btn--expand:hover, -.cds--snippet--disabled .cds--copy-btn, -.cds--snippet--disabled .cds--copy-btn:hover { - background-color: var(--cds-layer); - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); - cursor: not-allowed; -} - -.cds--snippet--disabled .cds--snippet__icon, -.cds--snippet--disabled .cds--snippet-btn--expand .cds--icon-chevron--down { - fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--snippet code { - font-family: var(--cds-code-01-font-family, 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace); - font-size: var(--cds-code-01-font-size, 0.75rem); - font-weight: var(--cds-code-01-font-weight, 400); - line-height: var(--cds-code-01-line-height, 1.33333); - letter-spacing: var(--cds-code-01-letter-spacing, 0.32px); -} - -.cds--snippet--inline { - position: relative; - display: inline; - padding: 0; - border: 1px solid transparent; - border-radius: 4px; - background-color: var(--cds-layer); - color: var(--cds-text-primary, #161616); - cursor: pointer; -} -.cds--snippet--inline html { - font-size: 100%; -} -.cds--snippet--inline body { - font-weight: 400; - font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; -} -.cds--snippet--inline code { - font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace; -} -.cds--snippet--inline strong { - font-weight: 600; -} -.cds--snippet--inline:hover { - background-color: var(--cds-layer-hover); -} -.cds--snippet--inline:active { - background-color: var(--cds-layer-active); -} -.cds--snippet--inline:focus { - border: 1px solid var(--cds-focus, #0f62fe); - outline: none; -} -.cds--snippet--inline::before { - position: absolute; - z-index: 6000; - border-style: solid; - block-size: 0; - content: ""; - inline-size: 0; - display: none; - border: none; -} -.cds--snippet--inline .cds--copy-btn__feedback { - box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3)); - z-index: 6000; - padding: 0.1875rem 1rem; - border-radius: 0.125rem; - background-color: var(--cds-background-inverse, #393939); - block-size: auto; - color: var(--cds-text-inverse, #ffffff); - font-weight: 400; - inline-size: -moz-max-content; - inline-size: max-content; - max-inline-size: 13rem; - min-inline-size: 1.5rem; - text-align: start; - transform: translateX(-50%); - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - display: none; - overflow: visible; - box-sizing: content-box; - margin: auto; - clip: auto; -} -@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { - .cds--snippet--inline .cds--copy-btn__feedback { - inline-size: auto; - } -} -@supports (-ms-accelerator: true) { - .cds--snippet--inline .cds--copy-btn__feedback { - inline-size: auto; - } -} -@supports (-ms-ime-align: auto) { - .cds--snippet--inline .cds--copy-btn__feedback { - inline-size: auto; - } -} -@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) { - .cds--snippet--inline .cds--copy-btn__feedback { - border: 1px solid transparent; - } -} - -.cds--snippet--inline.cds--copy-btn--animating::before, -.cds--snippet--inline.cds--copy-btn--animating .cds--copy-btn__feedback { - display: block; -} - -.cds--snippet--inline.cds--copy-btn--animating.cds--copy-btn--fade-out::before, -.cds--snippet--inline.cds--copy-btn--animating.cds--copy-btn--fade-out .cds--copy-btn__feedback { - animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) cds--hide-feedback; -} - -.cds--snippet--inline.cds--copy-btn--animating.cds--copy-btn--fade-in::before, -.cds--snippet--inline.cds--copy-btn--animating.cds--copy-btn--fade-in .cds--copy-btn__feedback { - animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) cds--show-feedback; -} - -.cds--snippet--inline code { - padding: 0 0.5rem; -} - -.cds--snippet--inline.cds--snippet--no-copy { - display: inline-block; -} -.cds--snippet--inline.cds--snippet--no-copy:hover { - background-color: var(--cds-layer); - cursor: auto; -} - -.cds--snippet--light.cds--snippet--inline.cds--snippet--no-copy:hover { - background-color: var(--cds-layer-hover); - cursor: auto; -} - -.cds--snippet--single { - font-family: var(--cds-code-01-font-family, 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace); - font-size: var(--cds-code-01-font-size, 0.75rem); - font-weight: var(--cds-code-01-font-weight, 400); - line-height: var(--cds-code-01-line-height, 1.33333); - letter-spacing: var(--cds-code-01-letter-spacing, 0.32px); - position: relative; - background-color: var(--cds-layer); - inline-size: 100%; - max-inline-size: 48rem; - display: flex; - align-items: center; - block-size: 2.5rem; - padding-inline-end: 2.5rem; -} - -.cds--snippet--single.cds--snippet--no-copy { - padding: 0; -} -.cds--snippet--single.cds--snippet--no-copy::after { - inset-inline-end: 1rem; -} - -.cds--snippet--single .cds--snippet-container { - position: relative; - display: flex; - align-items: center; - block-size: 100%; - overflow-x: auto; - padding-inline-start: 1rem; -} -.cds--snippet--single .cds--snippet-container:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--snippet--single .cds--snippet-container:focus { - outline-style: dotted; - } -} - -.cds--snippet--single pre { - font-family: var(--cds-code-01-font-family, 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace); - font-size: var(--cds-code-01-font-size, 0.75rem); - font-weight: var(--cds-code-01-font-weight, 400); - line-height: var(--cds-code-01-line-height, 1.33333); - letter-spacing: var(--cds-code-01-letter-spacing, 0.32px); - padding-inline-end: 0.5rem; -} - -.cds--snippet--single pre, -.cds--snippet--inline code { - white-space: pre; -} - -.cds--snippet--multi { - font-family: var(--cds-code-01-font-family, 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace); - font-size: var(--cds-code-01-font-size, 0.75rem); - font-weight: var(--cds-code-01-font-weight, 400); - line-height: var(--cds-code-01-line-height, 1.33333); - letter-spacing: var(--cds-code-01-letter-spacing, 0.32px); - position: relative; - background-color: var(--cds-layer); - inline-size: 100%; - max-inline-size: 48rem; - display: flex; - padding: 1rem; -} - -.cds--snippet--multi .cds--snippet-container { - position: relative; - order: 1; - max-block-size: 100%; - min-block-size: 100%; - overflow-y: auto; - transition: max-height 150ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -.cds--snippet--multi .cds--snippet-container:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; - outline-offset: 0; -} -@media screen and (prefers-contrast) { - .cds--snippet--multi .cds--snippet-container:focus { - outline-style: dotted; - } -} - -.cds--snippet--multi.cds--snippet--expand .cds--snippet-container { - padding-block-end: 1rem; - transition: max-height 150ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -.cds--snippet--multi.cds--snippet--wraptext pre { - white-space: pre-wrap; - word-wrap: break-word; -} - -.cds--snippet--multi .cds--snippet-container pre { - padding-inline-end: 2.5rem; -} - -.cds--snippet--multi.cds--snippet--no-copy .cds--snippet-container pre { - padding-inline-end: 0; -} - -.cds--snippet--multi.cds--snippet--has-right-overflow::after { - position: absolute; - background-image: linear-gradient(to right, transparent, var(--cds-layer)); - block-size: 100%; - content: ""; - inline-size: 1rem; - inset-block-start: 0; - inset-inline-end: 1rem; -} - -[dir=rtl] .cds--snippet--multi.cds--snippet--has-right-overflow::after { - background-image: linear-gradient(to left, transparent, var(--cds-layer)); -} - -.cds--snippet--multi .cds--snippet-container pre code { - overflow: hidden; -} - -.cds--snippet__icon { - block-size: 1rem; - fill: var(--cds-icon-primary, #161616); - inline-size: 1rem; - transition: all 70ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -.cds--btn > .cds--snippet__icon { - margin-block-start: 0; -} - -.cds--copy-btn { - display: flex; - overflow: visible; - align-items: center; - justify-content: center; - padding: 0; - border: none; - background-color: var(--cds-layer); - cursor: pointer; - outline: none; -} -.cds--copy-btn html { - font-size: 100%; -} -.cds--copy-btn body { - font-weight: 400; - font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; -} -.cds--copy-btn code { - font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace; -} -.cds--copy-btn strong { - font-weight: 600; -} -.cds--copy-btn:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; - outline-color: var(--cds-focus, #0f62fe); -} -@media screen and (prefers-contrast) { - .cds--copy-btn:focus { - outline-style: dotted; - } -} - -.cds--snippet .cds--popover-container { - font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; - position: absolute; - inset-block-start: 0; - inset-inline-end: 0; -} - -.cds--snippet--inline.cds--btn { - block-size: 1.25rem; - inline-size: initial; - min-block-size: 1.25rem; - padding-inline: 0; -} - -.cds--snippet--inline.cds--btn.cds--btn--primary:hover { - color: var(--cds-text-primary, #161616); -} - -.cds--snippet.cds--snippet--multi .cds--popover-container { - inset-block-start: 0.5rem; - inset-inline-end: 0.5rem; -} - -.cds--snippet--multi .cds--copy-btn { - z-index: 10; -} - -.cds--snippet-btn--expand { - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; - position: absolute; - z-index: 10; - display: inline-flex; - align-items: center; - padding: 0.5rem 1rem; - border: 0; - background-color: var(--cds-layer); - block-size: 2rem; - color: var(--cds-text-primary, #161616); - inset-block-end: 0; - inset-inline-end: 0; -} - -.cds--snippet-btn--expand .cds--snippet-btn--text { - position: relative; - inset-block-start: -0.0625rem; -} - -.cds--snippet-btn--expand--hide.cds--snippet-btn--expand { - display: none; -} - -.cds--snippet-btn--expand .cds--icon-chevron--down { - fill: var(--cds-icon-primary, #161616); - margin-inline-start: 0.5rem; - transform: rotate(0deg); - transition: 150ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -.cds--snippet-btn--expand:hover { - background: var(--cds-layer-hover); - color: var(--cds-text-primary, #161616); -} - -.cds--snippet-btn--expand:active { - background-color: var(--cds-layer-active); -} - -.cds--snippet-btn--expand:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; - border-color: transparent; -} -@media screen and (prefers-contrast) { - .cds--snippet-btn--expand:focus { - outline-style: dotted; - } -} - -.cds--snippet--expand .cds--snippet-btn--expand .cds--icon-chevron--down { - transform: rotate(180deg); - transition: transform 300ms; -} - -.cds--snippet--light, -.cds--snippet--light .cds--snippet-button, -.cds--snippet--light .cds--btn.cds--snippet-btn--expand, -.cds--snippet--light .cds--copy-btn { - background-color: var(--cds-layer); -} - -.cds--snippet--light.cds--snippet--inline:hover, -.cds--snippet--light .cds--snippet-button:hover, -.cds--snippet--light .cds--btn.cds--snippet-btn--expand:hover, -.cds--snippet--light .cds--copy-btn:hover { - background-color: var(--cds-layer-hover); -} - -.cds--snippet--light.cds--snippet--inline:active, -.cds--snippet--light .cds--snippet-button:active, -.cds--snippet--light .cds--btn.cds--snippet-btn--expand:active, -.cds--snippet--light .cds--copy-btn:active { - background-color: var(--cds-layer-active); -} - -.cds--snippet--light.cds--snippet--single::after, -.cds--snippet--light.cds--snippet--multi::after { - background-image: linear-gradient(to right, rgba(var(--cds-layer), 0), var(--cds-layer)); -} - -.cds--snippet.cds--skeleton .cds--snippet-container { - block-size: 100%; - inline-size: 100%; -} - -.cds--snippet-button .cds--btn--copy__feedback { - inset-block-start: 3.175rem; - inset-inline-end: auto; - inset-inline-start: 50%; -} -.cds--snippet-button .cds--btn--copy__feedback::before { - inset-block-start: 0; -} -.cds--snippet-button .cds--btn--copy__feedback::after { - inset-block-start: -0.25rem; -} - -.cds--snippet--multi .cds--snippet-button .cds--btn--copy__feedback { - inset-block-start: 2.675rem; -} - -.cds--snippet--inline .cds--btn--copy__feedback { - inset-block-start: calc(100% - 0.25rem); - inset-inline-end: auto; - inset-inline-start: 50%; -} - -.cds--snippet__overflow-indicator--left, -.cds--snippet__overflow-indicator--right { - z-index: 1; - flex: 1 0 auto; - inline-size: 1rem; -} - -.cds--snippet__overflow-indicator--left { - order: 0; - background-image: linear-gradient(to left, transparent, var(--cds-layer)); - margin-inline-end: -1rem; -} - -.cds--snippet__overflow-indicator--right { - order: 2; - background-image: linear-gradient(to right, transparent, var(--cds-layer)); - margin-inline-start: -1rem; -} - -[dir=rtl] .cds--snippet__overflow-indicator--left { - background-image: linear-gradient(to right, transparent, var(--cds-layer)); -} - -[dir=rtl] .cds--snippet__overflow-indicator--right { - background-image: linear-gradient(to left, transparent, var(--cds-layer)); -} - -.cds--snippet--single .cds--snippet__overflow-indicator--right, -.cds--snippet--single .cds--snippet__overflow-indicator--left { - position: absolute; - block-size: calc(100% - 0.25rem); - inline-size: 2rem; -} - -.cds--snippet--single .cds--snippet__overflow-indicator--right { - inset-inline-end: 2.5rem; -} - -.cds--snippet--single.cds--snippet--no-copy .cds--snippet__overflow-indicator--right { - inset-inline-end: 0; -} - -.cds--snippet--single .cds--snippet-container:focus ~ .cds--snippet__overflow-indicator--right { - inset-inline-end: calc(2.5rem + 0.125rem); -} - -.cds--snippet--single .cds--snippet-container:focus + .cds--snippet__overflow-indicator--left { - inset-inline-start: 0.125rem; -} - -.cds--snippet--light .cds--snippet__overflow-indicator--left { - background-image: linear-gradient(to left, transparent, var(--cds-layer)); -} - -.cds--snippet--light .cds--snippet__overflow-indicator--right { - background-image: linear-gradient(to right, transparent, var(--cds-layer)); -} - -@media not all and (min-resolution >= 0.001dpcm) { - @supports (-webkit-appearance: none) and (stroke-color: transparent) { - .cds--snippet__overflow-indicator--left { - background-image: linear-gradient(to left, rgba(var(--cds-layer), 0), var(--cds-layer)); - } - .cds--snippet__overflow-indicator--right { - background-image: linear-gradient(to right, rgba(var(--cds-layer), 0), var(--cds-layer)); - } - } -} -.cds--snippet--multi.cds--skeleton { - block-size: 6.125rem; -} - -.cds--snippet--single.cds--skeleton { - block-size: 3.5rem; -} - -.cds--snippet.cds--skeleton span { - position: relative; - padding: 0; - border: none; - background: var(--cds-skeleton-background, #e8e8e8); - box-shadow: none; - pointer-events: none; - display: block; - block-size: 1rem; - inline-size: 100%; - margin-block-start: 0.5rem; -} -.cds--snippet.cds--skeleton span:hover, .cds--snippet.cds--skeleton span:focus, .cds--snippet.cds--skeleton span:active { - border: none; - cursor: default; - outline: none; -} -.cds--snippet.cds--skeleton span::before { - position: absolute; - animation: 3000ms ease-in-out cds--skeleton infinite; - background: var(--cds-skeleton-element, #c6c6c6); - block-size: 100%; - content: ""; - inline-size: 100%; - will-change: transform-origin, transform, opacity; -} -@media (prefers-reduced-motion: reduce) { - .cds--snippet.cds--skeleton span::before { - animation: none; - } -} -.cds--snippet.cds--skeleton span:first-child { - margin: 0; -} -.cds--snippet.cds--skeleton span:nth-child(2) { - inline-size: 85%; -} -.cds--snippet.cds--skeleton span:nth-child(3) { - inline-size: 95%; -} - -.cds--snippet--single.cds--skeleton .cds--snippet-container { - padding-block-end: 0; -} - -/* stylelint-disable */ -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--snippet__icon { - fill: ButtonText; - } -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--snippet--inline:focus { - color: Highlight; - outline: 1px solid Highlight; - } -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--snippet--single, - .cds--snippet--multi { - outline: 1px solid transparent; - } -} - -/* stylelint-enable */ -.cds--text-input { - --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-md)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-lg))); - --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max)); - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - outline: 2px solid transparent; - outline-offset: -2px; - padding: 0 var(--cds-layout-density-padding-inline-local); - border: none; - background-color: var(--cds-field); - block-size: var(--cds-layout-size-height-local); - border-block-end: 1px solid var(--cds-border-strong); - color: var(--cds-text-primary, #161616); - font-family: inherit; - inline-size: 100%; - transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -.cds--text-input *, -.cds--text-input *::before, -.cds--text-input *::after { - box-sizing: inherit; -} -.cds--text-input:focus, .cds--text-input:active { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--text-input:focus, .cds--text-input:active { - outline-style: dotted; - } -} -.cds--text-input-wrapper svg[hidden] { - display: none; -} - -.cds--password-input { - padding-inline-end: 2.5rem; -} - -.cds--text-input--sm.cds--password-input { - padding-inline-end: 2rem; -} - -.cds--text-input--lg.cds--password-input { - padding-inline-end: 3rem; -} - -.cds--text-input::-moz-placeholder { - color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4)); - opacity: 1; -} - -.cds--text-input::placeholder { - color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4)); - opacity: 1; -} - -.cds--text-input--light { - background-color: var(--cds-field-02, #ffffff); -} - -.cds--text-input__field-wrapper { - position: relative; - display: flex; - inline-size: 100%; -} - -.cds--text-input__invalid-icon { - position: absolute; - fill: var(--cds-support-error, #da1e28); - inset-block-start: 50%; - inset-inline-end: 1rem; - transform: translateY(-50%); -} - -.cds--text-input__invalid-icon--warning { - fill: var(--cds-support-warning, #f1c21b); -} - -.cds--text-input__invalid-icon--warning path:first-of-type { - fill: #000000; - opacity: 1; -} - -.cds--text-input--password__visibility { - position: relative; - display: inline-flex; - overflow: visible; - align-items: center; - cursor: pointer; -} -.cds--text-input--password__visibility:focus { - outline: 1px solid var(--cds-focus, #0f62fe); -} -@media screen and (prefers-contrast) { - .cds--text-input--password__visibility:focus { - outline-style: dotted; - } -} -.cds--text-input--password__visibility:focus { - outline: 1px solid transparent; -} -.cds--text-input--password__visibility:focus svg { - outline: 1px solid var(--cds-focus, #0f62fe); -} -@media screen and (prefers-contrast) { - .cds--text-input--password__visibility:focus svg { - outline-style: dotted; - } -} -.cds--text-input--password__visibility::before, .cds--text-input--password__visibility::after, -.cds--text-input--password__visibility .cds--assistive-text, -.cds--text-input--password__visibility + .cds--assistive-text { - position: absolute; - z-index: 6000; - display: flex; - align-items: center; - opacity: 0; - pointer-events: none; -} -@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { - .cds--text-input--password__visibility::before, .cds--text-input--password__visibility::after, - .cds--text-input--password__visibility .cds--assistive-text, - .cds--text-input--password__visibility + .cds--assistive-text { - display: inline-block; - } -} -.cds--text-input--password__visibility::before, .cds--text-input--password__visibility::after { - transition: opacity 70ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -@media screen and (prefers-reduced-motion: reduce) { - .cds--text-input--password__visibility::before, .cds--text-input--password__visibility::after { - transition: none; - } -} -.cds--text-input--password__visibility.cds--tooltip--a11y::before, .cds--text-input--password__visibility.cds--tooltip--a11y::after { - transition: none; -} -.cds--text-input--password__visibility::before { - border-style: solid; - block-size: 0; - content: ""; - inline-size: 0; -} -.cds--text-input--password__visibility .cds--assistive-text, -.cds--text-input--password__visibility + .cds--assistive-text { - box-sizing: content-box; - color: inherit; - opacity: 1; - white-space: normal; - word-break: break-word; -} -.cds--text-input--password__visibility::after, -.cds--text-input--password__visibility .cds--assistive-text, -.cds--text-input--password__visibility + .cds--assistive-text { - box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3)); - z-index: 6000; - padding: 0.1875rem 1rem; - border-radius: 0.125rem; - background-color: var(--cds-background-inverse, #393939); - block-size: auto; - color: var(--cds-text-inverse, #ffffff); - font-weight: 400; - inline-size: -moz-max-content; - inline-size: max-content; - max-inline-size: 13rem; - min-inline-size: 1.5rem; - text-align: start; - transform: translateX(-50%); - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); -} -@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { - .cds--text-input--password__visibility::after, - .cds--text-input--password__visibility .cds--assistive-text, - .cds--text-input--password__visibility + .cds--assistive-text { - inline-size: auto; - } -} -@supports (-ms-accelerator: true) { - .cds--text-input--password__visibility::after, - .cds--text-input--password__visibility .cds--assistive-text, - .cds--text-input--password__visibility + .cds--assistive-text { - inline-size: auto; - } -} -@supports (-ms-ime-align: auto) { - .cds--text-input--password__visibility::after, - .cds--text-input--password__visibility .cds--assistive-text, - .cds--text-input--password__visibility + .cds--assistive-text { - inline-size: auto; - } -} -@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) { - .cds--text-input--password__visibility::after, - .cds--text-input--password__visibility .cds--assistive-text, - .cds--text-input--password__visibility + .cds--assistive-text { - border: 1px solid transparent; - } -} -.cds--text-input--password__visibility::after { - content: attr(aria-label); -} -.cds--text-input--password__visibility.cds--tooltip--a11y::after { - content: none; -} -.cds--text-input--password__visibility.cds--tooltip--visible::before, .cds--text-input--password__visibility.cds--tooltip--visible::after, .cds--text-input--password__visibility:hover::before, .cds--text-input--password__visibility:hover::after, .cds--text-input--password__visibility:focus::before, .cds--text-input--password__visibility:focus::after { - opacity: 1; -} -@keyframes cds--tooltip-fade { - from { - opacity: 0; - } - to { - opacity: 1; - } -} -.cds--text-input--password__visibility.cds--tooltip--visible .cds--assistive-text, -.cds--text-input--password__visibility.cds--tooltip--visible + .cds--assistive-text, .cds--text-input--password__visibility:hover .cds--assistive-text, -.cds--text-input--password__visibility:hover + .cds--assistive-text, .cds--text-input--password__visibility:focus .cds--assistive-text, -.cds--text-input--password__visibility:focus + .cds--assistive-text { - overflow: visible; - margin: auto; - clip: auto; -} -.cds--text-input--password__visibility.cds--tooltip--visible .cds--assistive-text, -.cds--text-input--password__visibility.cds--tooltip--visible + .cds--assistive-text, .cds--text-input--password__visibility.cds--tooltip--visible.cds--tooltip--a11y::before, .cds--text-input--password__visibility:hover .cds--assistive-text, -.cds--text-input--password__visibility:hover + .cds--assistive-text, .cds--text-input--password__visibility:hover.cds--tooltip--a11y::before, .cds--text-input--password__visibility:focus .cds--assistive-text, -.cds--text-input--password__visibility:focus + .cds--assistive-text, .cds--text-input--password__visibility:focus.cds--tooltip--a11y::before { - animation: cds--tooltip-fade 70ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -.cds--text-input--password__visibility.cds--tooltip--hidden .cds--assistive-text, .cds--text-input--password__visibility.cds--tooltip--hidden + .cds--assistive-text { - overflow: hidden; - margin: -1px; - clip: rect(0, 0, 0, 0); -} -.cds--text-input--password__visibility.cds--tooltip--hidden.cds--tooltip--a11y::before { - animation: none; - opacity: 0; -} -.cds--text-input--password__visibility .cds--assistive-text::after { - position: absolute; - display: block; - content: ""; - block-size: 0.75rem; - inline-size: 100%; - inset-inline-start: 0; - inset-block-start: -0.75rem; -} -.cds--text-input--password__visibility::before, .cds--text-input--password__visibility::after, -.cds--text-input--password__visibility .cds--assistive-text, -.cds--text-input--password__visibility + .cds--assistive-text { - inset-block-end: 0; - inset-inline-start: 50%; -} -.cds--text-input--password__visibility::before { - border-width: 0 0.25rem 0.3125rem 0.25rem; - border-color: transparent transparent var(--cds-background-inverse, #393939) transparent; - inset-block-end: -0.5rem; - transform: translate(-50%, 100%); -} -.cds--text-input--password__visibility::after, -.cds--text-input--password__visibility .cds--assistive-text, -.cds--text-input--password__visibility + .cds--assistive-text { - inset-block-end: -0.8125rem; - transform: translate(-50%, 100%); -} - -.cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger { - outline: 2px solid transparent; - outline-offset: -2px; - position: absolute; - display: flex; - align-items: center; - justify-content: center; - padding: 0; - border: 0; - background: none; - block-size: 100%; - cursor: pointer; - inline-size: 2.5rem; - inset-inline-end: 0; - min-block-size: auto; - transition: outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -.cds--toggle-password-tooltip .cds--popover { - inset-inline-start: -2.5rem; -} - -.cds--text-input--sm + .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger { - inline-size: 2rem; -} - -.cds--text-input--lg + .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger { - inline-size: 3rem; -} - -.cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg { - fill: var(--cds-icon-secondary, #525252); - transition: fill 70ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) { - .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg { - fill: ButtonText; - } -} - -.cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:focus { - outline-style: dotted; - } -} - -.cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:hover svg, -.cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:focus svg { - fill: var(--cds-icon-primary, #161616); -} - -.cds--text-input--invalid, -.cds--text-input--warning { - padding-inline-end: 2.5rem; -} - -.cds--text-input--invalid.cds--password-input { - padding-inline-end: 4rem; -} - -.cds--text-input--invalid + .cds--text-input--password__visibility__toggle { - inset-inline-end: 1rem; -} - -.cds--password-input-wrapper .cds--text-input__invalid-icon { - inset-inline-end: 2.5rem; -} - -.cds--text-input:disabled ~ .cds--text-input--password__visibility__toggle.cds--tooltip__trigger { - cursor: not-allowed; -} - -.cds--text-input:disabled ~ .cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg { - fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} -.cds--text-input:disabled ~ .cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg:hover { - fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--text-input__counter-alert { - position: absolute; - overflow: hidden; - padding: 0; - border: 0; - margin: -1px; - block-size: 1px; - clip: rect(0, 0, 0, 0); - inline-size: 1px; -} - -.cds--text-input:disabled { - outline: 2px solid transparent; - outline-offset: -2px; - background-color: var(--cds-field); - border-block-end: 1px solid transparent; - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); - cursor: not-allowed; - -webkit-text-fill-color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--text-input--light:disabled { - background-color: var(--cds-field-02, #ffffff); -} - -.cds--text-input:disabled::-moz-placeholder { - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); - opacity: 1; -} - -.cds--text-input:disabled::placeholder { - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); - opacity: 1; -} - -.cds--text-input--invalid { - outline: 2px solid var(--cds-support-error, #da1e28); - outline-offset: -2px; - box-shadow: none; -} -@media screen and (prefers-contrast) { - .cds--text-input--invalid { - outline-style: dotted; - } -} -.cds--text-input--invalid .cds--text-input--password__visibility__toggle { - inset-inline-end: 2.5rem; -} - -.cds--skeleton.cds--text-input { - position: relative; - padding: 0; - border: none; - background: var(--cds-skeleton-background, #e8e8e8); - box-shadow: none; - pointer-events: none; -} -.cds--skeleton.cds--text-input:hover, .cds--skeleton.cds--text-input:focus, .cds--skeleton.cds--text-input:active { - border: none; - cursor: default; - outline: none; -} -.cds--skeleton.cds--text-input::before { - position: absolute; - animation: 3000ms ease-in-out cds--skeleton infinite; - background: var(--cds-skeleton-element, #c6c6c6); - block-size: 100%; - content: ""; - inline-size: 100%; - will-change: transform-origin, transform, opacity; -} -@media (prefers-reduced-motion: reduce) { - .cds--skeleton.cds--text-input::before { - animation: none; - } -} - -.cds--form--fluid .cds--text-input-wrapper { - position: relative; - background: var(--cds-field); - transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -.cds--form--fluid .cds--label { - position: absolute; - z-index: 1; - display: flex; - align-items: center; - margin: 0; - block-size: 1rem; - inset-block-start: 0.8125rem; - inset-inline-start: 1rem; -} - -.cds--form--fluid .cds--form__helper-text { - display: none; -} - -.cds--form--fluid .cds--text-input { - padding: 2rem 1rem 0.8125rem; - min-block-size: 4rem; -} - -.cds--text-input__divider, -.cds--form--fluid .cds--text-input__divider { - display: none; -} - -.cds--form--fluid .cds--text-input--invalid, -.cds--form--fluid .cds--text-input--warning { - border-block-end: none; -} - -.cds--form--fluid .cds--text-input--invalid + .cds--text-input__divider, -.cds--form--fluid .cds--text-input--warning + .cds--text-input__divider { - display: block; - border-style: solid; - border-color: var(--cds-border-subtle); - margin: 0 1rem; - border-block-end: none; -} - -.cds--form--fluid .cds--text-input__invalid-icon { - inset-block-start: 5rem; -} - -.cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid, -.cds--form--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning { - outline: none; -} - -.cds--form--fluid .cds--text-input__field-wrapper--warning { - border-block-end: 1px solid var(--cds-border-strong); -} - -.cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:not(:focus) { - outline: 2px solid var(--cds-support-error, #da1e28); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:not(:focus) { - outline-style: dotted; - } -} - -.cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within, -.cds--form--fluid .cds--text-input__field-wrapper--warning:focus-within { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within, - .cds--form--fluid .cds--text-input__field-wrapper--warning:focus-within { - outline-style: dotted; - } -} - -.cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:focus, -.cds--form--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning:focus { - outline: none; -} - -.cds--text-input-wrapper.cds--text-input-wrapper--inline { - flex-flow: row wrap; -} - -.cds--text-input-wrapper .cds--label--inline { - flex: 1 1; - margin: 0.8125rem 0 0 0; - overflow-wrap: break-word; - word-break: break-word; -} - -.cds--text-input-wrapper .cds--label--inline--sm { - margin-block-start: 0.5625rem; -} - -.cds--text-input-wrapper .cds--label--inline--lg { - margin-block-start: 1.0625rem; -} - -.cds--text-input__label-helper-wrapper { - flex: 2 1; - flex-direction: column; - margin-inline-end: 1.5rem; - max-inline-size: 8rem; - overflow-wrap: break-word; -} - -.cds--text-input-wrapper .cds--form__helper-text--inline { - margin-block-start: 0.125rem; -} - -.cds--text-input__field-outer-wrapper { - display: flex; - flex: 1 1 auto; - flex-direction: column; - align-items: flex-start; - inline-size: 100%; -} - -.cds--text-input__field-outer-wrapper--inline { - flex: 8 1; - flex-direction: column; -} - -.cds--text-input-wrapper--inline .cds--form-requirement { - display: block; - overflow: visible; - font-weight: 400; - max-block-size: 12.5rem; -} - -.cds--text-input-wrapper--inline--invalid .cds--form-requirement { - color: var(--cds-text-error, #da1e28); -} - -.cds--form--fluid .cds--text-input-wrapper--readonly, -.cds--text-input-wrapper--readonly .cds--text-input { - background: transparent; - border-block-end-color: var(--cds-border-subtle); -} - -.cds--text-input__field-wrapper .cds--slug { - position: absolute; - inset-block-start: 50%; - inset-inline-end: 1rem; - transform: translateY(-50%); -} - -.cds--text-input__field-wrapper--slug .cds--text-input:not(:has(~ .cds--slug--revert)) { - background-image: linear-gradient(0deg, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%); - border-block-end-color: var(--cds-ai-border-strong, #4589ff); - padding-inline-end: 2.5rem; -} - -.cds--text-input--invalid:has(~ .cds--slug), -.cds--text-input--warning:has(~ .cds--slug) { - padding-inline-end: 4rem; -} - -.cds--text-input--invalid ~ .cds--slug, -.cds--text-input--warning ~ .cds--slug { - inset-inline-end: 2.5rem; -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--btn.cds--btn--icon-only.cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg, - .cds--btn.cds--btn--icon-only.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:hover svg { - fill: ButtonText; - } -} - -.cds--text-input__label-wrapper { - display: flex; - justify-content: space-between; - inline-size: 100%; -} -.cds--text-input__label-wrapper .cds--text-input__label-counter { - align-self: end; -} - -.cds--tag { - --cds-layout-size-height-xs: 1.125rem; - --cds-layout-size-height-sm: 1.125rem; - --cds-layout-size-height-md: 1.5rem; - --cds-layout-size-height-lg: 2rem; - --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-md)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-lg))); - font-size: var(--cds-label-01-font-size, 0.75rem); - font-weight: var(--cds-label-01-font-weight, 400); - line-height: var(--cds-label-01-line-height, 1.33333); - letter-spacing: var(--cds-label-01-letter-spacing, 0.32px); - background-color: var(--cds-tag-background-gray, #e0e0e0); - color: var(--cds-tag-color-gray, #161616); - display: inline-flex; - align-items: center; - justify-content: center; - border-radius: 1rem; - margin: 0.25rem; - cursor: default; - max-inline-size: 13rem; - min-block-size: var(--cds-layout-size-height-local); - min-inline-size: 2rem; - padding-inline: 0.5rem; - vertical-align: middle; - word-break: break-word; -} -.cds--layout--size-xs .cds--tag { - --cds-layout-size-height: var(--cds-layout-size-height-xs); -} -.cds--layout--size-sm .cds--tag { - --cds-layout-size-height: var(--cds-layout-size-height-sm); -} -.cds--layout--size-md .cds--tag { - --cds-layout-size-height: var(--cds-layout-size-height-md); -} -.cds--layout--size-lg .cds--tag { - --cds-layout-size-height: var(--cds-layout-size-height-lg); -} -.cds--tag.cds--tag--operational { - border: 1px solid var(--cds-tag-background-gray, #e0e0e0); -} -.cds--tag.cds--tag--operational:hover { - background-color: var(--cds-tag-hover-gray, #d1d1d1); -} -.cds--tag .cds--tag__close-icon:hover { - background-color: var(--cds-tag-hover-gray, #d1d1d1); -} -.cds--tag.cds--tag--lg { - padding-inline-start: 0.75rem; -} -.cds--tag:has(.cds--tag__custom-icon) { - padding-inline-start: 0.25rem; -} -.cds--tag.cds--tag--lg:not(.cds--tag--filter) { - padding-inline: 0.75rem; -} -.cds--tag.cds--tag--lg:has(.cds--tag__custom-icon) { - padding-inline-start: 0.5rem; -} -.cds--tag:not(.cds--tag--selectable) { - border: 0; -} -.cds--tag:not(:first-child) { - margin-inline-start: 0; -} - -.cds--tag--operational > span, -.cds--tag--selectable > span, -.cds--tag__label { - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.cds--tag--interactive:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: 1px; -} - -.cds--tag--filter { - padding-block-end: 0; - padding-block-start: 0; - padding-inline-end: 0; -} -.cds--tag--filter:hover { - outline: none; -} - -.cds--tag--selectable { - border: 1px solid var(--cds-border-inverse, #161616); - background-color: var(--cds-layer); - color: var(--cds-text-primary, #161616); - cursor: pointer; -} -.cds--tag--selectable:hover { - background-color: var(--cds-layer-hover); - outline: none; -} -.cds--tag--selectable:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: 1px; -} - -.cds--tag--selectable-selected { - background-color: var(--cds-layer-selected-inverse, #161616); - color: var(--cds-text-inverse, #ffffff); -} -.cds--tag--selectable-selected:hover { - background-color: var(--cds-layer-selected-inverse, #161616); -} - -.cds--tag--operational { - border: 1px solid var(--cds-tag-border-gray, #a8a8a8); - background-color: var(--cds-tag-background-gray, #e0e0e0); - color: var(--cds-tag-color-gray, #161616); - cursor: pointer; -} -.cds--tag--operational:hover { - background-color: var(--cds-tag-hover-gray, #d1d1d1); - outline: none; -} -.cds--tag--operational:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: 1px; -} - -.cds--tag--red { - background-color: var(--cds-tag-background-red, #ffd7d9); - color: var(--cds-tag-color-red, #750e13); -} -.cds--tag--red.cds--tag--operational { - border: 1px solid var(--cds-tag-border-red, #ff8389); -} -.cds--tag--red.cds--tag--operational:hover { - background-color: var(--cds-tag-hover-red, #ffc2c5); -} -.cds--tag--red .cds--tag__close-icon:hover { - background-color: var(--cds-tag-hover-red, #ffc2c5); -} - -.cds--tag--magenta { - background-color: var(--cds-tag-background-magenta, #ffd6e8); - color: var(--cds-tag-color-magenta, #740937); -} -.cds--tag--magenta.cds--tag--operational { - border: 1px solid var(--cds-tag-border-magenta, #ff7eb6); -} -.cds--tag--magenta.cds--tag--operational:hover { - background-color: var(--cds-tag-hover-magenta, #ffbdda); -} -.cds--tag--magenta .cds--tag__close-icon:hover { - background-color: var(--cds-tag-hover-magenta, #ffbdda); -} - -.cds--tag--purple { - background-color: var(--cds-tag-background-purple, #e8daff); - color: var(--cds-tag-color-purple, #491d8b); -} -.cds--tag--purple.cds--tag--operational { - border: 1px solid var(--cds-tag-border-purple, #be95ff); -} -.cds--tag--purple.cds--tag--operational:hover { - background-color: var(--cds-tag-hover-purple, #dcc7ff); -} -.cds--tag--purple .cds--tag__close-icon:hover { - background-color: var(--cds-tag-hover-purple, #dcc7ff); -} - -.cds--tag--blue { - background-color: var(--cds-tag-background-blue, #d0e2ff); - color: var(--cds-tag-color-blue, #002d9c); -} -.cds--tag--blue.cds--tag--operational { - border: 1px solid var(--cds-tag-border-blue, #78a9ff); -} -.cds--tag--blue.cds--tag--operational:hover { - background-color: var(--cds-tag-hover-blue, #b8d3ff); -} -.cds--tag--blue .cds--tag__close-icon:hover { - background-color: var(--cds-tag-hover-blue, #b8d3ff); -} - -.cds--tag--cyan { - background-color: var(--cds-tag-background-cyan, #bae6ff); - color: var(--cds-tag-color-cyan, #003a6d); -} -.cds--tag--cyan.cds--tag--operational { - border: 1px solid var(--cds-tag-border-cyan, #33b1ff); -} -.cds--tag--cyan.cds--tag--operational:hover { - background-color: var(--cds-tag-hover-cyan, #99daff); -} -.cds--tag--cyan .cds--tag__close-icon:hover { - background-color: var(--cds-tag-hover-cyan, #99daff); -} - -.cds--tag--teal { - background-color: var(--cds-tag-background-teal, #9ef0f0); - color: var(--cds-tag-color-teal, #004144); -} -.cds--tag--teal.cds--tag--operational { - border: 1px solid var(--cds-tag-border-teal, #08bdba); -} -.cds--tag--teal.cds--tag--operational:hover { - background-color: var(--cds-tag-hover-teal, #57e5e5); -} -.cds--tag--teal .cds--tag__close-icon:hover { - background-color: var(--cds-tag-hover-teal, #57e5e5); -} - -.cds--tag--green { - background-color: var(--cds-tag-background-green, #a7f0ba); - color: var(--cds-tag-color-green, #044317); -} -.cds--tag--green.cds--tag--operational { - border: 1px solid var(--cds-tag-border-green, #42be65); -} -.cds--tag--green.cds--tag--operational:hover { - background-color: var(--cds-tag-hover-green, #74e792); -} -.cds--tag--green .cds--tag__close-icon:hover { - background-color: var(--cds-tag-hover-green, #74e792); -} - -.cds--tag--gray { - background-color: var(--cds-tag-background-gray, #e0e0e0); - color: var(--cds-tag-color-gray, #161616); -} -.cds--tag--gray.cds--tag--operational { - border: 1px solid var(--cds-tag-border-gray, #a8a8a8); -} -.cds--tag--gray.cds--tag--operational:hover { - background-color: var(--cds-tag-hover-gray, #d1d1d1); -} -.cds--tag--gray .cds--tag__close-icon:hover { - background-color: var(--cds-tag-hover-gray, #d1d1d1); -} - -.cds--tag--cool-gray { - background-color: var(--cds-tag-background-cool-gray, #dde1e6); - color: var(--cds-tag-color-cool-gray, #121619); -} -.cds--tag--cool-gray.cds--tag--operational { - border: 1px solid var(--cds-tag-border-cool-gray, #a2a9b0); -} -.cds--tag--cool-gray.cds--tag--operational:hover { - background-color: var(--cds-tag-hover-cool-gray, #cdd3da); -} -.cds--tag--cool-gray .cds--tag__close-icon:hover { - background-color: var(--cds-tag-hover-cool-gray, #cdd3da); -} - -.cds--tag--warm-gray { - background-color: var(--cds-tag-background-warm-gray, #e5e0df); - color: var(--cds-tag-color-warm-gray, #171414); -} -.cds--tag--warm-gray.cds--tag--operational { - border: 1px solid var(--cds-tag-border-warm-gray, #ada8a8); -} -.cds--tag--warm-gray.cds--tag--operational:hover { - background-color: var(--cds-tag-hover-warm-gray, #d8d0cf); -} -.cds--tag--warm-gray .cds--tag__close-icon:hover { - background-color: var(--cds-tag-hover-warm-gray, #d8d0cf); -} - -.cds--tag--high-contrast:not(.cds--tag--operational) { - background-color: var(--cds-background-inverse, #393939); - color: var(--cds-text-inverse, #ffffff); -} -.cds--tag--high-contrast:not(.cds--tag--operational).cds--tag--operational { - border: 1px solid var(--cds-background-inverse, #393939); -} -.cds--tag--high-contrast:not(.cds--tag--operational).cds--tag--operational:hover { - background-color: var(--cds-background-inverse-hover, #474747); -} -.cds--tag--high-contrast:not(.cds--tag--operational) .cds--tag__close-icon:hover { - background-color: var(--cds-background-inverse-hover, #474747); -} - -.cds--tag--outline:not(.cds--tag--operational):not(span):not([disabled]) { - background-color: var(--cds-background, #ffffff); - color: var(--cds-text-primary, #161616); - outline: 1px solid var(--cds-background-inverse, #393939); - outline-offset: -1px; -} -.cds--tag--outline:not(.cds--tag--operational):not(span):not([disabled]).cds--tag--operational { - border: 1px solid var(--cds-background, #ffffff); -} -.cds--tag--outline:not(.cds--tag--operational):not(span):not([disabled]).cds--tag--operational:hover { - background-color: var(--cds-layer-hover); -} -.cds--tag--outline:not(.cds--tag--operational):not(span):not([disabled]) .cds--tag__close-icon:hover { - background-color: var(--cds-layer-hover); -} - -.cds--tag--disabled:not(.cds--tag--operational), -.cds--tag--filter.cds--tag--disabled, -.cds--tag--interactive.cds--tag--disabled { - background-color: var(--cds-layer); - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); - box-shadow: none; - outline: none; -} -.cds--tag--disabled:not(.cds--tag--operational).cds--tag--operational, -.cds--tag--filter.cds--tag--disabled.cds--tag--operational, -.cds--tag--interactive.cds--tag--disabled.cds--tag--operational { - border: 1px solid var(--cds-layer); -} -.cds--tag--disabled:not(.cds--tag--operational).cds--tag--operational:hover, -.cds--tag--filter.cds--tag--disabled.cds--tag--operational:hover, -.cds--tag--interactive.cds--tag--disabled.cds--tag--operational:hover { - background-color: var(--cds-layer); -} -.cds--tag--disabled:not(.cds--tag--operational) .cds--tag__close-icon:hover, -.cds--tag--filter.cds--tag--disabled .cds--tag__close-icon:hover, -.cds--tag--interactive.cds--tag--disabled .cds--tag__close-icon:hover { - background-color: var(--cds-layer); -} -.cds--tag--disabled:not(.cds--tag--operational):hover, -.cds--tag--filter.cds--tag--disabled:hover, -.cds--tag--interactive.cds--tag--disabled:hover { - cursor: not-allowed; -} - -.cds--tag--selectable.cds--tag--disabled, -.cds--tag--operational.cds--tag--disabled { - border: 1px solid var(--cds-border-disabled, #c6c6c6); - background-color: var(--cds-layer); - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); -} -.cds--tag--selectable.cds--tag--disabled:hover, -.cds--tag--operational.cds--tag--disabled:hover { - background-color: var(--cds-layer); - cursor: not-allowed; -} - -.cds--tag--interactive { - transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9); -} - -.cds--tag__close-icon { - display: flex; - flex-shrink: 0; - align-items: center; - justify-content: center; - padding: 0; - border: 0; - border-radius: 50%; - margin: 0 0 0 0.125rem; - background-color: transparent; - block-size: var(--cds-layout-size-height-local); - color: currentColor; - cursor: pointer; - inline-size: var(--cds-layout-size-height-local); - transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), box-shadow 70ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -.cds--tag__close-icon svg { - fill: currentColor; -} - -.cds--tag__custom-icon { - flex-shrink: 0; - padding: 0; - border: 0; - background-color: transparent; - block-size: 1rem; - color: currentColor; - inline-size: 1rem; - margin-inline-end: 0.25rem; - outline: none; -} -.cds--tag__custom-icon svg { - fill: currentColor; -} - -.cds--tag--disabled .cds--tag__close-icon { - cursor: not-allowed; -} - -.cds--tag__close-icon:focus { - z-index: 99999; - border-radius: 50%; - box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe); - outline: none; -} - -.cds--tag--high-contrast .cds--tag__close-icon:focus { - box-shadow: inset 0 0 0 1px var(--cds-focus-inverse, #ffffff); -} - -.cds--tag--filter.cds--tag--disabled .cds--tag__close-icon:hover { - background-color: transparent; -} - -.cds--tag--filter.cds--tag--disabled svg { - fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--tag--sm.cds--tag--filter { - padding-inline-end: 0; -} - -.cds--tag--sm .cds--tag__close-icon { - margin-inline-start: 0.3125rem; -} - -.cds--tag.cds--skeleton { - position: relative; - padding: 0; - border: none; - background: var(--cds-skeleton-background, #e8e8e8); - box-shadow: none; - pointer-events: none; - background-color: var(--cds-skeleton-background, #e8e8e8); - color: var(--cds-text-primary, #161616); - overflow: hidden; - inline-size: 3.75rem; -} -.cds--tag.cds--skeleton:hover, .cds--tag.cds--skeleton:focus, .cds--tag.cds--skeleton:active { - border: none; - cursor: default; - outline: none; -} -.cds--tag.cds--skeleton::before { - position: absolute; - animation: 3000ms ease-in-out cds--skeleton infinite; - background: var(--cds-skeleton-element, #c6c6c6); - block-size: 100%; - content: ""; - inline-size: 100%; - will-change: transform-origin, transform, opacity; -} -@media (prefers-reduced-motion: reduce) { - .cds--tag.cds--skeleton::before { - animation: none; - } -} -.cds--tag.cds--skeleton.cds--tag--operational { - border: 1px solid var(--cds-skeleton-background, #e8e8e8); -} -.cds--tag.cds--skeleton.cds--tag--operational:hover { - background-color: var(--cds-skeleton-background, #e8e8e8); -} -.cds--tag.cds--skeleton .cds--tag__close-icon:hover { - background-color: var(--cds-skeleton-background, #e8e8e8); -} -@media not all and (min-resolution >= 0.001dpcm) { - @supports (-webkit-appearance: none) and (stroke-color: transparent) { - .cds--tag.cds--skeleton { - transform: translateZ(0); - } - } -} - -.cds--tag .cds--slug .cds--slug__button--inline { - color: currentColor; - margin-inline-start: 0.0625rem; -} - -.cds--tag .cds--slug .cds--slug__button--inline .cds--slug__text::before { - background-color: currentColor; -} - -.cds--tag .cds--slug .cds--slug__button--inline:hover { - border-color: currentColor; -} - -/* stylelint-disable */ -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--tag { - outline: 1px solid transparent; - } -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--tag__close-icon svg, - .cds--tag__custom-icon svg { - fill: ButtonText; - } -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--tag__close-icon:focus { - color: Highlight; - outline: 1px solid Highlight; - } -} - -.cds--tag-label-tooltip { - max-inline-size: -webkit-fill-available; -} - -.cds--tag__custom-icon + .cds--tag-label-tooltip { - max-inline-size: 11rem; -} - -.cds--tag--filter .cds--tag__custom-icon + .cds--tag-label-tooltip { - max-inline-size: 9.875rem; -} - -/* stylelint-enable */ -.cds--interactive--tag-children { - display: inline-flex; - max-inline-size: 12.5rem; - place-items: center; -} - -.cds--tag--filter .cds--tag__custom-icon + span > .cds--interactive--tag-children { - max-inline-size: 11.5rem; -} - -.cds--tag .cds--definition-term { - border-block-end: none; - cursor: default; - max-inline-size: 12rem; -} - -.cds--tag .cds--tag__custom-icon + span > .cds--definition-term { - max-inline-size: 11rem; -} - -.cds--tag > .cds--popover-container { - display: flex; -} - -.cds--toggletip-button:has(.cds--tag--operational.cds--tag--disabled) { - pointer-events: none; -} - -.cds--list-box__wrapper--inline { - display: inline-grid; - align-items: center; - grid-gap: 0.25rem; - grid-template: auto auto/auto auto; -} -.cds--list-box__wrapper--inline .cds--label { - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); -} -.cds--list-box__wrapper--inline .cds--label, -.cds--list-box__wrapper--inline .cds--form__helper-text, -.cds--list-box__wrapper--inline .cds--form-requirement { - margin: 0; -} -.cds--list-box__wrapper--inline .cds--form__helper-text { - max-inline-size: none; -} -.cds--list-box__wrapper--inline .cds--form-requirement { - grid-column: 2; -} - -.cds--list-box { - position: relative; - border: none; - background-color: var(--cds-field); - block-size: 2.5rem; - border-block-end: 1px solid var(--cds-border-strong); - color: var(--cds-text-primary, #161616); - cursor: pointer; - inline-size: 100%; - max-block-size: 2.5rem; - transition: all 70ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -.cds--list-box html { - font-size: 100%; -} -.cds--list-box body { - font-weight: 400; - font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; -} -.cds--list-box code { - font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace; -} -.cds--list-box strong { - font-weight: 600; -} -.cds--list-box:hover { - background-color: var(--cds-field-hover); -} - -.cds--list-box--lg { - block-size: 3rem; - max-block-size: 3rem; -} - -.cds--list-box--sm { - block-size: 2rem; - max-block-size: 2rem; -} - -.cds--list-box--expanded { - border-block-end-color: var(--cds-border-subtle-01, #c6c6c6); -} - -.cds--layer-two .cds--list-box--expanded { - border-block-end-color: var(--cds-border-subtle-02, #e0e0e0); -} - -.cds--layer-three .cds--list-box--expanded { - border-block-end-color: var(--cds-border-subtle-03, #c6c6c6); -} - -.cds--list-box--expanded:hover { - background-color: var(--cds-field); -} - -.cds--list-box--expanded:hover.cds--list-box--light:hover { - background-color: var(--cds-field-02, #ffffff); -} - -.cds--list-box .cds--text-input { - block-size: 100%; - min-inline-size: 0; -} - -.cds--list-box__invalid-icon { - position: absolute; - fill: var(--cds-support-error, #da1e28); - inset-block-start: 50%; - inset-inline-end: 2.5rem; - transform: translateY(-50%); -} - -.cds--list-box__invalid-icon--warning { - fill: var(--cds-support-warning, #f1c21b); -} - -.cds--list-box__invalid-icon--warning path[fill] { - fill: #000000; - opacity: 1; -} - -.cds--list-box[data-invalid] .cds--list-box__field, -.cds--list-box.cds--list-box--warning .cds--list-box__field { - border-block-end: 0; - padding-inline-end: 4rem; -} - -.cds--list-box[data-invalid].cds--list-box--inline .cds--list-box__field, -.cds--list-box.cds--list-box--warning.cds--list-box--inline .cds--list-box__field { - padding-inline-end: 3.5rem; -} - -.cds--list-box--light { - background-color: var(--cds-field-02, #ffffff); -} -.cds--list-box--light:hover { - background-color: var(--cds-field-hover); -} - -.cds--list-box--light .cds--list-box__menu { - background: var(--cds-layer); -} - -.cds--list-box--light .cds--list-box__menu-item__option { - border-block-start-color: var(--cds-border-subtle); -} - -.cds--list-box--light.cds--list-box--expanded { - border-block-end-color: transparent; -} - -.cds--list-box--disabled:hover { - background-color: var(--cds-field); -} - -.cds--list-box--light.cds--list-box--disabled { - background-color: var(--cds-field-02, #ffffff); -} - -.cds--list-box--disabled, -.cds--list-box--disabled .cds--list-box__field, -.cds--list-box--disabled .cds--list-box__field:focus { - border-block-end-color: transparent; - outline: none; -} - -.cds--list-box--disabled .cds--list-box__label, -.cds--list-box--disabled.cds--list-box--inline .cds--list-box__label { - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--list-box--disabled .cds--list-box__menu-icon > svg, -.cds--list-box--disabled .cds--list-box__selection > svg { - fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--list-box--disabled, -.cds--list-box--disabled .cds--list-box__field, -.cds--list-box--disabled .cds--list-box__menu-icon { - cursor: not-allowed; -} - -.cds--list-box--disabled .cds--list-box__menu-item, -.cds--list-box--disabled .cds--list-box__menu-item:hover, -.cds--list-box--disabled .cds--list-box__menu-item--highlighted { - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); - text-decoration: none; -} - -.cds--list-box--disabled .cds--list-box__selection:hover { - cursor: not-allowed; -} - -.cds--list-box--disabled.cds--list-box[data-invalid] .cds--list-box__field { - padding-inline-end: 3rem; -} - -.cds--list-box--disabled.cds--list-box[data-invalid].cds--list-box--inline .cds--list-box__field { - padding-inline-end: 2rem; -} - -.cds--list-box.cds--list-box--inline { - border-width: 0; - background-color: transparent; -} -.cds--list-box.cds--list-box--inline:hover { - background-color: var(--cds-layer-hover); -} - -.cds--list-box.cds--list-box--inline.cds--list-box--expanded { - border-block-end-width: 0; -} - -.cds--list-box.cds--list-box--inline.cds--list-box--expanded .cds--list-box__field[aria-expanded=true] { - border-width: 0; -} - -.cds--list-box.cds--list-box--inline.cds--list-box--expanded:hover, -.cds--list-box.cds--list-box--inline.cds--list-box--disabled:hover { - background-color: transparent; -} - -.cds--list-box.cds--list-box--inline .cds--list-box__field { - padding: 0 2rem 0 0.5rem; -} - -.cds--list-box.cds--list-box--inline .cds--list-box__menu-icon { - inset-inline-end: 0.5rem; -} - -.cds--list-box.cds--list-box--inline .cds--list-box__invalid-icon { - inset-inline-end: 2rem; -} - -.cds--list-box--inline .cds--list-box__label { - color: var(--cds-text-primary, #161616); -} - -.cds--list-box--inline .cds--list-box__field { - block-size: 100%; -} - -.cds--dropdown--inline .cds--list-box__field { - max-inline-size: 30rem; -} - -.cds--dropdown--inline .cds--list-box__menu { - max-inline-size: 30rem; - min-inline-size: 18rem; -} - -.cds--list-box__field { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: inline-block; - padding: 0; - border: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: none; - cursor: pointer; - text-align: start; - inline-size: 100%; - position: relative; - display: inline-flex; - overflow: hidden; - align-items: center; - block-size: calc(100% + 1px); - cursor: pointer; - outline: none; - padding-block: 0; - padding-inline-end: 3rem; - padding-inline-start: 1rem; - text-overflow: ellipsis; - vertical-align: top; - white-space: nowrap; -} -.cds--list-box__field *, -.cds--list-box__field *::before, -.cds--list-box__field *::after { - box-sizing: inherit; -} -.cds--list-box__field::-moz-focus-inner { - border: 0; -} - -.cds--list-box__field:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--list-box__field:focus { - outline-style: dotted; - } -} - -.cds--list-box__field[disabled] { - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); - outline: none; -} - -.cds--list-box__field .cds--text-input { - padding-inline-end: 5rem; -} - -.cds--list-box[data-invalid] .cds--list-box__field .cds--text-input, -.cds--list-box--warning .cds--list-box__field .cds--text-input { - padding-inline-end: 6.5625rem; -} - -.cds--list-box[data-invalid] .cds--list-box__field .cds--text-input + .cds--list-box__invalid-icon, -.cds--list-box--warning .cds--list-box__field .cds--text-input + .cds--list-box__invalid-icon { - inset-inline-end: 5.125rem; -} - -.cds--list-box__field .cds--text-input--empty { - padding-inline-end: 3rem; -} - -.cds--list-box[data-invalid] .cds--list-box__field .cds--text-input--empty, -.cds--list-box--warning .cds--list-box__field .cds--text-input--empty { - padding-inline-end: 4rem; -} - -.cds--list-box[data-invalid] .cds--list-box__field .cds--text-input--empty + .cds--list-box__invalid-icon, -.cds--list-box--warning .cds--list-box__field .cds--text-input--empty + .cds--list-box__invalid-icon { - inset-inline-end: 2.5rem; -} - -.cds--list-box__label { - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - overflow: hidden; - color: var(--cds-text-primary, #161616); - text-overflow: ellipsis; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - white-space: nowrap; -} - -.cds--list-box__menu-icon { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: inline-block; - padding: 0; - border: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: none; - cursor: pointer; - text-align: start; - position: absolute; - display: flex; - align-items: center; - justify-content: center; - block-size: 1.5rem; - cursor: pointer; - inline-size: 1.5rem; - inset-inline-end: 0.75rem; - outline: none; - transition: transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -.cds--list-box__menu-icon *, -.cds--list-box__menu-icon *::before, -.cds--list-box__menu-icon *::after { - box-sizing: inherit; -} -.cds--list-box__menu-icon::-moz-focus-inner { - border: 0; -} - -.cds--list-box__menu-icon > svg { - fill: var(--cds-icon-primary, #161616); -} - -.cds--list-box__menu-icon--open { - justify-content: center; - inline-size: 1.5rem; - transform: rotate(180deg); -} - -.cds--list-box__selection { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: inline-block; - padding: 0; - border: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: none; - cursor: pointer; - text-align: start; - position: absolute; - display: flex; - align-items: center; - justify-content: center; - block-size: 1.5rem; - cursor: pointer; - inline-size: 1.5rem; - inset-block-start: 50%; - /* to preserve .5rem space between icons according to spec top/transform used to center the combobox clear selection icon in IE11 */ - inset-inline-end: 2.8125rem; - transform: translateY(-50%); - transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9); - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} -.cds--list-box__selection *, -.cds--list-box__selection *::before, -.cds--list-box__selection *::after { - box-sizing: inherit; -} -.cds--list-box__selection::-moz-focus-inner { - border: 0; -} -.cds--list-box__selection:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--list-box__selection:focus { - outline-style: dotted; - } -} -.cds--list-box__selection:focus:hover { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--list-box__selection:focus:hover { - outline-style: dotted; - } -} - -.cds--list-box__selection > svg { - fill: var(--cds-icon-primary, #161616); -} - -.cds--list-box--disabled .cds--list-box__selection:focus { - outline: none; -} - -.cds--list-box__selection--multi { - font-size: var(--cds-label-01-font-size, 0.75rem); - font-weight: var(--cds-label-01-font-weight, 400); - line-height: var(--cds-label-01-line-height, 1.33333); - letter-spacing: var(--cds-label-01-letter-spacing, 0.32px); - position: static; - display: flex; - align-items: center; - justify-content: space-between; - padding: 0.5rem; - border-radius: 0.75rem; - background-color: var(--cds-background-inverse, #393939); - block-size: 1.5rem; - color: var(--cds-text-inverse, #ffffff); - inline-size: auto; - inset-block-start: auto; - line-height: 0; - margin-inline-end: 0.625rem; - padding-inline-end: 0.125rem; - transform: none; -} - -.cds--list-box__selection--multi > svg { - padding: 0.125rem; - block-size: 1.25rem; - fill: var(--cds-icon-inverse, #ffffff); - inline-size: 1.25rem; - margin-inline-start: 0.25rem; -} -.cds--list-box__selection--multi > svg:hover { - border-radius: 50%; - background-color: var(--cds-button-secondary-hover, #474747); -} - -.cds--list-box--disabled .cds--list-box__selection--multi { - background-color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); - color: var(--cds-layer); -} -.cds--list-box--disabled .cds--list-box__selection--multi.cds--tag--operational { - border: 1px solid var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); -} -.cds--list-box--disabled .cds--list-box__selection--multi.cds--tag--operational:hover { - background-color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); -} -.cds--list-box--disabled .cds--list-box__selection--multi .cds--tag__close-icon:hover { - background-color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); -} -.cds--list-box--disabled .cds--list-box__selection--multi > svg { - fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} -.cds--list-box--disabled .cds--list-box__selection--multi > svg:hover { - background-color: initial; -} - -.cds--list-box__selection--multi:hover { - outline: none; -} - -.cds--list-box__menu { - box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3)); - position: absolute; - z-index: 9100; - display: none; - background-color: var(--cds-layer); - inline-size: 100%; - inset-inline-end: 0; - inset-inline-start: 0; - overflow-y: auto; - transition: max-height 110ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -.cds--list-box__menu:focus { - outline: 1px solid var(--cds-focus, #0f62fe); -} -@media screen and (prefers-contrast) { - .cds--list-box__menu:focus { - outline-style: dotted; - } -} - -.cds--list-box .cds--list-box__field[aria-expanded=false] .cds--list-box__menu { - display: none; - max-block-size: 0; - visibility: hidden; -} - -.cds--list-box--expanded .cds--list-box__menu { - display: block; - max-block-size: 13.75rem; -} - -.cds--list-box--expanded.cds--list-box--lg .cds--list-box__menu { - max-block-size: 16.5rem; -} - -.cds--list-box--expanded.cds--list-box--sm .cds--list-box__menu { - max-block-size: 11rem; -} - -.cds--list-box__menu-item { - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - position: relative; - block-size: 2.5rem; - color: var(--cds-text-secondary, #525252); - cursor: pointer; - transition: background 70ms cubic-bezier(0.2, 0, 0.38, 0.9); - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} -.cds--list-box__menu-item:hover { - background-color: var(--cds-layer-hover); -} -.cds--list-box__menu-item:active { - background-color: var(--cds-layer-selected); -} - -.cds--list-box--light .cds--list-box__menu-item:hover { - background-color: var(--cds-layer-hover); -} - -.cds--list-box--sm .cds--list-box__menu-item { - block-size: 2rem; -} - -.cds--list-box--lg .cds--list-box__menu-item { - block-size: 3rem; -} - -.cds--list-box--disabled .cds--list-box__menu-item:hover { - background-color: transparent; -} - -.cds--list-box--light .cds--list-box__menu-item:active { - background-color: var(--cds-layer-selected); -} - -.cds--list-box--disabled .cds--list-box__menu-item__option:hover { - border-block-start-color: var(--cds-border-subtle-01, #c6c6c6); -} - -.cds--layer-two .cds--list-box--disabled .cds--list-box__menu-item__option:hover { - border-block-start-color: var(--cds-border-subtle-02, #e0e0e0); -} - -.cds--layer-three .cds--list-box--disabled .cds--list-box__menu-item__option:hover { - border-block-start-color: var(--cds-border-subtle-03, #c6c6c6); -} - -.cds--list-box__menu-item:first-of-type .cds--list-box__menu-item__option { - border-block-start-color: transparent; -} - -.cds--list-box__menu-item:hover .cds--list-box__menu-item__option { - color: var(--cds-text-primary, #161616); -} - -.cds--list-box--disabled .cds--list-box__menu-item:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option { - border-block-start-color: var(--cds-border-subtle-01, #c6c6c6); -} - -.cds--layer-two .cds--list-box--disabled .cds--list-box__menu-item:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option { - border-block-start-color: var(--cds-border-subtle-02, #e0e0e0); -} - -.cds--layer-three .cds--list-box--disabled .cds--list-box__menu-item:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option { - border-block-start-color: var(--cds-border-subtle-03, #c6c6c6); -} - -.cds--layer-two .cds--list-box__menu-item__option { - border-block-start-color: var(--cds-border-subtle-02, #e0e0e0); -} - -.cds--layer-three .cds--list-box__menu-item__option { - border-block-start-color: var(--cds-border-subtle-03, #c6c6c6); -} - -.cds--list-box__menu-item__option { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - outline: 2px solid transparent; - outline-offset: -2px; - display: block; - overflow: hidden; - padding: 0.6875rem 0; - margin: 0 1rem; - block-size: 2.5rem; - border-block-end: 1px solid transparent; - border-block-start: 1px solid transparent; - border-block-start-color: var(--cds-border-subtle-01, #c6c6c6); - color: var(--cds-text-secondary, #525252); - font-weight: normal; - line-height: 1rem; - padding-inline-end: 1.5rem; - text-decoration: none; - text-overflow: ellipsis; - transition: border-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), color 70ms cubic-bezier(0.2, 0, 0.38, 0.9); - white-space: nowrap; -} -.cds--list-box__menu-item__option *, -.cds--list-box__menu-item__option *::before, -.cds--list-box__menu-item__option *::after { - box-sizing: inherit; -} -.cds--list-box__menu-item__option:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; - padding: 0.6875rem 1rem; - border-color: transparent; - margin: 0; -} -@media screen and (prefers-contrast) { - .cds--list-box__menu-item__option:focus { - outline-style: dotted; - } -} -.cds--list-box__menu-item__option:hover { - border-color: transparent; - color: var(--cds-text-primary, #161616); -} - -.cds--list-box--sm .cds--list-box__menu-item__option { - block-size: 2rem; - padding-block-end: 0.4375rem; - padding-block-start: 0.4375rem; -} - -.cds--list-box--lg .cds--list-box__menu-item__option { - block-size: 3rem; - padding-block-end: 0.9375rem; - padding-block-start: 0.9375rem; -} - -.cds--list-box--disabled .cds--list-box__menu-item:hover .cds--list-box__menu-item__option, -.cds--list-box--disabled .cds--list-box__menu-item__option { - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--list-box__menu-item[disabled], -.cds--list-box__menu-item[disabled] *, -.cds--list-box__menu-item[disabled] .cds--list-box__menu-item__option, -.cds--list-box__menu-item[disabled]:hover { - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); - cursor: not-allowed; - outline: none; -} - -.cds--list-box__menu-item[disabled]:hover { - background-color: revert; -} - -.cds--list-box__menu-item[disabled] .cds--checkbox-label::before { - border-color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--list-box__menu-item[disabled] .cds--list-box__menu-item__option, -.cds--list-box__menu-item[disabled]:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option { - border-block-start-color: var(--cds-border-subtle-01, #c6c6c6); -} - -.cds--layer-two .cds--list-box__menu-item[disabled] .cds--list-box__menu-item__option, -.cds--layer-two .cds--list-box__menu-item[disabled]:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option { - border-block-start-color: var(--cds-border-subtle-02, #e0e0e0); -} - -.cds--layer-three .cds--list-box__menu-item[disabled] .cds--list-box__menu-item__option, -.cds--layer-three .cds--list-box__menu-item[disabled]:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option { - border-block-start-color: var(--cds-border-subtle-03, #c6c6c6); -} - -.cds--list-box__menu-item--active + .cds--list-box__menu-item[disabled] .cds--list-box__menu-item__option, -.cds--list-box__menu-item:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option { - border-block-start-color: transparent; -} - -.cds--list-box.cds--list-box--inline .cds--list-box__menu-item__option { - margin: 0 0.5rem; -} -.cds--list-box.cds--list-box--inline .cds--list-box__menu-item__option:focus { - margin: 0; - padding-inline-end: 0.5rem; - padding-inline-start: 0.5rem; -} - -.cds--list-box__menu-item--highlighted { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; - color: var(--cds-text-primary, #161616); -} -@media screen and (prefers-contrast) { - .cds--list-box__menu-item--highlighted { - outline-style: dotted; - } -} - -.cds--list-box__menu-item--highlighted .cds--list-box__menu-item__option, -.cds--list-box__menu-item--highlighted + .cds--list-box__menu-item .cds--list-box__menu-item__option { - border-block-start-color: transparent; -} - -.cds--list-box__menu-item--highlighted .cds--list-box__menu-item__option { - color: var(--cds-text-primary, #161616); -} - -.cds--list-box__menu-item--active { - background-color: var(--cds-layer-selected); - border-block-end-color: var(--cds-layer-selected); - color: var(--cds-text-primary, #161616); -} - -.cds--list-box--light .cds--list-box__menu-item--active { - background-color: var(--cds-layer-selected); - border-block-end-color: var(--cds-layer-selected); -} - -.cds--list-box__menu-item--active:hover { - background-color: var(--cds-layer-selected-hover); - border-block-end-color: var(--cds-layer-selected-hover); -} - -.cds--list-box__menu-item--active .cds--list-box__menu-item__option { - color: var(--cds-text-primary, #161616); -} - -.cds--list-box__menu-item--active + .cds--list-box__menu-item > .cds--list-box__menu-item__option { - border-block-start-color: transparent; -} - -.cds--list-box__menu-item__selected-icon { - position: absolute; - display: none; - fill: var(--cds-icon-primary, #161616); - inset-block-start: 50%; - inset-inline-end: 1rem; - transform: translateY(-50%); -} - -.cds--list-box--inline .cds--list-box__menu-item__selected-icon { - inset-inline-end: 0.5rem; -} - -.cds--list-box__menu-item--active .cds--list-box__menu-item__selected-icon { - display: block; -} - -.cds--list-box__menu-item .cds--checkbox-label { - inline-size: 100%; -} - -.cds--list-box__menu-item .cds--checkbox-label-text { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.cds--list-box--up .cds--list-box__menu { - inset-block-end: 2.5rem; -} - -.cds--list-box--up.cds--dropdown--sm .cds--list-box__menu, -.cds--list-box--up.cds--list-box--sm .cds--list-box__menu, -.cds--list-box--up .cds--list-box--sm .cds--list-box__menu { - inset-block-end: 2rem; -} - -.cds--list-box--up.cds--dropdown--lg .cds--list-box__menu, -.cds--list-box--up.cds--list-box--lg .cds--list-box__menu, -.cds--list-box--up .cds--list-box--lg .cds--list-box__menu { - inset-block-end: 3rem; -} - -.cds--list-box input[role=combobox], -.cds--list-box input[type=text] { - background-color: inherit; - min-inline-size: 0; - text-overflow: ellipsis; -} - -.cds--list-box__wrapper--slug .cds--slug { - position: absolute; - inset-block-start: 50%; - inset-inline-end: calc(2.5rem + 9px); - margin-block-start: 0.03125rem; - transform: translateY(-50%); -} - -.cds--list-box__wrapper--slug .cds--slug::after, -.cds--list-box__wrapper--slug .cds--slug::before { - position: absolute; - background-color: var(--cds-border-subtle-01, #c6c6c6); - block-size: 1rem; - content: ""; - inline-size: 0.0625rem; -} - -.cds--list-box__wrapper--slug .cds--slug::before { - display: none; - inset-inline-start: -0.5625rem; -} - -.cds--list-box__wrapper--slug .cds--slug::after { - display: block; - inset-inline-end: -0.5625rem; -} - -.cds--list-box__wrapper--slug .cds--list-box:not(:has(.cds--slug--revert)) { - background-image: linear-gradient(0deg, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%); - border-block-end-color: var(--cds-ai-border-strong, #4589ff); -} - -.cds--list-box__wrapper--slug .cds--list-box input[role=combobox] { - border-block-end-color: transparent; -} - -.cds--list-box__wrapper--slug .cds--list-box__field, -.cds--list-box__wrapper--slug .cds--text-input--empty { - padding-inline-end: 4rem; -} - -.cds--list-box__wrapper--slug .cds--text-input:not(.cds--text-input--empty) { - padding-inline-end: 6rem; -} - -.cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--text-input--empty, -.cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--list-box__field, -.cds--list-box__wrapper--slug .cds--list-box--warning .cds--text-input--empty, -.cds--list-box__wrapper--slug .cds--list-box--warning .cds--list-box__field { - padding-inline-end: 6rem; -} - -.cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--text-input:not(.cds--text-input--empty), -.cds--list-box__wrapper--slug .cds--list-box--warning .cds--text-input:not(.cds--text-input--empty) { - padding-inline-end: 8.8125rem; -} - -.cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--text-input--empty + .cds--list-box__invalid-icon, -.cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--list-box__invalid-icon, -.cds--list-box__wrapper--slug .cds--list-box--warning .cds--list-box__invalid-icon.cds--list-box__invalid-icon--warning { - inset-inline-end: 5.1875rem; -} - -.cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--slug::before, -.cds--list-box__wrapper--slug .cds--list-box--warning .cds--slug::before { - display: block; -} - -.cds--list-box__wrapper--slug .cds--list-box__field:has(.cds--list-box__selection) ~ .cds--slug, -.cds--list-box__wrapper--slug .cds--list-box--warning .cds--list-box__field:has(.cds--list-box__selection) ~ .cds--slug { - inset-inline-end: calc(4rem + 18px); -} - -.cds--list-box__wrapper--slug .cds--list-box--invalid .cds--list-box__field:has(.cds--list-box__selection) .cds--list-box__invalid-icon, -.cds--list-box__wrapper--slug .cds--list-box--warning .cds--list-box__field:has(.cds--list-box__selection) .cds--list-box__invalid-icon { - inset-inline-end: 7.25rem; -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--list-box__field, - .cds--list-box__menu, - .cds--multi-select .cds--tag--filter { - outline: 1px solid transparent; - } -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--list-box__field:focus, - .cds--multi-select .cds--tag__close-icon:focus, - .cds--list-box__menu-item--highlighted .cds--list-box__menu-item__option { - color: Highlight; - outline: 1px solid Highlight; - } -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--list-box__menu-icon > svg, - .cds--list-box__selection > svg, - .cds--list-box__selection--multi > svg { - fill: ButtonText; - } -} - -.cds--list-box__field:has(.cds--list-box__menu-icon) .cds--list-box__selection::after { - position: absolute; - background-color: var(--cds-border-subtle-01, #c6c6c6); - block-size: 1rem; - content: ""; - inline-size: 0.0625rem; - margin-inline-start: 2.0625rem; -} - -.cds--list-box--warning .cds--list-box__field:has(.cds--list-box__menu-icon) .cds--list-box__selection::before, -.cds--list-box--invalid[data-invalid] .cds--list-box__field:has(.cds--list-box__menu-icon) .cds--list-box__selection::before { - position: absolute; - background-color: var(--cds-border-subtle-01, #c6c6c6); - block-size: 1rem; - content: ""; - inline-size: 0.0625rem; - margin-inline-end: 2.0625rem; -} - -.cds--list-box__wrapper--slug:has(.cds--multi-select) .cds--list-box__menu-icon { - inset-inline-end: 0.75rem; -} - -.cds--list-box__wrapper--slug:has(.cds--dropdown) .cds--list-box__menu-icon { - inset-inline-end: 0.75rem; -} - -.cds--combo-box:hover { - background-color: var(--cds-field); -} - -.cds--combo-box.cds--list-box--light:hover { - background-color: var(--cds-field-02, #ffffff); -} - -.cds--combo-box .cds--text-input::-ms-clear { - display: none; -} - -.cds--combo-box.cds--list-box--expanded .cds--text-input { - border-block-end-color: var(--cds-border-subtle); -} - -.cds--combo-box--input--focus.cds--text-input { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--combo-box--input--focus.cds--text-input { - outline-style: dotted; - } -} - -.cds--list-box--expanded .cds--combo-box--input--focus.cds--text-input { - outline-offset: -0.0625rem; - outline-width: 0.0625rem; -} - -.cds--combo-box .cds--list-box__field, -.cds--combo-box.cds--list-box[data-invalid] .cds--list-box__field, -.cds--combo-box.cds--list-box--warning .cds--list-box__field, -.cds--combo-box.cds--list-box--disabled.cds--list-box[data-invalid] .cds--list-box__field, -.cds--combo-box.cds--list-box--disabled.cds--list-box--warning .cds--list-box__field { - padding: 0; -} - -.cds--combo-box--readonly, -.cds--combo-box--readonly:hover { - background-color: transparent; -} - -.cds--combo-box--readonly .cds--text-input { - border-block-end-color: var(--cds-border-subtle); -} - -.cds--combo-box--readonly .cds--list-box__menu-icon, -.cds--combo-box--readonly .cds--list-box__selection { - cursor: default; -} - -.cds--combo-box--readonly .cds--list-box__menu-icon svg, -.cds--combo-box--readonly .cds--list-box__selection svg { - fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--menu { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3)); - position: fixed; - z-index: 9000; - padding: 0.25rem 0; - background-color: var(--cds-layer); - max-inline-size: 18rem; - min-inline-size: 10rem; - opacity: 0; - overflow-y: auto; - visibility: hidden; -} -.cds--menu *, -.cds--menu *::before, -.cds--menu *::after { - box-sizing: inherit; -} - -.cds--menu--with-icons { - min-inline-size: 12rem; -} - -.cds--menu--open { - visibility: visible; -} -.cds--menu--open:focus { - outline: 1px solid var(--cds-focus, #0f62fe); -} -@media screen and (prefers-contrast) { - .cds--menu--open:focus { - outline-style: dotted; - } -} - -.cds--menu:not(.cds--menu--open) .cds--menu--open { - visibility: hidden; -} - -.cds--menu--shown { - opacity: 1; -} - -.cds--menu-item { - font-size: var(--cds-body-short-01-font-size, 0.875rem); - font-weight: var(--cds-body-short-01-font-weight, 400); - line-height: var(--cds-body-short-01-line-height, 1.28572); - letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px); - display: grid; - align-items: center; - block-size: 2rem; - color: var(--cds-text-secondary, #525252); - -moz-column-gap: 0.5rem; - column-gap: 0.5rem; - cursor: pointer; - grid-template-columns: 1fr max-content; - padding-inline: 1rem; - transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -.cds--menu-item:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--menu-item:focus { - outline-style: dotted; - } -} - -.cds--menu-item:hover { - background-color: var(--cds-layer-hover); - color: var(--cds-text-primary, #161616); -} - -.cds--menu--xs .cds--menu-item { - block-size: 1.5rem; -} - -.cds--menu--sm .cds--menu-item { - block-size: 2rem; -} - -.cds--menu--md .cds--menu-item { - block-size: 2.5rem; -} - -.cds--menu--lg .cds--menu-item { - block-size: 3rem; -} - -.cds--menu-item__icon { - display: none; -} - -.cds--menu--with-icons .cds--menu-item__icon { - display: flex; -} - -.cds--menu-item__label { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.cds--menu-item__shortcut { - display: flex; -} - -.cds--menu-item-group > ul, -.cds--menu-item-radio-group > ul { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; -} -.cds--menu-item-group > ul *, -.cds--menu-item-group > ul *::before, -.cds--menu-item-group > ul *::after, -.cds--menu-item-radio-group > ul *, -.cds--menu-item-radio-group > ul *::before, -.cds--menu-item-radio-group > ul *::after { - box-sizing: inherit; -} - -.cds--menu--with-icons > .cds--menu-item, -.cds--menu--with-icons > .cds--menu-item-group > ul > .cds--menu-item, -.cds--menu--with-icons > .cds--menu-item-radio-group > ul > .cds--menu-item { - grid-template-columns: 1rem 1fr max-content; -} - -.cds--menu-item--disabled { - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); - cursor: not-allowed; -} - -.cds--menu-item--disabled:hover, -.cds--menu-item--disabled.cds--menu-item--danger:hover { - background-color: var(--cds-layer); - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--menu-item--danger:focus, -.cds--menu-item--danger:hover { - background-color: var(--cds-button-danger-primary, #da1e28); - color: var(--cds-text-on-color, #ffffff); -} - -.cds--menu-item-divider { - display: block; - background-color: var(--cds-border-subtle); - block-size: 0.0625rem; - inline-size: 100%; - margin-block: 0.25rem; -} - -.cds--combo-button__container { - display: inline-flex; - -moz-column-gap: 0.0625rem; - column-gap: 0.0625rem; -} - -.cds--combo-button__container--sm .cds--combo-button__primary-action { - min-inline-size: 7.9375rem; -} - -.cds--combo-button__container--md .cds--combo-button__primary-action { - min-inline-size: 7.4375rem; -} - -.cds--combo-button__container--lg .cds--combo-button__primary-action { - min-inline-size: 6.9375rem; -} - -.cds--combo-button__primary-action .cds--btn { - inline-size: 100%; - max-inline-size: 14.9375rem; - min-inline-size: 6.9375rem; -} - -.cds--combo-button__primary-action button { - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.cds--combo-button__trigger svg { - transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -.cds--combo-button__container--open .cds--combo-button__trigger svg { - transform: rotate(180deg); -} - -.cds--combo-button__top { - transform: translate(0, calc(-100% - var(--cds-popover-offset, 3rem))); -} - -.cds--combo-button__top-start { - transform: translate(0, calc(-100% - var(--cds-popover-offset, 3rem))); -} - -.cds--combo-button__top-end { - transform: translate(0, calc(-100% - var(--cds-popover-offset, 3rem))); -} - -.cds--contained-list { - --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-lg)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-xl))); - --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max)); -} - -.cds--contained-list .cds--tag { - --cds-layout-size-height-xs: 1.125rem; - --cds-layout-size-height-sm: 1.125rem; - --cds-layout-size-height-md: 1.5rem; - --cds-layout-size-height-lg: 1.5rem; - --cds-layout-size-height-xl: 1.5rem; - --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-md)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-xl))); -} -.cds--layout--size-xs .cds--contained-list .cds--tag { - --cds-layout-size-height: var(--cds-layout-size-height-xs); -} -.cds--layout--size-sm .cds--contained-list .cds--tag { - --cds-layout-size-height: var(--cds-layout-size-height-sm); -} -.cds--layout--size-md .cds--contained-list .cds--tag { - --cds-layout-size-height: var(--cds-layout-size-height-md); -} -.cds--layout--size-lg .cds--contained-list .cds--tag { - --cds-layout-size-height: var(--cds-layout-size-height-lg); -} -.cds--layout--size-xl .cds--contained-list .cds--tag { - --cds-layout-size-height: var(--cds-layout-size-height-xl); -} - -.cds--contained-list > ul { - padding: 0; - margin: 0; -} - -.cds--contained-list__header { - position: sticky; - z-index: 1; - display: flex; - align-items: center; - inset-block-start: 0; - padding-inline: var(--cds-layout-density-padding-inline-local); -} - -.cds--contained-list__label { - inline-size: 100%; -} - -.cds--contained-list .cds--search { - position: sticky; - z-index: 1; - inset-block-start: var(--cds-layout-size-height-local); -} -.cds--contained-list .cds--search.cds--search--expandable .cds--search-input { - background-color: var(--cds-field); -} - -.cds--contained-list .cds--search .cds--search-input { - background-color: var(--cds-background, #ffffff); - border-block-end: 1px solid var(--cds-border-subtle); -} - -.cds--contained-list .cds--search .cds--search-close::before { - display: none; -} - -.cds--contained-list .cds--search .cds--search-close { - border-inline-end: 2px solid transparent; - outline: none; -} -.cds--contained-list .cds--search .cds--search-close:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--contained-list .cds--search .cds--search-close:focus { - outline-style: dotted; - } -} - -.cds--contained-list .cds--search .cds--search-input ~ .cds--search-close:hover { - border-block-end: 1px solid transparent; -} - -.cds--contained-list .cds--search .cds--search-input:focus ~ .cds--search-close:hover { - border: 2px solid var(--cds-focus, #0f62fe); - border-inline-start: 0; - outline: none; -} - -.cds--contained-list--on-page + .cds--contained-list--on-page { - margin-block-start: 1rem; -} - -.cds--contained-list--on-page .cds--contained-list__header { - font-size: var(--cds-heading-compact-01-font-size, 0.875rem); - font-weight: var(--cds-heading-compact-01-font-weight, 600); - line-height: var(--cds-heading-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px); - background-color: var(--cds-background, #ffffff); - block-size: var(--cds-layout-size-height-local); - border-block-end: 1px solid var(--cds-border-subtle); - color: var(--cds-text-primary, #161616); -} - -.cds--layer-two .cds--contained-list--on-page .cds--contained-list__header { - background-color: var(--cds-layer-01, #f4f4f4); -} - -.cds--layer-three .cds--contained-list--on-page .cds--contained-list__header { - background-color: var(--cds-layer-02, #ffffff); -} - -.cds--contained-list--disclosed .cds--contained-list__header { - font-size: var(--cds-label-01-font-size, 0.75rem); - font-weight: var(--cds-label-01-font-weight, 400); - line-height: var(--cds-label-01-line-height, 1.33333); - letter-spacing: var(--cds-label-01-letter-spacing, 0.32px); - background-color: var(--cds-layer); - block-size: 2rem; - color: var(--cds-text-secondary, #525252); -} - -.cds--contained-list-item { - position: relative; - display: list-item; - list-style: none; -} - -.cds--contained-list-item:not(:first-of-type) { - margin-block-start: -1px; -} - -.cds--contained-list-item__content { - box-sizing: border-box; -} - -.cds--contained-list-item--clickable .cds--contained-list-item__content { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: inline-block; - padding: 0; - border: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: none; - cursor: pointer; - text-align: start; - inline-size: 100%; - text-align: start; - transition: background-color 150ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -.cds--contained-list-item--clickable .cds--contained-list-item__content *, -.cds--contained-list-item--clickable .cds--contained-list-item__content *::before, -.cds--contained-list-item--clickable .cds--contained-list-item__content *::after { - box-sizing: inherit; -} -.cds--contained-list-item--clickable .cds--contained-list-item__content::-moz-focus-inner { - border: 0; -} - -.cds--contained-list-item__content, -.cds--contained-list-item--clickable .cds--contained-list-item__content { - --temp-1lh: ( - var(--cds-body-01-line-height, 1.42857) * 1em - ); - font-size: var(--cds-body-01-font-size, 0.875rem); - font-weight: var(--cds-body-01-font-weight, 400); - line-height: var(--cds-body-01-line-height, 1.42857); - letter-spacing: var(--cds-body-01-letter-spacing, 0.16px); - padding: calc((var(--cds-layout-size-height-local) - var(--temp-1lh)) / 2) var(--cds-layout-density-padding-inline-local); - color: var(--cds-text-primary, #161616); - min-block-size: var(--cds-layout-size-height-local); -} - -.cds--contained-list-item:not(:last-of-type)::before { - position: absolute; - background-color: var(--cds-border-subtle); - block-size: 1px; - content: ""; - inset-block-end: 0; - inset-inline-end: 0; - inset-inline-start: 0; -} - -.cds--contained-list--inset-rulers .cds--contained-list-item:not(:last-of-type)::before { - inset-inline-end: var(--cds-layout-density-padding-inline-local); - inset-inline-start: var(--cds-layout-density-padding-inline-local); -} - -.cds--contained-list-item--clickable .cds--contained-list-item__content:not(:disabled):hover { - background-color: var(--cds-layer-hover); -} - -.cds--contained-list-item--clickable .cds--contained-list-item__content:not(:disabled):active { - background-color: var(--cds-layer-active); -} - -.cds--contained-list-item--clickable .cds--contained-list-item__content:disabled { - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); - cursor: not-allowed; -} - -.cds--contained-list-item--clickable .cds--contained-list-item__content:focus { - outline: none; -} - -.cds--contained-list-item--clickable .cds--contained-list-item__content:focus::after { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; - position: absolute; - content: ""; - inset: 0; -} -@media screen and (prefers-contrast) { - .cds--contained-list-item--clickable .cds--contained-list-item__content:focus::after { - outline-style: dotted; - } -} - -.cds--contained-list-item--with-action .cds--contained-list-item__content { - padding-inline-end: 4rem; -} - -.cds--contained-list__action, -.cds--contained-list-item__action { - position: absolute; - display: flex; - justify-content: flex-end; - inset-block-start: 0; - inset-inline-end: 0; - inset-inline-start: 0; - pointer-events: none; -} - -.cds--contained-list__action > *, -.cds--contained-list-item__action > * { - pointer-events: all; -} - -.cds--contained-list-item--with-icon .cds--contained-list-item__content { - display: grid; - -moz-column-gap: 0.75rem; - column-gap: 0.75rem; - grid-template-columns: 1rem 1fr; -} - -.cds--contained-list-item__icon { - display: inline-flex; - padding-block-start: 0.125rem; -} - -.cds--content-switcher { - --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-md)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-lg))); - --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max)); - display: flex; - justify-content: space-evenly; - block-size: var(--cds-layout-size-height-local); - inline-size: 100%; -} - -.cds--content-switcher-btn { - font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; - outline: 2px solid transparent; - outline-offset: -2px; - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - position: relative; - display: inline-flex; - overflow: hidden; - border: none; - margin: 0; - background-color: transparent; - border-block-end: 0.0625rem solid var(--cds-border-inverse, #161616); - border-block-start: 0.0625rem solid var(--cds-border-inverse, #161616); - color: var(--cds-text-secondary, #525252); - text-align: start; - text-decoration: none; - transition: all 150ms cubic-bezier(0.2, 0, 0.38, 0.9); - white-space: nowrap; -} -.cds--content-switcher-btn html { - font-size: 100%; -} -.cds--content-switcher-btn body { - font-weight: 400; - font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; -} -.cds--content-switcher-btn code { - font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace; -} -.cds--content-switcher-btn strong { - font-weight: 600; -} -.cds--content-switcher-btn::after { - position: absolute; - display: block; - background-color: var(--cds-layer-selected-inverse, #161616); - block-size: 100%; - content: ""; - inline-size: 100%; - inset-block-start: 0; - inset-inline-start: 0; - transform: scaleY(0); - transform-origin: bottom; - transition: all 150ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -@media (prefers-reduced-motion: reduce) { - .cds--content-switcher-btn::after { - transition: none; - } -} -.cds--content-switcher-btn:disabled::after { - display: none; -} -.cds--content-switcher-btn:focus { - z-index: 3; - border-color: var(--cds-focus, #0f62fe); - box-shadow: inset 0 0 0 2px var(--cds-focus, #0f62fe), inset 0 0 0 3px var(--cds-focus-inset, #ffffff); -} -.cds--content-switcher-btn:focus::after { - clip-path: inset(3px 3px 3px 3px); -} -.cds--content-switcher-btn:hover { - color: var(--cds-text-primary, #161616); - cursor: pointer; -} -.cds--content-switcher-btn:hover, .cds--content-switcher-btn:active { - z-index: 3; - background-color: var(--cds-layer-hover); - color: var(--cds-text-primary, #161616); -} -.cds--content-switcher-btn:disabled { - border-color: var(--cds-border-disabled, #c6c6c6); - background-color: transparent; - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); -} -.cds--content-switcher-btn:disabled:hover { - cursor: not-allowed; -} -.cds--content-switcher-btn:disabled:first-child, .cds--content-switcher-btn:disabled:last-child { - border-color: var(--cds-border-disabled, #c6c6c6); -} - -.cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn { - align-items: center; - padding: 0.5rem var(--cds-layout-density-padding-inline-local); - inline-size: 100%; -} - -.cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:first-child { - border-end-start-radius: 0.25rem; - border-inline-start: 0.0625rem solid var(--cds-border-inverse, #161616); - border-start-start-radius: 0.25rem; -} -.cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:first-child:disabled { - border-color: var(--cds-border-disabled, #c6c6c6); - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:last-child { - border-end-end-radius: 0.25rem; - border-inline-end: 0.0625rem solid var(--cds-border-inverse, #161616); - border-start-end-radius: 0.25rem; -} -.cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:last-child:disabled { - border-color: var(--cds-border-disabled, #c6c6c6); - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--content-switcher .cds--content-switcher-btn.cds--content-switcher--selected, -.cds--content-switcher .cds--content-switcher-btn.cds--content-switcher--selected:first-child, -.cds--content-switcher .cds--content-switcher-btn.cds--content-switcher--selected:last-child { - border: 0; -} - -.cds--content-switcher-btn::before { - position: absolute; - z-index: 2; - display: block; - background-color: var(--cds-border-subtle); - block-size: 1rem; - content: ""; - inline-size: 0.0625rem; - inset-inline-start: 0; -} - -.cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:first-of-type::before { - display: none; -} - -.cds--content-switcher-btn:focus::before, -.cds--content-switcher-btn:focus + .cds--content-switcher-btn::before, -.cds--content-switcher-btn:hover::before, -.cds--content-switcher-btn:hover + .cds--content-switcher-btn::before, -.cds--content-switcher--selected::before, -.cds--content-switcher--selected + .cds--content-switcher-btn::before { - background-color: transparent; -} - -.cds--content-switcher-btn:disabled::before, -.cds--content-switcher-btn:disabled:hover + .cds--content-switcher-btn:disabled::before { - background-color: var(--cds-border-disabled, #c6c6c6); -} - -.cds--content-switcher-btn.cds--content-switcher--selected:disabled + .cds--content-switcher-btn::before, -.cds--content-switcher-btn.cds--content-switcher--selected:disabled:hover + .cds--content-switcher-btn::before { - background-color: transparent; -} - -.cds--content-switcher__icon { - fill: var(--cds-icon-secondary, #525252); - transition: fill 70ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -.cds--content-switcher__icon + span { - margin-inline-start: 0.5rem; -} - -.cds--content-switcher__label { - z-index: 1; - overflow: hidden; - max-inline-size: 100%; - text-overflow: ellipsis; - white-space: nowrap; -} - -.cds--content-switcher-btn:hover .cds--content-switcher__icon, -.cds--content-switcher-btn:focus .cds--content-switcher__icon { - fill: var(--cds-icon-primary, #161616); -} - -.cds--content-switcher-btn.cds--content-switcher--selected { - z-index: 3; - background-color: var(--cds-layer-selected-inverse, #161616); - color: var(--cds-text-inverse, #ffffff); -} -.cds--content-switcher-btn.cds--content-switcher--selected:disabled { - background-color: var(--cds-layer-selected-disabled, #8d8d8d); - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); -} -.cds--content-switcher-btn.cds--content-switcher--selected::after { - transform: scaleY(1); -} - -.cds--content-switcher-btn.cds--content-switcher--selected .cds--content-switcher__icon { - fill: var(--cds-icon-inverse, #ffffff); -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--content-switcher-btn:focus { - color: Highlight; - outline: 1px solid Highlight; - } -} - -.cds--content-switcher--icon-only { - justify-content: flex-start; -} - -.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher-btn { - border-end-start-radius: 0.25rem; - border-inline-start: 0.0625rem solid var(--cds-border-inverse, #161616); - border-start-start-radius: 0.25rem; -} - -.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher--selected[disabled], -.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:last-child .cds--content-switcher--selected[disabled] { - border-color: var(--cds-layer-selected-disabled, #8d8d8d); -} - -.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:last-child .cds--content-switcher-btn { - border-end-end-radius: 0.25rem; - border-inline-end: 0.0625rem solid var(--cds-border-inverse, #161616); - border-start-end-radius: 0.25rem; -} - -.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:last-child .cds--content-switcher-btn.cds--content-switcher--selected, -.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher-btn.cds--content-switcher--selected { - border-color: var(--cds-background, #ffffff); -} - -.cds--content-switcher--lg .cds--content-switcher-btn { - padding-inline-end: 0.875rem; - padding-inline-start: 0.875rem; -} - -.cds--content-switcher--lg .cds--content-switcher-btn svg { - block-size: 20px; - inline-size: 20px; -} - -.cds--content-switcher--icon-only .cds--content-switcher-btn svg { - fill: var(--cds-icon-primary, #161616); -} - -.cds--content-switcher--icon-only .cds--content-switcher-btn.cds--content-switcher--selected svg { - z-index: 1; - fill: var(--cds-icon-inverse, #ffffff); -} - -.cds--content-switcher--icon-only.cds--content-switcher--sm .cds--btn--sm { - block-size: 2rem; -} - -.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-of-type .cds--content-switcher-btn::before { - display: none; -} - -.cds--content-switcher-btn:focus::before, -.cds--content-switcher-popover__wrapper:focus-within + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn::before, -.cds--content-switcher-btn:hover::before, -.cds--content-switcher-popover__wrapper:not(.cds--content-switcher-popover--disabled):hover + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn::before, -.cds--content-switcher--selected::before, -.cds--content-switcher-popover--selected + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn::before { - background-color: transparent; -} - -.cds--content-switcher--icon-only .cds--content-switcher-btn[disabled] { - border-color: var(--cds-border-inverse, #161616); -} - -.cds--content-switcher--icon-only .cds--content-switcher-btn[disabled] svg { - fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--content-switcher--icon-only .cds--content-switcher-btn[disabled]:not(.cds--content-switcher--selected):hover, -.cds--content-switcher--icon-only .cds--content-switcher-popover--selected + .cds--content-switcher-popover--disabled .cds--content-switcher-btn[disabled]:hover::before { - background-color: transparent; -} - -.cds--content-switcher--icon-only .cds--content-switcher-btn[disabled]:hover::before { - background-color: var(--cds-border-subtle); -} - -.cds--radio-button-group { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - position: relative; - display: flex; - align-items: center; -} -.cds--radio-button-group *, -.cds--radio-button-group *::before, -.cds--radio-button-group *::after { - box-sizing: inherit; -} - -.cds--label + .cds--form-item .cds--radio-button-group { - margin-block-start: 0; -} - -.cds--radio-button-group--vertical { - flex-direction: column; - align-items: flex-start; -} -.cds--radio-button-group--vertical.cds--radio-button-group--label-left { - align-items: flex-end; -} -.cds--radio-button-group--vertical .cds--radio-button__label { - margin-inline-end: 0; -} -.cds--radio-button-group--vertical .cds--radio-button__label:not(:last-of-type) { - margin-block-end: 0.5rem; -} - -.cds--radio-button { - position: absolute; - overflow: hidden; - padding: 0; - border: 0; - margin: -1px; - block-size: 1px; - clip: rect(0, 0, 0, 0); - inline-size: 1px; - visibility: inherit; - white-space: nowrap; - margin-block-start: 0.9rem; - margin-inline-start: 0.63rem; - visibility: inherit; -} - -.cds--radio-button__label { - display: flex; - align-items: center; - cursor: pointer; - margin-inline-end: 1rem; -} - -.cds--radio-button__label-text { - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - flex: 1 1; -} - -.cds--radio-button__appearance { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - flex-shrink: 0; - border: 1px solid var(--cds-icon-primary, #161616); - border-radius: 50%; - background-color: transparent; - block-size: 1.125rem; - inline-size: 1.125rem; - margin-block: 0.0625rem 0.125rem; - margin-inline: 0.125rem 0.625rem; -} -.cds--radio-button__appearance *, -.cds--radio-button__appearance *::before, -.cds--radio-button__appearance *::after { - box-sizing: inherit; -} - -.cds--radio-button-group--vertical .cds--radio-button__appearance { - margin-block: 0; -} - -.cds--radio-button:checked + .cds--radio-button__label .cds--radio-button__appearance { - display: flex; - align-items: center; - justify-content: center; - border-color: var(--cds-icon-primary, #161616); -} -.cds--radio-button:checked + .cds--radio-button__label .cds--radio-button__appearance::before { - position: relative; - display: inline-block; - border-radius: 50%; - background-color: var(--cds-icon-primary, #161616); - block-size: 100%; - content: ""; - inline-size: 100%; - transform: scale(0.5); -} -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--radio-button:checked + .cds--radio-button__label .cds--radio-button__appearance::before { - fill: ButtonText; - background-color: ButtonText; - } -} -@media print { - .cds--radio-button:checked + .cds--radio-button__label .cds--radio-button__appearance::before { - -webkit-print-color-adjust: exact; - print-color-adjust: exact; - } -} - -.cds--radio-button:disabled + .cds--radio-button__label { - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); - cursor: not-allowed; -} - -.cds--radio-button:disabled + .cds--radio-button__label .cds--radio-button__appearance, -.cds--radio-button:disabled:checked + .cds--radio-button__label .cds--radio-button__appearance { - border-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} -.cds--radio-button:disabled + .cds--radio-button__label .cds--radio-button__appearance::before, -.cds--radio-button:disabled:checked + .cds--radio-button__label .cds--radio-button__appearance::before { - background-color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--radio-button-group--readonly .cds--radio-button + .cds--radio-button__label .cds--radio-button__appearance { - border-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--radio-button-group--readonly .cds--radio-button__label { - cursor: default; -} - -.cds--radio-button-group--readonly .cds--radio-button__label-text { - cursor: text; - -webkit-user-select: text; - -moz-user-select: text; - user-select: text; -} - -.cds--radio-button-group--invalid .cds--radio-button + .cds--radio-button__label .cds--radio-button__appearance { - border-color: var(--cds-support-error, #da1e28); -} - -.cds--radio-button__validation-msg { - display: none; - align-items: flex-end; - margin-block-start: 0.375rem; -} - -.cds--radio-button__invalid-icon { - fill: var(--cds-support-error, #da1e28); - margin-inline: 0.1875rem 0.0625rem; -} - -.cds--radio-button__invalid-icon--warning { - fill: var(--cds-support-warning, #f1c21b); -} - -.cds--radio-button__invalid-icon--warning path:first-of-type { - fill: #000000; -} - -.cds--radio-button-group--invalid + .cds--radio-button__validation-msg, -.cds--radio-button-group--warning + .cds--radio-button__validation-msg { - display: flex; -} - -.cds--radio-button-group--invalid + .cds--radio-button__validation-msg .cds--form-requirement, -.cds--radio-button-group--warning + .cds--radio-button__validation-msg .cds--form-requirement { - display: block; - overflow: visible; - margin-block-start: 0; - margin-inline-start: 0.5rem; - max-block-size: 100%; -} - -.cds--radio-button-group--invalid + .cds--radio-button__validation-msg .cds--form-requirement { - color: var(--cds-text-error, #da1e28); -} - -.cds--radio-button-group ~ .cds--form__helper-text { - margin-block-start: 0.375rem; -} - -.cds--radio-button:focus + .cds--radio-button__label .cds--radio-button__appearance { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: 1.5px; -} - -.cds--radio-button__label.cds--skeleton { - position: relative; - padding: 0; - border: none; - background: var(--cds-skeleton-background, #e8e8e8); - box-shadow: none; - pointer-events: none; - block-size: 1.125rem; - inline-size: 6.25rem; -} -.cds--radio-button__label.cds--skeleton:hover, .cds--radio-button__label.cds--skeleton:focus, .cds--radio-button__label.cds--skeleton:active { - border: none; - cursor: default; - outline: none; -} -.cds--radio-button__label.cds--skeleton::before { - position: absolute; - animation: 3000ms ease-in-out cds--skeleton infinite; - background: var(--cds-skeleton-element, #c6c6c6); - block-size: 100%; - content: ""; - inline-size: 100%; - will-change: transform-origin, transform, opacity; -} -@media (prefers-reduced-motion: reduce) { - .cds--radio-button__label.cds--skeleton::before { - animation: none; - } -} - -.cds--radio-button__label.cds--skeleton .cds--radio-button__appearance { - display: none; -} - -.cds--radio-button-wrapper .cds--radio-button__label { - display: flex; - align-items: flex-start; - justify-content: center; - margin: 0; -} - -.cds--radio-button-wrapper:not(:last-of-type) { - margin-inline-end: 1rem; -} - -.cds--radio-button-group--vertical .cds--radio-button-wrapper { - margin-block-end: 0.375rem; - margin-inline-end: 0; -} - -.cds--radio-button-group--vertical .cds--radio-button-wrapper .cds--radio-button__label { - padding-block-start: 0.125rem; -} - -.cds--radio-button-group--label-right .cds--radio-button__label, -.cds--radio-button-wrapper.cds--radio-button-wrapper--label-right .cds--radio-button__label { - flex-direction: row; -} - -.cds--radio-button-group--label-left .cds--radio-button__label, -.cds--radio-button-wrapper.cds--radio-button-wrapper--label-left .cds--radio-button__label { - flex-direction: row-reverse; -} - -.cds--radio-button-group--label-left .cds--radio-button__appearance, -.cds--radio-button-wrapper.cds--radio-button-wrapper--label-left .cds--radio-button__appearance { - margin-inline-end: 0; - margin-inline-start: 0.5rem; -} - -.cds--radio-button-group--slug legend.cds--label, -.cds--radio-button-wrapper--slug .cds--radio-button__label-text { - display: flex; -} - -.cds--radio-button-group--slug legend.cds--label .cds--slug, -.cds--radio-button-wrapper--slug .cds--radio-button__label-text .cds--slug { - margin-inline-start: 0.5rem; -} - -.cds--radio-button-wrapper--slug .cds--radio-button__label-text .cds--slug__button--inline { - line-height: inherit; - margin-block-start: -0.0625rem; -} - -.cds--data-table-container { - position: relative; - padding-block-start: 0.125rem; -} - -.cds--data-table-content { - display: block; - overflow-x: auto; -} - -.cds--data-table-content:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--data-table-content:focus { - outline-style: dotted; - } -} - -.cds--data-table-header { - background-color: var(--cds-layer); - padding-block-end: 1.5rem; - padding-block-start: 1rem; - padding-inline: 1rem; -} - -.cds--data-table-header__title { - font-size: var(--cds-heading-03-font-size, 1.25rem); - font-weight: var(--cds-heading-03-font-weight, 400); - line-height: var(--cds-heading-03-line-height, 1.4); - letter-spacing: var(--cds-heading-03-letter-spacing, 0); - color: var(--cds-text-primary, #161616); -} - -.cds--data-table-header__description { - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - color: var(--cds-text-secondary, #525252); -} -@media (min-width: 42rem) { - .cds--data-table-header__description { - max-inline-size: 50ch; - } -} -@media (min-width: 66rem) { - .cds--data-table-header__description { - max-inline-size: 80ch; - } -} - -.cds--data-table { - border-collapse: collapse; - border-spacing: 0; - inline-size: 100%; -} - -.cds--data-table thead { - font-size: var(--cds-heading-compact-01-font-size, 0.875rem); - font-weight: var(--cds-heading-compact-01-font-weight, 600); - line-height: var(--cds-heading-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px); - background-color: var(--cds-layer-accent); -} - -.cds--data-table tbody { - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - background-color: var(--cds-layer); - inline-size: 100%; -} - -.cds--data-table tr { - border: none; - block-size: 3rem; - inline-size: 100%; -} - -.cds--data-table tbody tr, -.cds--data-table tbody tr td, -.cds--data-table tbody tr th { - transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9); -} - -.cds--data-table tbody tr:not([data-child-row]):hover, -.cds--data-table tbody tr[data-child-row]:hover > td { - background-color: var(--cds-layer-hover); -} - -.cds--data-table tbody tr:hover td, -.cds--data-table tbody tr:hover th { - border-block-end: 1px solid var(--cds-layer-hover); - border-block-start: 1px solid var(--cds-layer-hover); - color: var(--cds-text-primary, #161616); -} - -.cds--data-table tr + :not(.cds--popover-container):hover .cds--link { - color: var(--cds-link-secondary, #0043ce); -} - -.cds--data-table tr + :not(.cds--popover-container):hover .cds--link--disabled { - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--data-table th, -.cds--data-table td { - text-align: start; - vertical-align: middle; -} - -.cds--data-table.cds--data-table--top-aligned-body.cds--data-table--lg tr:not([data-child-row]) td:not(.cds--table-expand) { - padding-block-end: 1rem; - padding-block-start: 1rem; -} -.cds--data-table.cds--data-table--top-aligned-body.cds--data-table--lg tr:not([data-child-row]) td:not(.cds--table-expand).cds--table-column-menu { - padding-block-start: 0.5rem; -} -.cds--data-table.cds--data-table--top-aligned-body.cds--data-table--lg tr:not([data-child-row]) td:not(.cds--table-expand).cds--table-column-checkbox:not(.cds--table-column-radio) { - padding-block-start: 0.8125rem; -} -.cds--data-table.cds--data-table--top-aligned-body td { - vertical-align: top; -} - -.cds--data-table.cds--data-table--top-aligned-header.cds--data-table--lg th:not(.cds--table-expand):not(.cds--table-sort__header) { - padding-block-end: 1rem; - padding-block-start: 1rem; -} -.cds--data-table.cds--data-table--top-aligned-header.cds--data-table--lg th:not(.cds--table-expand):not(.cds--table-sort__header).cds--table-column-menu { - padding-block-start: 0.5rem; -} -.cds--data-table.cds--data-table--top-aligned-header.cds--data-table--lg th:not(.cds--table-expand):not(.cds--table-sort__header).cds--table-column-checkbox { - padding-block-start: 0.8125rem; -} -.cds--data-table.cds--data-table--top-aligned-header th { - vertical-align: top; -} - -.cds--data-table th[align=right], -.cds--data-table td[align=right] { - text-align: end; -} - -.cds--data-table th[align=center], -.cds--data-table td[align=center] { - text-align: center; -} - -.cds--data-table th { - background-color: var(--cds-layer-accent); - color: var(--cds-text-primary, #161616); - padding-inline-end: 1rem; - padding-inline-start: 1rem; -} - -.cds--data-table th:last-of-type { - position: static; - inline-size: auto; -} - -.cds--data-table .cds--table-header-label { - text-align: start; -} - -.cds--data-table td, -.cds--data-table tbody th { - border-block-end: 1px solid var(--cds-border-subtle); - border-block-start: 1px solid var(--cds-layer); - color: var(--cds-text-secondary, #525252); - padding-inline-end: 1rem; - padding-inline-start: 1rem; -} -.cds--data-table td + td:first-of-type, -.cds--data-table tbody th + td:first-of-type { - padding-inline-start: 0.75rem; -} - -@supports (-moz-appearance: none) { - .cds--data-table td { - background-clip: padding-box; - } -} -.cds--data-table .cds--list-box input[role=combobox], -.cds--data-table .cds--list-box input[type=text], -.cds--data-table .cds--dropdown, -.cds--data-table .cds--list-box, -.cds--data-table .cds--number input[type=number], -.cds--data-table .cds--number__control-btn::before, -.cds--data-table .cds--number__control-btn::after, -.cds--data-table .cds--text-input, -.cds--data-table .cds--select-input { - background-color: var(--cds-field-02, #ffffff); -} - -.cds--data-table td.cds--table-column-menu .cds--overflow-menu[aria-expanded=false]:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--data-table td.cds--table-column-menu .cds--overflow-menu[aria-expanded=false]:focus { - outline-style: dotted; - } -} - -.cds--data-table td.cds--table-column-menu .cds--overflow-menu[aria-expanded=true]:focus { - outline: none; -} - -@media screen and (hover: hover), (-ms-high-contrast: active), (-ms-high-contrast: none) { - .cds--data-table td.cds--table-column-menu .cds--overflow-menu .cds--overflow-menu__icon { - opacity: 0; - } -} -.cds--data-table td.cds--table-column-menu .cds--overflow-menu.cds--overflow-menu--open .cds--overflow-menu__icon { - opacity: 1; -} - -.cds--data-table.cds--data-table--visible-overflow-menu td.cds--table-column-menu .cds--overflow-menu .cds--overflow-menu__icon, -.cds--data-table td.cds--table-column-menu .cds--overflow-menu:hover .cds--overflow-menu__icon, -.cds--data-table td.cds--table-column-menu .cds--overflow-menu:focus .cds--overflow-menu__icon, -.cds--data-table tr:hover td.cds--table-column-menu .cds--overflow-menu .cds--overflow-menu__icon { - opacity: 1; -} - -.cds--table-row--menu-option .cds--overflow-menu-options__btn .cds--overflow-menu-options__option-content svg { - position: relative; - inset-block-start: 0.1875rem; - margin-inline-end: 0.5rem; -} - -.cds--data-table .cds--overflow-menu:hover, -.cds--data-table .cds--overflow-menu__trigger:hover { - background-color: var(--cds-layer-selected-hover); -} - -.cds--data-table--selected .cds--overflow-menu:hover, -.cds--data-table--selected .cds--overflow-menu__trigger:hover { - background-color: var(--cds-layer-hover); -} - -.cds--data-table--selected .cds--link:not(.cds--link--disabled) { - color: var(--cds-link-secondary, #0043ce); -} - -.cds--data-table--xs td.cds--table-column-menu, -.cds--data-table--sm td.cds--table-column-menu { - block-size: 1.5rem; - padding-block-end: 0; - padding-block-start: 0; -} - -.cds--data-table--sm td.cds--table-column-menu { - block-size: 2rem; -} - -.cds--data-table--md td.cds--table-column-menu { - block-size: 2.5rem; -} - -.cds--data-table--xl .cds--table-column-menu { - padding-block-start: 0.5rem; -} - -.cds--data-table--zebra tbody tr:not(.cds--parent-row):nth-child(odd) td { - border-block-end: 1px solid var(--cds-layer); -} - -.cds--data-table--zebra tbody tr:not(.cds--parent-row):nth-child(even) td { - border-block-end: 1px solid var(--cds-layer-accent); - border-block-start: 1px solid var(--cds-layer-accent); -} - -.cds--data-table--zebra tbody tr:not(.cds--parent-row):not(.cds--data-table--selected):nth-child(even) { - background-color: var(--cds-layer-accent); -} - -.cds--data-table--zebra tbody tr:not(.cds--parent-row):hover td { - border-block-end: 1px solid var(--cds-layer-hover); - border-block-start: 1px solid var(--cds-layer-hover); -} - -.cds--data-table--zebra tbody tr:not(.cds--parent-row):not(.cds--data-table--selected):hover { - background-color: var(--cds-layer-hover); -} - -.cds--table-column-checkbox .cds--checkbox-label { - min-block-size: 1.5rem; - padding-inline-start: 0; -} - -.cds--table-column-checkbox .cds--checkbox-label::before { - margin-block-start: 0.125rem; -} - -.cds--table-column-checkbox .cds--checkbox-label::after { - inset-block-start: 0.46875rem; -} - -.cds--data-table th.cds--table-column-checkbox { - position: static; - background-color: var(--cds-layer-accent); - inline-size: 2rem; - transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9); -} - -.cds--data-table thead th.cds--table-column-checkbox, -.cds--data-table tbody td.cds--table-column-checkbox, -.cds--data-table thead th.cds--table-expand, -.cds--data-table tbody td.cds--table-expand { - min-inline-size: 0; -} - -.cds--data-table thead th.cds--table-column-checkbox, -.cds--data-table tbody td.cds--table-column-checkbox { - min-inline-size: 2.5rem; - padding-inline-end: 0.25rem; - padding-inline-start: 1rem; -} - -.cds--data-table thead th.cds--table-expand, -.cds--data-table tbody td.cds--table-expand { - block-size: 2rem; - inline-size: 2rem; -} - -.cds--data-table--xs thead th.cds--table-expand, -.cds--data-table--xs tbody td.cds--table-expand { - padding: 0 0 0 0.5rem; - block-size: 1.5rem; - inline-size: 1.5rem; -} - -.cds--data-table--sm thead th.cds--table-expand, -.cds--data-table--sm tbody td.cds--table-expand { - padding: 0; - block-size: 2rem; - inline-size: 2rem; - padding-inline-start: 0.5rem; -} - -.cds--data-table--md thead th.cds--table-expand, -.cds--data-table--md tbody td.cds--table-expand { - padding: 0.25rem 0 0.25rem 0.5rem; - block-size: 2.5rem; - inline-size: 2.5rem; -} - -.cds--data-table--xl thead th.cds--table-expand, -.cds--data-table--xl tbody td.cds--table-expand { - block-size: 4rem; - padding-block-end: 1.375rem; - padding-block-start: 0.625rem; -} - -.cds--data-table--xl .cds--table-column-checkbox { - padding-block-start: 0.8125rem; -} - -.cds--data-table--xl .cds--table-column-radio { - padding-block-start: 1rem; -} - -.cds--table-column-radio { - inline-size: 48px; -} - -.cds--table-column-radio .cds--radio-button__appearance { - margin-inline-end: -0.125rem; -} - -.cds--data-table--zebra tbody tr:nth-child(odd).cds--data-table--selected td, -tr.cds--data-table--selected td { - border-block-end: 1px solid var(--cds-layer-active); - border-block-start: 1px solid var(--cds-layer-selected); - color: var(--cds-text-primary, #161616); -} - -.cds--data-table--zebra tbody tr:nth-child(odd).cds--data-table--selected, -tr.cds--data-table--selected { - background-color: var(--cds-layer-selected); -} - -.cds--data-table--zebra tbody tr:first-of-type:nth-child(odd).cds--data-table--selected td, -tr.cds--data-table--selected:first-of-type td { - border-block-start: 1px solid var(--cds-border-subtle-selected); -} - -.cds--data-table--zebra tbody tr:last-of-type:nth-child(odd).cds--data-table--selected td, -.cds--data-table--zebra tbody tr:last-of-type:nth-child(even).cds--data-table--selected td, -tr.cds--data-table--selected:last-of-type td { - border-block-end: 1px solid var(--cds-layer-selected); - border-block-start: 1px solid var(--cds-layer-selected); -} - -.cds--data-table--zebra tbody tr:nth-child(even).cds--data-table--selected td { - border-block-end: 1px solid var(--cds-layer-active); -} - -.cds--data-table--zebra tbody tr:nth-child(even).cds--data-table--selected:hover td { - border-block-end: 1px solid var(--cds-layer-selected-hover); -} - -.cds--data-table--zebra tbody tr:nth-child(odd).cds--data-table--selected:hover td, -.cds--data-table tbody .cds--data-table--selected:hover td { - border-block-end: 1px solid var(--cds-layer-selected-hover); - border-block-start: 1px solid var(--cds-layer-selected-hover); - color: var(--cds-text-primary, #161616); -} - -.cds--data-table--zebra tbody tr:nth-child(odd).cds--data-table--selected:hover, -.cds--data-table tbody .cds--data-table--selected:hover { - background-color: var(--cds-layer-selected-hover); -} - -.cds--data-table--selected .cds--overflow-menu .cds--overflow-menu__icon { - opacity: 1; -} - -.cds--data-table--xs thead tr, -.cds--data-table--xs tbody tr, -.cds--data-table--xs tbody tr th { - block-size: 1.5rem; -} - -.cds--data-table--xs .cds--table-header-label { - padding-block-end: 0.125rem; - padding-block-start: 0.125rem; -} - -.cds--data-table--xs td, -.cds--data-table--xs tbody tr th { - padding-block-end: 0.125rem; - padding-block-start: 0.125rem; -} - -.cds--data-table--xs .cds--overflow-menu { - block-size: calc(100% + 1px); - inline-size: 2rem; -} - -.cds--data-table.cds--data-table--xs:not(.cds--data-table--top-aligned-body) td.cds--table-column-checkbox, -.cds--data-table.cds--data-table--xs:not(.cds--data-table--top-aligned-header) th.cds--table-column-checkbox { - padding-block-end: 0; - padding-block-start: 0; -} - -.cds--data-table.cds--data-table--xs .cds--table-column-checkbox .cds--checkbox-label { - block-size: 1.4375rem; - min-block-size: 1.4375rem; -} - -.cds--data-table--sm thead tr, -.cds--data-table--sm tbody tr, -.cds--data-table--sm tbody tr th { - block-size: 2rem; -} - -.cds--data-table--sm .cds--table-header-label { - padding-block-end: 0.4375rem; - padding-block-start: 0.4375rem; -} - -.cds--data-table--sm td, -.cds--data-table--sm tbody tr th, -.cds--data-table--sm.cds--data-table--top-aligned-header th.cds--table-column-checkbox { - padding-block-end: 0.375rem; - padding-block-start: 0.4375rem; -} - -.cds--data-table.cds--data-table--sm:not(.cds--data-table--top-aligned-body) td.cds--table-column-checkbox, -.cds--data-table.cds--data-table--sm:not(.cds--data-table--top-aligned-header) th.cds--table-column-checkbox { - padding-block-end: 0.1875rem; - padding-block-start: 0.1875rem; -} - -.cds--data-table--sm .cds--overflow-menu { - block-size: calc(100% + 1px); -} - -.cds--data-table--md thead tr, -.cds--data-table--md tbody tr, -.cds--data-table--md tbody tr th { - block-size: 2.5rem; -} - -.cds--data-table--md .cds--table-header-label, -.cds--data-table--md.cds--data-table--top-aligned-header th.cds--table-column-checkbox { - padding-block-end: 0.4375rem; - padding-block-start: 0.4375rem; -} - -.cds--data-table--md td, -.cds--data-table--md tbody tr th { - padding-block-end: 0.375rem; - padding-block-start: 0.4375rem; -} - -.cds--data-table.cds--data-table--md:not(.cds--data-table--top-aligned-body) td.cds--table-column-checkbox, -.cds--data-table.cds--data-table--md:not(.cds--data-table--top-aligned-header) th.cds--table-column-checkbox { - padding-block-end: 0.1875rem; - padding-block-start: 0.1875rem; -} - -.cds--data-table--md .cds--table-column-menu { - padding-block-end: 0.1875rem; - padding-block-start: 0.1875rem; -} - -.cds--data-table--xl thead tr, -.cds--data-table--xl tbody tr, -.cds--data-table--xl tbody tr th { - block-size: 4rem; -} - -.cds--data-table--xl .cds--table-header-label { - padding-block-end: 1rem; - padding-block-start: 1rem; -} - -.cds--data-table--xl td, -.cds--data-table--xl tbody tr th { - padding-block-end: 1rem; - padding-block-start: 1rem; -} - -.cds--data-table--xl th, -.cds--data-table--xl td { - vertical-align: top; -} - -.cds--data-table--xl .cds--data-table--cell-secondary-text { - font-size: var(--cds-label-01-font-size, 0.75rem); - font-weight: var(--cds-label-01-font-weight, 400); - line-height: var(--cds-label-01-line-height, 1.33333); - letter-spacing: var(--cds-label-01-letter-spacing, 0.32px); -} - -.cds--data-table--static { - inline-size: auto; -} - -.cds--data-table-container--static { - inline-size: -moz-fit-content; - inline-size: fit-content; -} - -.cds--data-table_inner-container { - background-color: var(--cds-layer-accent); - transform: translateZ(0); -} - -.cds--data-table--sticky-header { - display: block; - overflow-y: scroll; - /* When using sticky header, with a selection element in the first column, we need to set the last item to a fixed width to match the table body. We only want this to happen when the last table header does not have any text */ -} -.cds--data-table--sticky-header thead, -.cds--data-table--sticky-header tbody, -.cds--data-table--sticky-header tr, -.cds--data-table--sticky-header th, -.cds--data-table--sticky-header td { - display: flex; -} -.cds--data-table--sticky-header thead { - position: sticky; - z-index: 1; - overflow: scroll; - inline-size: 100%; - inset-block-start: 0; - -ms-overflow-style: none; - will-change: transform; -} -.cds--data-table--sticky-header thead tr th { - border-block-end: 1px solid var(--cds-layer-active); -} -.cds--data-table--sticky-header tbody { - flex-direction: column; - -ms-overflow-style: none; - overflow-x: scroll; - will-change: transform; -} -.cds--data-table--sticky-header tr.cds--parent-row.cds--expandable-row { - block-size: auto; - min-block-size: 3rem; -} -.cds--data-table--sticky-header tr.cds--expandable-row:not(.cds--parent-row) { - block-size: auto; -} -.cds--data-table--sticky-header .cds--table-expand { - max-inline-size: 3rem; -} -.cds--data-table--sticky-header thead .cds--table-expand { - align-items: center; -} -.cds--data-table--sticky-header .cds--parent-row { - min-block-size: 3rem; -} -.cds--data-table--sticky-header:not(.cds--data-table--xs):not(.cds--data-table--xl):not(.cds--data-table--sm) td:not(.cds--table-column-menu):not(.cds--table-column-checkbox) { - padding-block-start: 0.875rem; -} -.cds--data-table--sticky-header tr.cds--parent-row.cds--expandable-row:hover + tr[data-child-row] td { - border-block-start: 1px solid var(--cds-layer-hover); -} -.cds--data-table--sticky-header tr.cds--expandable-row:last-of-type { - overflow: hidden; -} -.cds--data-table--sticky-header tr.cds--data-table--selected:first-of-type td { - border-block-start: none; -} -.cds--data-table--sticky-header thead th.cds--table-column-checkbox, -.cds--data-table--sticky-header tbody tr td.cds--table-column-checkbox { - align-items: center; - inline-size: 2.25rem; - min-inline-size: 2.25rem; -} -.cds--data-table--sticky-header.cds--data-table--xl thead th.cds--table-column-checkbox, .cds--data-table--sticky-header.cds--data-table--xl td.cds--table-column-checkbox { - align-items: flex-start; -} -.cds--data-table--sticky-header th.cds--table-column-checkbox ~ th:last-of-type:empty { - max-inline-size: 4rem; -} -.cds--data-table--sticky-header th:empty:not(.cds--table-expand) { - max-inline-size: 2.25rem; -} -.cds--data-table--sticky-header td.cds--table-column-menu { - align-items: center; - block-size: auto; - padding-block-start: 0; -} -.cds--data-table--sticky-header thead::-webkit-scrollbar, -.cds--data-table--sticky-header tbody::-webkit-scrollbar { - display: none; -} -@-moz-document url-prefix() { - .cds--data-table--sticky-header thead, - .cds--data-table--sticky-header tbody { - scrollbar-width: none; - } -} -.cds--data-table--sticky-header tbody tr:last-of-type { - border-block-end: 0; -} -.cds--data-table--sticky-header th:not(.cds--table-column-checkbox):not(.cds--table-column-menu):not(.cds--table-expand):not(.cds--table-column-icon), -.cds--data-table--sticky-header td:not(.cds--table-column-checkbox):not(.cds--table-column-menu):not(.cds--table-expand):not(.cds--table-column-icon) { - inline-size: 100%; - min-inline-size: 0; -} -.cds--data-table--sticky-header.cds--data-table--xs tr:not(.cds--expandable-row), .cds--data-table--sticky-header.cds--data-table--sm tr:not(.cds--expandable-row), .cds--data-table--sticky-header.cds--data-table--xl tr:not(.cds--expandable-row) { - block-size: auto; -} -.cds--data-table--sticky-header.cds--data-table--xs tr:not(.cds--expandable-row) { - min-block-size: 1.5rem; -} -.cds--data-table--sticky-header.cds--data-table--sm tr:not(.cds--expandable-row) { - min-block-size: 2rem; -} -.cds--data-table--sticky-header.cds--data-table--xl tr:not(.cds--expandable-row) { - min-block-size: 4rem; -} -.cds--data-table--sticky-header.cds--data-table--xs tr td.cds--table-expand { - padding-block-start: 0.25rem; -} -.cds--data-table--sticky-header.cds--data-table--sm tr td.cds--table-expand { - padding-block-start: 0.5rem; -} -.cds--data-table--sticky-header .cds--table-header-label { - display: block; - overflow-x: hidden; - text-overflow: ellipsis; - white-space: nowrap; - max-inline-size: calc(100% - 10px); - overflow-y: hidden; - padding-block-end: 1rem; - padding-block-start: 0.9375rem; -} -.cds--data-table--sticky-header.cds--data-table--xs th .cds--table-header-label { - padding-block-end: 0; - padding-block-start: 0.1875rem; -} -.cds--data-table--sticky-header.cds--data-table--sm th .cds--table-header-label { - padding-block-end: 0; - padding-block-start: 0.5rem; -} -.cds--data-table--sticky-header.cds--data-table--xl th .cds--table-header-label { - padding-block-start: 1rem; -} -.cds--data-table--sticky-header.cds--data-table--xl th.cds--table-expand { - display: flex; - align-items: flex-start; -} -.cds--data-table--sticky-header.cds--data-table--xs tr.cds--parent-row .cds--table-column-checkbox, .cds--data-table--sticky-header.cds--data-table--sm tr.cds--parent-row .cds--table-column-checkbox { - align-items: flex-start; -} - -.cds--data-table--max-width { - max-inline-size: 100%; -} - -.cds--data-table--sticky-header { - max-block-size: 18.75rem; -} - -.cds--data-table .cds--form-item.cds--checkbox-wrapper:last-of-type { - margin: 0; -} - -.cds--data-table--xs .cds--form-item.cds--checkbox-wrapper:last-of-type, -.cds--data-table--sm .cds--form-item.cds--checkbox-wrapper:last-of-type { - margin: -0.1875rem 0; -} - -.cds--data-table .cds--table-column-slug { - inline-size: 1rem; - padding-inline-end: 0; -} - -tr.cds--data-table--slug-row, -tr.cds--data-table--slug-row + .cds--expandable-row { - background: linear-gradient(to right, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%); - background-attachment: fixed; -} - -.cds--data-table--slug-row { - box-shadow: inset 1px 0 var(--cds-ai-border-strong, #4589ff); -} - -.cds--data-table tbody tr.cds--data-table--slug-row:hover td, -tr.cds--data-table--slug-row.cds--expandable-row:hover + .cds--expandable-row[data-child-row] td, -tr.cds--data-table--slug-row.cds--expandable-row--hover + .cds--expandable-row[data-child-row]:hover > td, -tr.cds--data-table--slug-row.cds--expandable-row--hover > td, -tr.cds--data-table--selected.cds--data-table--slug-row.cds--expandable-row + tr.cds--expandable-row[data-child-row] > td, -tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td, -tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td:first-of-type, -tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected:not(.cds--expandable-row):hover > td, -tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover + tr[data-child-row] > td, -tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover > td, -tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover > td:first-of-type { - background-color: transparent; -} - -.cds--data-table tbody tr.cds--data-table--slug-row:hover, -tr.cds--data-table--slug-row:hover + .cds--expandable-row[data-child-row], -tr.cds--data-table--slug-row.cds--expandable-row--hover + .cds--expandable-row[data-child-row]:hover, -tr.cds--expandable-row--hover.cds--data-table--slug-row, -tr.cds--data-table--selected.cds--parent-row.cds--expandable-row--hover.cds--data-table--slug-row { - background: linear-gradient(to right, var(--cds-ai-aura-hover-start, rgba(69, 137, 255, 0.32)) 0%, 15%, var(--cds-ai-aura-hover-end, rgba(255, 255, 255, 0)) 50%), var(--cds-ai-aura-hover-background, #edf5ff); - background-attachment: fixed; -} - -tr.cds--parent-row.cds--data-table--selected.cds--data-table--slug-row, -.cds--data-table--selected.cds--data-table--slug-row, -tr.cds--data-table--selected.cds--data-table--slug-row + .cds--expandable-row { - background: linear-gradient(to right, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%), var(--cds-layer-selected); - background-attachment: fixed; -} - -tr.cds--data-table--slug-row.cds--data-table--selected td, -tr.cds--data-table--slug-row.cds--data-table--selected:hover td, -tbody tr.cds--data-table--slug-row:hover td, -tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td:not(.cds--table-expand):not(.cds--table-column-checkbox):not(.cds--table-column-slug) { - border-block-end-color: var(--cds-border-subtle); -} - -tr.cds--expandable-row.cds--data-table--selected.cds--data-table--slug-row[data-parent-row] > td:not(.cds--table-expand):not(.cds--table-column-checkbox):not(.cds--table-column-slug) { - border-block-end: 1px solid var(--cds-layer-selected); -} - -tr.cds--parent-row.cds--data-table--slug-row.cds--expandable-row:hover td:first-of-type { - border-block-end: 1px solid transparent; -} - -.cds--data-table thead th.cds--table-sort__header--slug .cds--table-sort, -.cds--data-table thead th:has(> .cds--table-header-label--slug) { - background: linear-gradient(to right, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%); -} - -.cds--table-column-slug .cds--slug { - position: absolute; - z-index: 2; - transform: translateY(-50%); -} - -.cds--data-table--xl .cds--table-column-slug .cds--slug { - transform: translateY(1px); -} - -th .cds--table-header-label.cds--table-header-label--slug { - display: flex; - align-items: center; -} - -th .cds--table-header-label.cds--table-header-label--slug .cds--slug { - margin-inline-start: auto; -} - -th.cds--table-sort__header--slug, -th:has(.cds--table-header-label--slug) { - box-shadow: inset 0 1px var(--cds-ai-border-strong, #4589ff); -} - -td.cds--table-cell--column-slug { - background: linear-gradient(to right, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%); -} - -tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-cell--column-slug { - border-block-start: linear-gradient(to right, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%); -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-cell--column-slug, - .cds--data-table-content { - outline: 1px solid transparent; - } -} - -.cds--search { - position: relative; - display: flex; - align-items: center; - inline-size: 100%; -} - -.cds--search .cds--label { - position: absolute; - overflow: hidden; - padding: 0; - border: 0; - margin: -1px; - block-size: 1px; - clip: rect(0, 0, 0, 0); - inline-size: 1px; - visibility: inherit; - white-space: nowrap; -} - -.cds--search-input { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - outline: 2px solid transparent; - outline-offset: -2px; - order: 1; - padding: 0 2.5rem; - border: none; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: var(--cds-field); - border-block-end: 1px solid var(--cds-border-strong); - color: var(--cds-text-primary, #161616); - inline-size: 100%; - text-overflow: ellipsis; - transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 110ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -.cds--search-input *, -.cds--search-input *::before, -.cds--search-input *::after { - box-sizing: inherit; -} -.cds--search-input:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--search-input:focus { - outline-style: dotted; - } -} -.cds--search-input::-moz-placeholder { - color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4)); - opacity: 1; -} -.cds--search-input::placeholder { - color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4)); - opacity: 1; -} -.cds--search-input::-ms-clear { - display: none; -} - -.cds--search-input[disabled] { - background-color: var(--cds-field); - border-block-end: 1px solid transparent; - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); - cursor: not-allowed; -} -.cds--search-input[disabled]::-moz-placeholder { - color: var(--cds-field); -} -.cds--search-input[disabled]::placeholder { - color: var(--cds-field); -} - -.cds--search--light .cds--search-input { - background: var(--cds-field-02, #ffffff); -} - -.cds--search--light .cds--search-close::before { - background: var(--cds-field-02, #ffffff); -} - -.cds--search--sm .cds--search-input, -.cds--search--sm.cds--search--expandable.cds--search--expanded .cds--search-input { - padding: 0 2rem; - block-size: 2rem; -} - -.cds--search--sm .cds--search-magnifier-icon { - inset-inline-start: 0.5rem; -} - -.cds--search--md .cds--search-input, -.cds--search--md.cds--search--expandable.cds--search--expanded .cds--search-input { - padding: 0 2.5rem; - block-size: 2.5rem; -} - -.cds--search--md .cds--search-magnifier-icon { - inset-inline-start: 0.75rem; -} - -.cds--search--lg .cds--search-input, -.cds--search--lg.cds--search--expandable.cds--search--expanded .cds--search-input { - padding: 0 3rem; - block-size: 3rem; -} - -.cds--search-magnifier-icon { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - position: absolute; - z-index: 2; - block-size: 1rem; - fill: var(--cds-icon-secondary, #525252); - inline-size: 1rem; - inset-block-start: 50%; - inset-inline-start: 1rem; - pointer-events: none; - transform: translateY(-50%); -} -.cds--search-magnifier-icon *, -.cds--search-magnifier-icon *::before, -.cds--search-magnifier-icon *::after { - box-sizing: inherit; -} - -.cds--search-close { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: inline-block; - padding: 0; - border: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: none; - cursor: pointer; - text-align: start; - outline: 2px solid transparent; - outline-offset: -2px; - position: absolute; - inset-block-start: 0; - inset-inline-end: 0; -} -.cds--search-close *, -.cds--search-close *::before, -.cds--search-close *::after { - box-sizing: inherit; -} -.cds--search-close::-moz-focus-inner { - border: 0; -} -.cds--search-close::before { - position: absolute; - display: block; - background-color: var(--cds-field); - block-size: calc(100% - 2px); - content: ""; - inline-size: 2px; - inset-block-start: 0.0625rem; - inset-inline-start: 0; - transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -@media screen and (prefers-reduced-motion: reduce) { - .cds--search-close::before { - transition: none; - } -} -.cds--search-close:hover { - border-block-end: 1px solid var(--cds-border-strong); -} -.cds--search-close:hover::before { - background-color: var(--cds-field-hover); -} - -.cds--search-button { - flex-shrink: 0; - background-color: var(--cds-field); - margin-inline-start: 0.125rem; -} -.cds--search-button svg { - fill: currentColor; - vertical-align: middle; -} - -.cds--search-close svg { - fill: inherit; -} - -.cds--search-close, -.cds--search-button { - display: flex; - align-items: center; - justify-content: center; - border-width: 1px 0; - border-style: solid; - border-color: transparent; - block-size: 2.5rem; - cursor: pointer; - fill: var(--cds-icon-primary, #161616); - inline-size: 2.5rem; - opacity: 1; - transition: opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 110ms cubic-bezier(0.2, 0, 0.38, 0.9), border 110ms cubic-bezier(0.2, 0, 0.38, 0.9); - visibility: inherit; -} -.cds--search-close:hover, -.cds--search-button:hover { - background-color: var(--cds-field-hover); -} -.cds--search-close:focus, -.cds--search-button:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--search-close:focus, - .cds--search-button:focus { - outline-style: dotted; - } -} -.cds--search-close:active, -.cds--search-button:active { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; - background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2)); -} -@media screen and (prefers-contrast) { - .cds--search-close:active, - .cds--search-button:active { - outline-style: dotted; - } -} - -.cds--search--disabled .cds--search-close, -.cds--search--disabled.cds--search--expandable .cds--search-magnifier { - cursor: not-allowed; - outline: none; -} -.cds--search--disabled .cds--search-close:hover, -.cds--search--disabled.cds--search--expandable .cds--search-magnifier:hover { - background-color: transparent; - border-block-end-color: transparent; -} -.cds--search--disabled .cds--search-close:hover::before, -.cds--search--disabled.cds--search--expandable .cds--search-magnifier:hover::before { - background-color: transparent; -} - -.cds--search--disabled svg { - fill: var(--cds-icon-on-color-disabled, #8d8d8d); -} - -.cds--search-close:focus::before, -.cds--search-close:active::before { - background-color: var(--cds-focus, #0f62fe); -} - -.cds--search-input:focus ~ .cds--search-close:hover { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--search-input:focus ~ .cds--search-close:hover { - outline-style: dotted; - } -} - -.cds--search--sm .cds--search-close, -.cds--search--sm ~ .cds--search-button, .cds--search--sm.cds--search--expandable, .cds--search--sm.cds--search--expandable .cds--search-magnifier { - block-size: 2rem; - inline-size: 2rem; -} -.cds--search--sm.cds--search--expandable .cds--search-input::-moz-placeholder { - padding: 0 2rem; -} -.cds--search--sm.cds--search--expandable .cds--search-input::placeholder { - padding: 0 2rem; -} - -.cds--search--md .cds--search-close, -.cds--search--md ~ .cds--search-button, .cds--search--md.cds--search--expandable, .cds--search--md.cds--search--expandable .cds--search-magnifier { - block-size: 2.5rem; - inline-size: 2.5rem; -} -.cds--search--md.cds--search--expandable .cds--search-input::-moz-placeholder { - padding: 0 2.5rem; -} -.cds--search--md.cds--search--expandable .cds--search-input::placeholder { - padding: 0 2.5rem; -} - -.cds--search--lg .cds--search-close, -.cds--search--lg ~ .cds--search-button, .cds--search--lg.cds--search--expandable, .cds--search--lg.cds--search--expandable .cds--search-magnifier { - block-size: 3rem; - inline-size: 3rem; -} -.cds--search--lg.cds--search--expandable .cds--search-input::-moz-placeholder { - padding: 0 3rem; -} -.cds--search--lg.cds--search--expandable .cds--search-input::placeholder { - padding: 0 3rem; -} - -.cds--search-close--hidden { - opacity: 0; - visibility: hidden; -} - -.cds--search--lg.cds--skeleton .cds--search-input, -.cds--search--md.cds--skeleton .cds--search-input, -.cds--search--sm.cds--skeleton .cds--search-input { - position: relative; - padding: 0; - border: none; - background: var(--cds-skeleton-background, #e8e8e8); - box-shadow: none; - pointer-events: none; - inline-size: 100%; -} -.cds--search--lg.cds--skeleton .cds--search-input:hover, .cds--search--lg.cds--skeleton .cds--search-input:focus, .cds--search--lg.cds--skeleton .cds--search-input:active, -.cds--search--md.cds--skeleton .cds--search-input:hover, -.cds--search--md.cds--skeleton .cds--search-input:focus, -.cds--search--md.cds--skeleton .cds--search-input:active, -.cds--search--sm.cds--skeleton .cds--search-input:hover, -.cds--search--sm.cds--skeleton .cds--search-input:focus, -.cds--search--sm.cds--skeleton .cds--search-input:active { - border: none; - cursor: default; - outline: none; -} -.cds--search--lg.cds--skeleton .cds--search-input::before, -.cds--search--md.cds--skeleton .cds--search-input::before, -.cds--search--sm.cds--skeleton .cds--search-input::before { - position: absolute; - animation: 3000ms ease-in-out cds--skeleton infinite; - background: var(--cds-skeleton-element, #c6c6c6); - block-size: 100%; - content: ""; - inline-size: 100%; - will-change: transform-origin, transform, opacity; -} -@media (prefers-reduced-motion: reduce) { - .cds--search--lg.cds--skeleton .cds--search-input::before, - .cds--search--md.cds--skeleton .cds--search-input::before, - .cds--search--sm.cds--skeleton .cds--search-input::before { - animation: none; - } -} -.cds--search--lg.cds--skeleton .cds--search-input::-moz-placeholder, .cds--search--md.cds--skeleton .cds--search-input::-moz-placeholder, .cds--search--sm.cds--skeleton .cds--search-input::-moz-placeholder { - color: transparent; -} -.cds--search--lg.cds--skeleton .cds--search-input::placeholder, -.cds--search--md.cds--skeleton .cds--search-input::placeholder, -.cds--search--sm.cds--skeleton .cds--search-input::placeholder { - color: transparent; -} - -.cds--search--expandable { - transition: width 70ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -.cds--search--expandable.cds--search--expanded { - inline-size: 100%; -} - -.cds--search--expandable .cds--search-input { - padding: 0; - inline-size: 0; - transition: padding 70ms cubic-bezier(0.2, 0, 0.38, 0.9), width 0s linear 70ms; -} -.cds--search--expandable .cds--search-input::-moz-placeholder { - position: relative; - opacity: 0; - transition-duration: 70ms; - -moz-transition-property: padding, opacity; - transition-property: padding, opacity; - transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9); -} -.cds--search--expandable .cds--search-input::placeholder { - position: relative; - opacity: 0; - transition-duration: 70ms; - transition-property: padding, opacity; - transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9); -} - -.cds--search--expandable.cds--search--expanded .cds--search-input { - inline-size: 100%; - transition: padding 70ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -.cds--search--expandable.cds--search--expanded .cds--search-input::-moz-placeholder { - position: relative; - padding: 0; - opacity: 1; -} -.cds--search--expandable.cds--search--expanded .cds--search-input::placeholder { - position: relative; - padding: 0; - opacity: 1; -} - -.cds--search--expandable .cds--search-magnifier { - position: absolute; - cursor: pointer; -} -.cds--search--expandable .cds--search-magnifier:focus { - outline: 2px solid var(--cds-focus, #0f62fe); -} - -.cds--search--expandable .cds--search-magnifier:hover { - background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12)); -} - -.cds--search--expandable.cds--search--expanded .cds--search-magnifier { - pointer-events: none; -} - -.cds--search--expandable .cds--search-magnifier-icon { - fill: var(--cds-icon-primary, #161616); -} - -.cds--search--expandable.cds--search--expanded .cds--search-magnifier-icon { - fill: var(--cds-icon-secondary, #525252); -} - -.cds--search--expandable.cds--search--disabled svg { - fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--search-close svg, - .cds--search-magnifier-icon { - fill: ButtonText; - } -} - -.cds--table-toolbar { - position: relative; - z-index: 1; - display: flex; - background-color: var(--cds-layer); - inline-size: 100%; - min-block-size: 3rem; -} - -.cds--toolbar-content { - display: flex; - justify-content: flex-end; - block-size: 3rem; - inline-size: 100%; - transform: translate3d(0, 0, 0); - transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), clip-path 110ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -.cds--batch-actions ~ .cds--toolbar-content { - clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); -} - -.cds--toolbar-content .cds--search .cds--search-input { - padding: 0 3rem; - background-color: transparent; - block-size: 3rem; -} - -.cds--toolbar-content .cds--overflow-menu { - block-size: 3rem; - inline-size: 3rem; -} - -.cds--batch-actions ~ .cds--toolbar-search-container { - display: flex; - align-items: center; - opacity: 1; - transition: opacity 110ms; -} - -.cds--toolbar-search-container-expandable { - position: relative; - block-size: 3rem; - box-shadow: none; - cursor: pointer; - inline-size: 3rem; - transition: width 300ms cubic-bezier(0.5, 0, 0.1, 1), background-color 110ms cubic-bezier(0, 0, 0.38, 0.9); -} -.cds--toolbar-search-container-expandable:hover { - background-color: var(--cds-field-hover); -} - -.cds--search.cds--toolbar-search-container-expandable { - inline-size: 3rem; -} - -.cds--toolbar-search-container-expandable .cds--search-input { - block-size: 100%; - cursor: pointer; - opacity: 0; -} - -.cds--toolbar-search-container-expandable:not(.cds--toolbar-search-container-active) .cds--search-input { - padding: 0; -} - -.cds--toolbar-search-container-disabled .cds--search-input { - cursor: not-allowed; -} - -.cds--toolbar-search-container-expandable.cds--search .cds--label { - visibility: hidden; -} - -.cds--toolbar-search-container-expandable.cds--search .cds--search-close { - block-size: 3rem; - inline-size: 3rem; -} -.cds--toolbar-search-container-expandable.cds--search .cds--search-close::before { - background-color: var(--cds-field-hover); - block-size: calc(100% - 0.25rem); - inset-block-start: 0.125rem; -} - -.cds--toolbar-search-container-expandable.cds--search .cds--search-close:focus::before { - background-color: var(--cds-focus, #0f62fe); -} - -.cds--table-toolbar .cds--search--lg .cds--search-magnifier-icon { - inset-inline-start: 0; -} - -.cds--table-toolbar:not(.cds--table-toolbar--sm) .cds--toolbar-search-container-persistent.cds--search--lg .cds--search-magnifier-icon { - inset-inline-start: 1rem; -} - -.cds--table-toolbar.cds--table-toolbar--sm .cds--search--sm:not(.cds--toolbar-search-container-active):not(.cds--toolbar-search-container-persistent) .cds--search-magnifier-icon { - inset-inline-start: 0; -} - -.cds--table-toolbar.cds--table-toolbar--sm .cds--search--sm.cds--toolbar-search-container-active .cds--search-magnifier-icon { - inset-inline-start: 0.5rem; -} - -.cds--table-toolbar .cds--toolbar-search-container-persistent.cds--search--sm .cds--search-magnifier-icon { - inset-inline-start: 0.5rem; -} - -.cds--toolbar-search-container-expandable .cds--search-magnifier-icon { - padding: 1rem; - block-size: 3rem; - inline-size: 3rem; -} - -.cds--toolbar-search-container-expandable.cds--search--disabled .cds--search-magnifier-icon { - background-color: var(--cds-layer); - cursor: not-allowed; - transition: background-color none; -} - -.cds--toolbar-search-container-active .cds--search-magnifier-icon:focus, -.cds--toolbar-search-container-active .cds--search-magnifier-icon:active, -.cds--toolbar-search-container-active .cds--search-magnifier-icon:hover { - border: none; - background-color: transparent; - outline: none; -} - -.cds--toolbar-search-container-active.cds--search { - inline-size: 100%; -} - -.cds--toolbar-search-container-active .cds--search-input { - opacity: 1; -} - -.cds--toolbar-search-container-active .cds--label, -.cds--toolbar-search-container-active .cds--search-input { - padding: 0 3rem; - cursor: text; -} - -.cds--toolbar-search-container-active .cds--search-input:focus + .cds--search-close { - border: none; - box-shadow: none; - outline: none; -} - -.cds--toolbar-search-container-active .cds--search-input:not(:-moz-placeholder-shown) { - border: none; - background-color: var(--cds-field-hover); -} - -.cds--toolbar-search-container-active .cds--search-input:not(:placeholder-shown) { - border: none; - background-color: var(--cds-field-hover); -} - -.cds--toolbar-search-container-persistent .cds--search-close, -.cds--toolbar-search-container-persistent .cds--search-close:hover, -.cds--toolbar-search-container-active .cds--search-close, -.cds--toolbar-search-container-active .cds--search-close:hover { - border: none; - background-color: transparent; -} - -.cds--toolbar-search-container-persistent .cds--search-close::before { - display: none; -} - -.cds--overflow-menu.cds--toolbar-action { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: inline-block; - padding: 0; - border: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: none; - cursor: pointer; - text-align: start; - inline-size: 100%; - display: flex; - padding: 1rem; - block-size: 3rem; - cursor: pointer; - inline-size: 3rem; - transition: background 110ms cubic-bezier(0, 0, 0.38, 0.9); -} -.cds--overflow-menu.cds--toolbar-action *, -.cds--overflow-menu.cds--toolbar-action *::before, -.cds--overflow-menu.cds--toolbar-action *::after { - box-sizing: inherit; -} -.cds--overflow-menu.cds--toolbar-action::-moz-focus-inner { - border: 0; -} - -.cds--toolbar-action { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: inline-block; - padding: 0; - border: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: none; - cursor: pointer; - text-align: start; - inline-size: 100%; - display: flex; - block-size: 3rem; - cursor: pointer; - inline-size: 3rem; - transition: background 110ms cubic-bezier(0, 0, 0.38, 0.9); -} -.cds--toolbar-action *, -.cds--toolbar-action *::before, -.cds--toolbar-action *::after { - box-sizing: inherit; -} -.cds--toolbar-action::-moz-focus-inner { - border: 0; -} - -.cds--toolbar-action:hover:not([disabled]) { - background-color: var(--cds-field-hover); -} - -.cds--toolbar-action[aria-expanded=true], -.cds--toolbar-action:hover[aria-expanded=true] { - background-color: var(--cds-layer-02, #ffffff); -} - -.cds--toolbar-action[disabled] { - cursor: not-allowed; -} - -.cds--toolbar-action[disabled] .cds--toolbar-action__icon { - cursor: not-allowed; - fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--toolbar-action:focus:not([disabled]), -.cds--toolbar-action:active:not([disabled]) { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--toolbar-action:focus:not([disabled]), - .cds--toolbar-action:active:not([disabled]) { - outline-style: dotted; - } -} -.cds--toolbar-action:focus:not([disabled]).cds--toolbar-search-container-expandable, -.cds--toolbar-action:active:not([disabled]).cds--toolbar-search-container-expandable { - outline: none; -} - -.cds--toolbar-action ~ .cds--btn { - margin: 0; - max-inline-size: none; - white-space: nowrap; -} - -.cds--overflow-menu--data-table { - block-size: 3rem; -} - -.cds--toolbar-action__icon { - block-size: 1rem; - fill: var(--cds-icon-primary, #161616); - inline-size: auto; - max-inline-size: 1rem; -} - -.cds--toolbar-action__menu, -.cds--toolbar-action__menu.cds--overflow-menu-options::after { - background-color: var(--cds-layer-02, #ffffff); -} - -.cds--toolbar-search-container-persistent { - position: relative; - block-size: 3rem; - inline-size: 100%; - opacity: 1; -} - -.cds--toolbar-search-container-persistent + .cds--toolbar-content { - position: relative; - inline-size: auto; -} - -.cds--toolbar-search-container-persistent .cds--search { - position: initial; -} - -.cds--toolbar-search-container-persistent .cds--search-magnifier-icon { - inset-inline-start: 1rem; -} - -.cds--toolbar-search-container-persistent .cds--search-input { - padding: 0 3rem; - border: none; - block-size: 3rem; -} - -.cds--toolbar-search-container-persistent .cds--search-input:focus:not([disabled]) { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--toolbar-search-container-persistent .cds--search-input:focus:not([disabled]) { - outline-style: dotted; - } -} - -.cds--toolbar-search-container-persistent .cds--search-input:hover:not([disabled]) { - background-color: var(--cds-field-hover); -} - -.cds--toolbar-search-container-persistent .cds--search-input:not(:-moz-placeholder-shown) { - background-color: var(--cds-field-hover); -} - -.cds--toolbar-search-container-persistent .cds--search-input:active:not([disabled]), -.cds--toolbar-search-container-persistent .cds--search-input:not(:placeholder-shown) { - background-color: var(--cds-field-hover); -} - -.cds--toolbar-search-container-persistent .cds--search-close { - block-size: 3rem; - inline-size: 3rem; -} - -.cds--batch-actions--active ~ .cds--toolbar-search-container, -.cds--batch-actions--active ~ .cds--toolbar-content { - clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); - transform: translate3d(0, 48px, 0); - transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), clip-path 110ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -.cds--batch-actions { - position: absolute; - display: flex; - align-items: center; - justify-content: space-between; - background-color: var(--cds-background-brand, #0f62fe); - clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); - inset-block-end: 0; - inset-inline-end: 0; - inset-inline-start: 0; - opacity: 0; - pointer-events: none; - transform: translate3d(0, 48px, 0); - transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), clip-path 110ms cubic-bezier(0.2, 0, 0.38, 0.9), opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9); - will-change: transform; -} - -.cds--batch-actions:focus { - outline: 1px solid var(--cds-focus, #0f62fe); -} -@media screen and (prefers-contrast) { - .cds--batch-actions:focus { - outline-style: dotted; - } -} - -.cds--batch-actions--active { - z-index: 1; - clip-path: polygon(0 0, 300% 0, 300% 300%, 0 300%); - opacity: 1; - pointer-events: all; - transform: translate3d(0, 0, 0); -} - -.cds--action-list { - display: flex; - align-items: center; -} - -.cds--action-list .cds--btn, -.cds--batch-summary .cds--btn { - color: var(--cds-text-on-color, #ffffff); - padding-inline-end: 1rem; - padding-inline-start: 1rem; - white-space: nowrap; -} - -.cds--action-list .cds--btn:disabled { - border-color: transparent; - background-color: transparent; - color: var(--cds-text-on-color, #ffffff); - opacity: 0.5; -} - -.cds--action-list .cds--btn .cds--btn__icon { - position: static; - fill: var(--cds-icon-on-color, #ffffff); - margin-inline-start: 0.5rem; -} - -.cds--action-list .cds--btn .cds--btn__icon .st0 { - fill: none; -} - -.cds--batch-download { - padding: 0.0625rem; -} - -.cds--action-list .cds--btn--primary:focus::before, -.cds--action-list .cds--btn--primary::before, -.cds--action-list .cds--btn--primary:focus::after, -.cds--action-list .cds--btn--primary::after { - display: none; -} - -.cds--action-list .cds--btn--primary:focus, -.cds--batch-summary .cds--btn--primary:focus { - outline: 2px solid var(--cds-layer); - outline-offset: -0.125rem; -} - -.cds--action-list .cds--btn--primary:nth-child(3):hover + .cds--btn--primary.cds--batch-summary__cancel::before, -.cds--action-list .cds--btn--primary:nth-child(3):focus + .cds--btn--primary.cds--batch-summary__cancel::before { - opacity: 0; -} - -.cds--btn--primary.cds--batch-summary__cancel::before { - position: absolute; - display: block; - border: none; - background-color: var(--cds-text-on-color, #ffffff); - block-size: 1rem; - content: ""; - inline-size: 0.0625rem; - inset-block-start: 0.9375rem; - inset-inline-start: 0; - opacity: 1; - transition: opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -.cds--btn--primary.cds--batch-summary__cancel:hover::before { - opacity: 0; - transition: opacity 250ms cubic-bezier(0.5, 0, 0.1, 1); -} - -.cds--batch-summary { - position: sticky; - z-index: 100000; - display: flex; - align-items: center; - padding: 0 1rem; - background-color: var(--cds-background-brand, #0f62fe); - color: var(--cds-text-on-color, #ffffff); - inset-inline-start: 0; - min-block-size: 3rem; -} - -.cds--batch-summary__scroll { - box-shadow: 0.5px 0 0.2px var(--cds-link-primary-hover, #0043ce); -} - -.cds--batch-summary__para { - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); -} - -.cds--batch-summary__divider { - padding-inline-start: 0.5rem; -} - -.cds--table-toolbar--sm { - block-size: 2rem; - min-block-size: 2rem; -} -.cds--table-toolbar--sm .cds--toolbar-search-container-expandable, -.cds--table-toolbar--sm .cds--toolbar-search-container-persistent { - block-size: 2rem; -} -.cds--table-toolbar--sm .cds--toolbar-search-container-expandable .cds--search-input, -.cds--table-toolbar--sm .cds--toolbar-search-container-persistent .cds--search-input { - block-size: 2rem; -} -.cds--table-toolbar--sm .cds--toolbar-search-container-expandable .cds--search-close, -.cds--table-toolbar--sm .cds--toolbar-search-container-persistent .cds--search-close { - block-size: 2rem; - inline-size: 2rem; -} -.cds--table-toolbar--sm .cds--toolbar-search-container-expandable .cds--search-magnifier-icon, -.cds--table-toolbar--sm .cds--toolbar-search-container-persistent .cds--search-magnifier-icon { - padding: 0.5rem; - block-size: 2rem; - inline-size: 2rem; -} -.cds--table-toolbar--sm .cds--toolbar-action.cds--toolbar-search-container-persistent { - inline-size: 100%; -} -.cds--table-toolbar--sm .cds--toolbar-search-container-expandable { - inline-size: 2rem; -} -.cds--table-toolbar--sm .cds--toolbar-search-container-expandable .cds--search .cds--search-input { - padding: 0 3rem; -} -.cds--table-toolbar--sm .cds--toolbar-search-container-active { - flex: auto; - transition: flex 175ms cubic-bezier(0.5, 0, 0.1, 1); -} -.cds--table-toolbar--sm .cds--toolbar-search-container-active .cds--search-input { - visibility: inherit; -} -.cds--table-toolbar--sm .cds--toolbar-search-container-active .cds--search-input:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; - background-color: var(--cds-field-hover); -} -@media screen and (prefers-contrast) { - .cds--table-toolbar--sm .cds--toolbar-search-container-active .cds--search-input:focus { - outline-style: dotted; - } -} -.cds--table-toolbar--sm .cds--toolbar-search-container-active .cds--search-input:not(:-moz-placeholder-shown) { - background-color: var(--cds-field-hover); -} -.cds--table-toolbar--sm .cds--toolbar-search-container-active .cds--search-input:active, -.cds--table-toolbar--sm .cds--toolbar-search-container-active .cds--search-input:not(:placeholder-shown) { - background-color: var(--cds-field-hover); -} -.cds--table-toolbar--sm .cds--toolbar-search-container-active .cds--search-magnifier-icon:focus, -.cds--table-toolbar--sm .cds--toolbar-search-container-active .cds--search-magnifier-icon:active, -.cds--table-toolbar--sm .cds--toolbar-search-container-active .cds--search-magnifier-icon:hover { - outline: 2px solid transparent; - outline-offset: -2px; - background-color: transparent; -} -.cds--table-toolbar--sm .cds--overflow-menu.cds--toolbar-action { - block-size: 2rem; - inline-size: 2rem; - min-inline-size: 2rem; -} -.cds--table-toolbar--sm .cds--toolbar-content { - block-size: 2rem; -} -.cds--table-toolbar--sm .cds--toolbar-content .cds--overflow-menu { - block-size: 2rem; - inline-size: 2rem; -} - -.cds--search--disabled .cds--search-magnifier-icon:hover { - background-color: transparent; -} - -.cds--table-toolbar--sm .cds--batch-actions .cds--action-list { - block-size: 2rem; -} - -.cds--table-toolbar--sm .cds--toolbar-action { - padding: 0.5rem 0; - block-size: 2rem; - inline-size: 2rem; -} - -.cds--table-toolbar--sm .cds--btn--primary { - block-size: 2rem; - min-block-size: auto; - padding-block-end: 0.375rem; - padding-block-start: 0.375rem; -} - -.cds--table-toolbar--sm .cds--btn--primary.cds--batch-summary__cancel::before { - inset-block-start: 0.5rem; -} - -.cds--table-toolbar--sm .cds--toolbar-action ~ .cds--btn { - overflow: hidden; - block-size: 2rem; -} - -.cds--table-toolbar--sm .cds--batch-summary { - min-block-size: 2rem; -} - -.cds--data-table tr.cds--parent-row:first-of-type td { - border-block-start: 1px solid var(--cds-border-subtle); -} - -.cds--expandable-row--hidden td { - padding: 1rem; - border-block-start: 0; - inline-size: auto; -} - -tr.cds--parent-row:not(.cds--expandable-row) + tr[data-child-row] { - block-size: 0; - transition: height 150ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -tr.cds--parent-row:not(.cds--expandable-row) + tr[data-child-row] td { - border: 0; - background-color: var(--cds-layer-hover); - padding-block-end: 0; - padding-block-start: 0; - transition: padding 150ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -tr.cds--parent-row:not(.cds--expandable-row) + tr[data-child-row] td .cds--child-row-inner-container { - overflow: hidden; - max-block-size: 0; -} - -tr.cds--parent-row.cds--expandable-row + tr[data-child-row] { - transition: height 150ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -tr.cds--parent-row.cds--expandable-row + tr[data-child-row] td { - border-block-end: 1px solid var(--cds-border-subtle); - padding-inline-start: 3.5rem; - transition: padding-bottom 150ms cubic-bezier(0.2, 0, 0.38, 0.9), transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -tbody:has(> tr.cds--data-table--slug-row) > tr.cds--expandable-row[data-child-row] td, -tbody:has(td.cds--table-column-checkbox) > tr.cds--expandable-row[data-child-row] td { - padding-inline-start: 5.5rem; -} - -tbody:has(> tr.cds--data-table--slug-row):has(td.cds--table-column-checkbox) > tr.cds--expandable-row[data-child-row] td { - padding-inline-start: 7.5rem; -} - -tr.cds--parent-row.cds--expandable-row + tr[data-child-row] td .cds--child-row-inner-container { - max-block-size: 100%; - padding-block: 1rem; - padding-block-end: 1.5rem; -} - -.cds--parent-row.cds--expandable-row > td, -.cds--parent-row.cds--expandable-row + tr[data-child-row] > td { - border-block-end: 1px solid var(--cds-border-subtle); - box-shadow: 0 1px var(--cds-border-subtle); -} - -.cds--parent-row:not(.cds--expandable-row) + tr[data-child-row] > td { - box-shadow: none; -} - -.cds--parent-row.cds--expandable-row > td:first-of-type { - box-shadow: none; -} - -tr.cds--parent-row:not(.cds--expandable-row) td, -tr.cds--parent-row.cds--expandable-row td, -tr.cds--parent-row.cds--expandable-row { - transition: height 150ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), border-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -tr.cds--parent-row:not(.cds--expandable-row):first-of-type:hover td { - border-block-end: 1px solid var(--cds-border-subtle); - border-block-start: 1px solid var(--cds-border-subtle); -} - -tr.cds--parent-row.cds--expandable-row:hover td { - background-color: var(--cds-layer-hover); - border-block-end: 1px solid var(--cds-border-subtle); - border-block-start: 1px solid var(--cds-border-subtle); - color: var(--cds-text-primary, #161616); -} - -tr.cds--parent-row.cds--expandable-row:hover td:first-of-type { - border-block-end: 1px solid var(--cds-layer-hover); -} - -tr.cds--parent-row.cds--expandable-row:hover + tr[data-child-row] td { - background-color: var(--cds-layer-hover); - border-block-end: 1px solid var(--cds-border-subtle); - color: var(--cds-text-primary, #161616); -} - -tr.cds--expandable-row--hover + tr[data-child-row] td { - border-block-end: 1px solid var(--cds-border-subtle); -} - -tr.cds--expandable-row--hover { - background-color: var(--cds-layer-hover); -} - -tr.cds--expandable-row--hover td { - background-color: var(--cds-layer-hover); - border-block-end: 1px solid var(--cds-border-subtle); - border-block-start: 1px solid var(--cds-border-subtle); - color: var(--cds-text-primary, #161616); -} - -tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td:first-of-type { - border-block-end: 1px solid transparent; -} - -.cds--data-table td.cds--table-expand { - border-block-end: 1px solid var(--cds-border-subtle); -} - -.cds--data-table th.cds--table-expand + .cds--table-column-checkbox, -.cds--data-table td.cds--table-expand + .cds--table-column-checkbox { - padding-inline-end: 0.375rem; - padding-inline-start: 0.375rem; -} - -.cds--data-table td.cds--table-expand[data-previous-value=collapsed] + .cds--table-column-checkbox { - border-block-end: 1px solid transparent; - box-shadow: none; -} - -.cds--data-table th.cds--table-expand + .cds--table-column-checkbox + th, -.cds--data-table td.cds--table-expand + .cds--table-column-checkbox + td { - padding-inline-start: 0.5rem; -} - -.cds--data-table td.cds--table-expand, -.cds--data-table th.cds--table-expand { - padding: 0.5rem; - padding-inline-end: 0; -} - -.cds--data-table td.cds--table-expand[data-previous-value=collapsed] { - border-block-end: 1px solid transparent; -} - -.cds--table-expand[data-previous-value=collapsed] .cds--table-expand__svg { - transform: rotate(270deg); - transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -.cds--table-expand__button { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: inline-block; - padding: 0; - border: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: none; - cursor: pointer; - text-align: start; - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0 0.5rem; - block-size: calc(100% + 1px); - inline-size: 100%; - vertical-align: inherit; -} -.cds--table-expand__button *, -.cds--table-expand__button *::before, -.cds--table-expand__button *::after { - box-sizing: inherit; -} -.cds--table-expand__button::-moz-focus-inner { - border: 0; -} - -.cds--data-table--top-aligned-body td .cds--table-expand__button, -.cds--data-table--top-aligned-header th .cds--table-expand__button { - align-items: start; - block-size: 2rem; - padding-block-start: 0.5rem; -} - -.cds--data-table--top-aligned-body.cds--data-table--xs td .cds--table-expand__button, -.cds--data-table--top-aligned-header.cds--data-table--xs th .cds--table-expand__button { - block-size: 1.5rem; - padding-block-start: 0.25rem; -} - -.cds--data-table--top-aligned-body.cds--data-table--md td .cds--table-expand__button, -.cds--data-table--top-aligned-header.cds--data-table--md th .cds--table-expand__button { - margin-block-start: -0.25rem; - padding-block-start: 0.5rem; -} - -.cds--table-expand__button:focus { - box-shadow: inset 0 0 0 2px var(--cds-focus, #0f62fe); - outline: none; -} - -.cds--table-expand__svg { - fill: var(--cds-layer-selected-inverse, #161616); - transform: rotate(90deg); - transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -.cds--data-table--xl .cds--table-expand__button { - inline-size: 2rem; -} - -tr.cds--parent-row.cds--expandable-row td.cds--table-expand + td::after { - position: absolute; - background-color: var(--cds-layer-accent); - block-size: 0.0625rem; - content: ""; - inline-size: 0.5rem; - inset-block-end: -0.0625rem; - inset-inline-start: 0; -} - -tr.cds--parent-row.cds--expandable-row:hover td.cds--table-expand + td::after, -tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td.cds--table-expand + td::after { - background-color: var(--cds-layer-hover); -} - -tr.cds--parent-row.cds--data-table--selected td.cds--table-expand + td::after { - display: none; -} - -.cds--data-table--zebra tbody tr[data-parent-row]:nth-child(4n+3) td, -.cds--data-table--zebra tbody tr[data-child-row]:nth-child(4n+4) td { - border-block-end: 1px solid var(--cds-layer); -} - -.cds--data-table--zebra tbody tr[data-parent-row]:nth-child(4n+1) td, -.cds--data-table--zebra tbody tr[data-child-row]:nth-child(4n+2) td { - background-color: var(--cds-layer-accent); - border-block-end: 1px solid var(--cds-layer-accent); - border-block-start: 1px solid var(--cds-layer-accent); -} - -.cds--data-table--zebra tr.cds--parent-row td, -.cds--data-table--zebra tr.cds--parent-row.cds--expandable-row + tr[data-child-row] td { - transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9), border-bottom 70ms cubic-bezier(0.2, 0, 0.38, 0.9), border-top 70ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -.cds--data-table--zebra tbody tr[data-parent-row]:hover td, -.cds--data-table--zebra tbody tr[data-parent-row]:hover + tr[data-child-row] td, -.cds--data-table--zebra tbody tr[data-child-row]:hover td { - background-color: var(--cds-layer-hover); - border-block-end: 1px solid var(--cds-layer-hover); - border-block-start: 1px solid var(--cds-layer-hover); -} - -.cds--data-table--zebra tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td { - background-color: var(--cds-layer-hover); - border-block-end: 1px solid var(--cds-layer-hover); - border-block-start: 1px solid var(--cds-layer-hover); -} - -tr.cds--parent-row.cds--data-table--selected { - background-color: var(--cds-layer-selected); -} - -tr.cds--parent-row.cds--data-table--selected:first-of-type td { - border-block-start: 1px solid var(--cds-layer-active); - box-shadow: 0 1px var(--cds-layer-active); -} - -tr.cds--parent-row.cds--data-table--selected td { - border-block-end: 1px solid var(--cds-layer-active); - box-shadow: 0 1px var(--cds-layer-active); - color: var(--cds-text-primary, #161616); -} - -tr.cds--parent-row.cds--data-table--selected:last-of-type td { - border-block-end: 1px solid transparent; - box-shadow: 0 1px var(--cds-border-subtle); -} - -tr.cds--parent-row.cds--data-table--selected:not(.cds--expandable-row):hover td { - background-color: var(--cds-layer-selected-hover); - border-block-end: 1px solid var(--cds-border-subtle); - border-block-start: 1px solid var(--cds-layer-selected-hover); - box-shadow: 0 1px var(--cds-layer-selected-hover); -} - -tr.cds--parent-row.cds--data-table--selected.cds--expandable-row td, -tr.cds--parent-row.cds--data-table--selected.cds--expandable-row td:first-of-type { - border-block-end: 1px solid transparent; - box-shadow: 0 1px var(--cds-layer-selected); -} - -tr.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td, -tr.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td:first-of-type, -tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover td, -tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover td:first-of-type { - background-color: var(--cds-layer-selected-hover); - border-block-end: 1px solid transparent; - border-block-start: 1px solid var(--cds-layer-selected-hover); - box-shadow: 0 1px var(--cds-layer-selected-hover); -} - -tr.cds--parent-row.cds--data-table--selected.cds--expandable-row + tr[data-child-row] td { - background-color: var(--cds-layer-hover); - border-block-end: 1px solid var(--cds-border-subtle); - border-block-start: 1px solid var(--cds-layer-active); - box-shadow: 0 1px var(--cds-layer-active); - color: var(--cds-text-primary, #161616); -} - -tr.cds--parent-row.cds--data-table--selected.cds--expandable-row + tr[data-child-row]:last-of-type td { - box-shadow: inset 0 -1px var(--cds-layer-active); - padding-block-end: 1.5rem; -} - -tr.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover + tr[data-child-row] td, -tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[data-child-row] td { - background-color: var(--cds-layer-selected); -} - -.cds--parent-row .cds--table-column-slug, -.cds--parent-row .cds--table-column-slug + td.cds--table-expand[data-previous-value=collapsed] { - box-shadow: none; -} - -.cds--parent-row.cds--expandable-row .cds--table-column-slug, -.cds--parent-row.cds--expandable-row .cds--table-column-slug + td.cds--table-expand[data-previous-value=collapsed] { - border-block-end: 1px solid transparent; -} - -.cds--data-table--slug-row td, -.cds--data-table tr.cds--data-table--slug-row:hover td { - border-block-start: 1px solid transparent; -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--table-expand__button:focus .cds--table-expand__svg { - color: Highlight; - outline: 1px solid Highlight; - } -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--table-expand__svg { - fill: ButtonText; - } -} - -.cds--data-table.cds--skeleton th { - padding-inline-start: 1rem; - vertical-align: middle; -} - -.cds--data-table.cds--skeleton th span, -.cds--data-table.cds--skeleton td span { - position: relative; - padding: 0; - border: none; - background: var(--cds-skeleton-background, #e8e8e8); - box-shadow: none; - pointer-events: none; - display: block; - block-size: 1rem; - inline-size: 4rem; -} -.cds--data-table.cds--skeleton th span:hover, .cds--data-table.cds--skeleton th span:focus, .cds--data-table.cds--skeleton th span:active, -.cds--data-table.cds--skeleton td span:hover, -.cds--data-table.cds--skeleton td span:focus, -.cds--data-table.cds--skeleton td span:active { - border: none; - cursor: default; - outline: none; -} -.cds--data-table.cds--skeleton th span::before, -.cds--data-table.cds--skeleton td span::before { - position: absolute; - animation: 3000ms ease-in-out cds--skeleton infinite; - background: var(--cds-skeleton-element, #c6c6c6); - block-size: 100%; - content: ""; - inline-size: 100%; - will-change: transform-origin, transform, opacity; -} -@media (prefers-reduced-motion: reduce) { - .cds--data-table.cds--skeleton th span::before, - .cds--data-table.cds--skeleton td span::before { - animation: none; - } -} - -.cds--data-table.cds--skeleton tr:hover td { - border-color: var(--cds-border-subtle); - background: transparent; -} - -.cds--data-table.cds--skeleton tr:hover td:first-of-type, -.cds--data-table.cds--skeleton tr:hover td:last-of-type { - border-color: var(--cds-border-subtle); -} - -.cds--data-table.cds--skeleton .cds--table-sort { - pointer-events: none; -} - -.cds--data-table.cds--skeleton th span { - background: var(--cds-skeleton-element, #c6c6c6); -} - -.cds--data-table.cds--skeleton th span::before { - background: var(--cds-skeleton-background, #e8e8e8); -} - -.cds--data-table-container.cds--skeleton .cds--data-table-header__title { - position: relative; - padding: 0; - border: none; - background: var(--cds-skeleton-background, #e8e8e8); - box-shadow: none; - pointer-events: none; - block-size: 1.5rem; - inline-size: 7.5rem; -} -.cds--data-table-container.cds--skeleton .cds--data-table-header__title:hover, .cds--data-table-container.cds--skeleton .cds--data-table-header__title:focus, .cds--data-table-container.cds--skeleton .cds--data-table-header__title:active { - border: none; - cursor: default; - outline: none; -} -.cds--data-table-container.cds--skeleton .cds--data-table-header__title::before { - position: absolute; - animation: 3000ms ease-in-out cds--skeleton infinite; - background: var(--cds-skeleton-element, #c6c6c6); - block-size: 100%; - content: ""; - inline-size: 100%; - will-change: transform-origin, transform, opacity; -} -@media (prefers-reduced-motion: reduce) { - .cds--data-table-container.cds--skeleton .cds--data-table-header__title::before { - animation: none; - } -} - -.cds--data-table-container.cds--skeleton .cds--data-table-header__description { - position: relative; - padding: 0; - border: none; - background: var(--cds-skeleton-background, #e8e8e8); - box-shadow: none; - pointer-events: none; - block-size: 1rem; - inline-size: 10rem; - margin-block-start: 0.5rem; -} -.cds--data-table-container.cds--skeleton .cds--data-table-header__description:hover, .cds--data-table-container.cds--skeleton .cds--data-table-header__description:focus, .cds--data-table-container.cds--skeleton .cds--data-table-header__description:active { - border: none; - cursor: default; - outline: none; -} -.cds--data-table-container.cds--skeleton .cds--data-table-header__description::before { - position: absolute; - animation: 3000ms ease-in-out cds--skeleton infinite; - background: var(--cds-skeleton-element, #c6c6c6); - block-size: 100%; - content: ""; - inline-size: 100%; - will-change: transform-origin, transform, opacity; -} -@media (prefers-reduced-motion: reduce) { - .cds--data-table-container.cds--skeleton .cds--data-table-header__description::before { - animation: none; - } -} - -.cds--data-table--sort th, -.cds--data-table th[aria-sort] { - padding: 0; - block-size: 3rem; - border-block-end: none; - border-block-start: none; -} - -.cds--table-sort__description { - display: none; -} - -.cds--table-sort { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: inline-block; - padding: 0; - border: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: none; - cursor: pointer; - text-align: start; - display: flex; - align-items: center; - justify-content: space-between; - background-color: var(--cds-layer-accent); - color: var(--cds-text-primary, #161616); - font: inherit; - inline-size: 100%; - line-height: 1; - min-block-size: 100%; - padding-inline-start: 1rem; - text-align: start; - transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9), outline 70ms cubic-bezier(0, 0, 0.38, 0.9); -} -.cds--table-sort *, -.cds--table-sort *::before, -.cds--table-sort *::after { - box-sizing: inherit; -} -.cds--table-sort::-moz-focus-inner { - border: 0; -} - -.cds--table-sort:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--table-sort:focus { - outline-style: dotted; - } -} - -.cds--table-sort:hover { - background: var(--cds-layer-selected-hover); -} - -.cds--table-sort:focus svg, -.cds--table-sort:hover svg { - opacity: 1; -} - -.cds--data-table.cds--data-table--sort th > .cds--table-header-label { - line-height: 1; - padding-inline-end: 1rem; - padding-inline-start: 1rem; -} - -th .cds--table-sort__flex { - display: flex; - align-items: center; - justify-content: space-between; - block-size: 100%; - inline-size: 100%; - min-block-size: 3rem; -} - -.cds--data-table--top-aligned-header th .cds--table-sort__flex { - align-items: start; -} - -.cds--data-table.cds--data-table--top-aligned-header.cds--data-table--lg th.cds--table-sort__header { - padding-block-start: 1rem; -} - -.cds--data-table.cds--data-table--top-aligned-header.cds--data-table--sm th.cds--table-sort__header .cds--table-sort__flex .cds--table-header-label, -.cds--data-table.cds--data-table--top-aligned-header.cds--data-table--xs th.cds--table-sort__header .cds--table-sort__flex .cds--table-header-label { - padding-block-end: 0; - padding-block-start: 0; -} - -.cds--data-table.cds--data-table--top-aligned-header.cds--data-table--sm th.cds--table-sort__header { - padding-block-end: 0.4375rem; - padding-block-start: 0.4375rem; -} - -.cds--data-table.cds--data-table--top-aligned-header.cds--data-table--xs th.cds--table-sort__header { - padding-block-end: 0.125rem; - padding-block-start: 0.125rem; -} - -.cds--data-table--sort:not(.cds--data-table--xs):not(.cds--data-table--sm):not(.cds--data-table--md):not(.cds--data-table--xl) th .cds--table-sort__flex { - /* IE11 workaround for align-items: center and min-height - https://github.com/philipwalton/flexbugs/issues/231 */ -} -@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { - .cds--data-table--sort:not(.cds--data-table--xs):not(.cds--data-table--sm):not(.cds--data-table--md):not(.cds--data-table--xl) th .cds--table-sort__flex { - block-size: 2.99rem; - } -} - -.cds--data-table--xs.cds--data-table--sort th .cds--table-sort__flex { - min-block-size: 1.5rem; -} - -.cds--data-table--sm.cds--data-table--sort th .cds--table-sort__flex { - min-block-size: 2rem; -} - -.cds--data-table--md.cds--data-table--sort th .cds--table-sort__flex { - min-block-size: 2.5rem; -} - -.cds--data-table--xl.cds--data-table--sort th .cds--table-sort__flex { - align-items: flex-start; - min-block-size: 4rem; -} - -.cds--table-sort .cds--table-sort__icon-inactive { - display: block; -} - -.cds--table-sort .cds--table-sort__icon { - display: none; -} - -.cds--table-sort__icon-unsorted { - fill: var(--cds-icon-primary, #161616); - inline-size: 1.25rem; - margin-inline-end: 0.5rem; - margin-inline-start: 0.5rem; - min-inline-size: 1rem; - opacity: 0; -} - -.cds--table-sort.cds--table-sort--active { - background: var(--cds-layer-selected-hover); -} - -.cds--table-sort.cds--table-sort--active .cds--table-sort__icon-unsorted { - display: none; -} - -.cds--table-sort.cds--table-sort--active .cds--table-sort__icon { - display: block; - opacity: 1; -} - -.cds--table-sort--descending .cds--table-sort__icon { - transform: rotate(180deg); -} - -.cds--table-sort__icon { - fill: var(--cds-icon-primary, #161616); - inline-size: 1.25rem; - margin-inline-end: 0.5rem; - margin-inline-start: 0.5rem; - min-inline-size: 1rem; - opacity: 1; - transform: rotate(0); - transition: transform 250ms cubic-bezier(0.5, 0, 0.1, 1); -} - -.cds--data-table--xs.cds--data-table--sort th { - block-size: 1.5rem; -} - -.cds--data-table--sm.cds--data-table--sort th { - block-size: 2rem; -} - -.cds--data-table--md.cds--data-table--sort th { - block-size: 2.5rem; -} - -.cds--data-table--xl.cds--data-table--sort th { - block-size: 4rem; -} - -.cds--data-table--xl.cds--data-table--sort th .cds--table-sort { - display: inline-block; - block-size: 4rem; -} - -.cds--data-table--xl .cds--table-sort__icon-unsorted, -.cds--data-table--xl .cds--table-sort__icon { - margin-block-start: 0.8125rem; -} - -.cds--table-sort__header--slug .cds--table-sort__icon, -.cds--table-sort__header--slug .cds--table-sort__icon-unsorted { - margin-inline-end: 0.5rem; - margin-inline-start: auto; -} - -.cds--table-sort__header--slug .cds--slug { - margin-inline-end: 0.5rem; -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--table-sort__icon, - .cds--table-sort__icon-unsorted { - fill: ButtonText; - } -} - -@keyframes fp-fade-in-down { - from { - opacity: 0; - transform: translate3d(0, -20px, 0); - } - to { - opacity: 1; - transform: translate3d(0, 0, 0); - } -} -@keyframes fp-slide-left { - from { - transform: translate3d(0, 0, 0); - } - to { - transform: translate3d(-100%, 0, 0); - } -} -@keyframes fp-slide-left-new { - from { - transform: translate3d(100%, 0, 0); - } - to { - transform: translate3d(0, 0, 0); - } -} -@keyframes fp-slide-right { - from { - transform: translate3d(0, 0, 0); - } - to { - transform: translate3d(100%, 0, 0); - } -} -@keyframes fp-slide-right-new { - from { - transform: translate3d(-100%, 0, 0); - } - to { - transform: translate3d(0, 0, 0); - } -} -@keyframes fp-fade-out { - from { - opacity: 1; - } - to { - opacity: 0; - } -} -@keyframes fp-fade-in { - from { - opacity: 0; - } - to { - opacity: 1; - } -} -.flatpickr-calendar { - position: absolute; - overflow: hidden; - box-sizing: border-box; - padding: 0; - border: 0; - border-radius: 0; - animation: none; - direction: ltr; - inline-size: 19.6875rem; - max-block-size: 0; - opacity: 0; - text-align: center; - touch-action: manipulation; - visibility: hidden; -} -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .flatpickr-calendar { - outline: 1px solid transparent; - } -} - -.flatpickr-calendar.open, -.flatpickr-calendar.inline { - overflow: visible; - max-block-size: 40rem; - opacity: 1; - visibility: inherit; -} - -.flatpickr-calendar.open { - box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3)); - z-index: 99999; - display: flex; - overflow: hidden; - flex-direction: column; - align-items: center; - justify-content: center; - padding: 0.25rem 0.25rem 0.5rem 0.25rem; - border: none; - background-color: var(--cds-layer-01, #f4f4f4); - block-size: 21rem; - inline-size: 18rem; - margin-block-start: -0.125rem; -} -.flatpickr-calendar.open:focus { - outline: 1px solid var(--cds-focus, #0f62fe); -} -@media screen and (prefers-contrast) { - .flatpickr-calendar.open:focus { - outline-style: dotted; - } -} - -.flatpickr-calendar.animate.open { - animation: fp-fade-in-down 110ms cubic-bezier(0, 0, 0.38, 0.9); -} -@media screen and (prefers-reduced-motion: reduce) { - .flatpickr-calendar.animate.open { - animation: none; - } -} - -.flatpickr-calendar.inline { - position: relative; - display: block; - inset-block-start: 0.125rem; -} - -.flatpickr-calendar.static { - position: absolute; - inset-block-start: calc(100% + 2px); -} - -.flatpickr-calendar.static.open { - z-index: 999; - display: block; -} - -.flatpickr-calendar.hasWeeks { - inline-size: auto; -} - -.dayContainer { - display: flex; - flex-wrap: wrap; - justify-content: space-around; - padding: 0; - block-size: 15.375rem; - outline: 0; -} - -.flatpickr-calendar .hasWeeks .dayContainer, -.flatpickr-calendar .hasTime .dayContainer { - border-block-end: 0; - border-end-end-radius: 0; - border-end-start-radius: 0; -} - -.flatpickr-calendar .hasWeeks .dayContainer { - border-inline-start: 0; -} - -.flatpickr-calendar.showTimeInput.hasTime .flatpickr-time { - block-size: 2.5rem; - border-block-start: 1px solid #e6e6e6; -} - -.flatpickr-calendar.noCalendar.hasTime .flatpickr-time { - block-size: auto; -} - -.flatpickr-calendar:focus { - outline: 0; -} - -.flatpickr-months { - display: flex; - justify-content: space-between; - inline-size: 100%; -} - -.flatpickr-month { - font-size: var(--cds-heading-compact-01-font-size, 0.875rem); - font-weight: var(--cds-heading-compact-01-font-weight, 600); - line-height: var(--cds-heading-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px); - display: flex; - align-items: center; - background-color: transparent; - block-size: 2.5rem; - color: var(--cds-text-primary, #161616); - line-height: 1; - text-align: center; -} - -.flatpickr-prev-month, -.flatpickr-next-month { - z-index: 3; - display: flex; - align-items: center; - justify-content: center; - padding: 0; - block-size: 2.5rem; - cursor: pointer; - fill: var(--cds-icon-primary, #161616); - inline-size: 2.5rem; - line-height: 16px; - text-decoration: none; - transform: scale(1, 1) /*rtl: scale(-1,1)*/; - transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9); - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .flatpickr-prev-month, - .flatpickr-next-month { - fill: ButtonText; - } -} -@media screen and (prefers-reduced-motion: reduce) { - .flatpickr-prev-month, - .flatpickr-next-month { - transition: none; - } -} -.flatpickr-prev-month:hover, -.flatpickr-next-month:hover { - background-color: var(--cds-layer-hover); -} - -.flatpickr-next-month.disabled svg, -.flatpickr-prev-month.disabled svg { - cursor: not-allowed; - fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} - -.flatpickr-next-month.disabled:hover svg, -.flatpickr-prev-month.disabled:hover svg { - fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} - -.flatpickr-current-month { - font-size: var(--cds-heading-compact-01-font-size, 0.875rem); - font-weight: var(--cds-heading-compact-01-font-weight, 600); - line-height: var(--cds-heading-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px); - display: flex; - align-items: center; - justify-content: center; - block-size: 1.75rem; - text-align: center; -} - -.flatpickr-current-month .cur-month { - margin-inline-end: 0.25rem; - margin-inline-start: 0.25rem; -} -.flatpickr-current-month .cur-month:hover { - background-color: var(--cds-layer-hover); -} - -.numInputWrapper { - position: relative; - inline-size: 3.75rem; -} -.numInputWrapper:hover { - background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12)); -} - -.numInputWrapper .numInput { - display: inline-block; - padding: 0.25rem; - border: none; - margin: 0; - -moz-appearance: textfield; /* Firefox */ - background-color: var(--cds-field-01, #f4f4f4); - color: var(--cds-text-primary, #161616); - cursor: default; - font-family: inherit; - font-size: inherit; - font-weight: 600; - inline-size: 100%; -} -.numInputWrapper .numInput::-webkit-outer-spin-button, .numInputWrapper .numInput::-webkit-inner-spin-button { - margin: 0; /* <-- Apparently some margin are still there even though it's hidden */ - -webkit-appearance: none; -} -.numInputWrapper .numInput:focus { - outline: 1px solid var(--cds-focus, #0f62fe); -} -@media screen and (prefers-contrast) { - .numInputWrapper .numInput:focus { - outline-style: dotted; - } -} -.numInputWrapper .numInput[disabled], .numInputWrapper .numInput[disabled]:hover { - background-color: var(--cds-layer-01, #f4f4f4); - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); - pointer-events: none; -} - -.numInputWrapper .arrowUp { - border-block-end: 0; - inset-block-start: 0.25rem; -} -.numInputWrapper .arrowUp::after { - border-block-end: 0.25rem solid var(--cds-icon-primary, #161616); -} - -.numInputWrapper .arrowDown { - inset-block-start: 0.6875rem; -} -.numInputWrapper .arrowDown::after { - border-block-start: 0.25rem solid var(--cds-icon-primary, #161616); -} - -.numInputWrapper .arrowUp, -.numInputWrapper .arrowDown { - position: absolute; - padding: 0 0.25rem 0 0.125rem; - border: none; - block-size: 50%; - cursor: pointer; - inline-size: 0.75rem; - inset-inline-start: 2.6rem; - line-height: 50%; - opacity: 0; -} -.numInputWrapper .arrowUp::after, -.numInputWrapper .arrowDown::after { - position: absolute; - display: block; - border-inline-end: 0.25rem solid transparent; - border-inline-start: 0.25rem solid transparent; - content: ""; - inset-block-start: 33%; -} -.numInputWrapper .arrowUp:hover::after, -.numInputWrapper .arrowDown:hover::after { - border-block-end-color: var(--cds-button-primary, #0f62fe); - border-block-start-color: var(--cds-button-primary, #0f62fe); -} -.numInputWrapper .arrowUp:active::after, -.numInputWrapper .arrowDown:active::after { - border-block-end-color: var(--cds-border-interactive, #0f62fe); - border-block-start-color: var(--cds-border-interactive, #0f62fe); -} - -.numInput[disabled] ~ .arrowUp::after { - border-block-end-color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); -} - -.numInput[disabled] ~ .arrowDown::after { - border-block-start-color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); -} - -.numInputWrapper:hover .arrowUp, -.numInputWrapper:hover .arrowDown { - opacity: 1; -} - -.numInputWrapper:hover .numInput[disabled] ~ .arrowUp, -.numInputWrapper:hover .numInput[disabled] ~ .arrowDown { - opacity: 0; -} - -.flatpickr-weekdays { - display: flex; - align-items: center; - block-size: 2.5rem; -} - -.flatpickr-weekdaycontainer { - display: flex; - inline-size: 100%; -} - -.flatpickr-weekday { - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - flex: 1 1; - color: var(--cds-text-primary, #161616); - cursor: default; -} - -.flatpickr-days:focus { - outline: 0; -} - -.flatpickr-calendar.animate .dayContainer.slideLeft { - animation: fp-fade-out 400ms cubic-bezier(0.23, 1, 0.32, 1), fp-slide-left 400ms cubic-bezier(0.23, 1, 0.32, 1); -} - -.flatpickr-calendar.animate .dayContainer.slideLeft, -.flatpickr-calendar.animate .dayContainer.slideLeftNew { - transform: translate3d(-100%, 0, 0); -} - -.flatpickr-calendar.animate .dayContainer.slideLeftNew { - animation: fp-fade-in 400ms cubic-bezier(0.23, 1, 0.32, 1), fp-slide-left 400ms cubic-bezier(0.23, 1, 0.32, 1); -} - -.flatpickr-calendar.animate .dayContainer.slideRight { - animation: fp-fade-out 400ms cubic-bezier(0.23, 1, 0.32, 1), fp-slide-right 400ms cubic-bezier(0.23, 1, 0.32, 1); - transform: translate3d(100%, 0, 0); -} - -.flatpickr-calendar.animate .dayContainer.slideRightNew { - animation: fp-fade-in 400ms cubic-bezier(0.23, 1, 0.32, 1), fp-slide-right-new 400ms cubic-bezier(0.23, 1, 0.32, 1); -} - -.flatpickr-day { - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - display: flex; - align-items: center; - justify-content: center; - block-size: 2.5rem; - color: var(--cds-text-primary, #161616); - cursor: pointer; - inline-size: 2.5rem; - transition: all 70ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -.flatpickr-day:hover { - background: var(--cds-layer-hover); -} -.flatpickr-day:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; - outline-color: var(--cds-button-primary, #0f62fe); -} -@media screen and (prefers-contrast) { - .flatpickr-day:focus { - outline-style: dotted; - } -} - -.nextMonthDay, -.prevMonthDay { - color: var(--cds-text-helper, #6f6f6f); -} - -.flatpickr-day.today { - position: relative; - color: var(--cds-link-primary, #0f62fe); - font-weight: 600; -} -.flatpickr-day.today::after { - position: absolute; - display: block; - background-color: var(--cds-link-primary, #0f62fe); - block-size: 0.25rem; - content: ""; - inline-size: 0.25rem; - inset-block-end: 0.4375rem; - inset-inline-start: 50%; - transform: translateX(-50%); -} - -.flatpickr-day.today.no-border { - border: none; -} - -.flatpickr-day.today.selected { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .flatpickr-day.today.selected { - outline-style: dotted; - } -} -.flatpickr-day.today.selected::after { - display: none; -} - -.flatpickr-day.inRange { - background-color: var(--cds-highlight, #d0e2ff); - color: var(--cds-text-primary, #161616); -} - -.flatpickr-day.selected { - background-color: var(--cds-button-primary, #0f62fe); - color: var(--cds-text-on-color, #ffffff); -} -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .flatpickr-day.selected { - color: Highlight; - outline: 1px solid Highlight; - outline-style: dotted; - } -} -.flatpickr-day.selected:focus { - outline: 0.0625rem solid var(--cds-layer-02, #ffffff); - outline-offset: -0.1875rem; -} - -.flatpickr-day.startRange.selected { - z-index: 2; - box-shadow: none; -} - -.flatpickr-day.startRange.inRange:not(.selected), -.flatpickr-day.endRange.inRange { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; - z-index: 3; - background: var(--cds-layer-01, #f4f4f4); -} -@media screen and (prefers-contrast) { - .flatpickr-day.startRange.inRange:not(.selected), - .flatpickr-day.endRange.inRange { - outline-style: dotted; - } -} - -.flatpickr-day.endRange:hover { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; - background: var(--cds-layer-01, #f4f4f4); - color: var(--cds-text-primary, #161616); -} -@media screen and (prefers-contrast) { - .flatpickr-day.endRange:hover { - outline-style: dotted; - } -} - -.flatpickr-day.endRange.inRange.selected { - background: var(--cds-button-primary, #0f62fe); - color: var(--cds-text-on-color, #ffffff); -} - -.flatpickr-day.flatpickr-disabled { - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); - cursor: not-allowed; -} -.flatpickr-day.flatpickr-disabled:hover { - background-color: transparent; -} - -.flatpickr-input[readonly] { - cursor: pointer; -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .flatpickr-day.today, - .flatpickr-day.inRange { - color: Highlight; - } -} - -.cds--date-picker { - display: flex; -} - -.cds--date-picker--light .cds--date-picker__input { - background: var(--cds-field-02, #ffffff); -} - -.cds--date-picker ~ .cds--label { - order: 1; -} - -.cds--date-picker-container { - position: relative; - display: flex; - flex-direction: column; - justify-content: space-between; -} - -.cds--date-picker-container .cds--label { - display: flex; -} - -.cds--date-picker-input__wrapper { - display: flex; - align-items: center; -} - -.cds--date-picker-input__wrapper > span { - position: relative; -} - -.cds--date-picker.cds--date-picker--simple .cds--date-picker__input, -.cds--date-picker.cds--date-picker--simple .cds--label { - inline-size: 7.5rem; -} - -.cds--date-picker.cds--date-picker--simple .cds--date-picker-input__wrapper--invalid .cds--date-picker__input, -.cds--date-picker.cds--date-picker--simple .cds--date-picker-input__wrapper--invalid ~ .cds--form-requirement, -.cds--date-picker.cds--date-picker--simple .cds--date-picker-input__wrapper--warn .cds--date-picker__input, -.cds--date-picker.cds--date-picker--simple .cds--date-picker-input__wrapper--warn ~ .cds--form-requirement { - inline-size: 9.5rem; -} - -.cds--date-picker.cds--date-picker--simple.cds--date-picker--short .cds--date-picker__input { - inline-size: 5.7rem; -} - -.cds--date-picker.cds--date-picker--single .cds--date-picker__input { - inline-size: 18rem; -} - -.cds--date-picker .cds--date-picker-input__wrapper--warn ~ .cds--form-requirement { - color: var(--cds-text-primary, #161616); -} - -.cds--date-picker__input { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - font-family: var(--cds-code-02-font-family, 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace); - font-size: var(--cds-code-02-font-size, 0.875rem); - font-weight: var(--cds-code-02-font-weight, 400); - line-height: var(--cds-code-02-line-height, 1.42857); - letter-spacing: var(--cds-code-02-letter-spacing, 0.32px); - outline: 2px solid transparent; - outline-offset: -2px; - position: relative; - display: block; - padding: 0 1rem; - border: none; - background-color: var(--cds-field); - block-size: 2.5rem; - border-block-end: 1px solid var(--cds-border-strong); - color: var(--cds-text-primary, #161616); - transition: 70ms cubic-bezier(0.2, 0, 0.38, 0.9) all; -} -.cds--date-picker__input *, -.cds--date-picker__input *::before, -.cds--date-picker__input *::after { - box-sizing: inherit; -} -.cds--date-picker__input:focus, .cds--date-picker__input.cds--focused { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--date-picker__input:focus, .cds--date-picker__input.cds--focused { - outline-style: dotted; - } -} -.cds--date-picker__input:disabled { - background-color: var(--cds-field); - border-block-end: 1px solid transparent; - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); - cursor: not-allowed; -} -.cds--date-picker__input:disabled::-moz-placeholder { - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); -} -.cds--date-picker__input:disabled::placeholder { - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); -} -.cds--date-picker__input:disabled:hover { - border-block-end: 1px solid transparent; -} -.cds--date-picker__input::-moz-placeholder { - color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4)); - opacity: 1; -} -.cds--date-picker__input::placeholder { - color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4)); - opacity: 1; -} - -.cds--date-picker__input--lg { - block-size: 3rem; -} - -.cds--date-picker__input--sm { - block-size: 2rem; -} - -.cds--date-picker__icon { - position: absolute; - z-index: 1; - fill: var(--cds-icon-primary, #161616); - inset-block-start: 50%; - inset-inline-end: 1rem; - pointer-events: none; - transform: translateY(-50%); -} - -.cds--date-picker__icon--invalid, -.cds--date-picker__icon--warn { - cursor: auto; -} - -.cds--date-picker__icon--warn { - fill: var(--cds-support-warning, #f1c21b); -} - -.cds--date-picker__icon--warn path:first-of-type { - fill: #000000; - opacity: 1; -} - -.cds--date-picker__icon--invalid { - fill: var(--cds-support-error, #da1e28); -} - -.cds--date-picker__icon ~ .cds--date-picker__input { - padding-inline-end: 3rem; -} - -.cds--date-picker__input:disabled ~ .cds--date-picker__icon { - cursor: not-allowed; - fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--date-picker--range > .cds--date-picker-container:first-child { - margin-inline-end: 0.0625rem; -} - -.cds--date-picker--range .cds--date-picker-container, -.cds--date-picker--range .cds--date-picker__input { - inline-size: 8.96875rem; -} - -.cds--date-picker-input__wrapper--slug .cds--slug { - position: absolute; - inset-block-start: 50%; - inset-inline-end: 2.5rem; - transform: translateY(-50%); -} - -.cds--date-picker-input__wrapper--slug .cds--date-picker__input:not(:has(~ .cds--slug--revert)) { - background-image: linear-gradient(0deg, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%); - border-block-end-color: var(--cds-ai-border-strong, #4589ff); - padding-inline-end: 4rem; -} - -.cds--date-picker__input[readonly] { - background: transparent; - border-block-end-color: var(--cds-border-subtle); - cursor: text; -} - -.cds--date-picker__input[readonly] + .cds--date-picker__icon { - fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--date-picker.cds--skeleton input, -.cds--date-picker__input.cds--skeleton { - position: relative; - padding: 0; - border: none; - background: var(--cds-skeleton-background, #e8e8e8); - box-shadow: none; - pointer-events: none; - inline-size: 100%; -} -.cds--date-picker.cds--skeleton input:hover, .cds--date-picker.cds--skeleton input:focus, .cds--date-picker.cds--skeleton input:active, -.cds--date-picker__input.cds--skeleton:hover, -.cds--date-picker__input.cds--skeleton:focus, -.cds--date-picker__input.cds--skeleton:active { - border: none; - cursor: default; - outline: none; -} -.cds--date-picker.cds--skeleton input::before, -.cds--date-picker__input.cds--skeleton::before { - position: absolute; - animation: 3000ms ease-in-out cds--skeleton infinite; - background: var(--cds-skeleton-element, #c6c6c6); - block-size: 100%; - content: ""; - inline-size: 100%; - will-change: transform-origin, transform, opacity; -} -@media (prefers-reduced-motion: reduce) { - .cds--date-picker.cds--skeleton input::before, - .cds--date-picker__input.cds--skeleton::before { - animation: none; - } -} -.cds--date-picker.cds--skeleton input::-moz-placeholder, .cds--date-picker__input.cds--skeleton::-moz-placeholder { - color: transparent; -} -.cds--date-picker.cds--skeleton input::placeholder, -.cds--date-picker__input.cds--skeleton::placeholder { - color: transparent; -} - -.cds--date-picker.cds--skeleton .cds--label { - position: relative; - padding: 0; - border: none; - background: var(--cds-skeleton-background, #e8e8e8); - box-shadow: none; - pointer-events: none; - block-size: 0.875rem; - inline-size: 4.6875rem; -} -.cds--date-picker.cds--skeleton .cds--label:hover, .cds--date-picker.cds--skeleton .cds--label:focus, .cds--date-picker.cds--skeleton .cds--label:active { - border: none; - cursor: default; - outline: none; -} -.cds--date-picker.cds--skeleton .cds--label::before { - position: absolute; - animation: 3000ms ease-in-out cds--skeleton infinite; - background: var(--cds-skeleton-element, #c6c6c6); - block-size: 100%; - content: ""; - inline-size: 100%; - will-change: transform-origin, transform, opacity; -} -@media (prefers-reduced-motion: reduce) { - .cds--date-picker.cds--skeleton .cds--label::before { - animation: none; - } -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--date-picker__icon { - fill: ButtonText; - } -} - -.cds--dropdown__wrapper--inline { - display: inline-grid; - align-items: center; - grid-gap: 0 1.5rem; - grid-template: auto auto/auto min-content; -} -.cds--dropdown__wrapper--inline .cds--label { - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); -} -.cds--dropdown__wrapper--inline .cds--label, -.cds--dropdown__wrapper--inline .cds--form__helper-text, -.cds--dropdown__wrapper--inline .cds--form-requirement { - margin: 0; -} -.cds--dropdown__wrapper--inline .cds--form-requirement { - grid-column: 2; -} - -.cds--dropdown { - outline: 2px solid transparent; - outline-offset: -2px; - position: relative; - display: block; - border: none; - background-color: var(--cds-field); - block-size: 2.5rem; - border-block-end: 1px solid var(--cds-border-strong); - color: var(--cds-text-primary, #161616); - cursor: pointer; - inline-size: 100%; - list-style: none; - outline: 2px solid transparent; - transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -.cds--dropdown html { - font-size: 100%; -} -.cds--dropdown body { - font-weight: 400; - font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; -} -.cds--dropdown code { - font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace; -} -.cds--dropdown strong { - font-weight: 600; -} -.cds--dropdown:hover { - background-color: var(--cds-field-hover); -} - -.cds--dropdown .cds--list-box__field { - text-align: start; -} - -.cds--dropdown--lg { - block-size: 3rem; - max-block-size: 3rem; -} - -.cds--dropdown--lg .cds--dropdown__arrow { - inset-block-start: 1rem; -} - -.cds--dropdown--sm { - block-size: 2rem; - max-block-size: 2rem; -} - -.cds--dropdown--sm .cds--dropdown__arrow { - inset-block-start: 0.5rem; -} - -.cds--dropdown--open { - border-block-end-color: var(--cds-border-subtle); -} - -.cds--dropdown--open .cds--list-box__field { - outline: none; -} - -.cds--dropdown--invalid { - outline: 2px solid var(--cds-support-error, #da1e28); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--dropdown--invalid { - outline-style: dotted; - } -} -.cds--dropdown--invalid .cds--dropdown-text { - padding-inline-end: 3.5rem; -} -.cds--dropdown--invalid + .cds--form-requirement { - display: inline-block; - color: var(--cds-text-error, #da1e28); - max-block-size: 12.5rem; -} - -.cds--dropdown__invalid-icon { - position: absolute; - fill: var(--cds-support-error, #da1e28); - inset-block-start: 50%; - inset-inline-end: 2.5rem; - transform: translateY(-50%); -} - -.cds--dropdown--open:hover { - background-color: var(--cds-field); -} - -.cds--dropdown--open:focus { - outline: 1px solid transparent; -} - -.cds--dropdown--open .cds--dropdown-list { - box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3)); - max-block-size: 13.75rem; - transition: max-height 110ms cubic-bezier(0, 0, 0.38, 0.9); -} - -.cds--dropdown--light { - background-color: var(--cds-field-02, #ffffff); -} -.cds--dropdown--light:hover { - background-color: var(--cds-field-hover); -} - -.cds--dropdown--up .cds--dropdown-list { - inset-block-end: 2rem; -} - -.cds--dropdown__arrow { - position: absolute; - fill: var(--cds-icon-primary, #161616); - inset-block-start: 0.8125rem; - inset-inline-end: 1rem; - pointer-events: none; - transform-origin: 50% 45%; - transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -button.cds--dropdown-text { - border: none; - background: none; - color: var(--cds-text-primary, #161616); - inline-size: 100%; - text-align: start; -} -button.cds--dropdown-text:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - button.cds--dropdown-text:focus { - outline-style: dotted; - } -} - -.cds--dropdown-text { - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - display: block; - overflow: hidden; - block-size: calc(100% + 1px); - padding-inline-end: 2.625rem; - padding-inline-start: 1rem; - text-overflow: ellipsis; - white-space: nowrap; -} - -.cds--dropdown-list { - outline: 2px solid transparent; - outline-offset: -2px; - box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3)); - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - position: absolute; - z-index: 9100; - display: flex; - flex-direction: column; - background-color: var(--cds-layer); - inline-size: 100%; - list-style: none; - max-block-size: 0; - overflow-x: hidden; - overflow-y: auto; - transition: max-height 110ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -.cds--dropdown-list html { - font-size: 100%; -} -.cds--dropdown-list body { - font-weight: 400; - font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; -} -.cds--dropdown-list code { - font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace; -} -.cds--dropdown-list strong { - font-weight: 600; -} - -.cds--dropdown--light .cds--dropdown-list { - background-color: var(--cds-layer); -} - -.cds--dropdown:not(.cds--dropdown--open) .cds--dropdown-item { - visibility: hidden; -} - -.cds--dropdown-item { - position: relative; - opacity: 0; - transition: visibility 70ms cubic-bezier(0.2, 0, 0.38, 0.9), opacity 70ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9); - visibility: inherit; -} -.cds--dropdown-item:hover { - background-color: var(--cds-layer-hover); -} -.cds--dropdown-item:hover + .cds--dropdown-item .cds--dropdown-link { - border-color: transparent; -} -.cds--dropdown-item:active { - background-color: var(--cds-layer-selected); -} -.cds--dropdown-item:first-of-type .cds--dropdown-link { - border-block-start-color: transparent; -} - -.cds--dropdown-item:last-of-type .cds--dropdown-link { - border-block-end: none; -} - -.cds--dropdown-link { - outline: 2px solid transparent; - outline-offset: -2px; - display: block; - overflow: hidden; - padding: 0.6875rem 0; - border: 1px solid transparent; - margin: 0 1rem; - block-size: 2.5rem; - border-block-start-color: var(--cds-border-subtle); - color: var(--cds-text-secondary, #525252); - font-weight: normal; - line-height: 1rem; - text-decoration: none; - text-overflow: ellipsis; - white-space: nowrap; -} -.cds--dropdown-link:hover { - border-color: transparent; - color: var(--cds-text-primary, #161616); -} - -.cds--dropdown--light .cds--dropdown-link { - border-block-start-color: var(--cds-border-subtle-02, #e0e0e0); -} - -.cds--dropdown--sm .cds--dropdown-link { - block-size: 2rem; - padding-block-end: 0.4375rem; - padding-block-start: 0.4375rem; -} - -.cds--dropdown--focused, -.cds--dropdown-link:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; - padding: 0.6875rem 1rem; - margin: 0; -} -@media screen and (prefers-contrast) { - .cds--dropdown--focused, - .cds--dropdown-link:focus { - outline-style: dotted; - } -} - -.cds--dropdown-list[aria-activedescendant] .cds--dropdown-link:focus { - padding: 0.6875rem 0; - margin: 0 1rem; - outline: none; -} - -.cds--dropdown-list[aria-activedescendant] .cds--dropdown--focused:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; - padding: 0.6875rem 1rem; - margin: 0; -} -@media screen and (prefers-contrast) { - .cds--dropdown-list[aria-activedescendant] .cds--dropdown--focused:focus { - outline-style: dotted; - } -} - -.cds--dropdown-list[aria-activedescendant] .cds--dropdown-item:active { - background-color: inherit; -} - -.cds--dropdown-item:hover .cds--dropdown-link { - border-block-end-color: var(--cds-layer-hover); -} - -.cds--dropdown--open .cds--dropdown__arrow { - transform: rotate(-180deg); -} - -.cds--dropdown--open.cds--dropdown--sm .cds--dropdown-list { - max-block-size: 11rem; -} - -.cds--dropdown--open .cds--dropdown-item { - opacity: 1; -} - -.cds--dropdown--disabled { - border-block-end-color: transparent; -} -.cds--dropdown--disabled:hover { - background-color: var(--cds-field); -} -.cds--dropdown--disabled:focus { - outline: none; -} -.cds--dropdown--disabled .cds--dropdown-text, -.cds--dropdown--disabled .cds--list-box__label { - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); -} -.cds--dropdown--disabled .cds--dropdown__arrow, -.cds--dropdown--disabled .cds--list-box__menu-icon svg { - fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} -.cds--dropdown--disabled.cds--dropdown--light:hover { - background-color: var(--cds-field-02, #ffffff); -} - -.cds--dropdown--disabled .cds--list-box__field, -.cds--dropdown--disabled .cds--list-box__menu-icon { - cursor: not-allowed; -} - -.cds--dropdown--auto-width { - inline-size: auto; - max-inline-size: 25rem; -} - -.cds--dropdown--inline { - display: inline-block; - background-color: transparent; - border-block-end-color: transparent; - inline-size: auto; - justify-self: start; - transition: background 70ms cubic-bezier(0, 0, 0.38, 0.9); -} -.cds--dropdown--inline:hover { - background-color: var(--cds-layer-hover); -} -.cds--dropdown--inline.cds--dropdown--disabled { - background-color: transparent; -} -.cds--dropdown--inline .cds--dropdown__arrow { - inset-block-start: 0.5rem; - inset-inline-end: 0.5rem; -} - -.cds--dropdown--inline.cds--dropdown--open { - background-color: transparent; -} - -.cds--dropdown--inline .cds--dropdown-text { - display: inline-block; - overflow: visible; - padding: 0.4375rem 2rem 0.4375rem 0.75rem; - block-size: 2rem; - color: var(--cds-text-primary, #161616); -} - -.cds--dropdown--inline.cds--dropdown--disabled .cds--dropdown-text { - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--dropdown--inline.cds--dropdown--disabled:focus .cds--dropdown-text { - outline: 0; -} - -.cds--dropdown--inline.cds--dropdown--invalid .cds--dropdown__invalid-icon { - inset-inline-end: 2rem; -} - -.cds--dropdown--inline.cds--dropdown--invalid .cds--dropdown-text { - padding-inline-end: 3.5rem; -} - -.cds--dropdown--inline.cds--dropdown--open:focus .cds--dropdown-list { - box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3)); -} - -.cds--dropdown--inline .cds--dropdown-link { - font-weight: normal; -} - -.cds--dropdown--show-selected .cds--dropdown--selected { - display: block; - background-color: var(--cds-layer-selected); - color: var(--cds-text-primary, #161616); -} -.cds--dropdown--show-selected .cds--dropdown--selected:hover { - background-color: var(--cds-layer-selected-hover); -} -.cds--dropdown--show-selected .cds--dropdown--selected .cds--dropdown-link { - border-block-start-color: transparent; -} -.cds--dropdown--show-selected .cds--dropdown--selected + .cds--dropdown-item .cds--dropdown-link { - border-block-start-color: transparent; -} -.cds--dropdown--show-selected .cds--dropdown--selected .cds--list-box__menu-item__selected-icon { - display: block; -} - -.cds--dropdown-v2.cds--skeleton, -.cds--dropdown.cds--skeleton { - position: relative; - padding: 0; - border: none; - background: var(--cds-skeleton-background, #e8e8e8); - box-shadow: none; - pointer-events: none; -} -.cds--dropdown-v2.cds--skeleton:hover, .cds--dropdown-v2.cds--skeleton:focus, .cds--dropdown-v2.cds--skeleton:active, -.cds--dropdown.cds--skeleton:hover, -.cds--dropdown.cds--skeleton:focus, -.cds--dropdown.cds--skeleton:active { - border: none; - cursor: default; - outline: none; -} -.cds--dropdown-v2.cds--skeleton::before, -.cds--dropdown.cds--skeleton::before { - position: absolute; - animation: 3000ms ease-in-out cds--skeleton infinite; - background: var(--cds-skeleton-element, #c6c6c6); - block-size: 100%; - content: ""; - inline-size: 100%; - will-change: transform-origin, transform, opacity; -} -@media (prefers-reduced-motion: reduce) { - .cds--dropdown-v2.cds--skeleton::before, - .cds--dropdown.cds--skeleton::before { - animation: none; - } -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--dropdown .cds--list-box__field { - outline: 1px solid transparent; - } -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--list-box__menu-item__option { - outline: none; - } -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--list-box__menu-item__selected-icon { - fill: ButtonText; - } -} - -.cds--dropdown--readonly, -.cds--dropdown--readonly:hover { - background-color: transparent; - border-block-end-color: var(--cds-border-subtle); -} - -.cds--dropdown--inline.cds--dropdown--readonly { - border-block-end-color: transparent; -} - -.cds--dropdown--readonly .cds--list-box__field, -.cds--dropdown--readonly .cds--list-box__menu-icon { - cursor: default; -} - -.cds--dropdown--readonly .cds--list-box__menu-icon svg { - fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--loading { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - animation-duration: 690ms; - animation-fill-mode: forwards; - animation-iteration-count: infinite; - animation-name: cds--rotate; - animation-timing-function: linear; - block-size: 5.5rem; - inline-size: 5.5rem; -} -.cds--loading *, -.cds--loading *::before, -.cds--loading *::after { - box-sizing: inherit; -} -.cds--loading svg circle { - animation-duration: 10ms; - animation-name: cds--init-stroke; - animation-timing-function: cubic-bezier(0.5, 0, 0.1, 1); -} -@media screen and (prefers-reduced-motion: reduce) { - .cds--loading svg circle { - animation: none; - } -} - -.cds--loading__svg { - fill: transparent; -} - -.cds--loading__svg circle { - stroke-dasharray: 276.4608 276.4608; - stroke-linecap: butt; - stroke-width: 10; -} - -.cds--loading__stroke { - stroke: var(--cds-interactive, #0f62fe); - stroke-dashoffset: 52.527552; -} - -.cds--loading--small .cds--loading__stroke { - stroke-dashoffset: 143.759616; -} - -.cds--loading--stop { - animation: cds--rotate-end-p1 700ms cubic-bezier(0, 0, 0.25, 1) forwards, cds--rotate-end-p2 700ms cubic-bezier(0, 0, 0.25, 1) 700ms forwards; -} -.cds--loading--stop svg circle { - animation-delay: 700ms; - animation-duration: 700ms; - animation-fill-mode: forwards; - animation-name: cds--stroke-end; - animation-timing-function: cubic-bezier(0, 0, 0.25, 1); -} -@media screen and (prefers-reduced-motion: reduce) { - .cds--loading--stop svg circle { - animation: none; - } -} - -.cds--loading--small { - block-size: 1rem; - inline-size: 1rem; - line-height: 1rem; -} -.cds--loading--small circle { - stroke-width: 16; -} - -.cds--loading--small .cds--loading__svg { - stroke: var(--cds-interactive, #0f62fe); -} - -.cds--loading__background { - stroke: var(--cds-layer-accent); - stroke-dashoffset: -22; -} - -@media not all and (resolution >= 0.001dpcm) { - @supports (-webkit-appearance: none) and (stroke-color: transparent) { - circle.cds--loading__background { - stroke-dasharray: 265; - stroke-dashoffset: 0; - } - } -} -.cds--loading-overlay { - position: fixed; - z-index: 6000; - display: flex; - align-items: center; - justify-content: center; - background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5)); - block-size: 100%; - inline-size: 100%; - inset-block-start: 0; - inset-inline-start: 0; - transition: background-color 700ms cubic-bezier(0.4, 0.14, 0.3, 1); -} - -.cds--loading-overlay--stop { - display: none; -} - -@keyframes cds--rotate { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} -@keyframes cds--rotate-end-p1 { - 100% { - transform: rotate(360deg); - } -} -@keyframes cds--rotate-end-p2 { - 100% { - transform: rotate(-360deg); - } -} -/* Stroke animations */ -@keyframes cds--init-stroke { - 0% { - stroke-dashoffset: 276.4608; - } - 100% { - stroke-dashoffset: 52.527552; - } -} -@keyframes cds--stroke-end { - 0% { - stroke-dashoffset: 52.527552; - } - 100% { - stroke-dashoffset: 276.4608; - } -} -.cds--file { - inline-size: 100%; -} - -.cds--file--invalid { - fill: var(--cds-support-error, #da1e28); - margin-inline-end: 0.5rem; -} - -.cds--file--label { - font-size: var(--cds-heading-compact-01-font-size, 0.875rem); - font-weight: var(--cds-heading-compact-01-font-weight, 600); - line-height: var(--cds-heading-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px); - color: var(--cds-text-primary, #161616); - margin-block-end: 0.5rem; -} -.cds--file--label html { - font-size: 100%; -} -.cds--file--label body { - font-weight: 400; - font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; -} -.cds--file--label code { - font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace; -} -.cds--file--label strong { - font-weight: 600; -} - -.cds--file--label--disabled { - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--file-input { - position: absolute; - overflow: hidden; - padding: 0; - border: 0; - margin: -1px; - block-size: 1px; - clip: rect(0, 0, 0, 0); - inline-size: 1px; - visibility: inherit; - white-space: nowrap; -} - -.cds--file-btn { - display: inline-flex; - margin: 0; - padding-inline-end: 4rem; -} - -.cds--file-browse-btn { - display: inline-block; - color: var(--cds-link-primary, #0f62fe); - cursor: pointer; - inline-size: 100%; - max-inline-size: 20rem; - outline: 2px solid transparent; - outline-offset: -2px; - transition: 110ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -.cds--file-browse-btn:focus, .cds--file-browse-btn:hover { - outline: 2px solid var(--cds-focus, #0f62fe); -} -.cds--file-browse-btn:hover, .cds--file-browse-btn:focus, .cds--file-browse-btn:active, .cds--file-browse-btn:active:visited { - text-decoration: underline; -} -.cds--file-browse-btn:active { - color: var(--cds-text-primary, #161616); -} - -.cds--file-browse-btn--disabled { - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); - cursor: no-drop; - text-decoration: none; - transition: none; -} -.cds--file-browse-btn--disabled:hover, .cds--file-browse-btn--disabled:focus { - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); - outline: none; - text-decoration: none; -} - -.cds--file-browse-btn--disabled .cds--file__drop-container { - border: 1px dashed var(--cds-button-disabled, #c6c6c6); -} - -.cds--label-description { - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - color: var(--cds-text-secondary, #525252); - margin-block-end: 1rem; -} -.cds--label-description html { - font-size: 100%; -} -.cds--label-description body { - font-weight: 400; - font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; -} -.cds--label-description code { - font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace; -} -.cds--label-description strong { - font-weight: 600; -} - -.cds--label-description--disabled { - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--file-container--drop { - inline-size: 100%; -} - -.cds--file-btn ~ .cds--file-container { - margin-block-start: 1.5rem; -} - -.cds--btn ~ .cds--file-container { - margin-block-start: 1rem; -} - -.cds--file .cds--file-container, -.cds--file ~ .cds--file-container { - margin-block-start: 0.5rem; -} - -.cds--file__selected-file { - display: grid; - align-items: center; - background-color: var(--cds-layer); - gap: 0.75rem 0; - grid-auto-rows: auto; - grid-template-columns: 1fr auto; - margin-block-end: 0.5rem; - max-inline-size: 20rem; - min-block-size: 3rem; - word-break: break-word; -} -.cds--file__selected-file:last-child { - margin-block-end: 0; -} -.cds--file__selected-file .cds--form-requirement { - display: block; - margin: 0; - grid-column: 1/-1; - max-block-size: none; -} -.cds--file__selected-file .cds--inline-loading__animation .cds--loading { - margin-inline-end: 0; -} -.cds--file__selected-file .cds--file-filename { - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - overflow: hidden; - margin-inline-start: 1rem; - text-overflow: ellipsis; - white-space: nowrap; -} -.cds--file__selected-file .cds--file-filename-container-wrap { - margin-block-start: 1px; - max-inline-size: 17.5rem; - padding-inline-start: 1rem; -} -@media (max-width: 410px) { - .cds--file__selected-file .cds--file-filename-container-wrap { - max-inline-size: 13.5rem; - } -} -.cds--file__selected-file .cds--file-filename-container-wrap-invalid { - max-inline-size: 15.5rem; -} -.cds--file__selected-file .cds--file-filename-container-wrap-invalid .cds--file-filename-tooltip { - inline-size: -webkit-fill-available; - padding-inline-start: 1rem; -} -@-moz-document url-prefix() { - .cds--file__selected-file .cds--file-filename-container-wrap-invalid .cds--file-filename-tooltip { - inline-size: -moz-available; - } -} -.cds--file__selected-file .cds--file-filename-tooltip { - inline-size: -webkit-fill-available; -} -@-moz-document url-prefix() { - .cds--file__selected-file .cds--file-filename-tooltip { - inline-size: -moz-available; - } -} -.cds--file__selected-file .cds--file-filename-button { - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - overflow: hidden; - padding: 0; - border: none; - background: none; - color: inherit; - cursor: pointer; - font: inherit; - inline-size: -webkit-fill-available; - outline: inherit; - text-overflow: ellipsis; - white-space: nowrap; -} -@-moz-document url-prefix() { - .cds--file__selected-file .cds--file-filename-button { - inline-size: -moz-available; - } -} -.cds--file__selected-file .cds--file-filename-button:focus { - outline: revert; -} - -.cds--file__selected-file--md { - gap: 0.5rem 0; - min-block-size: 2.5rem; -} - -.cds--file__selected-file--sm { - gap: 0.25rem 0; - min-block-size: 2rem; -} - -.cds--file__selected-file--invalid__wrapper { - outline: 2px solid var(--cds-support-error, #da1e28); - outline-offset: -2px; - background-color: var(--cds-layer); - margin-block-end: 0.5rem; - max-inline-size: 20rem; - outline-width: 1px; -} -@media screen and (prefers-contrast) { - .cds--file__selected-file--invalid__wrapper { - outline-style: dotted; - } -} - -.cds--file__selected-file--invalid { - outline: 2px solid var(--cds-support-error, #da1e28); - outline-offset: -2px; - padding: 0.75rem 0; -} -@media screen and (prefers-contrast) { - .cds--file__selected-file--invalid { - outline-style: dotted; - } -} - -.cds--file__selected-file--invalid.cds--file__selected-file--sm { - padding: 0.25rem 0; -} - -.cds--file__selected-file--invalid.cds--file__selected-file--md { - padding: 0.5rem 0; -} - -.cds--file__selected-file--invalid .cds--form-requirement { - border-block-start: 1px solid var(--cds-border-subtle); - padding-block-start: 1rem; -} - -.cds--file__selected-file--invalid.cds--file__selected-file--sm .cds--form-requirement { - padding-block-start: 0.4375rem; -} - -.cds--file__selected-file--invalid.cds--file__selected-file--md .cds--form-requirement { - padding-block-start: 0.6875rem; -} - -.cds--file__selected-file--invalid .cds--form-requirement__title, -.cds--file__selected-file--invalid .cds--form-requirement__supplement { - font-size: var(--cds-label-01-font-size, 0.75rem); - font-weight: var(--cds-label-01-font-weight, 400); - line-height: var(--cds-label-01-line-height, 1.33333); - letter-spacing: var(--cds-label-01-letter-spacing, 0.32px); - padding: 0 1rem; -} - -.cds--file__selected-file--invalid .cds--form-requirement__title { - color: var(--cds-text-error, #da1e28); -} - -.cds--file__selected-file--invalid .cds--form-requirement__supplement { - color: var(--cds-text-primary, #161616); -} - -.cds--file__selected-file--invalid + .cds--form-requirement { - font-size: var(--cds-label-01-font-size, 0.75rem); - font-weight: var(--cds-label-01-font-weight, 400); - line-height: var(--cds-label-01-line-height, 1.33333); - letter-spacing: var(--cds-label-01-letter-spacing, 0.32px); - display: block; - overflow: visible; - padding: 0.5rem 1rem; - color: var(--cds-text-error, #da1e28); - font-weight: 400; - max-block-size: 12.5rem; -} - -.cds--file__selected-file--invalid + .cds--form-requirement .cds--form-requirement__supplement { - color: var(--cds-text-primary, #161616); - padding-block-end: 0.5rem; -} - -.cds--file__state-container { - display: flex; - align-items: center; - justify-content: center; - min-inline-size: 1.5rem; - padding-inline-end: 0.75rem; -} -.cds--file__state-container .cds--loading__svg { - stroke: var(--cds-icon-primary, #161616); -} - -.cds--file__state-container .cds--file-loading { - display: flex; - align-items: center; - justify-content: center; - padding: 0.25rem; - border: none; - background-color: transparent; - block-size: 1rem; - inline-size: 1.5rem; -} - -.cds--file__state-container .cds--file-complete { - fill: var(--cds-interactive, #0f62fe); - inline-size: 1.5rem; -} -.cds--file__state-container .cds--file-complete:focus { - outline: 1px solid var(--cds-focus, #0f62fe); -} -@media screen and (prefers-contrast) { - .cds--file__state-container .cds--file-complete:focus { - outline-style: dotted; - } -} -.cds--file__state-container .cds--file-complete [data-icon-path=inner-path] { - fill: var(--cds-icon-inverse, #ffffff); - opacity: 1; -} - -.cds--file__state-container .cds--file-invalid { - block-size: 1rem; - fill: var(--cds-support-error, #da1e28); - inline-size: 1rem; -} - -.cds--file__state-container .cds--file-close { - display: flex; - align-items: center; - justify-content: center; - padding: 0; - border: none; - background-color: transparent; - block-size: 1.5rem; - cursor: pointer; - fill: var(--cds-icon-primary, #161616); - inline-size: 1.5rem; -} -.cds--file__state-container .cds--file-close:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--file__state-container .cds--file-close:focus { - outline-style: dotted; - } -} - -.cds--file__state-container .cds--file-close svg path { - fill: var(--cds-icon-primary, #161616); -} - -.cds--file__state-container .cds--inline-loading__animation { - margin-inline-end: -0.5rem; -} - -.cds--file__drop-container { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: inline-block; - padding: 0; - border: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: none; - cursor: pointer; - text-align: start; - inline-size: 100%; - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - display: flex; - overflow: hidden; - align-items: flex-start; - justify-content: space-between; - padding: 1rem; - border: 1px dashed var(--cds-border-strong); - block-size: 6rem; -} -.cds--file__drop-container *, -.cds--file__drop-container *::before, -.cds--file__drop-container *::after { - box-sizing: inherit; -} -.cds--file__drop-container::-moz-focus-inner { - border: 0; -} - -.cds--file__drop-container--drag-over { - background: none; - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} - -/* stylelint-disable */ -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--file__selected-file { - outline: 1px solid transparent; - } -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--file__state-container .cds--file-close svg path { - fill: ButtonText; - } -} - -/* stylelint-enable */ -.cds--list-box__wrapper--fluid.cds--list-box__wrapper { - position: relative; - background: var(--cds-field); - block-size: 100%; - transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -.cds--list-box__wrapper--fluid .cds--list-box { - padding: 0; - min-block-size: 4rem; -} - -.cds--list-box__wrapper--fluid .cds--label { - position: absolute; - z-index: 1; - display: flex; - align-items: center; - margin: 0; - block-size: 1rem; - inline-size: calc(100% - 2rem); - inset-block-start: 0.8125rem; - inset-inline-start: 1rem; -} - -.cds--list-box__wrapper--fluid .cds--label::-webkit-scrollbar, -.cds--list-box__wrapper--fluid .cds--label .cds--toggletip-label::-webkit-scrollbar { - display: none; -} - -.cds--list-box__wrapper--fluid .cds--label:not(:has(.cds--toggletip-label)), -.cds--list-box__wrapper--fluid .cds--label .cds--toggletip-label { - -ms-overflow-style: none; - overflow-x: scroll; - scrollbar-width: none; - white-space: nowrap; -} - -.cds--list-box__wrapper--fluid .cds--list-box__field { - padding-block-end: 0.8125rem; - padding-block-start: 2.0625rem; - padding-inline-start: 1rem; -} - -.cds--list-box__wrapper--fluid .cds--list-box__menu-icon { - block-size: 1rem; - inline-size: 1rem; -} - -.cds--list-box__wrapper--fluid:not(.cds--list-box__wrapper--fluid--condensed) .cds--list-box__menu-item { - block-size: 4rem; -} - -.cds--list-box__wrapper--fluid:not(.cds--list-box__wrapper--fluid--condensed) .cds--list-box__menu-item__selected-icon { - inset-block-start: 1.25rem; -} - -.cds--list-box__wrapper--fluid .cds--label--disabled .cds--toggletip-label { - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--list-box__wrapper--fluid .cds--label--disabled .cds--toggletip-button { - cursor: not-allowed; - pointer-events: none; -} - -.cds--list-box__wrapper--fluid .cds--label--disabled .cds--toggletip-button svg { - fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; - z-index: 2; - outline-offset: 0; -} -@media screen and (prefers-contrast) { - .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--focus { - outline-style: dotted; - } -} - -.cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--focus:has(.cds--list-box--expanded) { - outline-width: 0.0625rem; -} - -.cds--list-box__wrapper--fluid .cds--list-box__field:focus { - outline: none; - outline-offset: 0; -} - -.cds--list-box__wrapper--fluid:not(.cds--list-box--up) .cds--list-box__menu { - inset-block-start: 100%; -} - -.cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid:not(.cds--list-box__wrapper--fluid--focus) { - outline: 2px solid var(--cds-support-error, #da1e28); - outline-offset: -2px; - z-index: 2; - outline-offset: 0; -} -@media screen and (prefers-contrast) { - .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid:not(.cds--list-box__wrapper--fluid--focus) { - outline-style: dotted; - } -} - -.cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--focus .cds--list-box:not(.cds--list-box--invalid), -.cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--focus .cds--list-box .cds--text-input, -.cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid .cds--list-box .cds--text-input, -.cds--list-box__wrapper--fluid .cds--combo-box.cds--list-box--warning .cds--text-input { - border-block-end: 1px solid transparent; -} - -.cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid .cds--list-box, -.cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid .cds--list-box__field:focus, -.cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid .cds--combo-box[data-invalid] .cds--text-input { - outline: none; - outline-offset: 0; -} - -.cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid:focus-within { - outline-offset: 0; -} - -.cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid .cds--list-box, -.cds--list-box__wrapper--fluid .cds--list-box--warning { - border-block-end: 1px solid transparent; -} - -.cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid .cds--form-requirement, -.cds--list-box__wrapper--fluid .cds--list-box--warning ~ .cds--form-requirement { - padding: 0.5rem 4rem 0.5rem 1rem; - margin-block-start: 0; -} - -.cds--list-box__wrapper--fluid .cds--list-box--warning ~ .cds--form-requirement { - border-block-end: 1px solid var(--cds-border-strong); -} - -.cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid .cds--list-box[data-invalid] .cds--list-box__invalid-icon, -.cds--list-box__wrapper--fluid .cds--list-box.cds--list-box--warning .cds--list-box__invalid-icon { - inset-block-start: 5.0625rem; - inset-inline-end: 1rem; - pointer-events: none; -} - -.cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid .cds--list-box[data-invalid]:not(.cds--combo-box) .cds--list-box__field { - padding-inline-end: 3rem; -} - -.cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid .cds--list-box[data-invalid].cds--combo-box .cds--text-input { - padding-inline-end: 4rem; -} - -.cds--list-box__wrapper--fluid .cds--list-box__divider { - display: none; - transition: border-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -.cds--list-box__wrapper--fluid .cds--list-box--invalid ~ .cds--list-box__divider, -.cds--list-box__wrapper--fluid .cds--list-box--warning ~ .cds--list-box__divider { - display: block; - border: none; - margin: 0 1rem; - border-block-end: 1px solid var(--cds-border-subtle); -} - -.cds--list-box__wrapper--fluid .cds--list-box--invalid:hover:not(.cds--combo-box) ~ .cds--list-box__divider, -.cds--list-box__wrapper--fluid .cds--list-box--warning:hover:not(.cds--combo-box) ~ .cds--list-box__divider { - border-color: transparent; -} - -.cds--list-box__wrapper--fluid.cds--list-box--up .cds--list-box__menu { - inset-block-end: 4rem; -} - -.cds--list-box__wrapper--fluid .cds--skeleton { - background: var(--cds-skeleton-background, #e8e8e8); - border-block-end: 1px solid var(--cds-skeleton-element, #c6c6c6); -} - -.cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__field { - position: absolute; - padding: 0; - block-size: 0.5rem; - inline-size: 50%; - inset-block-start: 2.25rem; - inset-inline-start: 1rem; -} - -.cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__label { - position: absolute; - block-size: 0.5rem; - inline-size: 25%; - inset-block-start: 1rem; - inset-inline-start: 1rem; -} - -.cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__field, -.cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__label { - animation: 3000ms ease-in-out skeleton infinite; - background: var(--cds-skeleton-element, #c6c6c6); -} - -.cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--slug { - inset-block-start: 2.625rem; -} - -.cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--list-box--warning .cds--slug, -.cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--list-box--invalid .cds--slug { - inset-inline-end: 2.5rem; -} - -.cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--list-box--warning button.cds--list-box__field, -.cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid.cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] button.cds--list-box__field { - padding-inline-end: 4rem; -} - -.cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--list-box--warning .cds--text-input:not(.cds--text-input--empty), -.cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug.cds--list-box__wrapper--fluid--invalid .cds--list-box--invalid .cds--text-input:not(.cds--text-input--empty) { - padding-inline-end: 5.5rem; -} - -.cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--list-box--warning .cds--list-box__field:has(.cds--text-input:not(.cds--text-input--empty)) ~ .cds--slug, -.cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--list-box--invalid .cds--list-box__field:has(.cds--text-input:not(.cds--text-input--empty)) ~ .cds--slug { - inset-inline-end: 4rem; -} - -.cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--text-input:not(.cds--text-input--empty) { - padding-inline-end: 6rem; -} - -.cds--list-box__wrapper--fluid .cds--list-box__selection { - inset-inline-end: 2.5625rem; -} - -.cds--list-box__wrapper--fluid .cds--list-box--warning .cds--list-box__field:has(.cds--list-box__menu-icon) .cds--list-box__selection::before, -.cds--list-box__wrapper--fluid .cds--list-box--invalid[data-invalid] .cds--list-box__field:has(.cds--list-box__menu-icon) .cds--list-box__selection::before { - position: absolute; - background-color: transparent; - block-size: 1rem; - content: ""; - inline-size: 0.0625rem; - margin-inline-end: 2.0625rem; -} - -.cds--list-box__wrapper--fluid:has(.cds--multi-select) .cds--list-box__menu-icon { - inset-inline-end: 0.75rem; -} - -.cds--list-box__wrapper--fluid:has(.cds--dropdown) .cds--list-box__menu-icon { - inset-inline-end: 0.75rem; -} - -.cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--slug::before, -.cds--list-box__wrapper--slug .cds--list-box--warning .cds--slug::before { - display: none; -} - -.cds--list-box__wrapper--fluid .cds--combo-box .cds--list-box__field { - overflow: visible; - padding: 0; -} - -.cds--list-box__wrapper--fluid .cds--combo-box .cds--text-input { - overflow: hidden; - padding-block: 2.0625rem 0.8125rem; - padding-inline: 1rem 4rem; - text-overflow: ellipsis; - transition: none; - white-space: nowrap; -} - -.cds--list-box__wrapper--fluid .cds--combo-box .cds--text-input:focus { - outline: none; -} - -.cds--list-box__wrapper--fluid .cds--combo-box .cds--list-box__selection { - inset-block-end: 0.625rem; - inset-block-start: auto; - transform: none; -} - -.cds--list-box__wrapper--fluid .cds--combo-box .cds--list-box__menu-icon { - inset-block-end: 0.875rem; -} - -.cds--list-box__wrapper--fluid .cds--list-box[data-invalid] .cds--list-box__field .cds--text-input + .cds--list-box__invalid-icon, -.cds--list-box__wrapper--fluid .cds--list-box--warning .cds--list-box__field .cds--text-input + .cds--list-box__invalid-icon { - inset-inline-end: 1rem; -} - -.cds--list-box__wrapper--fluid :not(.cds--list-box--up) .cds--combo-box .cds--list-box__menu { - inset-block-start: calc(100% + 0.0625rem); -} - -.cds--date-picker--fluid { - display: inline-flex; - background: var(--cds-field); -} - -.cds--date-picker--fluid .cds--date-picker { - position: relative; - block-size: 100%; - inline-size: 100%; - transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -.cds--date-picker--fluid .cds--label { - position: absolute; - z-index: 1; - display: flex; - align-items: center; - margin: 0; - block-size: 1rem; - inline-size: calc(100% - 2rem); - inset-block-start: 0.8125rem; - inset-inline-start: 1rem; -} - -.cds--date-picker--fluid .cds--label::-webkit-scrollbar, -.cds--date-picker--fluid .cds--label .cds--toggletip-label::-webkit-scrollbar { - display: none; -} - -.cds--date-picker--fluid .cds--label:not(:has(.cds--toggletip-label)), -.cds--date-picker--fluid .cds--label .cds--toggletip-label { - -ms-overflow-style: none; - overflow-x: scroll; - scrollbar-width: none; - white-space: nowrap; -} - -.cds--date-picker--fluid .cds--date-picker-input__wrapper > span { - inline-size: 100%; -} - -.cds--date-picker--fluid .cds--date-picker-input__wrapper .cds--date-picker__input { - padding: 2rem 1rem 0.8125rem; - background: transparent; - border-block-end: none; - min-block-size: 4rem; - min-inline-size: 9rem; -} - -.cds--date-picker--fluid .cds--date-picker--simple .cds--date-picker__icon { - display: none; -} - -.cds--date-picker--fluid .cds--date-picker--simple .cds--date-picker__input:not(.cds--date-picker__input--invalid):not(.cds--date-picker__input--warn), -.cds--date-picker--fluid .cds--date-picker--simple .cds--date-picker--fluid--warn { - border-block-end: 1px solid var(--cds-border-strong); -} - -.cds--date-picker--fluid .cds--date-picker__icon { - inset-block-start: 2.6875rem; -} - -.cds--date-picker--fluid .cds--date-picker--single .cds--date-picker__input { - inline-size: 100%; -} - -.cds--date-picker--fluid .cds--date-picker--single { - border-block-end: none; -} - -.cds--date-picker--fluid .cds--date-picker--single .cds--date-picker__input:not(.cds--date-picker__input--invalid), -.cds--date-picker--single .cds--date-picker--fluid--warn { - border-block-end: 1px solid var(--cds-border-strong); -} - -.cds--date-picker--fluid:not(.cds--date-picker--fluid--invalid):not(.cds--date-picker--fluid--warn) .cds--date-picker--range .cds--date-picker-container:not(.cds--date-picker--fluid--invalid) { - border-block-end: 1px solid var(--cds-border-strong); -} - -.cds--date-picker--fluid .cds--date-picker--range .cds--date-picker__input, -.cds--date-picker--fluid .cds--date-picker--range .cds--date-picker-container { - inline-size: 100%; - min-block-size: 3.9375rem; - min-inline-size: 9rem; -} - -.cds--date-picker--fluid .cds--date-picker--range > .cds--date-picker-container:first-child { - margin-inline-end: 0; -} - -.cds--date-picker--fluid .cds--date-picker--range > .cds--date-picker-container:last-child .cds--date-picker__input { - border-inline-start: 1px solid var(--cds-border-strong); -} - -.cds--date-picker--fluid.cds--date-picker--fluid--invalid, -.cds--date-picker-container.cds--date-picker--fluid--invalid { - outline: 2px solid var(--cds-support-error, #da1e28); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--date-picker--fluid.cds--date-picker--fluid--invalid, - .cds--date-picker-container.cds--date-picker--fluid--invalid { - outline-style: dotted; - } -} - -.cds--date-picker--fluid .cds--date-picker-container.cds--date-picker--fluid--invalid .cds--date-picker__input--invalid { - outline: none; -} - -.cds--date-picker--fluid .cds--date-picker-container:last-child.cds--date-picker--fluid--invalid .cds--date-picker__input--invalid, -.cds--date-picker--fluid .cds--date-picker-container.cds--date-picker--fluid--invalid + .cds--date-picker-container .cds--date-picker__input { - border-inline-start: none; -} - -.cds--date-picker-container.cds--date-picker--fluid--invalid .cds--form-requirement, -.cds--date-picker-container.cds--date-picker--fluid--warn .cds--form-requirement { - padding: 0.5rem 2.5rem 0.5rem 1rem; - margin: 0; -} - -.cds--date-picker-container.cds--date-picker--fluid--invalid .cds--date-picker--fluid.cds--date-picker--fluid--invalid .cds--date-picker, -.cds--date-picker--fluid.cds--date-picker--fluid--invalid .cds--date-picker, -.cds--date-picker--fluid .cds--date-picker--single .cds--date-picker--fluid--warn .cds--date-picker__input, -.cds--date-picker--fluid.cds--date-picker--fluid--warn .cds--date-picker--range .cds--date-picker-container { - border-block-end: 1px solid transparent; -} - -.cds--date-picker--fluid.cds--date-picker--fluid--invalid .cds--date-picker--range > .cds--date-picker-container:last-child .cds--date-picker__input, -.cds--date-picker--fluid.cds--date-picker--fluid--warn .cds--date-picker--range > .cds--date-picker-container:last-child .cds--date-picker__input, -.cds--date-picker--fluid .cds--date-picker--fluid--warn + .cds--date-picker-container:last-child .cds--date-picker__input, -.cds--date-picker--fluid .cds--date-picker--fluid--warn.cds--date-picker-container:last-child .cds--date-picker__input { - border-inline-start: 1px solid transparent; -} - -.cds--date-picker--fluid.cds--date-picker--fluid--invalid .cds--date-picker--range > .cds--date-picker-container:first-child::after, -.cds--date-picker--fluid.cds--date-picker--fluid--warn .cds--date-picker--range > .cds--date-picker-container:first-child::after, -.cds--date-picker--fluid .cds--date-picker--range .cds--date-picker--fluid--warn.cds--date-picker-container:first-child::after, -.cds--date-picker--fluid .cds--date-picker--range .cds--date-picker--fluid--warn.cds--date-picker-container:last-child::after { - position: absolute; - display: block; - background: var(--cds-border-strong); - block-size: calc(100% - 1rem); - content: ""; - inline-size: 1px; - inset-block-start: 0.5rem; - inset-inline-end: 0; -} - -.cds--date-picker--fluid .cds--date-picker--fluid--warn.cds--date-picker-container:last-child::after { - inset-inline-start: 0; -} - -.cds--date-picker--fluid .cds--date-picker__divider { - border-style: solid; - border-color: var(--cds-border-subtle); - margin: 0 1rem; - border-block-end: none; - inline-size: calc(100% - 2rem); -} - -.cds--date-picker-container.cds--date-picker--fluid--invalid .cds--date-picker__icon--invalid, -.cds--date-picker-container.cds--date-picker--fluid--warn .cds--date-picker__icon--warn { - inset-block-start: 5rem; -} - -.cds--date-picker--fluid .cds--date-picker--simple .cds--date-picker--fluid--invalid .cds--date-picker__icon--invalid, -.cds--date-picker--fluid .cds--date-picker--simple .cds--date-picker--fluid--warn .cds--date-picker__icon--warn { - display: block; -} - -.cds--date-picker-container.cds--date-picker--fluid--invalid .cds--date-picker__input:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--date-picker-container.cds--date-picker--fluid--invalid .cds--date-picker__input:focus { - outline-style: dotted; - } -} - -.cds--date-picker--fluid.cds--date-picker--fluid--invalid .cds--date-picker--range ~ .cds--form-requirement, -.cds--date-picker--fluid.cds--date-picker--fluid--warn .cds--date-picker--range ~ .cds--form-requirement { - display: block; - overflow: visible; - padding: 0.5rem 2.5rem 0.5rem 1rem; - margin-block-start: 0; - max-block-size: 100%; -} - -.cds--date-picker--fluid.cds--date-picker--fluid--invalid .cds--date-picker--range ~ .cds--form-requirement { - color: var(--cds-text-error, #da1e28); -} - -.cds--date-picker--fluid.cds--date-picker--fluid--invalid, -.cds--date-picker--fluid.cds--date-picker--fluid--warn { - position: relative; -} - -.cds--date-picker--fluid.cds--date-picker--fluid--invalid .cds--date-picker--range + .cds--date-picker__icon, -.cds--date-picker--fluid.cds--date-picker--fluid--warn .cds--date-picker--range + .cds--date-picker__icon { - inset-block-start: 5rem; -} - -.cds--date-picker--fluid__skeleton { - background: var(--cds-skeleton-background, #e8e8e8); - block-size: 4rem; - border-block-end: 1px solid var(--cds-skeleton-element, #c6c6c6); -} - -.cds--date-picker--fluid__skeleton--container { - position: relative; - block-size: 100%; - inline-size: 100%; -} - -.cds--date-picker--fluid__skeleton .cds--skeleton { - position: absolute; - block-size: 0.5rem; - inline-size: 25%; - inset-block-start: 1rem; - inset-inline-start: 1rem; -} - -.cds--date-picker--fluid__skeleton .cds--label { - margin-block-end: 0.25rem; -} - -.cds--date-picker--fluid__skeleton .cds--text-input { - position: absolute; - padding: 0; - block-size: 0.5rem; - inline-size: 50%; - inset-block-start: 2.25rem; - inset-inline-start: 1rem; -} - -.cds--date-picker--fluid__skeleton--container .cds--date-picker__icon { - inset-block-end: 0.5rem; - inset-block-start: auto; -} - -.cds--date-picker--fluid__skeleton--range { - display: flex; - flex-direction: row; -} - -.cds--date-picker--fluid__skeleton--range .cds--date-picker--fluid__skeleton--container { - display: flex; - flex-direction: column; - inline-size: 50%; -} - -.cds--date-picker--fluid__skeleton--range .cds--date-picker--fluid__skeleton--container:first-of-type { - border-inline-end: 1px solid var(--cds-skeleton-element, #c6c6c6); -} - -.cds--date-picker--fluid__skeleton--range .cds--date-picker--fluid__skeleton--container .cds--date-picker__icon { - inset-block-end: 0.5rem; -} - -.cds--date-picker--fluid.cds--date-picker--fluid--readonly:not(.cds--date-picker--fluid--invalid):not(.cds--date-picker--fluid--warn) .cds--date-picker > .cds--date-picker-container, -.cds--date-picker--fluid.cds--date-picker--fluid--readonly:not(.cds--date-picker--fluid--invalid):not(.cds--date-picker--fluid--warn) .cds--date-picker .cds--date-picker__input { - border-block-end-color: var(--cds-border-subtle); -} - -.cds--date-picker--fluid.cds--date-picker--fluid--readonly:not(.cds--date-picker--fluid--invalid):not(.cds--date-picker--fluid--warn) .cds--date-picker--range > .cds--date-picker-container:last-child .cds--date-picker__input { - border-inline-start-color: var(--cds-border-subtle); -} - -.cds--date-picker--fluid .cds--date-picker-input__wrapper--slug .cds--slug { - inset-block-start: 2.6875rem; -} - -.cds--date-picker--fluid .cds--date-picker-input__wrapper--slug:not(:has(~ .cds--slug--revert)) { - background-image: linear-gradient(0deg, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%); - border-block-end-color: var(--cds-ai-border-strong, #4589ff); -} - -.cds--date-picker--fluid .cds--date-picker-input__wrapper--slug .cds--date-picker__input:not(.cds--date-picker__input--invalid) { - border-block-end-color: var(--cds-ai-border-strong, #4589ff); -} - -.cds--date-picker--fluid .cds--date-picker-input__wrapper--slug .cds--date-picker__input, -.cds--date-picker--fluid--invalid .cds--date-picker-input__wrapper--slug .cds--date-picker__input, -.cds--date-picker--fluid--warn .cds--date-picker-input__wrapper--slug .cds--date-picker__input { - padding-inline-end: 4rem; -} - -.cds--multi-select .cds--list-box__field--wrapper { - display: inline-flex; - align-items: center; - block-size: calc(100% + 1px); - inline-size: 100%; -} - -.cds--multi-select .cds--list-box__field:focus { - outline: 2px solid transparent; - outline-offset: -2px; -} - -.cds--multi-select--filterable .cds--list-box__field { - padding: 0; -} - -.cds--multi-select .cds--tag { - margin: 0 0.5rem 0 1rem; - min-inline-size: auto; -} - -.cds--multi-select .cds--list-box__menu { - min-inline-size: auto; -} - -.cds--multi-select .cds--list-box__menu-item__option .cds--checkbox-wrapper { - display: flex; - align-items: center; - block-size: 100%; - inline-size: 100%; -} - -.cds--multi-select .cds--list-box__menu-item__option .cds--checkbox-label { - display: inline-block; - overflow: hidden; - inline-size: 100%; - padding-inline-start: 1.75rem; - text-overflow: ellipsis; - white-space: nowrap; -} - -.cds--multi-select .cds--list-box__menu-item__option > .cds--form-item { - flex-direction: row; - margin: 0; -} - -.cds--multi-select .cds--list-box__menu-item .cds--checkbox:checked ~ .cds--checkbox-label-text { - color: var(--cds-text-primary, #161616); -} - -.cds--multi-select--filterable { - transition: outline-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -.cds--multi-select--filterable.cds--combo-box .cds--text-input { - border: 0.125rem solid transparent; - background-clip: padding-box; - outline: none; -} - -.cds--multi-select--filterable--input-focused, -.cds--multi-select .cds--list-box__field--wrapper--input-focused:has(button[aria-expanded=false]), -.cds--multi-select.cds--multi-select--selected .cds--list-box__field--wrapper--input-focused:has(button[aria-expanded=true]) { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--multi-select--filterable--input-focused, - .cds--multi-select .cds--list-box__field--wrapper--input-focused:has(button[aria-expanded=false]), - .cds--multi-select.cds--multi-select--selected .cds--list-box__field--wrapper--input-focused:has(button[aria-expanded=true]) { - outline-style: dotted; - } -} - -.cds--multi-select.cds--list-box--expanded .cds--list-box__field--wrapper:has(button[aria-activedescendant]:not([aria-activedescendant=""])), -.cds--multi-select--filterable.cds--list-box--expanded:has(input[aria-activedescendant]:not([aria-activedescendant=""])) { - outline-offset: -0.0625rem; - outline-width: 0.0625rem; -} - -.cds--multi-select--filterable.cds--multi-select--selected .cds--text-input, -.cds--multi-select.cds--multi-select--selected .cds--list-box__field { - padding-inline-start: 0; -} - -.cds--multi-select--filterable.cds--list-box--disabled:hover:not(.cds--multi-select--filterable) .cds--text-input { - background-color: var(--cds-field); -} - -.cds--multi-select--filterable .cds--list-box__selection--multi { - margin: 0 0 0 1rem; -} - -.cds--multi-select--filterable.cds--multi-select--inline, -.cds--multi-select--filterable.cds--multi-select--inline .cds--text-input { - background-color: transparent; - border-block-end: 0; -} - -.cds--multi-select:not(.cds--list-box--expanded) .cds--list-box__menu { - visibility: hidden; -} - -.cds--multi-select.cds--multi-select--readonly, -.cds--multi-select.cds--multi-select--readonly:hover { - background-color: transparent; - border-block-end-color: var(--cds-border-subtle); -} - -.cds--multi-select.cds--multi-select--readonly .cds--list-box__menu-icon svg { - fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--multi-select.cds--multi-select--readonly .cds--tag--filter, -.cds--multi-select.cds--multi-select--readonly .cds--tag__close-icon:hover { - background-color: transparent; - color: var(--cds-text-primary, #161616); - cursor: default; -} - -.cds--multi-select.cds--multi-select--readonly .cds--tag--filter { - box-shadow: 0 0 0 1px var(--cds-background-inverse, #393939); -} - -.cds--multi-select.cds--multi-select--readonly .cds--tag--filter svg { - fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--multi-select.cds--multi-select--readonly .cds--list-box__field, -.cds--multi-select.cds--multi-select--readonly .cds--list-box__menu-icon { - cursor: default; -} - -.cds--multi-select__wrapper.cds--list-box__wrapper--fluid--focus:not(.cds--multi-select--filterable__wrapper) .cds--list-box__field--wrapper--input-focused { - outline: none; -} - -.cds--list-box__wrapper--fluid .cds--tag.cds--tag--filter { - margin-block-start: 1.25rem; -} - -.cds--list-box__wrapper--fluid .cds--multi-select--filterable--input-focused { - outline: none; - outline-offset: 0; -} - -.cds--list-box__wrapper--fluid .cds--multi-select--filterable .cds--list-box__field .cds--text-input { - border-block-end: 1px solid transparent; -} - -.cds--list-box__wrapper--fluid .cds--multi-select--filterable.cds--combo-box .cds--list-box__field { - align-items: baseline; -} - -.cds--list-box__wrapper--fluid.cds--multi-select--filterable__wrapper:not(.cds--list-box--up) .cds--list-box__menu { - inset-block-start: calc(100% + 0.0625rem); -} - -.cds--number__controls:hover .cds--number__control-btn::after { - display: none; -} - -.cds--number__input-wrapper--slug .cds--number__rule-divider { - display: none; -} - -.cds--number__input-wrapper--slug .cds--number__control-btn:hover { - box-shadow: 0 -1px 0 var(--cds-ai-border-strong, #4589ff) inset; -} - -.cds--number__controls:focus-within .cds--number__control-btn::after { - display: none; -} - -.cds--number { - position: relative; - display: flex; - flex-direction: column; - inline-size: 100%; -} -.cds--number html { - font-size: 100%; -} -.cds--number body { - font-weight: 400; - font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; -} -.cds--number code { - font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace; -} -.cds--number strong { - font-weight: 600; -} - -.cds--number .cds--number__input-wrapper--warning input[type=number] { - padding-inline-end: 8rem; -} - -.cds--number input[type=number] { - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - outline: 2px solid transparent; - outline-offset: -2px; - display: inline-flex; - box-sizing: border-box; - border: 0; - border-radius: 0; - -moz-appearance: textfield; - -webkit-appearance: textfield; - appearance: textfield; - background-color: var(--cds-field); - block-size: 2.5rem; - border-block-end: 0.0625rem solid var(--cds-border-strong); - color: var(--cds-text-primary, #161616); - font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; - font-weight: 400; - inline-size: 100%; - min-inline-size: 9.375rem; - padding-inline-end: 6rem; - padding-inline-start: 1rem; - transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -.cds--number input[type=number]:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--number input[type=number]:focus { - outline-style: dotted; - } -} -.cds--number input[type=number]:disabled ~ .cds--number__controls { - cursor: not-allowed; - pointer-events: none; -} -.cds--number input[type=number]:disabled ~ .cds--number__controls svg { - fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} -.cds--number input[type=number]::-ms-clear { - display: none; -} -.cds--number input[type=number]::-webkit-inner-spin-button { - -webkit-appearance: none; - appearance: none; -} -.cds--number input[type=number][data-invalid] { - padding-inline-end: 8rem; -} - -.cds--number--lg.cds--number input[type=number] { - padding-inline-end: 7rem; -} -.cds--number--lg.cds--number input[type=number][data-invalid] { - padding-inline-end: 9rem; -} -.cds--number--lg.cds--number .cds--number__input-wrapper--warning input[type=number] { - padding-inline-end: 9rem; -} - -.cds--number--sm.cds--number input[type=number] { - padding-inline-end: 5rem; -} -.cds--number--sm.cds--number input[type=number][data-invalid] { - padding-inline-end: 7rem; -} -.cds--number--sm.cds--number .cds--number__input-wrapper--warning input[type=number] { - padding-inline-end: 7rem; -} - -.cds--number input[type=number]:disabled { - background-color: var(--cds-field); - border-block-end-color: transparent; - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); - cursor: not-allowed; -} - -.cds--number__input-wrapper { - position: relative; - display: flex; - align-items: center; -} - -.cds--number__controls { - position: absolute; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - block-size: 100%; - inline-size: 5rem; - inset-block-start: 50%; - inset-inline-end: 0; - transform: translateY(-50%); -} -.cds--number__controls html { - font-size: 100%; -} -.cds--number__controls body { - font-weight: 400; - font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; -} -.cds--number__controls code { - font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace; -} -.cds--number__controls strong { - font-weight: 600; -} - -.cds--number__control-btn { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: inline-block; - padding: 0; - border: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: none; - cursor: pointer; - text-align: start; - inline-size: 100%; - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - block-size: 100%; - color: var(--cds-icon-primary, #161616); -} -.cds--number__control-btn *, -.cds--number__control-btn *::before, -.cds--number__control-btn *::after { - box-sizing: inherit; -} -.cds--number__control-btn::-moz-focus-inner { - border: 0; -} -.cds--number__control-btn svg { - fill: currentColor; -} -.cds--number__control-btn:focus { - outline: 1px solid var(--cds-focus, #0f62fe); - color: var(--cds-icon-primary, #161616); - outline-offset: -2px; - outline-width: 2px; -} -@media screen and (prefers-contrast) { - .cds--number__control-btn:focus { - outline-style: dotted; - } -} -.cds--number__control-btn:hover { - background-color: var(--cds-field-hover); - box-shadow: 0 -1px 0 var(--cds-border-strong) inset; - color: var(--cds-icon-primary, #161616); - cursor: pointer; -} -.cds--number__control-btn:disabled { - border-block-end-color: transparent; - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); - cursor: not-allowed; -} - -.cds--number__control-btn.down-icon { - order: 1; -} - -.cds--number__control-btn.up-icon { - order: 2; -} - -.cds--number input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn { - border-block-end-color: var(--cds-support-error, #da1e28); -} - -.cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn { - border-width: 2px 0; - border-style: solid; - border-color: var(--cds-focus, #0f62fe); - box-shadow: none; - outline-offset: -2px; -} - -.cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type:hover { - box-shadow: -4px 0 0 -2px var(--cds-focus, #0f62fe) inset; -} - -.cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:last-of-type:hover { - box-shadow: -4px 0 0 -2px var(--cds-support-error, #da1e28) inset; -} - -.cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:hover { - border-width: 2px 0; - border-style: solid; - border-color: var(--cds-support-error, #da1e28); - box-shadow: none; - outline-offset: -2px; -} - -.cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:focus:hover { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:focus:hover { - outline-style: dotted; - } -} - -.cds--number__rule-divider { - position: absolute; - z-index: 6000; - background-color: var(--cds-border-subtle); - block-size: 1rem; - inline-size: 0.0625rem; -} -.cds--number__rule-divider:first-of-type { - order: 0; -} - -.cds--number__controls .cds--number__rule-divider:first-of-type { - background-color: transparent; - inset-inline-start: 0; -} - -.cds--number__invalid + .cds--number__controls .cds--number__rule-divider:first-of-type { - background-color: var(--cds-border-subtle); -} - -.cds--number--light .cds--number__rule-divider, -.cds--number--light .cds--number__invalid + .cds--number__controls .cds--number__rule-divider:first-of-type { - background-color: var(--cds-border-subtle-02, #e0e0e0); -} - -.cds--number input[type=number]:disabled + .cds--number__controls .cds--number__rule-divider:first-of-type { - background-color: transparent; -} - -.cds--number input[type=number]:disabled + .cds--number__controls .cds--number__rule-divider { - background-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--number__control-btn:focus ~ .cds--number__rule-divider { - background-color: transparent; -} - -.cds--number__invalid { - position: absolute; - fill: var(--cds-support-error, #da1e28); - inset-inline-end: 6rem; -} - -.cds--number--lg .cds--number__invalid { - inset-inline-end: 7rem; -} - -.cds--number--sm .cds--number__invalid { - inset-inline-end: 5rem; -} - -.cds--number__invalid + .cds--number__rule-divider { - position: absolute; - inset-inline-end: 5rem; -} - -.cds--number--lg .cds--number__invalid + .cds--number__rule-divider { - inset-inline-end: 6rem; -} - -.cds--number--sm .cds--number__invalid + .cds--number__rule-divider { - inset-inline-end: 4rem; -} - -.cds--number__control-btn.down-icon:hover ~ .cds--number__rule-divider, -.cds--number__control-btn.up-icon:hover + .cds--number__rule-divider, -.cds--number__control-btn.down-icon:focus ~ .cds--number__rule-divider, -.cds--number__control-btn.up-icon:focus + .cds--number__rule-divider { - background-color: transparent; -} - -.cds--number__invalid--warning { - fill: var(--cds-support-warning, #f1c21b); -} - -.cds--number__invalid--warning path:first-of-type { - fill: #000000; - opacity: 1; -} - -.cds--number--lg input[type=number] { - block-size: 3rem; -} - -.cds--number--lg .cds--number__controls { - inline-size: 6rem; -} - -.cds--number--lg .cds--number__control-btn { - inline-size: 3rem; -} - -.cds--number--sm input[type=number] { - block-size: 2rem; -} - -.cds--number--sm .cds--number__controls { - inline-size: 4rem; -} - -.cds--number--sm .cds--number__control-btn { - inline-size: 2rem; -} - -.cds--number--nolabel .cds--label + .cds--form__helper-text { - margin-block-start: 0; -} - -.cds--number--nosteppers input[type=number] { - padding-inline-end: 0; -} - -.cds--number--nosteppers input[type=number][data-invalid], -.cds--number--nosteppers .cds--number__input-wrapper--warning input[type=number] { - padding-inline-end: 3rem; -} - -.cds--number--nosteppers .cds--number__invalid { - inset-inline-end: 1rem; -} - -.cds--number--readonly input[type=number] { - background: transparent; - border-block-end-color: var(--cds-border-subtle); -} - -.cds--number--readonly .cds--number__control-btn { - color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); - pointer-events: none; -} -.cds--number--readonly .cds--number__control-btn:hover { - background-color: transparent; - cursor: pointer; -} - -.cds--number--readonly input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover { - outline: none; -} - -.cds--number--readonly .cds--number__controls:hover .cds--number__rule-divider:not(:first-of-type) { - background-color: var(--cds-border-subtle); -} - -.cds--number__input-wrapper--slug .cds--slug { - position: absolute; - inset-block-start: 50%; - inset-inline-end: 6rem; - transform: translateY(-50%); -} - -.cds--number__input-wrapper--slug .cds--slug::before, -.cds--number__input-wrapper--slug .cds--number__control-btn::before, -.cds--number__input-wrapper--slug .cds--number__control-btn::after { - position: absolute; - background-color: var(--cds-border-subtle); - block-size: 1rem; - content: ""; - inline-size: 0.0625rem; -} - -.cds--number__input-wrapper--slug .cds--slug::before { - display: none; - inset-inline-start: -1rem; -} - -.cds--number__control-btn::after { - display: block; - inset-inline-end: 0; -} - -.cds--number__input-wrapper--slug .cds--number__control-btn::before { - display: block; - inset-inline-end: 2.5rem; -} - -.cds--number__input-wrapper--slug .cds--number__control-btn:focus::before { - display: none; -} - -.cds--number__control-btn:hover::after, -.cds--number__control-btn:hover::before { - display: none; - inset-inline-end: 0; -} - -.cds--number__input-wrapper:has(.cds--number__control-btn:hover) ~ .cds--number__input-wrapper--slug::after { - display: none; -} - -.cds--number__control-btn:has(.up-icon)::after, -.cds--number__control-btn:has(.up-icon)::before { - display: none; -} - -.cds--number__input-wrapper--slug .cds--number__invalid { - inset-inline-end: 9rem; -} - -.cds--number__input-wrapper--slug:has(.cds--number__invalid) .cds--slug::before { - display: block; -} - -.cds--number .cds--number__input-wrapper--slug input[data-invalid], -.cds--number .cds--number__input-wrapper--slug.cds--number__input-wrapper--warning input { - padding-inline-end: 9rem; -} - -.cds--number__input-wrapper--slug input[type=number]:not(:has(~ .cds--slug--revert)), -.cds--number__input-wrapper--slug input[type=number]:disabled { - background-image: linear-gradient(0deg, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%); - border-block-end-color: var(--cds-ai-border-strong, #4589ff); - padding-inline-end: 9.0625rem; -} - -.cds--number.cds--skeleton { - position: relative; - padding: 0; - border: none; - background: var(--cds-skeleton-background, #e8e8e8); - box-shadow: none; - pointer-events: none; - block-size: 2.5rem; - inline-size: 100%; -} -.cds--number.cds--skeleton:hover, .cds--number.cds--skeleton:focus, .cds--number.cds--skeleton:active { - border: none; - cursor: default; - outline: none; -} -.cds--number.cds--skeleton::before { - position: absolute; - animation: 3000ms ease-in-out cds--skeleton infinite; - background: var(--cds-skeleton-element, #c6c6c6); - block-size: 100%; - content: ""; - inline-size: 100%; - will-change: transform-origin, transform, opacity; -} -@media (prefers-reduced-motion: reduce) { - .cds--number.cds--skeleton::before { - animation: none; - } -} -.cds--number.cds--skeleton input[type=number] { - display: none; -} - -/* stylelint-disable */ -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--number__control-btn:hover, - .cds--number__control-btn:focus { - color: Highlight; - outline: 1px solid Highlight; - } -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--number__control-btn { - outline: 1px solid transparent; - } -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--number__control-btn svg { - fill: ButtonText; - } -} - -/* stylelint-enable */ -.cds--number-input--fluid { - position: relative; - background: var(--cds-field); - block-size: 100%; -} - -.cds--number-input--fluid .cds--label { - position: absolute; - z-index: 1; - display: flex; - align-items: center; - margin: 0; - block-size: 1rem; - inline-size: calc(100% - 2rem); - inset-block-start: 0.8125rem; - inset-inline-start: 1rem; -} - -.cds--number-input--fluid .cds--label::-webkit-scrollbar, -.cds--number-input--fluid .cds--label .cds--toggletip-label::-webkit-scrollbar { - display: none; -} - -.cds--number-input--fluid .cds--label:not(:has(.cds--toggletip-label)), -.cds--number-input--fluid .cds--label .cds--toggletip-label { - -ms-overflow-style: none; - overflow-x: scroll; - scrollbar-width: none; - white-space: nowrap; -} - -.cds--number-input--fluid .cds--number__input-wrapper { - position: initial; -} - -.cds--number-input--fluid input[type=number] { - padding: 2rem 5rem 0.8125rem 1rem; - background: transparent; - min-block-size: 4rem; - outline: none; -} - -.cds--number-input--fluid .cds--number__controls { - block-size: 2.5rem; - inset-block-start: 1.4375rem; - transform: translate(0); -} - -.cds--number-input--fluid input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn { - border-block-end-color: var(--cds-focus, #0f62fe); - box-shadow: inset 0 -1px var(--cds-focus, #0f62fe); -} - -.cds--number-input--fluid input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type { - box-shadow: inset 0 -1px var(--cds-focus, #0f62fe), inset -2px 0 var(--cds-focus, #0f62fe); -} - -.cds--number-input--fluid .cds--number__input-wrapper--warning input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn, -.cds--number-input--fluid--invalid input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn { - border-block-end-color: transparent; - box-shadow: none; -} - -.cds--number-input--fluid .cds--number__input-wrapper--warning input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type, -.cds--number-input--fluid--invalid input[type=number][data-invalid]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type { - box-shadow: inset -2px 0 var(--cds-focus, #0f62fe); -} - -.cds--number-input--fluid--invalid input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:last-of-type:hover { - box-shadow: inset -2px 0 var(--cds-support-error, #da1e28); -} - -.cds--number-input--fluid--invalid input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:hover { - box-shadow: none; -} - -.cds--number-input--fluid.cds--number-input--fluid--focus .cds--number { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--number-input--fluid.cds--number-input--fluid--focus .cds--number { - outline-style: dotted; - } -} - -.cds--number-input--fluid:not(.cds--number-input--fluid--invalid) .cds--number-input-wrapper:not(.cds--number-input-wrapper__warning) input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover { - border-block-end: 1px solid var(--cds-focus, #0f62fe); - outline: none; -} - -.cds--number-input--fluid--invalid input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn:focus, -.cds--number-input--fluid--invalid .cds--number input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn:focus:hover { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--number-input--fluid--invalid input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn:focus, - .cds--number-input--fluid--invalid .cds--number input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn:focus:hover { - outline-style: dotted; - } -} - -.cds--number-input--fluid .cds--number-input__divider { - display: none; -} - -.cds--number-input--fluid .cds--number__invalid { - inset-block-start: 4.5625rem; - inset-inline-end: 1rem; - pointer-events: none; -} - -.cds--number-input--fluid .cds--number__controls .cds--number__rule-divider:first-of-type { - display: none; -} - -.cds--number-input--fluid .cds--number__input-wrapper--warning input[type=number] { - border-block-end: 1px solid transparent; -} - -.cds--number-input--fluid .cds--number__input-wrapper--warning input[type=number]:focus { - outline: none; -} - -.cds--number-input--fluid.cds--number-input--fluid--invalid .cds--number-input__divider, -.cds--number-input--fluid .cds--number__input-wrapper--warning + .cds--number-input__divider { - position: absolute; - display: block; - border: none; - margin: 0 1rem; - block-size: 0.0625rem; - border-block-end: 1px solid var(--cds-border-subtle); - inline-size: calc(100% - 2rem); - inset-block-start: 3.9375rem; -} - -.cds--number-input--fluid .cds--form-requirement { - padding: 0.5rem 2.5rem 0.5rem 1rem; - margin: 0; -} - -.cds--number-input--fluid.cds--number-input--fluid--invalid:not(.cds--number-input--fluid--focus) .cds--number { - outline: 2px solid var(--cds-support-error, #da1e28); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--number-input--fluid.cds--number-input--fluid--invalid:not(.cds--number-input--fluid--focus) .cds--number { - outline-style: dotted; - } -} - -.cds--number-input--fluid--invalid .cds--number[data-invalid] input[type=number] { - border-block-end: 1px solid transparent; -} - -.cds--number-input--fluid--invalid .cds--number[data-invalid] input[type=number], -.cds--number-input--fluid--invalid .cds--number input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn:hover, -.cds--number-input--fluid .cds--number__input-wrapper--warning input[type=number] ~ .cds--number__controls .cds--number__control-btn:hover:not(:focus) { - outline: none; -} - -.cds--number-input--fluid.cds--number-input--invalid .cds--number__input-wrapper input[type=number] ~ .cds--number__controls .cds--number__control-btn, -.cds--number-input--fluid .cds--number__input-wrapper--warning input[type=number] ~ .cds--number__controls .cds--number__control-btn { - border-block-end: none; -} - -.cds--number-input--fluid--invalid .cds--number input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn, -.cds--number-input--fluid .cds--number input[type=number] ~ .cds--number__controls .cds--number__control-btn { - border: initial; - border-block-end-width: 0.0625rem; -} - -.cds--number-input--fluid--disabled:not(.cds--number-input--fluid--invalid) .cds--number { - border-block-end: 1px solid var(--cds-border-subtle); -} - -.cds--number-input--fluid--disabled.cds--number-input--fluid--invalid .cds--number input[type=number]:disabled { - background-color: transparent; -} - -.cds--number-input--fluid .cds--number__input-wrapper--slug .cds--slug { - inset-block-start: 2.6875rem; -} - -.cds--number-input--fluid.cds--number-input--fluid--invalid .cds--number__input-wrapper--slug .cds--slug, -.cds--number-input--fluid .cds--number__input-wrapper--slug.cds--number__input-wrapper--warning .cds--slug { - inset-inline-end: 5.5rem; -} - -.cds--number-input--fluid .cds--number__input-wrapper--slug input, -.cds--number-input--fluid.cds--number-input--fluid--invalid .cds--number__input-wrapper--slug input[data-invalid], -.cds--number-input--fluid .cds--number__input-wrapper--slug.cds--number__input-wrapper--warning input { - padding-inline-end: 7.5rem; -} - -.cds--number-input--fluid .cds--number__input-wrapper--slug:not(:has(~ .cds--slug--revert)) { - background-image: linear-gradient(0deg, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%); - border-block-end-color: var(--cds-ai-border-strong, #4589ff); -} - -.cds--search--fluid { - block-size: 4rem; -} - -.cds--search--fluid .cds--label { - position: absolute; - z-index: 1; - display: flex; - overflow: initial; - align-items: center; - margin: 0; - block-size: 1rem; - clip: initial; - inline-size: calc(100% - 2rem); - inset-block-start: 0.8125rem; - inset-inline-start: 1rem; - white-space: initial; -} - -.cds--search--fluid .cds--label::-webkit-scrollbar, -.cds--search--fluid .cds--label .cds--toggletip-label::-webkit-scrollbar { - display: none; -} - -.cds--search--fluid .cds--label:not(:has(.cds--toggletip-label)), -.cds--search--fluid .cds--label .cds--toggletip-label { - -ms-overflow-style: none; - overflow-x: scroll; - scrollbar-width: none; - white-space: nowrap; -} - -.cds--search--fluid .cds--search-input { - padding: 2rem 5.5rem 0.8125rem 1rem; - block-size: 100%; -} - -.cds--search--fluid .cds--search-magnifier-icon { - color: var(--cds-icon-primary, #161616); - inset: auto 1rem 0.8125rem auto; - transform: none; -} - -.cds--search--fluid .cds--search-close { - border: none; - block-size: 2.5rem; - inline-size: 2.5rem; - inset: auto 3rem 0 auto; - transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -.cds--search--fluid .cds--search-input:focus ~ .cds--search-close:hover { - outline: none; -} - -.cds--search--fluid .cds--search-close::after { - position: absolute; - display: block; - block-size: 0.125rem; - content: ""; - inline-size: 100%; - inset-block-end: 0; - inset-inline-start: 0; -} - -.cds--search--fluid .cds--search-input:focus ~ .cds--search-close::after { - background: var(--cds-focus, #0f62fe); -} - -.cds--search--fluid .cds--search-input:not(:focus) ~ .cds--search-close:not([disabled])::after { - background: var(--cds-border-strong); - block-size: 0.0625rem; -} - -.cds--search--fluid .cds--search-close svg { - margin-block-end: 0.125rem; -} - -.cds--search--fluid .cds--search-input:disabled ~ .cds--search-close:hover::before { - background: var(--cds-border-subtle); -} - -.cds--search--fluid.cds--search--disabled .cds--label { - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); - cursor: not-allowed; -} - -.cds--search--fluid.cds--search--disabled .cds--search-input[disabled] { - border-block-end: 1px solid var(--cds-border-subtle); -} - -.cds--select { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - position: relative; - display: flex; - flex-direction: column; - align-items: flex-start; - inline-size: 100%; -} -.cds--select *, -.cds--select *::before, -.cds--select *::after { - box-sizing: inherit; -} - -.cds--select-input__wrapper { - position: relative; - display: flex; - align-items: center; - inline-size: 100%; -} - -.cds--select-input { - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - outline: 2px solid transparent; - outline-offset: -2px; - display: block; - border: none; - border-radius: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: var(--cds-field); - block-size: 2.5rem; - border-block-end: 1px solid var(--cds-border-strong); - color: var(--cds-text-primary, #161616); - cursor: pointer; - font-family: inherit; - inline-size: 100%; - opacity: 1; - padding-block: 0; - padding-inline: 1rem 3rem; - text-overflow: ellipsis; - transition: outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -.cds--select-input:hover { - background-color: var(--cds-field-hover); -} -.cds--select-input::-ms-expand { - display: none; -} -@-moz-document url-prefix() { - .cds--select-input:-moz-focusring, .cds--select-input::-moz-focus-inner { - background-image: none; - color: transparent; - text-shadow: 0 0 0 #000000; - } -} -.cds--select-input:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; - color: var(--cds-text-primary, #161616); -} -@media screen and (prefers-contrast) { - .cds--select-input:focus { - outline-style: dotted; - } -} -.cds--select-input:disabled, .cds--select-input:hover:disabled { - background-color: var(--cds-field); - border-block-end-color: transparent; - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); - cursor: not-allowed; -} - -.cds--select-input--sm { - block-size: 2rem; - max-block-size: 2rem; -} - -.cds--select-input--lg { - block-size: 3rem; - max-block-size: 3rem; -} - -.cds--select--disabled .cds--label, -.cds--select--disabled .cds--form__helper-text { - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--select-input__wrapper[data-invalid] .cds--select-input, -.cds--select--warning .cds--select-input { - padding-inline-end: 4rem; -} - -.cds--select-input:disabled ~ .cds--select__arrow { - fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--select--light .cds--select-input { - background-color: var(--cds-field-02, #ffffff); -} -.cds--select--light .cds--select-input:hover { - background-color: var(--cds-field-hover); -} -.cds--select--light .cds--select-input:disabled, .cds--select--light .cds--select-input:hover:disabled { - background-color: var(--cds-field-02, #ffffff); - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); - cursor: not-allowed; -} - -.cds--select__arrow { - position: absolute; - block-size: 100%; - fill: var(--cds-icon-primary, #161616); - inset-block-start: 0; - inset-inline-end: 1rem; - pointer-events: none; -} -@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) { - .cds--select__arrow path { - fill: ButtonText; - } -} - -.cds--select__invalid-icon { - position: absolute; - inset-inline-end: 2.5rem; -} - -.cds--select-input__wrapper[data-invalid] .cds--select-input ~ .cds--select__invalid-icon { - fill: var(--cds-support-error, #da1e28); -} - -.cds--select__invalid-icon--warning { - fill: var(--cds-support-warning, #f1c21b); -} - -.cds--select__invalid-icon--warning path[fill] { - fill: #000000; - opacity: 1; -} - -optgroup.cds--select-optgroup, -.cds--select-option { - background-color: var(--cds-layer-hover); - color: var(--cds-text-primary, #161616); -} -optgroup.cds--select-optgroup:disabled, -.cds--select-option:disabled { - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--select--inline { - display: flex; - flex-direction: row; - align-items: center; -} - -.cds--select--inline.cds--select--invalid .cds--label, -.cds--select--inline.cds--select--invalid .cds--form__helper-text { - align-self: flex-start; - margin-block-start: 0.8125rem; -} - -.cds--select--inline .cds--form__helper-text { - margin-block-end: 0; - margin-inline-start: 0.5rem; -} - -.cds--select--inline .cds--label { - margin: 0 0.5rem 0 0; - white-space: nowrap; -} - -.cds--select--inline .cds--select-input { - background-color: transparent; - border-block-end: none; - color: var(--cds-text-primary, #161616); - inline-size: auto; - padding-inline-end: 2rem; - padding-inline-start: 0.5rem; -} - -.cds--select--inline .cds--select-input:focus, -.cds--select--inline .cds--select-input:focus option, -.cds--select--inline .cds--select-input:focus optgroup { - background-color: var(--cds-background, #ffffff); -} - -.cds--select--inline .cds--select-input[disabled], -.cds--select--inline .cds--select-input[disabled]:hover { - background-color: var(--cds-field); -} - -.cds--select--inline .cds--select__arrow { - inset-inline-end: 0.5rem; -} - -.cds--select--inline.cds--select--invalid .cds--select-input { - padding-inline-end: 3.5rem; -} - -.cds--select--inline.cds--select--invalid .cds--select-input ~ .cds--select__invalid-icon { - inset-inline-end: 2rem; -} - -.cds--select--inline .cds--select-input:disabled { - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); - cursor: not-allowed; -} -.cds--select--inline .cds--select-input:disabled ~ * { - cursor: not-allowed; -} - -.cds--select--readonly .cds--select-input { - background-color: transparent; - border-block-end-color: var(--cds-border-subtle); - cursor: default; -} - -.cds--select--readonly .cds--select__arrow { - fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--select.cds--skeleton { - position: relative; - padding: 0; - border: none; - background: var(--cds-skeleton-background, #e8e8e8); - box-shadow: none; - pointer-events: none; - block-size: 2.5rem; - inline-size: 100%; -} -.cds--select.cds--skeleton:hover, .cds--select.cds--skeleton:focus, .cds--select.cds--skeleton:active { - border: none; - cursor: default; - outline: none; -} -.cds--select.cds--skeleton::before { - position: absolute; - animation: 3000ms ease-in-out cds--skeleton infinite; - background: var(--cds-skeleton-element, #c6c6c6); - block-size: 100%; - content: ""; - inline-size: 100%; - will-change: transform-origin, transform, opacity; -} -@media (prefers-reduced-motion: reduce) { - .cds--select.cds--skeleton::before { - animation: none; - } -} - -.cds--select.cds--skeleton .cds--select-input { - display: none; -} - -.cds--select--slug .cds--slug { - position: absolute; - inset-block-start: 50%; - inset-inline-end: calc(2.5rem + 8px + 1px); - margin-block-start: 0.03125rem; - transform: translateY(-50%); -} - -.cds--select--slug .cds--slug::after, -.cds--select--slug .cds--slug::before { - position: absolute; - background-color: var(--cds-border-subtle-01, #c6c6c6); - block-size: 1rem; - content: ""; - inline-size: 0.0625rem; -} - -.cds--select--slug .cds--slug::before { - display: none; - inset-inline-start: calc(-0.5rem - 1px); -} - -.cds--select--slug .cds--slug::after { - display: block; - inset-inline-end: calc(-0.5rem - 1px); -} - -.cds--select--slug .cds--select-input:not(:has(~ .cds--slug--revert)) { - background-image: linear-gradient(0deg, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%); - border-block-end-color: var(--cds-ai-border-strong, #4589ff); - padding-inline-end: 4rem; -} - -.cds--select--slug:has(.cds--select__invalid-icon) .cds--select-input:not(:has(~ .cds--slug--revert)) { - padding-inline-end: 6rem; -} - -.cds--select--slug:has(.cds--select__invalid-icon) .cds--slug::before { - display: block; -} - -.cds--select--slug .cds--select-input__wrapper[data-invalid] .cds--select-input ~ .cds--select__invalid-icon, -.cds--select--slug .cds--select-input__wrapper .cds--select-input ~ .cds--select__invalid-icon { - inset-inline-end: 5rem; -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--select__arrow { - fill: ButtonText; - } -} - -.cds--select--fluid .cds--select { - position: relative; - background: var(--cds-field); - block-size: 100%; - transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -.cds--select--fluid .cds--label { - position: absolute; - z-index: 1; - display: flex; - align-items: center; - margin: 0; - block-size: 1rem; - inline-size: calc(100% - 2rem); - inset-block-start: 0.8125rem; - inset-inline-start: 1rem; -} - -.cds--select--fluid .cds--label::-webkit-scrollbar, -.cds--select--fluid .cds--label .cds--toggletip-label::-webkit-scrollbar { - display: none; -} - -.cds--select--fluid .cds--label:not(:has(.cds--toggletip-label)), -.cds--select--fluid .cds--label .cds--toggletip-label { - -ms-overflow-style: none; - overflow-x: scroll; - scrollbar-width: none; - white-space: nowrap; -} - -.cds--select--fluid .cds--select-input { - padding: 2rem 2rem 0.8125rem 1rem; - min-block-size: 4rem; - outline: none; - text-overflow: ellipsis; -} - -.cds--select--fluid .cds--select__arrow { - block-size: 1rem; - inset-block-start: 2.125rem; - inset-inline-end: 0.75rem; -} - -.cds--select--fluid .cds--select__divider { - display: none; - transition: border-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -.cds--select--fluid .cds--select--invalid .cds--select-input__wrapper { - outline: 2px solid var(--cds-support-error, #da1e28); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--select--fluid .cds--select--invalid .cds--select-input__wrapper { - outline-style: dotted; - } -} - -.cds--select--fluid .cds--select--invalid .cds--select__divider, -.cds--select--fluid .cds--select--warning .cds--select__divider { - display: block; - border: none; - margin: 0 1rem; - border-block-end: 1px solid var(--cds-border-subtle); - inline-size: calc(100% - 2rem); -} - -.cds--select--fluid .cds--select-input__wrapper[data-invalid] .cds--select-input, -.cds--select--fluid .cds--select--warning .cds--select-input { - border-block-end: 1px solid transparent; - padding-inline-end: 2rem; -} - -.cds--select--fluid .cds--select--warning { - border-block-end: 1px solid var(--cds-border-strong); -} - -.cds--select--fluid .cds--select-input__wrapper { - display: block; -} - -.cds--select--fluid .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus), -.cds--select--fluid .cds--select--warning .cds--select-input:not(:focus) { - outline: none; -} - -.cds--select--fluid .cds--select-input__wrapper[data-invalid] .cds--form-requirement, -.cds--select--fluid .cds--select--warning .cds--form-requirement { - display: block; - overflow: visible; - max-block-size: 100%; -} - -.cds--select--fluid .cds--select-input__wrapper[data-invalid] .cds--form-requirement { - color: var(--cds-text-error, #da1e28); -} - -.cds--select--fluid .cds--form-requirement { - padding: 0.5rem 2.5rem 0.5rem 1rem; - margin: 0; -} - -.cds--select--fluid .cds--select-input__wrapper[data-invalid]:hover + .cds--select__divider, -.cds--select--fluid .cds--select--warning .cds--select-input__wrapper:hover + .cds--select__divider { - border-color: transparent; -} - -.cds--select--fluid .cds--select--invalid .cds--select-input__wrapper[data-invalid] .cds--select__invalid-icon, -.cds--select--fluid .cds--select--warning .cds--select-input__wrapper .cds--select__invalid-icon { - inset-block-start: 4.5625rem; - inset-inline-end: 1rem; - pointer-events: none; -} - -.cds--select--fluid .cds--select--fluid--focus .cds--select-input__wrapper { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--select--fluid .cds--select--fluid--focus .cds--select-input__wrapper { - outline-style: dotted; - } -} - -.cds--select--fluid .cds--select--fluid--focus .cds--select-input, -.cds--select--fluid .cds--select--fluid--focus.cds--select--warning { - border-block-end: 1px solid transparent; -} - -.cds--select--fluid .cds--select--disabled .cds--toggletip-label { - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--select--fluid .cds--select--disabled .cds--toggletip-button { - pointer-events: none; -} - -.cds--select--fluid .cds--select--disabled .cds--toggletip-button svg { - fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--select--fluid .cds--select--slug .cds--slug { - inset-block-start: 2.625rem; - inset-inline-end: 2.5rem; -} - -.cds--select--fluid .cds--select--slug .cds--select-input { - padding-inline-end: 4rem; -} - -.cds--select--fluid .cds--select--slug:has(.cds--select__invalid-icon) .cds--slug::before { - display: none; -} - -.cds--text-area { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - font-size: var(--cds-body-01-font-size, 0.875rem); - font-weight: var(--cds-body-01-font-weight, 400); - line-height: var(--cds-body-01-line-height, 1.42857); - letter-spacing: var(--cds-body-01-letter-spacing, 0.16px); - outline: 2px solid transparent; - outline-offset: -2px; - padding: 0.6875rem var(--cds-layout-density-padding-inline-local); - border: none; - background-color: var(--cds-field); - block-size: 100%; - border-block-end: 1px solid var(--cds-border-strong); - color: var(--cds-text-primary, #161616); - font-family: inherit; - min-block-size: 2.5rem; - min-inline-size: 10rem; - resize: vertical; - transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -.cds--text-area *, -.cds--text-area *::before, -.cds--text-area *::after { - box-sizing: inherit; -} - -.cds--text-area:focus, -.cds--text-area:active { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--text-area:focus, - .cds--text-area:active { - outline-style: dotted; - } -} - -.cds--text-area::-moz-placeholder { - color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4)); - opacity: 1; - font-size: var(--cds-body-01-font-size, 0.875rem); - font-weight: var(--cds-body-01-font-weight, 400); - line-height: var(--cds-body-01-line-height, 1.42857); - letter-spacing: var(--cds-body-01-letter-spacing, 0.16px); -} - -.cds--text-area::placeholder { - color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4)); - opacity: 1; - font-size: var(--cds-body-01-font-size, 0.875rem); - font-weight: var(--cds-body-01-font-weight, 400); - line-height: var(--cds-body-01-line-height, 1.42857); - letter-spacing: var(--cds-body-01-letter-spacing, 0.16px); -} - -.cds--text-area--light { - background-color: var(--cds-field-02, #ffffff); -} - -.cds--text-area--invalid { - padding-inline-end: 2.5rem; -} - -.cds--text-area__wrapper { - --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max)); - position: relative; - display: flex; - inline-size: 100%; -} - -.cds--text-area__invalid-icon { - position: absolute; - fill: var(--cds-support-error, #da1e28); - inset-block-start: 0.75rem; - inset-inline-end: var(--cds-layout-density-padding-inline-local); -} - -.cds--text-area__invalid-icon--warning { - fill: var(--cds-support-warning, #f1c21b); -} - -.cds--text-area__invalid-icon--warning path[fill] { - fill: #000000; - opacity: 1; -} - -.cds--text-area__counter-alert { - position: absolute; - overflow: hidden; - padding: 0; - border: 0; - margin: -1px; - block-size: 1px; - clip: rect(0, 0, 0, 0); - inline-size: 1px; -} - -.cds--text-area:disabled { - background-color: var(--cds-field); - border-block-end: 1px solid transparent; - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); - cursor: not-allowed; - outline: none; - resize: none; -} - -.cds--text-area:disabled::-moz-placeholder { - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--text-area:disabled::placeholder { - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--text-area__wrapper--readonly .cds--text-area { - background: transparent; - border-block-end-color: var(--cds-border-subtle); -} - -.cds--text-area__wrapper--slug .cds--slug { - position: absolute; - inset-block-start: 0.75rem; - inset-inline-end: 1rem; -} - -.cds--text-area__wrapper--slug .cds--slug.cds--slug--revert { - inset-block-start: 0.25rem; - inset-inline-end: 0.5rem; - transform: translate(0); -} - -.cds--text-area__wrapper--slug .cds--text-area:not(:has(~ .cds--slug--revert)) { - background-image: linear-gradient(0deg, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%); - border-block-end-color: var(--cds-ai-border-strong, #4589ff); - padding-inline-end: 2.5rem; -} - -.cds--text-area--invalid:has(~ .cds--slug), -.cds--text-area--warn:has(~ .cds--slug) { - padding-inline-end: 4rem; -} - -.cds--text-area--invalid ~ .cds--slug, -.cds--text-area--warn ~ .cds--slug { - inset-inline-end: 2.5rem; -} - -.cds--text-area--invalid ~ .cds--slug.cds--slug--revert, -.cds--text-area--warn ~ .cds--slug.cds--slug--revert { - inset-inline-end: 2rem; -} - -.cds--text-area.cds--skeleton { - position: relative; - padding: 0; - border: none; - background: var(--cds-skeleton-background, #e8e8e8); - box-shadow: none; - pointer-events: none; - block-size: 6.25rem; - inline-size: 100%; -} -.cds--text-area.cds--skeleton:hover, .cds--text-area.cds--skeleton:focus, .cds--text-area.cds--skeleton:active { - border: none; - cursor: default; - outline: none; -} -.cds--text-area.cds--skeleton::before { - position: absolute; - animation: 3000ms ease-in-out cds--skeleton infinite; - background: var(--cds-skeleton-element, #c6c6c6); - block-size: 100%; - content: ""; - inline-size: 100%; - will-change: transform-origin, transform, opacity; -} -@media (prefers-reduced-motion: reduce) { - .cds--text-area.cds--skeleton::before { - animation: none; - } -} -.cds--text-area.cds--skeleton::-moz-placeholder { - color: transparent; -} -.cds--text-area.cds--skeleton::placeholder { - color: transparent; -} - -.cds--text-area__label-wrapper { - display: flex; - justify-content: space-between; - inline-size: 100%; -} - -.cds--text-area--fluid .cds--text-area__wrapper { - position: relative; - flex-direction: column; - background: var(--cds-field); - block-size: 100%; -} - -.cds--modal .cds--text-area--fluid .cds--text-area__wrapper { - background: var(--cds-field-02, #ffffff); -} - -.cds--text-area--fluid .cds--text-area__label-wrapper { - position: relative; - block-size: 100%; -} - -.cds--text-area--fluid .cds--label { - position: absolute; - z-index: 1; - display: flex; - align-items: center; - margin: 0; - block-size: 1rem; - inline-size: auto; - inset-block-start: 0.8125rem; - inset-inline-start: 1rem; -} - -.cds--text-area--fluid .cds--label::-webkit-scrollbar, -.cds--text-area--fluid .cds--label .cds--toggletip-label::-webkit-scrollbar { - display: none; -} - -.cds--text-area--fluid .cds--label:not(:has(.cds--toggletip-label)), -.cds--text-area--fluid .cds--label .cds--toggletip-label { - -ms-overflow-style: none; - overflow-x: scroll; - scrollbar-width: none; - white-space: nowrap; -} - -.cds--text-area--fluid div.cds--label { - display: flex; - justify-content: flex-end; -} - -.cds--text-area--fluid .cds--text-area { - padding: 0 1rem 0.8125rem; - margin-block-start: 2rem; - min-block-size: 4rem; - outline: none; -} - -.cds--text-area--fluid .cds--form__helper-text { - display: none; -} - -.cds--text-area--fluid .cds--text-area--invalid, -.cds--text-area--fluid .cds--text-area:focus { - border-block-end: 1px solid transparent; -} - -.cds--text-area__divider, -.cds--text-area--fluid .cds--text-area__divider { - display: none; -} - -.cds--text-area--fluid .cds--text-area--invalid, -.cds--text-area--fluid .cds--text-area--warn { - resize: none; -} - -.cds--text-area--fluid .cds--text-area--invalid { - padding: 0 0.875rem 0.8125rem; - margin-block-start: 1.875rem; -} - -.cds--text-area--fluid .cds--text-area__wrapper[data-invalid] .cds--text-area__divider, -.cds--text-area--fluid .cds--text-area__wrapper--warn .cds--text-area__divider { - display: block; - border-style: solid; - border-color: var(--cds-border-subtle); - margin: 0 1rem; - border-block-end: none; -} - -.cds--text-area--fluid .cds--text-area__wrapper[data-invalid] .cds--form-requirement.cds--form-requirement, -.cds--text-area--fluid .cds--text-area__wrapper--warn .cds--form-requirement.cds--form-requirement { - position: relative; - display: block; - overflow: visible; - padding: 0.5rem 2.5rem 0.5rem 1rem; - margin: 0; - background: var(--cds-field); - max-block-size: 12.5rem; -} - -.cds--text-area--fluid .cds--text-area__wrapper--warn .cds--form-requirement.cds--form-requirement { - border-block-end: 1px solid var(--cds-border-strong); - color: var(--cds-text-primary, #161616); -} - -.cds--text-area--fluid .cds--text-area__wrapper[data-invalid] .cds--form-requirement.cds--form-requirement { - border-block-end: none; - color: var(--cds-text-error, #da1e28); -} - -.cds--text-area--fluid .cds--text-area--warn { - border-block-end: none; -} - -.cds--modal .cds--text-area--fluid .cds--text-area__wrapper[data-invalid] .cds--text-area__divider + .cds--form-requirement { - background: var(--cds-field-02, #ffffff); -} - -.cds--text-area--fluid .cds--text-area__invalid-icon { - inset-block-start: 0.5rem; -} - -.cds--text-area--fluid .cds--text-area__wrapper[data-invalid]:not(:focus) { - border: 2px solid var(--cds-support-error, #da1e28); -} - -.cds--text-area--fluid .cds--text-area__wrapper[data-invalid]:focus-within, -.cds--text-area--fluid .cds--text-area__wrapper:focus-within { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--text-area--fluid .cds--text-area__wrapper[data-invalid]:focus-within, - .cds--text-area--fluid .cds--text-area__wrapper:focus-within { - outline-style: dotted; - } -} - -.cds--text-area--fluid .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:focus, -.cds--text-area--fluid .cds--text-area__wrapper > .cds--text-area:focus, -.cds--text-area--fluid .cds--text-area__wrapper > .cds--text-area:active, -.cds--text-area--fluid .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid { - outline: none; - transition: none; -} - -.cds--text-area--fluid__skeleton { - padding: 1rem; - background: var(--cds-skeleton-background, #e8e8e8); - border-block-end: 1px solid var(--cds-skeleton-element, #c6c6c6); -} - -.cds--text-area--fluid__skeleton .cds--skeleton, -.cds--text-area--fluid__skeleton .cds--text-area.cds--skeleton::before { - block-size: 0.5rem; -} - -.cds--text-area--fluid__skeleton .cds--label { - margin-block-end: 0.75rem; -} - -.cds--text-area--fluid__skeleton .cds--text-area.cds--skeleton { - block-size: 4rem; - inline-size: 80%; -} - -.cds--text-area--fluid .cds--text-area__wrapper--slug:not(:has(~ .cds--slug--revert)) { - background-image: linear-gradient(0deg, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%); - border-block-end-color: var(--cds-ai-border-strong, #4589ff); -} - -.cds--text-area--fluid .cds--text-area__wrapper--slug .cds--text-area--invalid ~ .cds--slug, -.cds--text-area--fluid .cds--text-area__wrapper--slug .cds--text-area--warn ~ .cds--slug { - inset-inline-end: 1rem; -} - -.cds--text-area--fluid .cds--text-area__wrapper--slug .cds--text-area--invalid { - border-block-end-color: transparent; -} - -.cds--text-input--fluid.cds--text-input-wrapper { - position: relative; - background: var(--cds-field); - block-size: 100%; - transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -.cds--text-input--fluid .cds--label { - position: absolute; - z-index: 1; - display: flex; - align-items: center; - margin: 0; - block-size: 1rem; - inline-size: calc(100% - 2rem); - inset-block-start: 0.8125rem; - inset-inline-start: 1rem; -} - -.cds--text-input--fluid .cds--label::-webkit-scrollbar, -.cds--text-input--fluid .cds--label .cds--toggletip-label::-webkit-scrollbar { - display: none; -} - -.cds--text-input--fluid .cds--label:not(:has(.cds--toggletip-label)), -.cds--text-input--fluid .cds--label .cds--toggletip-label { - -ms-overflow-style: none; - overflow-x: scroll; - scrollbar-width: none; - white-space: nowrap; -} - -.cds--text-input--fluid .cds--form__helper-text { - display: none; -} - -.cds--text-input--fluid .cds--text-input { - padding: 2rem 1rem 0.8125rem; - min-block-size: 4rem; -} - -.cds--text-input__divider, -.cds--text-input--fluid .cds--text-input__divider { - display: none; -} - -.cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid], -.cds--text-input--fluid .cds--text-input__field-wrapper--warning { - display: block; -} - -.cds--text-input--fluid input[data-invalid] { - outline: none; -} - -.cds--text-input--fluid .cds--form-requirement { - padding: 0.5rem 2.5rem 0.5rem 1rem; - margin: 0; -} - -.cds--text-input--fluid .cds--text-input--invalid, -.cds--text-input--fluid .cds--text-input--warning { - border-block-end: none; -} - -.cds--text-input--fluid .cds--text-input--invalid ~ .cds--text-input__divider, -.cds--text-input--fluid .cds--text-input--warning ~ .cds--text-input__divider { - display: block; - border-style: solid; - border-color: var(--cds-border-subtle); - margin: 0 1rem; - border-block-end: none; -} - -.cds--text-input--fluid .cds--text-input__invalid-icon { - inset-block-start: 5rem; -} - -.cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid, -.cds--text-input--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning { - outline: none; -} - -.cds--text-input--fluid .cds--text-input__field-wrapper--warning { - border-block-end: 1px solid var(--cds-border-strong); -} - -.cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:not(:focus) { - outline: 2px solid var(--cds-support-error, #da1e28); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:not(:focus) { - outline-style: dotted; - } -} - -.cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within, -.cds--text-input--fluid .cds--text-input__field-wrapper--warning:focus-within { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within, - .cds--text-input--fluid .cds--text-input__field-wrapper--warning:focus-within { - outline-style: dotted; - } -} - -.cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:focus, -.cds--text-input--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning:focus { - outline: none; -} - -.cds--text-input--fluid .cds--text-input.cds--password-input { - padding-inline-end: 2.5rem; -} - -.cds--text-input--fluid.cds--password-input-wrapper .cds--text-input__invalid-icon { - inset-inline-end: 1rem; -} - -.cds--text-input--fluid .cds--toggle-password-tooltip { - outline: 2px solid transparent; - outline-offset: -2px; - position: absolute; - block-size: 4rem; - cursor: pointer; - inline-size: 3rem; - inset-block-start: 0; - inset-inline-end: 0; - transition: outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -.cds--text-input--fluid .cds--toggle-password-tooltip .cds--popover { - inset-inline-start: 0; -} - -.cds--text-input--fluid .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger { - block-size: 2rem; - inline-size: 2rem; - inset-block-start: 1.625rem; - inset-inline-end: 0.5rem; -} - -.cds--text-input--fluid__skeleton { - position: relative; - background: var(--cds-skeleton-background, #e8e8e8); - block-size: 4rem; - border-block-end: 1px solid var(--cds-skeleton-element, #c6c6c6); -} - -.cds--text-input--fluid__skeleton .cds--skeleton { - position: absolute; - block-size: 0.5rem; - inline-size: 25%; - inset-block-start: 1rem; - inset-inline-start: 1rem; -} - -.cds--text-input--fluid__skeleton .cds--label { - position: absolute; - padding: 0; - block-size: 0.5rem; - inline-size: 50%; - inset-block-start: 2.25rem; - inset-inline-start: 1rem; -} - -.cds--text-input--fluid .cds--text-input__field-wrapper--slug .cds--slug { - inset-block-start: 2.625rem; -} - -.cds--text-input--fluid .cds--text-input--invalid ~ .cds--slug, -.cds--text-input--fluid .cds--text-input--warning ~ .cds--slug { - inset-inline-end: 1rem; -} - -.cds--text-input--fluid .cds--text-input__field-wrapper--slug .cds--text-input, -.cds--text-input--fluid .cds--text-input__field-wrapper--slug .cds--text-input--invalid, -.cds--text-input--fluid .cds--text-input__field-wrapper--slug .cds--text-input--warning { - padding-inline-end: 2.5rem; -} - -.cds--time-picker--fluid { - background: var(--cds-field); -} - -.cds--time-picker--fluid .cds--time-picker--fluid__wrapper { - display: flex; -} - -.cds--time-picker--fluid__wrapper > *:nth-child(1), -.cds--time-picker--fluid__wrapper > *:nth-child(2) { - flex-basis: 25%; -} - -.cds--time-picker--equal-width .cds--time-picker--fluid__wrapper > * { - flex-basis: 50%; -} - -.cds--time-picker--fluid__wrapper > *:nth-child(2):not(:last-child) .cds--select-input__wrapper::before, -.cds--time-picker--fluid__wrapper > *:last-child .cds--select-input__wrapper::before { - position: absolute; - display: block; - background-color: var(--cds-border-strong); - block-size: calc(100% - 1px); - content: ""; - inline-size: 1px; - opacity: 1; - transition: opacity 70ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -.cds--time-picker--fluid__wrapper .cds--select-input__wrapper::after { - inset-inline-end: 0; -} - -.cds--time-picker--fluid__wrapper .cds--select-input__wrapper::before { - inset-inline-start: 0; -} - -.cds--time-picker--fluid:not(.cds--time-picker--fluid--disabled) .cds--time-picker--fluid__wrapper > *:nth-child(2):not(:last-child):hover .cds--select-input__wrapper::before, -.cds--time-picker--fluid:not(.cds--time-picker--fluid--disabled) .cds--time-picker--fluid__wrapper > *:nth-child(2):hover:not(:last-child) ~ * .cds--select-input__wrapper::before, -.cds--time-picker--fluid:not(.cds--time-picker--fluid--disabled) .cds--time-picker--fluid__wrapper > *:last-child:hover .cds--select-input__wrapper::before { - opacity: 0; -} - -.cds--time-picker--fluid--disabled .cds--time-picker--fluid__wrapper .cds--select--disabled .cds--select-input__wrapper::before { - background: var(--cds-border-disabled, #c6c6c6); -} - -.cds--time-picker--fluid .cds--form-requirement { - padding: 0.5rem 2.5rem 0.5rem 1rem; - margin: 0; - background: var(--cds-field); -} - -.cds--time-picker--fluid--invalid { - outline: 2px solid var(--cds-support-error, #da1e28); - outline-offset: -2px; - position: relative; -} -@media screen and (prefers-contrast) { - .cds--time-picker--fluid--invalid { - outline-style: dotted; - } -} - -.cds--time-picker--fluid--invalid .cds--text-input, -.cds--time-picker--fluid--invalid .cds--text-input-wrapper, -.cds--time-picker--fluid--invalid .cds--select-input, -.cds--time-picker--fluid--invalid .cds--select { - background: transparent; -} - -.cds--time-picker--fluid--invalid .cds--select-input { - border-block-start: 2px solid transparent; - padding-block-start: 1.875rem; -} - -.cds--time-picker--fluid .cds--select--fluid:last-of-type .cds--select-input { - border-inline-end: 2px solid transparent; -} - -.cds--time-picker--fluid--invalid .cds--select-input:hover:not([disabled]) { - background: var(--cds-field-hover); -} - -.cds--time-picker--fluid--invalid .cds--select-input:hover { - border-block-start: 2px solid var(--cds-support-error, #da1e28); -} - -.cds--time-picker--fluid--invalid .cds--select--fluid:last-of-type .cds--select-input:hover { - border-inline-end: 2px solid var(--cds-support-error, #da1e28); -} - -.cds--time-picker--fluid--warning { - position: relative; -} - -.cds--time-picker__icon { - display: none; -} - -.cds--time-picker--fluid--invalid .cds--time-picker__icon, -.cds--time-picker--fluid--warning .cds--time-picker__icon { - position: absolute; - display: block; - inset-block-start: 4.5rem; - inset-inline-end: 1rem; -} - -.cds--time-picker--fluid--invalid .cds--time-picker__icon { - fill: var(--cds-support-error, #da1e28); -} - -.cds--time-picker--fluid--warning .cds--time-picker__icon { - fill: var(--cds-support-warning, #f1c21b); -} - -.cds--time-picker--fluid--warning .cds--time-picker__icon path:first-of-type { - fill: var(--cds-icon-primary, #161616); -} - -.cds--time-picker--fluid--invalid .cds--form-requirement, -.cds--time-picker--fluid--warning .cds--form-requirement { - display: block; - overflow: visible; - max-block-size: 100%; -} - -.cds--time-picker--fluid--invalid .cds--form-requirement { - color: var(--cds-text-error, #da1e28); -} - -.cds--time-picker--fluid--invalid .cds--time-picker--fluid__wrapper > *:nth-child(2):not(:last-child) .cds--select-input__wrapper::before, -.cds--time-picker--fluid--invalid .cds--time-picker--fluid__wrapper > *:last-child .cds--select-input__wrapper::before, -.cds--time-picker--fluid--warning .cds--time-picker--fluid__wrapper > *:nth-child(2):not(:last-child) .cds--select-input__wrapper::before, -.cds--time-picker--fluid--warning .cds--time-picker--fluid__wrapper > *:last-child .cds--select-input__wrapper::before { - block-size: calc(100% - 1rem); - inset-block-start: 8px; -} - -.cds--time-picker--fluid--invalid .cds--text-input, -.cds--time-picker--fluid--warning .cds--text-input, -.cds--time-picker--fluid--invalid .cds--select-input, -.cds--time-picker--fluid--warning .cds--select-input { - border-block-end: 1px solid transparent; -} - -.cds--time-picker--fluid.cds--time-picker--fluid--invalid .cds--time-picker__divider, -.cds--time-picker--fluid.cds--time-picker--fluid--warning .cds--time-picker__divider { - border-style: solid; - border-color: var(--cds-border-subtle); - margin: 0 1rem; - border-block-end: none; - inline-size: calc(100% - 2rem); -} - -.cds--time-picker--fluid--skeleton { - display: flex; - block-size: 4rem; - inline-size: 100%; -} - -.cds--time-picker--fluid--skeleton > * { - block-size: 100%; - inline-size: auto; -} - -.cds--time-picker--fluid--skeleton > *:nth-child(1), -.cds--time-picker--fluid--skeleton > *:nth-child(2) { - inline-size: 25%; -} - -.cds--time-picker--fluid--skeleton > *:last-child, -.cds--time-picker--fluid--skeleton.cds--time-picker--equal-width > *:first-child { - inline-size: 50%; -} - -@keyframes prefix--stroke { - 100% { - stroke-dashoffset: 0; - } -} -.cds--inline-loading { - display: flex; - align-items: center; - inline-size: 100%; - min-block-size: 2rem; -} - -.cds--inline-loading__text { - font-size: var(--cds-label-01-font-size, 0.75rem); - font-weight: var(--cds-label-01-font-weight, 400); - line-height: var(--cds-label-01-line-height, 1.33333); - letter-spacing: var(--cds-label-01-letter-spacing, 0.32px); - color: var(--cds-text-secondary, #525252); -} - -.cds--inline-loading__animation { - position: relative; - display: flex; - align-items: center; - justify-content: center; - margin-inline-end: 0.5rem; -} - -.cds--inline-loading__checkmark-container { - fill: var(--cds-support-success, #24a148); -} -.cds--inline-loading__checkmark-container.cds--inline-loading__svg { - position: absolute; - inline-size: 0.75rem; - inset-block-start: 0.75rem; -} -.cds--inline-loading__checkmark-container[hidden] { - display: none; -} - -.cds--inline-loading__checkmark { - animation-duration: 250ms; - animation-fill-mode: forwards; - animation-name: cds--stroke; - fill: none; - stroke: var(--cds-interactive, #0f62fe); - stroke-dasharray: 12; - stroke-dashoffset: 12; - stroke-width: 1.8; - transform-origin: 50% 50%; -} - -.cds--inline-loading--error { - block-size: 1rem; - fill: var(--cds-support-error, #da1e28); - inline-size: 1rem; -} -.cds--inline-loading--error[hidden] { - display: none; -} - -.cds--loading--small .cds--inline-loading__svg { - stroke: var(--cds-interactive, #0f62fe); -} - -.cds--btn .cds--inline-loading--btn { - min-block-size: 0; -} -.cds--btn .cds--inline-loading--btn .cds--inline-loading__text { - font-size: var(--cds-body-short-01-font-size, 0.875rem); - font-weight: var(--cds-body-short-01-font-weight, 400); - line-height: var(--cds-body-short-01-line-height, 1.28572); - letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px); -} - -/* If IE11 Don't show check animation */ -@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { - .cds--inline-loading__checkmark-container { - inset-block-start: 1px; - inset-inline-end: 0.5rem; - } - .cds--inline-loading__checkmark { - animation: none; - stroke-dasharray: 0; - stroke-dashoffset: 0; - } -} -.cds--list--nested, -.cds--list--unordered, -.cds--list--ordered, -.cds--list--ordered--native { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - font-size: var(--cds-body-01-font-size, 0.875rem); - font-weight: var(--cds-body-01-font-weight, 400); - line-height: var(--cds-body-01-line-height, 1.42857); - letter-spacing: var(--cds-body-01-letter-spacing, 0.16px); - list-style: none; -} -.cds--list--nested *, -.cds--list--nested *::before, -.cds--list--nested *::after, -.cds--list--unordered *, -.cds--list--unordered *::before, -.cds--list--unordered *::after, -.cds--list--ordered *, -.cds--list--ordered *::before, -.cds--list--ordered *::after, -.cds--list--ordered--native *, -.cds--list--ordered--native *::before, -.cds--list--ordered--native *::after { - box-sizing: inherit; -} - -.cds--list--unordered:not(.cds--list--nested) { - margin-inline-start: 1rem; -} - -.cds--list--expressive, -.cds--list--expressive .cds--list--nested { - font-size: var(--cds-body-02-font-size, 1rem); - font-weight: var(--cds-body-02-font-weight, 400); - line-height: var(--cds-body-02-line-height, 1.5); - letter-spacing: var(--cds-body-02-letter-spacing, 0); -} - -.cds--list--ordered--native { - list-style: decimal; -} - -.cds--list__item { - color: var(--cds-text-primary, #161616); -} - -.cds--list--nested { - margin-inline-start: 2rem; -} - -.cds--list--nested .cds--list__item { - padding-inline-start: 0.25rem; -} - -.cds--list--ordered:not(.cds--list--nested) { - counter-reset: item; -} - -.cds--list--ordered:not(.cds--list--nested) > .cds--list__item { - position: relative; -} - -.cds--list--ordered:not(.cds--list--nested) > .cds--list__item::before { - position: absolute; - content: counter(item) "."; - counter-increment: item; - inset-inline-start: -1.5rem; -} - -.cds--list--ordered.cds--list--nested, -.cds--list--ordered--native.cds--list--nested { - list-style-type: lower-latin; -} - -.cds--list--unordered > .cds--list__item { - position: relative; -} -.cds--list--unordered > .cds--list__item::before { - position: absolute; - content: "–"; - inset-inline-start: calc(-1 * 1rem); -} - -.cds--list--unordered.cds--list--nested > .cds--list__item::before { - content: "▪"; - inset-inline-start: calc(-1 * 0.75rem); -} - -.cds--menu-button__container { - display: inline-block; -} - -.cds--menu-button__trigger:not(.cds--btn--ghost) { - min-inline-size: 12rem; -} - -.cds--menu-button__trigger svg { - transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -.cds--menu-button__trigger--open svg { - transform: rotate(180deg); -} - -.cds--menu-button__top { - transform: translate(0, calc(-100% - var(--cds-popover-offset, 3rem))); -} - -.cds--menu-button__top-start { - transform: translate(0, calc(-100% - var(--cds-popover-offset, 3rem))); -} - -.cds--menu-button__top-end { - transform: translate(0, calc(-100% - var(--cds-popover-offset, 3rem))); -} - -.cds--modal { - position: fixed; - z-index: 9000; - display: flex; - align-items: center; - justify-content: center; - background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5)); - block-size: 100vh; - content: ""; - inline-size: 100vw; - inset-block-start: 0; - inset-inline-start: 0; - opacity: 0; - transition: opacity 240ms cubic-bezier(0.4, 0.14, 1, 1), visibility 0ms linear 240ms; - visibility: hidden; -} -.cds--modal.is-visible { - opacity: 1; - transition: opacity 240ms cubic-bezier(0, 0, 0.3, 1), visibility 0ms linear; - visibility: inherit; -} -@media screen and (prefers-reduced-motion: reduce) { - .cds--modal.is-visible { - transition: none; - } -} -.cds--modal .cds--pagination, -.cds--modal .cds--pagination__control-buttons, -.cds--modal .cds--text-input, -.cds--modal .cds--text-area, -.cds--modal .cds--search-input, -.cds--modal .cds--select-input, -.cds--modal .cds--dropdown, -.cds--modal .cds--dropdown-list, -.cds--modal .cds--number input[type=number], -.cds--modal .cds--date-picker__input, -.cds--modal .cds--multi-select, -.cds--modal .cds--number__control-btn::before, -.cds--modal .cds--number__control-btn::after, -.cds--modal .cds--list-box input[role=combobox] { - background-color: var(--cds-field-02, #ffffff); -} -.cds--modal .cds--list-box__menu { - background-color: var(--cds-layer-02, #ffffff); -} -.cds--modal .cds--number__rule-divider { - background-color: var(--cds-border-subtle-02, #e0e0e0); -} -.cds--modal .cds--list-box__menu-item__option { - border-block-start-color: var(--cds-border-subtle-02, #e0e0e0); -} -.cds--modal .cds--list-box__menu-item:hover .cds--list-box__menu-item__option { - border-block-start-color: var(--cds-layer-hover-02, #e8e8e8); -} -.cds--modal .cds--list-box__menu-item--active:hover .cds--list-box__menu-item__option { - border-block-start-color: var(--cds-layer-selected-hover-02, #d1d1d1); -} -.cds--modal .cds--text-input--fluid .cds--text-input, -.cds--modal .cds--text-area--fluid .cds--text-area__wrapper, -.cds--modal .cds--text-area--fluid .cds--text-area, -.cds--modal .cds--search--fluid .cds--search-input, -.cds--modal .cds--select--fluid .cds--select-input, -.cds--modal .cds--text-area--fluid .cds--text-area__wrapper[data-invalid] .cds--text-area__divider + .cds--form-requirement, -.cds--modal .cds--list-box__wrapper--fluid .cds--list-box, -.cds--modal .cds--list-box__wrapper--fluid.cds--list-box__wrapper, -.cds--modal .cds--number-input--fluid input[type=number], -.cds--modal .cds--number-input--fluid .cds--number__control-btn::before, -.cds--modal .cds--number-input--fluid .cds--number__control-btn::after, -.cds--modal .cds--date-picker--fluid .ccdsds--date-picker-input__wrapper .cds--date-picker__input { - background-color: var(--cds-field-01, #f4f4f4); -} -.cds--modal .cds--list-box__wrapper--fluid .cds--list-box__menu { - background-color: var(--cds-layer-01, #f4f4f4); -} -.cds--modal .cds--list-box__menu-item:hover { - background-color: var(--cds-layer-hover-02, #e8e8e8); -} -.cds--modal .cds--list-box__menu-item--active { - background-color: var(--cds-layer-selected-02, #e0e0e0); -} -.cds--modal .cds--list-box__menu-item--active:hover { - background-color: var(--cds-layer-selected-hover-02, #d1d1d1); -} -.cds--modal .cds--number-input--fluid .cds--number__control-btn:hover::before, -.cds--modal .cds--number-input--fluid .cds--number__control-btn:hover::after { - background-color: var(--cds-field-hover); -} -.cds--modal .cds--number-input--fluid .cds--number__control-btn:focus::before, -.cds--modal .cds--number-input--fluid .cds--number__control-btn:focus::after { - border-inline-start: 2px solid var(--cds-focus, #0f62fe); -} - -.cds--modal.is-visible .cds--modal-container { - transform: translate3d(0, 0, 0); - transition: transform 240ms cubic-bezier(0, 0, 0.3, 1); -} - -.cds--modal-container { - position: fixed; - display: grid; - background-color: var(--cds-layer); - block-size: 100%; - grid-template-columns: 100%; - grid-template-rows: auto 1fr auto; - inline-size: 100%; - inset-block-start: 0; - max-block-size: 100%; - outline: 3px solid transparent; - outline-offset: -3px; - transform: translate3d(0, -24px, 0); - transform-origin: top center; - transition: transform 240ms cubic-bezier(0.4, 0.14, 1, 1); -} -@media (min-width: 42rem) { - .cds--modal-container { - position: static; - block-size: auto; - inline-size: 84%; - max-block-size: 90%; - } -} -@media (min-width: 66rem) { - .cds--modal-container { - inline-size: 60%; - max-block-size: 84%; - } -} -@media (min-width: 82rem) { - .cds--modal-container { - inline-size: 48%; - } -} -.cds--modal-container .cds--modal-container-body { - display: contents; -} - -.cds--modal-content { - font-size: var(--cds-body-01-font-size, 0.875rem); - font-weight: var(--cds-body-01-font-weight, 400); - line-height: var(--cds-body-01-line-height, 1.42857); - letter-spacing: var(--cds-body-01-letter-spacing, 0.16px); - position: relative; - color: var(--cds-text-primary, #161616); - font-weight: 400; - grid-column: 1/-1; - grid-row: 2/-2; - overflow-y: auto; - padding-block-end: 3rem; - padding-block-start: 0.5rem; - padding-inline-end: 1rem; - padding-inline-start: 1rem; -} -.cds--modal-content:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--modal-content:focus { - outline-style: dotted; - } -} - -.cds--modal-content .cds--form--fluid { - margin-inline-end: -1rem; - margin-inline-start: -1rem; -} - -.cds--modal-content > p, -.cds--modal-content__regular-content { - font-size: var(--cds-body-01-font-size, 0.875rem); - font-weight: var(--cds-body-01-font-weight, 400); - line-height: var(--cds-body-01-line-height, 1.42857); - letter-spacing: var(--cds-body-01-letter-spacing, 0.16px); - padding-inline-end: calc(20% - 2rem); -} - -.cds--modal-content--with-form { - padding-inline-end: 1rem; -} - -.cds--modal-header { - grid-column: 1/-1; - grid-row: 1/1; - margin-block-end: 0.5rem; - padding-block-start: 1rem; - padding-inline-end: 3rem; - padding-inline-start: 1rem; -} - -.cds--modal-header__label { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - font-size: var(--cds-label-01-font-size, 0.75rem); - font-weight: var(--cds-label-01-font-weight, 400); - line-height: var(--cds-label-01-line-height, 1.33333); - letter-spacing: var(--cds-label-01-letter-spacing, 0.32px); - color: var(--cds-text-secondary, #525252); - margin-block-end: 0.25rem; -} -.cds--modal-header__label *, -.cds--modal-header__label *::before, -.cds--modal-header__label *::after { - box-sizing: inherit; -} - -.cds--modal-header__heading { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - font-size: var(--cds-heading-03-font-size, 1.25rem); - font-weight: var(--cds-heading-03-font-weight, 400); - line-height: var(--cds-heading-03-line-height, 1.4); - letter-spacing: var(--cds-heading-03-letter-spacing, 0); - color: var(--cds-text-primary, #161616); - padding-inline-end: calc(20% - 3rem); -} -.cds--modal-header__heading *, -.cds--modal-header__heading *::before, -.cds--modal-header__heading *::after { - box-sizing: inherit; -} - -.cds--modal-container--xs .cds--modal-content__regular-content { - padding-inline-end: 1rem; -} -.cds--modal-container--xs .cds--modal-content > p { - padding-inline-end: 0; -} -@media (min-width: 42rem) { - .cds--modal-container--xs { - inline-size: 48%; - } -} -@media (min-width: 66rem) { - .cds--modal-container--xs { - inline-size: 32%; - max-block-size: 48%; - } -} -@media (min-width: 82rem) { - .cds--modal-container--xs { - inline-size: 24%; - } -} - -.cds--modal-container--sm .cds--modal-content__regular-content { - padding-inline-end: 1rem; -} -.cds--modal-container--sm .cds--modal-content > p { - padding-inline-end: 0; -} -@media (min-width: 42rem) { - .cds--modal-container--sm { - inline-size: 60%; - } -} -@media (min-width: 66rem) { - .cds--modal-container--sm { - inline-size: 42%; - max-block-size: 72%; - } - .cds--modal-container--sm .cds--modal-content > p, - .cds--modal-container--sm .cds--modal-content__regular-content { - padding-inline-end: 20%; - } -} -@media (min-width: 82rem) { - .cds--modal-container--sm { - inline-size: 36%; - } -} - -@media (min-width: 42rem) { - .cds--modal-container--lg { - inline-size: 96%; - } -} -@media (min-width: 66rem) { - .cds--modal-container--lg { - inline-size: 84%; - max-block-size: 96%; - } -} -@media (min-width: 82rem) { - .cds--modal-container--lg { - inline-size: 72%; - } -} - -.cds--modal-scroll-content { - border-block-end: 2px solid transparent; - -webkit-mask-image: linear-gradient(to bottom, var(--cds-layer) calc(100% - 80px), transparent calc(100% - 48px), transparent 100%), linear-gradient(to left, var(--cds-layer) 0, 16px, transparent 16px), linear-gradient(to right, var(--cds-layer) 0, 2px, transparent 2px), linear-gradient(to top, var(--cds-layer) 0, 2px, transparent 2px); - mask-image: linear-gradient(to bottom, var(--cds-layer) calc(100% - 80px), transparent calc(100% - 48px), transparent 100%), linear-gradient(to left, var(--cds-layer) 0, 16px, transparent 16px), linear-gradient(to right, var(--cds-layer) 0, 2px, transparent 2px), linear-gradient(to top, var(--cds-layer) 0, 2px, transparent 2px); -} - -.cds--modal-scroll-content > *:last-child { - margin-block-end: 1.5rem; -} - -.cds--modal-footer { - display: flex; - justify-content: flex-end; - block-size: 4rem; - grid-column: 1/-1; - grid-row: -1/-1; - margin-block-start: auto; -} - -.cds--modal-footer .cds--btn { - flex: 0 1 50%; - align-items: baseline; - margin: 0; - block-size: 4rem; - max-inline-size: none; - padding-block-end: 2rem; - padding-block-start: 0.875rem; -} - -.cds--modal-footer--three-button .cds--btn { - flex: 0 1 25%; - align-items: flex-start; -} - -.cds--modal-close-button { - position: absolute; - inset-block-start: 0; - inset-inline-end: 0; -} - -.cds--modal-close { - padding: 0.75rem; - border: 2px solid transparent; - background-color: transparent; - block-size: 3rem; - cursor: pointer; - inline-size: 3rem; - transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -.cds--modal-close:hover { - background-color: var(--cds-layer-hover); -} -.cds--modal-close:focus { - border-color: var(--cds-focus, #0f62fe); - outline: none; -} - -.cds--modal-close::-moz-focus-inner { - border: 0; -} - -.cds--modal-close__icon { - block-size: 1.25rem; - fill: var(--cds-icon-primary, #161616); - inline-size: 1.25rem; -} - -.cds--body--with-modal-open { - overflow: hidden; -} - -.cds--body--with-modal-open .cds--modal .cds--tooltip, -.cds--body--with-modal-open .cds--modal .cds--overflow-menu-options, -.cds--body--with-modal-open .cds--overflow-menu-options { - z-index: 9000; -} - -.cds--modal-container--full-width .cds--modal-content { - padding: 0; - margin: 0; -} - -.cds--modal--slug.cds--modal { - background-color: var(--cds-ai-overlay, rgba(0, 17, 65, 0.5)); -} - -.cds--modal--slug .cds--modal-container { - background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box; - border: 1px solid transparent; - background-color: var(--cds-layer); - box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 24px 40px -24px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1)); -} - -.cds--modal--slug .cds--modal-container:has(.cds--modal-footer) { - background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) calc(0% + 64px), var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) calc(0% + 64px), 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box; - box-shadow: inset 0 -80px 0 -16px var(--cds-layer), inset 0 -160px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 24px 40px -24px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1)); -} - -.cds--modal--slug .cds--modal-content.cds--modal-scroll-content { - -webkit-mask-image: linear-gradient(to bottom, var(--cds-layer) calc(100% - 80px), transparent calc(100% - 48px), transparent 100%), linear-gradient(to left, var(--cds-layer) 0, 16px, transparent 16px), linear-gradient(to right, var(--cds-layer) 0, 2px, transparent 2px), linear-gradient(to top, var(--cds-layer) 0, 2px, transparent 2px); - mask-image: linear-gradient(to bottom, var(--cds-layer) calc(100% - 80px), transparent calc(100% - 48px), transparent 100%), linear-gradient(to left, var(--cds-layer) 0, 16px, transparent 16px), linear-gradient(to right, var(--cds-layer) 0, 2px, transparent 2px), linear-gradient(to top, var(--cds-layer) 0, 2px, transparent 2px); -} - -.cds--modal-header > .cds--slug:has(+ .cds--modal-close-button), -.cds--modal-header > .cds--modal-close-button ~ .cds--slug, -.cds--modal--slug .cds--modal-container-body > .cds--slug { - position: absolute; - inset-block-start: 0.625rem; - inset-inline-end: 3rem; -} - -.cds--modal--slug .cds--modal-content--overflow-indicator::before, -.cds--modal--slug .cds--modal-content--overflow-indicator { - display: none; -} - -/* stylelint-disable no-duplicate-selectors */ -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--modal-close__icon { - fill: ButtonText; - } -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--modal-close:focus { - color: Highlight; - outline: 1px solid Highlight; - } -} - -/* stylelint-enable no-duplicate-selectors */ -.cds--inline-notification { - position: relative; - display: flex; - flex-wrap: wrap; - block-size: auto; - color: var(--cds-text-inverse, #ffffff); - inline-size: 100%; - max-inline-size: 18rem; - min-block-size: 3rem; - min-inline-size: 18rem; -} -.cds--inline-notification html { - font-size: 100%; -} -.cds--inline-notification body { - font-weight: 400; - font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; -} -.cds--inline-notification code { - font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace; -} -.cds--inline-notification strong { - font-weight: 600; -} -@media (min-width: 42rem) { - .cds--inline-notification { - flex-wrap: nowrap; - max-inline-size: 38rem; - } -} -@media (min-width: 66rem) { - .cds--inline-notification { - max-inline-size: 46rem; - } -} -@media (min-width: 99rem) { - .cds--inline-notification { - max-inline-size: 52rem; - } -} - -.cds--inline-notification:not(.cds--inline-notification--low-contrast) a { - color: var(--cds-link-inverse, #78a9ff); -} - -.cds--inline-notification a { - text-decoration: none; -} - -.cds--inline-notification a:hover { - text-decoration: underline; -} - -.cds--inline-notification a:focus { - outline: 1px solid var(--cds-link-inverse, #78a9ff); -} - -.cds--inline-notification.cds--inline-notification--low-contrast a:focus { - outline: 1px solid var(--cds-focus, #0f62fe); -} -@media screen and (prefers-contrast) { - .cds--inline-notification.cds--inline-notification--low-contrast a:focus { - outline-style: dotted; - } -} - -.cds--inline-notification--low-contrast { - color: var(--cds-text-primary, #161616); -} -.cds--inline-notification--low-contrast::before { - position: absolute; - box-sizing: border-box; - border-width: 1px 1px 1px 0; - border-style: solid; - block-size: 100%; - content: ""; - filter: opacity(0.4); - inline-size: 100%; - inset-block-start: 0; - inset-inline-start: 0; - pointer-events: none; -} - -.cds--inline-notification--error { - background: var(--cds-background-inverse, #393939); - border-inline-start: 3px solid var(--cds-support-error-inverse, #fa4d56); -} -.cds--inline-notification--error .cds--inline-notification__icon, -.cds--inline-notification--error .cds--toast-notification__icon, -.cds--inline-notification--error .cds--actionable-notification__icon { - fill: var(--cds-support-error-inverse, #fa4d56); -} - -.cds--inline-notification--low-contrast.cds--inline-notification--error { - background: var(--cds-notification-background-error, #fff1f1); - border-inline-start: 3px solid var(--cds-support-error, #da1e28); -} -.cds--inline-notification--low-contrast.cds--inline-notification--error .cds--inline-notification__icon, -.cds--inline-notification--low-contrast.cds--inline-notification--error .cds--toast-notification__icon, -.cds--inline-notification--low-contrast.cds--inline-notification--error .cds--actionable-notification__icon { - fill: var(--cds-support-error, #da1e28); -} -.cds--inline-notification--low-contrast.cds--inline-notification--error::before { - border-color: var(--cds-support-error, #da1e28); -} - -.cds--inline-notification--success { - background: var(--cds-background-inverse, #393939); - border-inline-start: 3px solid var(--cds-support-success-inverse, #42be65); -} -.cds--inline-notification--success .cds--inline-notification__icon, -.cds--inline-notification--success .cds--toast-notification__icon, -.cds--inline-notification--success .cds--actionable-notification__icon { - fill: var(--cds-support-success-inverse, #42be65); -} - -.cds--inline-notification--low-contrast.cds--inline-notification--success { - background: var(--cds-notification-background-success, #defbe6); - border-inline-start: 3px solid var(--cds-support-success, #24a148); -} -.cds--inline-notification--low-contrast.cds--inline-notification--success .cds--inline-notification__icon, -.cds--inline-notification--low-contrast.cds--inline-notification--success .cds--toast-notification__icon, -.cds--inline-notification--low-contrast.cds--inline-notification--success .cds--actionable-notification__icon { - fill: var(--cds-support-success, #24a148); -} -.cds--inline-notification--low-contrast.cds--inline-notification--success::before { - border-color: var(--cds-support-success, #24a148); -} - -.cds--inline-notification--info, -.cds--inline-notification--info-square { - background: var(--cds-background-inverse, #393939); - border-inline-start: 3px solid var(--cds-support-info-inverse, #4589ff); -} -.cds--inline-notification--info .cds--inline-notification__icon, -.cds--inline-notification--info .cds--toast-notification__icon, -.cds--inline-notification--info .cds--actionable-notification__icon, -.cds--inline-notification--info-square .cds--inline-notification__icon, -.cds--inline-notification--info-square .cds--toast-notification__icon, -.cds--inline-notification--info-square .cds--actionable-notification__icon { - fill: var(--cds-support-info-inverse, #4589ff); -} - -.cds--inline-notification--low-contrast.cds--inline-notification--info, -.cds--inline-notification--low-contrast.cds--inline-notification--info-square { - background: var(--cds-notification-background-info, #edf5ff); - border-inline-start: 3px solid var(--cds-support-info, #0043ce); -} -.cds--inline-notification--low-contrast.cds--inline-notification--info .cds--inline-notification__icon, -.cds--inline-notification--low-contrast.cds--inline-notification--info .cds--toast-notification__icon, -.cds--inline-notification--low-contrast.cds--inline-notification--info .cds--actionable-notification__icon, -.cds--inline-notification--low-contrast.cds--inline-notification--info-square .cds--inline-notification__icon, -.cds--inline-notification--low-contrast.cds--inline-notification--info-square .cds--toast-notification__icon, -.cds--inline-notification--low-contrast.cds--inline-notification--info-square .cds--actionable-notification__icon { - fill: var(--cds-support-info, #0043ce); -} -.cds--inline-notification--low-contrast.cds--inline-notification--info::before, -.cds--inline-notification--low-contrast.cds--inline-notification--info-square::before { - border-color: var(--cds-support-info, #0043ce); -} - -.cds--inline-notification--warning, -.cds--inline-notification--warning-alt { - background: var(--cds-background-inverse, #393939); - border-inline-start: 3px solid var(--cds-support-warning-inverse, #f1c21b); -} -.cds--inline-notification--warning .cds--inline-notification__icon, -.cds--inline-notification--warning .cds--toast-notification__icon, -.cds--inline-notification--warning .cds--actionable-notification__icon, -.cds--inline-notification--warning-alt .cds--inline-notification__icon, -.cds--inline-notification--warning-alt .cds--toast-notification__icon, -.cds--inline-notification--warning-alt .cds--actionable-notification__icon { - fill: var(--cds-support-warning-inverse, #f1c21b); -} - -.cds--inline-notification--low-contrast.cds--inline-notification--warning, -.cds--inline-notification--low-contrast.cds--inline-notification--warning-alt { - background: var(--cds-notification-background-warning, #fdf6dd); - border-inline-start: 3px solid var(--cds-support-warning, #f1c21b); -} -.cds--inline-notification--low-contrast.cds--inline-notification--warning .cds--inline-notification__icon, -.cds--inline-notification--low-contrast.cds--inline-notification--warning .cds--toast-notification__icon, -.cds--inline-notification--low-contrast.cds--inline-notification--warning .cds--actionable-notification__icon, -.cds--inline-notification--low-contrast.cds--inline-notification--warning-alt .cds--inline-notification__icon, -.cds--inline-notification--low-contrast.cds--inline-notification--warning-alt .cds--toast-notification__icon, -.cds--inline-notification--low-contrast.cds--inline-notification--warning-alt .cds--actionable-notification__icon { - fill: var(--cds-support-warning, #f1c21b); -} -.cds--inline-notification--low-contrast.cds--inline-notification--warning::before, -.cds--inline-notification--low-contrast.cds--inline-notification--warning-alt::before { - border-color: var(--cds-support-warning, #f1c21b); -} - -.cds--inline-notification--warning .cds--inline-notification__icon path[opacity="0"], -.cds--inline-notification--warning-alt .cds--inline-notification__icon path:first-of-type { - fill: #000000; - opacity: 1; -} - -.cds--inline-notification__details { - display: flex; - flex-grow: 1; - margin-inline: 0.8125rem 3rem; -} -@media (min-width: 42rem) { - .cds--inline-notification__details { - margin: 0 0.8125rem; - } -} - -.cds--inline-notification__icon { - flex-shrink: 0; - margin-block-start: 0.875rem; - margin-inline-end: 1rem; -} - -.cds--inline-notification__text-wrapper { - display: flex; - flex-wrap: wrap; - padding: 0.9375rem 0; -} - -.cds--inline-notification__title { - font-size: var(--cds-heading-compact-01-font-size, 0.875rem); - font-weight: var(--cds-heading-compact-01-font-weight, 600); - line-height: var(--cds-heading-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px); - margin-inline-end: 0.25rem; -} - -.cds--inline-notification__subtitle { - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - word-break: break-word; -} - -.cds--inline-notification__action-button.cds--btn--ghost { - block-size: 2rem; - margin-block-end: 0.5rem; - margin-inline-start: 2.5rem; -} -@media (min-width: 42rem) { - .cds--inline-notification__action-button.cds--btn--ghost { - margin: 0.5rem 0; - } -} - -.cds--inline-notification:not(.cds--inline-notification--low-contrast) .cds--inline-notification__action-button.cds--btn--ghost { - color: var(--cds-link-inverse, #78a9ff); -} - -.cds--inline-notification__action-button.cds--btn--ghost:active, -.cds--inline-notification__action-button.cds--btn--ghost:hover { - background-color: var(--cds-background-inverse-hover, #474747); -} - -.cds--inline-notification--low-contrast .cds--inline-notification__action-button.cds--btn--ghost:active, -.cds--inline-notification--low-contrast .cds--inline-notification__action-button.cds--btn--ghost:hover { - background-color: var(--cds-notification-action-hover, #ffffff); -} - -.cds--inline-notification__action-button.cds--btn--ghost:focus { - border-color: transparent; - box-shadow: none; - outline: 2px solid var(--cds-focus-inverse, #ffffff); - outline-offset: -2px; -} - -.cds--inline-notification--low-contrast .cds--inline-notification__action-button.cds--btn--ghost:focus { - outline-color: var(--cds-focus, #0f62fe); -} - -.cds--inline-notification--hide-close-button .cds--inline-notification__action-button.cds--btn--ghost { - margin-inline-end: 0.5rem; -} - -.cds--inline-notification__close-button { - outline: 2px solid transparent; - outline-offset: -2px; - position: absolute; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding: 0; - border: none; - background: transparent; - block-size: 3rem; - cursor: pointer; - inline-size: 3rem; - inset-block-start: 0; - inset-inline-end: 0; - max-inline-size: 3rem; - min-inline-size: 3rem; - transition: outline 110ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -.cds--inline-notification__close-button:focus { - outline: 2px solid var(--cds-focus-inverse, #ffffff); - outline-offset: -2px; -} -.cds--inline-notification__close-button .cds--inline-notification__close-icon { - fill: var(--cds-icon-inverse, #ffffff); -} -@media (min-width: 42rem) { - .cds--inline-notification__close-button { - position: static; - } -} - -.cds--inline-notification--low-contrast .cds--inline-notification__close-button:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--inline-notification--low-contrast .cds--inline-notification__close-button:focus { - outline-style: dotted; - } -} - -.cds--inline-notification--low-contrast .cds--inline-notification__close-button .cds--inline-notification__close-icon { - fill: var(--cds-icon-primary, #161616); -} - -/* stylelint-disable */ -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--inline-notification { - outline: 1px solid transparent; - } -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--inline-notification__close-button:focus, - .cds--btn.cds--btn--ghost.cds--inline-notification__action-button:focus { - color: Highlight; - outline: 1px solid Highlight; - } -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--inline-notification .cds--inline-notification__icon { - fill: ButtonText; - } -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--inline-notification .cds--inline-notification__close-icon { - fill: ButtonText; - } -} - -/* stylelint-enable */ -.cds--toast-notification { - display: flex; - block-size: auto; - box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2); - color: var(--cds-text-inverse, #ffffff); - inline-size: 18rem; - padding-inline-start: 0.8125rem; -} -.cds--toast-notification html { - font-size: 100%; -} -.cds--toast-notification body { - font-weight: 400; - font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; -} -.cds--toast-notification code { - font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace; -} -.cds--toast-notification strong { - font-weight: 600; -} -@media (min-width: 99rem) { - .cds--toast-notification { - inline-size: 22rem; - } -} - -.cds--toast-notification:not(.cds--toast-notification--low-contrast) a { - color: var(--cds-link-inverse, #78a9ff); -} - -.cds--toast-notification a { - text-decoration: none; -} - -.cds--toast-notification a:hover { - text-decoration: underline; -} - -.cds--toast-notification a:focus { - outline: 1px solid var(--cds-link-inverse, #78a9ff); -} - -.cds--toast-notification.cds--toast-notification--low-contrast a:focus { - outline: 1px solid var(--cds-focus, #0f62fe); -} -@media screen and (prefers-contrast) { - .cds--toast-notification.cds--toast-notification--low-contrast a:focus { - outline-style: dotted; - } -} - -.cds--toast-notification--low-contrast { - color: var(--cds-text-primary, #161616); -} - -.cds--toast-notification--error { - background: var(--cds-background-inverse, #393939); - border-inline-start: 3px solid var(--cds-support-error-inverse, #fa4d56); -} -.cds--toast-notification--error .cds--inline-notification__icon, -.cds--toast-notification--error .cds--toast-notification__icon, -.cds--toast-notification--error .cds--actionable-notification__icon { - fill: var(--cds-support-error-inverse, #fa4d56); -} - -.cds--toast-notification--low-contrast.cds--toast-notification--error { - background: var(--cds-notification-background-error, #fff1f1); - border-inline-start: 3px solid var(--cds-support-error, #da1e28); -} -.cds--toast-notification--low-contrast.cds--toast-notification--error .cds--inline-notification__icon, -.cds--toast-notification--low-contrast.cds--toast-notification--error .cds--toast-notification__icon, -.cds--toast-notification--low-contrast.cds--toast-notification--error .cds--actionable-notification__icon { - fill: var(--cds-support-error, #da1e28); -} - -.cds--toast-notification--success { - background: var(--cds-background-inverse, #393939); - border-inline-start: 3px solid var(--cds-support-success-inverse, #42be65); -} -.cds--toast-notification--success .cds--inline-notification__icon, -.cds--toast-notification--success .cds--toast-notification__icon, -.cds--toast-notification--success .cds--actionable-notification__icon { - fill: var(--cds-support-success-inverse, #42be65); -} - -.cds--toast-notification--low-contrast.cds--toast-notification--success { - background: var(--cds-notification-background-success, #defbe6); - border-inline-start: 3px solid var(--cds-support-success, #24a148); -} -.cds--toast-notification--low-contrast.cds--toast-notification--success .cds--inline-notification__icon, -.cds--toast-notification--low-contrast.cds--toast-notification--success .cds--toast-notification__icon, -.cds--toast-notification--low-contrast.cds--toast-notification--success .cds--actionable-notification__icon { - fill: var(--cds-support-success, #24a148); -} - -.cds--toast-notification--info, -.cds--toast-notification--info-square { - background: var(--cds-background-inverse, #393939); - border-inline-start: 3px solid var(--cds-support-info-inverse, #4589ff); -} -.cds--toast-notification--info .cds--inline-notification__icon, -.cds--toast-notification--info .cds--toast-notification__icon, -.cds--toast-notification--info .cds--actionable-notification__icon, -.cds--toast-notification--info-square .cds--inline-notification__icon, -.cds--toast-notification--info-square .cds--toast-notification__icon, -.cds--toast-notification--info-square .cds--actionable-notification__icon { - fill: var(--cds-support-info-inverse, #4589ff); -} - -.cds--toast-notification--low-contrast.cds--toast-notification--info, -.cds--toast-notification--low-contrast.cds--toast-notification--info-square { - background: var(--cds-notification-background-info, #edf5ff); - border-inline-start: 3px solid var(--cds-support-info, #0043ce); -} -.cds--toast-notification--low-contrast.cds--toast-notification--info .cds--inline-notification__icon, -.cds--toast-notification--low-contrast.cds--toast-notification--info .cds--toast-notification__icon, -.cds--toast-notification--low-contrast.cds--toast-notification--info .cds--actionable-notification__icon, -.cds--toast-notification--low-contrast.cds--toast-notification--info-square .cds--inline-notification__icon, -.cds--toast-notification--low-contrast.cds--toast-notification--info-square .cds--toast-notification__icon, -.cds--toast-notification--low-contrast.cds--toast-notification--info-square .cds--actionable-notification__icon { - fill: var(--cds-support-info, #0043ce); -} - -.cds--toast-notification--warning, -.cds--toast-notification--warning-alt { - background: var(--cds-background-inverse, #393939); - border-inline-start: 3px solid var(--cds-support-warning-inverse, #f1c21b); -} -.cds--toast-notification--warning .cds--inline-notification__icon, -.cds--toast-notification--warning .cds--toast-notification__icon, -.cds--toast-notification--warning .cds--actionable-notification__icon, -.cds--toast-notification--warning-alt .cds--inline-notification__icon, -.cds--toast-notification--warning-alt .cds--toast-notification__icon, -.cds--toast-notification--warning-alt .cds--actionable-notification__icon { - fill: var(--cds-support-warning-inverse, #f1c21b); -} - -.cds--toast-notification--low-contrast.cds--toast-notification--warning, -.cds--toast-notification--low-contrast.cds--toast-notification--warning-alt { - background: var(--cds-notification-background-warning, #fdf6dd); - border-inline-start: 3px solid var(--cds-support-warning, #f1c21b); -} -.cds--toast-notification--low-contrast.cds--toast-notification--warning .cds--inline-notification__icon, -.cds--toast-notification--low-contrast.cds--toast-notification--warning .cds--toast-notification__icon, -.cds--toast-notification--low-contrast.cds--toast-notification--warning .cds--actionable-notification__icon, -.cds--toast-notification--low-contrast.cds--toast-notification--warning-alt .cds--inline-notification__icon, -.cds--toast-notification--low-contrast.cds--toast-notification--warning-alt .cds--toast-notification__icon, -.cds--toast-notification--low-contrast.cds--toast-notification--warning-alt .cds--actionable-notification__icon { - fill: var(--cds-support-warning, #f1c21b); -} - -.cds--toast-notification--warning .cds--toast-notification__icon path[opacity="0"], -.cds--toast-notification--warning-alt .cds--toast-notification__icon path:first-of-type { - fill: #000000; - opacity: 1; -} - -.cds--toast-notification__icon { - flex-shrink: 0; - margin-block-start: 1rem; - margin-inline-end: 1rem; -} - -.cds--toast-notification__details { - margin-inline-end: 1rem; -} - -.cds--toast-notification__close-button { - outline: 2px solid transparent; - outline-offset: -2px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding: 0; - border: none; - background-color: transparent; - block-size: 3rem; - cursor: pointer; - inline-size: 3rem; - margin-inline-start: auto; - min-block-size: 3rem; - min-inline-size: 3rem; - transition: outline 250ms, background-color 250ms; -} -.cds--toast-notification__close-button:focus { - outline: 2px solid var(--cds-focus-inverse, #ffffff); - outline-offset: -2px; -} -.cds--toast-notification__close-button .cds--toast-notification__close-icon { - fill: var(--cds-icon-inverse, #ffffff); -} - -.cds--toast-notification--low-contrast .cds--toast-notification__close-button:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--toast-notification--low-contrast .cds--toast-notification__close-button:focus { - outline-style: dotted; - } -} - -.cds--toast-notification--low-contrast .cds--toast-notification__close-button .cds--toast-notification__close-icon { - fill: var(--cds-icon-primary, #161616); -} - -.cds--toast-notification__title { - font-size: var(--cds-heading-compact-01-font-size, 0.875rem); - font-weight: var(--cds-heading-compact-01-font-weight, 600); - line-height: var(--cds-heading-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px); - font-weight: 600; - margin-block-start: 1rem; - word-break: break-word; -} - -.cds--toast-notification__subtitle { - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - color: var(--cds-text-inverse, #ffffff); - margin-block: 0 1rem; - word-break: break-word; -} - -.cds--toast-notification--low-contrast .cds--toast-notification__subtitle { - color: var(--cds-text-primary, #161616); -} - -.cds--toast-notification__caption { - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - color: var(--cds-text-inverse, #ffffff); - margin-block-end: 1rem; - padding-block-start: 0.5rem; -} - -.cds--toast-notification--low-contrast .cds--toast-notification__caption { - color: var(--cds-text-primary, #161616); -} - -/* stylelint-disable */ -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--toast-notification { - outline: 1px solid transparent; - } -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--toast-notification__close-button:focus { - color: Highlight; - outline: 1px solid Highlight; - } -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--toast-notification .cds--toast-notification__close-icon { - fill: ButtonText; - } -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--toast-notification .cds--toast-notification__icon { - fill: ButtonText; - } -} - -/* stylelint-enable */ -.cds--actionable-notification { - position: relative; - display: flex; - flex-wrap: wrap; - block-size: auto; - color: var(--cds-text-inverse, #ffffff); - inline-size: 100%; - max-inline-size: 18rem; - min-block-size: 3rem; - min-inline-size: 18rem; -} -.cds--actionable-notification html { - font-size: 100%; -} -.cds--actionable-notification body { - font-weight: 400; - font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; -} -.cds--actionable-notification code { - font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace; -} -.cds--actionable-notification strong { - font-weight: 600; -} -@media (min-width: 42rem) { - .cds--actionable-notification { - flex-wrap: nowrap; - max-inline-size: 38rem; - } -} -@media (min-width: 66rem) { - .cds--actionable-notification { - max-inline-size: 46rem; - } -} -@media (min-width: 99rem) { - .cds--actionable-notification { - max-inline-size: 52rem; - } -} - -.cds--actionable-notification--toast { - flex-wrap: wrap; - box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2); - max-inline-size: 18rem; - min-inline-size: 18rem; -} - -.cds--actionable-notification:not(.cds--actionable-notification--low-contrast) a { - color: var(--cds-link-inverse, #78a9ff); -} - -.cds--actionable-notification a { - text-decoration: none; -} - -.cds--actionable-notification a:hover { - text-decoration: underline; -} - -.cds--actionable-notification a:focus { - outline: 1px solid var(--cds-focus-inverse, #ffffff); -} - -.cds--actionable-notification.cds--actionable-notification--low-contrast a:focus { - outline: 1px solid var(--cds-focus, #0f62fe); -} -@media screen and (prefers-contrast) { - .cds--actionable-notification.cds--actionable-notification--low-contrast a:focus { - outline-style: dotted; - } -} - -.cds--actionable-notification--low-contrast { - color: var(--cds-text-primary, #161616); -} - -.cds--actionable-notification--low-contrast:not(.cds--actionable-notification--toast)::before { - position: absolute; - box-sizing: border-box; - border-width: 1px 1px 1px 0; - border-style: solid; - block-size: 100%; - content: ""; - filter: opacity(0.4); - inline-size: 100%; - inset-block-start: 0; - inset-inline-start: 0; - pointer-events: none; -} - -.cds--actionable-notification--error { - background: var(--cds-background-inverse, #393939); - border-inline-start: 3px solid var(--cds-support-error-inverse, #fa4d56); -} -.cds--actionable-notification--error .cds--inline-notification__icon, -.cds--actionable-notification--error .cds--toast-notification__icon, -.cds--actionable-notification--error .cds--actionable-notification__icon { - fill: var(--cds-support-error-inverse, #fa4d56); -} - -.cds--actionable-notification--low-contrast.cds--actionable-notification--error { - background: var(--cds-notification-background-error, #fff1f1); - border-inline-start: 3px solid var(--cds-support-error, #da1e28); -} -.cds--actionable-notification--low-contrast.cds--actionable-notification--error .cds--inline-notification__icon, -.cds--actionable-notification--low-contrast.cds--actionable-notification--error .cds--toast-notification__icon, -.cds--actionable-notification--low-contrast.cds--actionable-notification--error .cds--actionable-notification__icon { - fill: var(--cds-support-error, #da1e28); -} -.cds--actionable-notification--low-contrast.cds--actionable-notification--error::before { - border-color: var(--cds-support-error, #da1e28); -} - -.cds--actionable-notification--success { - background: var(--cds-background-inverse, #393939); - border-inline-start: 3px solid var(--cds-support-success-inverse, #42be65); -} -.cds--actionable-notification--success .cds--inline-notification__icon, -.cds--actionable-notification--success .cds--toast-notification__icon, -.cds--actionable-notification--success .cds--actionable-notification__icon { - fill: var(--cds-support-success-inverse, #42be65); -} - -.cds--actionable-notification--low-contrast.cds--actionable-notification--success { - background: var(--cds-notification-background-success, #defbe6); - border-inline-start: 3px solid var(--cds-support-success, #24a148); -} -.cds--actionable-notification--low-contrast.cds--actionable-notification--success .cds--inline-notification__icon, -.cds--actionable-notification--low-contrast.cds--actionable-notification--success .cds--toast-notification__icon, -.cds--actionable-notification--low-contrast.cds--actionable-notification--success .cds--actionable-notification__icon { - fill: var(--cds-support-success, #24a148); -} -.cds--actionable-notification--low-contrast.cds--actionable-notification--success::before { - border-color: var(--cds-support-success, #24a148); -} - -.cds--actionable-notification--info, -.cds--actionable-notification--info-square { - background: var(--cds-background-inverse, #393939); - border-inline-start: 3px solid var(--cds-support-info-inverse, #4589ff); -} -.cds--actionable-notification--info .cds--inline-notification__icon, -.cds--actionable-notification--info .cds--toast-notification__icon, -.cds--actionable-notification--info .cds--actionable-notification__icon, -.cds--actionable-notification--info-square .cds--inline-notification__icon, -.cds--actionable-notification--info-square .cds--toast-notification__icon, -.cds--actionable-notification--info-square .cds--actionable-notification__icon { - fill: var(--cds-support-info-inverse, #4589ff); -} - -.cds--actionable-notification--low-contrast.cds--actionable-notification--info, -.cds--actionable-notification--low-contrast.cds--actionable-notification--info-square { - background: var(--cds-notification-background-info, #edf5ff); - border-inline-start: 3px solid var(--cds-support-info, #0043ce); -} -.cds--actionable-notification--low-contrast.cds--actionable-notification--info .cds--inline-notification__icon, -.cds--actionable-notification--low-contrast.cds--actionable-notification--info .cds--toast-notification__icon, -.cds--actionable-notification--low-contrast.cds--actionable-notification--info .cds--actionable-notification__icon, -.cds--actionable-notification--low-contrast.cds--actionable-notification--info-square .cds--inline-notification__icon, -.cds--actionable-notification--low-contrast.cds--actionable-notification--info-square .cds--toast-notification__icon, -.cds--actionable-notification--low-contrast.cds--actionable-notification--info-square .cds--actionable-notification__icon { - fill: var(--cds-support-info, #0043ce); -} -.cds--actionable-notification--low-contrast.cds--actionable-notification--info::before, -.cds--actionable-notification--low-contrast.cds--actionable-notification--info-square::before { - border-color: var(--cds-support-info, #0043ce); -} - -.cds--actionable-notification--warning, -.cds--actionable-notification--warning-alt { - background: var(--cds-background-inverse, #393939); - border-inline-start: 3px solid var(--cds-support-warning-inverse, #f1c21b); -} -.cds--actionable-notification--warning .cds--inline-notification__icon, -.cds--actionable-notification--warning .cds--toast-notification__icon, -.cds--actionable-notification--warning .cds--actionable-notification__icon, -.cds--actionable-notification--warning-alt .cds--inline-notification__icon, -.cds--actionable-notification--warning-alt .cds--toast-notification__icon, -.cds--actionable-notification--warning-alt .cds--actionable-notification__icon { - fill: var(--cds-support-warning-inverse, #f1c21b); -} - -.cds--actionable-notification--low-contrast.cds--actionable-notification--warning, -.cds--actionable-notification--low-contrast.cds--actionable-notification--warning-alt { - background: var(--cds-notification-background-warning, #fdf6dd); - border-inline-start: 3px solid var(--cds-support-warning, #f1c21b); -} -.cds--actionable-notification--low-contrast.cds--actionable-notification--warning .cds--inline-notification__icon, -.cds--actionable-notification--low-contrast.cds--actionable-notification--warning .cds--toast-notification__icon, -.cds--actionable-notification--low-contrast.cds--actionable-notification--warning .cds--actionable-notification__icon, -.cds--actionable-notification--low-contrast.cds--actionable-notification--warning-alt .cds--inline-notification__icon, -.cds--actionable-notification--low-contrast.cds--actionable-notification--warning-alt .cds--toast-notification__icon, -.cds--actionable-notification--low-contrast.cds--actionable-notification--warning-alt .cds--actionable-notification__icon { - fill: var(--cds-support-warning, #f1c21b); -} -.cds--actionable-notification--low-contrast.cds--actionable-notification--warning::before, -.cds--actionable-notification--low-contrast.cds--actionable-notification--warning-alt::before { - border-color: var(--cds-support-warning, #f1c21b); -} - -.cds--actionable-notification--warning .cds--toast-notification__icon path[opacity="0"], -.cds--actionable-notification--warning-alt .cds--toast-notification__icon path:first-of-type { - fill: #000000; - opacity: 1; -} - -.cds--actionable-notification--warning .cds--inline-notification__icon path[opacity="0"], -.cds--actionable-notification--warning-alt .cds--inline-notification__icon path:first-of-type { - fill: #000000; - opacity: 1; -} - -.cds--actionable-notification__details { - display: flex; - flex-grow: 1; - margin-inline: 0.8125rem 3rem; -} - -@media (min-width: 42rem) { - .cds--actionable-notification:not(.cds--actionable-notification--toast) .cds--actionable-notification__details { - margin: 0 0.8125rem; - } -} - -.cds--actionable-notification .cds--inline-notification__icon { - flex-shrink: 0; - margin-block-start: 0.875rem; - margin-inline-end: 1rem; -} - -.cds--actionable-notification .cds--toast-notification__icon { - flex-shrink: 0; - margin-block-start: 1rem; - margin-inline-end: 1rem; -} - -.cds--actionable-notification__text-wrapper { - display: flex; - flex-wrap: wrap; - padding: 0.9375rem 0; -} - -.cds--actionable-notification__button-wrapper { - display: flex; -} - -.cds--actionable-notification--toast .cds--actionable-notification__text-wrapper { - padding: 0.9375rem 0 1.4375rem 0; -} - -.cds--actionable-notification__content { - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - display: flex; - flex-wrap: wrap; - word-break: break-word; -} - -.cds--actionable-notification--toast .cds--actionable-notification__content { - display: block; -} - -.cds--actionable-notification__title { - font-size: var(--cds-heading-compact-01-font-size, 0.875rem); - font-weight: var(--cds-heading-compact-01-font-weight, 600); - line-height: var(--cds-heading-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px); - font-weight: 600; - margin-inline-end: 0.25rem; - word-break: break-word; -} - -.cds--actionable-notification--toast .cds--actionable-notification__title { - margin-inline-end: 0; -} - -.cds--actionable-notification__subtitle { - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - color: var(--cds-text-inverse, #ffffff); - margin-block-start: 0; - word-break: break-word; -} - -.cds--actionable-notification--low-contrast .cds--actionable-notification__subtitle { - color: var(--cds-text-primary, #161616); -} - -/* Ghost action button when inline */ -.cds--actionable-notification__action-button.cds--btn--ghost { - block-size: 2rem; - margin-block-end: 0.5rem; - margin-inline-start: 2.5rem; -} -@media (min-width: 42rem) { - .cds--actionable-notification__action-button.cds--btn--ghost { - margin: 0.5rem 0; - } -} - -.cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--ghost { - color: var(--cds-link-inverse, #78a9ff); -} - -.cds--actionable-notification__action-button.cds--btn--ghost:active, -.cds--actionable-notification__action-button.cds--btn--ghost:hover { - background-color: var(--cds-background-inverse-hover, #474747); -} - -.cds--actionable-notification--low-contrast .cds--actionable-notification__action-button.cds--btn--ghost:active, -.cds--actionable-notification--low-contrast .cds--actionable-notification__action-button.cds--btn--ghost:hover { - background-color: var(--cds-notification-action-hover, #ffffff); -} - -.cds--actionable-notification__action-button.cds--btn--ghost:focus { - border-color: transparent; - box-shadow: none; - outline: 2px solid var(--cds-focus-inverse, #ffffff); - outline-offset: -2px; -} - -.cds--actionable-notification--low-contrast .cds--actionable-notification__action-button.cds--btn--ghost:focus { - outline-color: var(--cds-focus, #0f62fe); -} - -.cds--actionable-notification--hide-close-button .cds--actionable-notification__action-button.cds--btn--ghost { - margin-inline-end: 0.5rem; -} - -/* Tertiary action button when not inline (toast) */ -.cds--actionable-notification__action-button.cds--btn--tertiary { - margin-block-end: 1rem; - margin-inline-start: calc( - 2rem + 1.25rem - 0.125rem - ); - padding-inline-end: 1rem; - padding-inline-start: 1rem; -} - -.cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary { - border-width: 1px; - border-style: solid; - border-color: var(--cds-notification-action-tertiary-inverse, #ffffff); - background-color: transparent; - color: var(--cds-notification-action-tertiary-inverse, #ffffff); -} -.cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary:hover { - background-color: var(--cds-notification-action-tertiary-inverse-hover, #f4f4f4); -} -.cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary:focus { - border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe)); - box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff); -} -.cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary:active { - background-color: var(--cds-notification-action-tertiary-inverse-active, #c6c6c6); -} -.cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary .cds--btn__icon, -.cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary .cds--btn__icon path:not([data-icon-path]):not([fill=none]) { - fill: currentColor; -} - -.cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary:hover { - color: var(--cds-notification-action-tertiary-inverse-text, #161616); -} - -.cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary:focus { - border-color: var(--cds-focus-inverse, #ffffff); - background-color: var(--cds-notification-action-tertiary-inverse, #ffffff); - box-shadow: inset 0 0 0 1px var(--cds-focus-inverse, #ffffff), inset 0 0 0 2px var(--cds-background-inverse, #393939); - color: var(--cds-notification-action-tertiary-inverse-text, #161616); -} - -.cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary:active { - border-color: transparent; - background-color: var(--cds-notification-action-tertiary-inverse-active, #c6c6c6); - color: var(--cds-notification-action-tertiary-inverse-text, #161616); -} - -.cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary:disabled, -.cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary:hover:disabled, -.cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary:focus:disabled, -.cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary.cds--btn--disabled, -.cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary.cds--btn--disabled:hover, -.cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary.cds--btn--disabled:focus { - background: transparent; - color: var(--cds-notification-action-tertiary-inverse-text-on-color-disabled, rgba(255, 255, 255, 0.25)); - outline: none; -} - -.cds--actionable-notification--hide-close-button .cds--actionable-notification__action-button.cds--btn--tertiary { - margin-inline-end: 0.5rem; -} - -.cds--actionable-notification__close-button { - outline: 2px solid transparent; - outline-offset: -2px; - position: absolute; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding: 0; - border: none; - background: transparent; - block-size: 3rem; - cursor: pointer; - inline-size: 3rem; - inset-block-start: 0; - inset-inline-end: 0; - max-inline-size: 3rem; - min-inline-size: 3rem; - transition: outline 110ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -.cds--actionable-notification__close-button:focus { - outline: 2px solid var(--cds-focus-inverse, #ffffff); - outline-offset: -2px; -} -.cds--actionable-notification__close-button .cds--actionable-notification__close-icon { - fill: var(--cds-icon-inverse, #ffffff); -} -@media (min-width: 42rem) { - .cds--actionable-notification__close-button { - position: static; - } -} - -@media (min-width: 42rem) { - .cds--actionable-notification--toast .cds--actionable-notification__close-button { - position: absolute; - } -} - -.cds--actionable-notification--low-contrast .cds--actionable-notification__close-button:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--actionable-notification--low-contrast .cds--actionable-notification__close-button:focus { - outline-style: dotted; - } -} - -.cds--actionable-notification--low-contrast .cds--actionable-notification__close-button .cds--actionable-notification__close-icon { - fill: var(--cds-icon-primary, #161616); -} - -/* stylelint-disable */ -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--actionable-notification { - outline: 1px solid transparent; - } -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--actionable-notification__close-button:focus, - .cds--btn.cds--btn--ghost.cds--actionable-notification__action-button:focus { - color: Highlight; - outline: 1px solid Highlight; - } -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--actionable-notification .cds--inline-notification__icon, - .cds--actionable-notification .cds--toast-notification__icon, - .cds--actionable-notification .cds--actionable-notification__close-icon { - fill: ButtonText; - } -} - -/* stylelint-enable */ -.cds--data-table-container + .cds--pagination { - border-block-start: 0; -} - -.cds--pagination { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - display: flex; - align-items: center; - justify-content: space-between; - background-color: var(--cds-layer); - border-block-start: 1px solid var(--cds-border-subtle); - inline-size: calc(100% - 1px); - min-block-size: 2.5rem; - overflow-x: auto; -} -.cds--pagination *, -.cds--pagination *::before, -.cds--pagination *::after { - box-sizing: inherit; -} -@media (min-width: 42rem) { - .cds--pagination { - overflow: initial; - } - .cds--pagination .cds--pagination__control-buttons { - display: flex; - } -} -@media (max-width: 41.98rem) { - .cds--pagination .cds--pagination__left > *, - .cds--pagination .cds--pagination__right > * { - display: none; - } - .cds--pagination .cds--pagination__items-count { - display: initial; - } - .cds--pagination .cds--pagination__control-buttons { - display: flex; - } -} - -.cds--pagination--sm { - min-block-size: 2rem; -} - -.cds--pagination--lg { - min-block-size: 3rem; -} - -.cds--pagination .cds--select { - align-items: center; - block-size: 100%; -} - -.cds--pagination .cds--select-input--inline__wrapper { - display: flex; - block-size: 100%; -} - -.cds--pagination .cds--select-input { - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - block-size: 100%; - inline-size: auto; - line-height: 2.5rem; - min-inline-size: auto; -} - -.cds--pagination .cds--select--inline .cds--select-input { - padding-inline: 1rem 2.25rem; -} - -.cds--pagination--sm .cds--select-input { - line-height: 2rem; -} - -.cds--pagination--lg .cds--select-input { - line-height: 3rem; -} - -.cds--pagination .cds--select-input:hover { - background: var(--cds-layer-hover); -} - -.cds--pagination .cds--select--inline .cds--select-input:focus, -.cds--pagination .cds--select--inline .cds--select-input:focus option, -.cds--pagination .cds--select--inline .cds--select-input:focus optgroup { - background-color: var(--cds-layer); -} - -.cds--pagination .cds--select__arrow { - inset-block-start: 50%; - transform: translate(-0.5rem, -50%); -} - -.cds--pagination .cds--select__item-count .cds--select-input { - border-inline-end: 1px solid var(--cds-border-subtle); -} - -.cds--pagination__right { - border-inline-start: 1px solid var(--cds-border-subtle); -} - -.cds--pagination__left, -.cds--pagination__right { - display: flex; - align-items: center; - block-size: 100%; -} - -.cds--pagination__left > .cds--form-item, -.cds--pagination__right > .cds--form-item { - block-size: 100%; -} - -.cds--pagination__left .cds--pagination__text, -.cds--pagination__right .cds--pagination__text { - white-space: nowrap; -} - -.cds--pagination__left .cds--pagination__text { - margin-inline-end: 0.0625rem; -} - -.cds--pagination__right .cds--pagination__text { - margin-inline-end: 1rem; - margin-inline-start: 0.0625rem; -} - -.cds--pagination__right .cds--pagination__text.cds--pagination__page-text { - margin-inline-end: 0.0625rem; - margin-inline-start: 1rem; -} - -.cds--pagination__right .cds--pagination__text.cds--pagination__page-text.cds--pagination__unknown-pages-text { - margin-inline-end: 1rem; -} - -.cds--pagination__right .cds--pagination__text:empty { - margin: 0; -} - -.cds--pagination__left { - padding: 0 1rem 0 0; -} -@media (min-width: 42rem) { - .cds--pagination__left { - padding: 0 1rem; - } -} - -@media (min-width: 42rem) { - .cds--pagination__text { - display: inline-block; - } -} - -span.cds--pagination__text { - color: var(--cds-text-primary, #161616); - margin-inline-start: 1rem; -} - -span.cds--pagination__text.cds--pagination__items-count { - color: var(--cds-text-secondary, #525252); -} - -.cds--pagination__button, -.cds--btn--ghost.cds--pagination__button { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: flex; - align-items: center; - justify-content: center; - border: none; - margin: 0; - background: none; - block-size: 2.5rem; - border-inline-start: 1px solid var(--cds-border-subtle); - cursor: pointer; - fill: var(--cds-icon-primary, #161616); - inline-size: 2.5rem; - min-block-size: 2rem; - transition: outline 110ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -.cds--pagination__button *, -.cds--pagination__button *::before, -.cds--pagination__button *::after, -.cds--btn--ghost.cds--pagination__button *, -.cds--btn--ghost.cds--pagination__button *::before, -.cds--btn--ghost.cds--pagination__button *::after { - box-sizing: inherit; -} - -.cds--pagination__button > svg, -.cds--btn--ghost.cds--pagination__button > svg { - margin-block-start: 0; -} - -[dir=rtl] .cds--pagination__button > svg, -[dir=rtl] .cds--btn--ghost.cds--pagination__button > svg { - transform: rotate(0.5turn); -} - -.cds--pagination--sm .cds--pagination__button, -.cds--pagination--sm .cds--btn--ghost.cds--pagination__button { - block-size: 2rem; - inline-size: 2rem; -} - -.cds--pagination--lg .cds--pagination__button, -.cds--pagination--lg .cds--btn--ghost.cds--pagination__button { - block-size: 3rem; - inline-size: 3rem; -} - -.cds--pagination__button:focus, -.cds--btn--ghost:focus.cds--pagination__button { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; - border-inline-start: 0; -} -@media screen and (prefers-contrast) { - .cds--pagination__button:focus, - .cds--btn--ghost:focus.cds--pagination__button { - outline-style: dotted; - } -} - -.cds--pagination__button:hover, -.cds--btn--ghost:hover.cds--pagination__button { - background: var(--cds-layer-hover); -} - -.cds--pagination__button--no-index, -.cds--btn--ghost.cds--pagination__button--no-index { - cursor: not-allowed; - fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--pagination__button:disabled:hover, -.cds--pagination__button--no-index:hover, -.cds--btn--ghost:disabled:hover.cds--pagination__button, -.cds--btn--ghost:hover.cds--pagination__button--no-index { - border-color: var(--cds-border-subtle); - background: var(--cds-layer); - cursor: not-allowed; - fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--pagination.cds--skeleton .cds--skeleton__text { - margin-block-end: 0; - margin-inline-end: 1rem; -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--pagination__button, - .cds--btn--ghost.cds--pagination__button { - outline: 1px solid transparent; - } -} - -[dir=rtl] .cds--pagination .cds--select__arrow { - transform: translate(0.5rem, -50%); -} - -.cds--unstable-pagination { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - display: flex; - align-items: center; - justify-content: space-between; - background-color: var(--cds-layer); - border-block-end: 1px solid transparent; - border-block-start: 1px solid var(--cds-border-subtle); - inline-size: 100%; - min-block-size: 2.5rem; -} -.cds--unstable-pagination *, -.cds--unstable-pagination *::before, -.cds--unstable-pagination *::after { - box-sizing: inherit; -} - -.cds--unstable-pagination__text { - margin: 0 1rem; - color: var(--cds-text-secondary, #525252); -} -@media (min-width: 42rem) { - .cds--unstable-pagination__text { - display: inline-block; - } -} - -.cds--unstable-pagination__left, -.cds--unstable-pagination__right { - display: flex; - align-items: center; - block-size: 100%; -} - -.cds--unstable-pagination__left { - padding: 0 1rem 0 0; -} - -.cds--unstable-pagination__left > .cds--form-item, -.cds--unstable-pagination__right > .cds--form-item { - block-size: 100%; -} - -.cds--unstable-pagination__left .cds--unstable-pagination__text { - margin-inline-end: 0.0625rem; -} - -.cds--unstable-pagination__right .cds--unstable-pagination__text { - margin-inline-end: 1rem; - margin-inline-start: 0.0625rem; -} - -.cds--unstable-pagination__button { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: flex; - align-items: center; - justify-content: center; - border: none; - margin: 0; - background: none; - block-size: 2.5rem; - border-inline-start: 1px solid var(--cds-border-subtle); - color: var(--cds-icon-primary, #161616); - cursor: pointer; - fill: var(--cds-icon-primary, #161616); - inline-size: 2.5rem; - min-block-size: 2rem; - transition: outline 110ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -.cds--unstable-pagination__button *, -.cds--unstable-pagination__button *::before, -.cds--unstable-pagination__button *::after { - box-sizing: inherit; -} - -.cds--unstable-pagination__button .cds--btn__icon { - block-size: initial; - inline-size: initial; -} - -.cds--unstable-pagination__button.cds--btn--icon-only.cds--tooltip__trigger:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--unstable-pagination__button.cds--btn--icon-only.cds--tooltip__trigger:focus { - outline-style: dotted; - } -} - -.cds--unstable-pagination__button:hover { - background: var(--cds-layer-hover); - color: var(--cds-icon-primary, #161616); -} - -.cds--unstable-pagination__button--no-index { - cursor: not-allowed; - fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--unstable-pagination__button.cds--btn:disabled { - border-color: var(--cds-border-subtle); - background: transparent; -} - -.cds--unstable-pagination__button:disabled:hover, -.cds--unstable-pagination__button--no-index:hover { - background: transparent; - cursor: not-allowed; - fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--unstable-pagination__page-selector, -.cds--unstable-pagination__page-sizer { - align-items: center; - block-size: 100%; -} - -.cds--unstable-pagination__page-selector .cds--select-input--inline__wrapper, -.cds--unstable-pagination__page-sizer .cds--select-input--inline__wrapper { - display: flex; - block-size: 100%; -} - -.cds--unstable-pagination__page-selector .cds--select-input, -.cds--unstable-pagination__page-sizer .cds--select-input { - font-size: var(--cds-body-short-01-font-size, 0.875rem); - font-weight: var(--cds-body-short-01-font-weight, 400); - line-height: var(--cds-body-short-01-line-height, 1.28572); - letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px); - padding: 0 2.25rem 0 1rem; - block-size: 100%; - inline-size: auto; - line-height: 2.5rem; - min-inline-size: auto; -} - -.cds--unstable-pagination__page-selector .cds--select-input:hover, -.cds--unstable-pagination__page-sizer .cds--select-input:hover { - background: var(--cds-layer-hover); -} - -.cds--unstable-pagination__page-selector .cds--select__arrow, -.cds--unstable-pagination__page-sizer .cds--select__arrow { - inset-block-start: 50%; - transform: translateY(-50%); -} -@media (min-width: 42rem) { - .cds--unstable-pagination__page-selector .cds--select__arrow, - .cds--unstable-pagination__page-sizer .cds--select__arrow { - inset-inline-end: 1rem; - } -} - -.cds--unstable-pagination__page-selector { - border-inline-start: 1px solid var(--cds-border-subtle); -} - -.cds--unstable-pagination__page-sizer { - border-inline-end: 1px solid var(--cds-border-subtle); -} - -.cds--pagination-nav { - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - line-height: 0; -} -.cds--pagination-nav html { - font-size: 100%; -} -.cds--pagination-nav body { - font-weight: 400; - font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; -} -.cds--pagination-nav code { - font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace; -} -.cds--pagination-nav strong { - font-weight: 600; -} - -.cds--pagination-nav__list { - display: flex; - align-items: center; - list-style: none; -} - -.cds--pagination-nav__list-item { - padding: 0; -} -.cds--pagination-nav__list-item:first-child { - padding-inline-start: 0; -} -.cds--pagination-nav__list-item:last-child { - padding-inline-end: 0; -} - -.cds--pagination-nav__page { - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: inline-block; - padding: 0; - border: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: none; - cursor: pointer; - text-align: start; - position: relative; - display: block; - padding: 1.0625rem 0.25rem; - border-radius: 0; - color: var(--cds-text-primary, #161616); - font-weight: 400; - line-height: 1; - min-inline-size: 3rem; - outline: 0; - text-align: center; - text-decoration: none; - transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9), color 110ms cubic-bezier(0.2, 0, 0.38, 0.9); - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} -.cds--pagination-nav__page *, -.cds--pagination-nav__page *::before, -.cds--pagination-nav__page *::after { - box-sizing: inherit; -} -.cds--pagination-nav__page::-moz-focus-inner { - border: 0; -} -.cds--pagination-nav__page:hover { - background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12)); - color: var(--cds-text-primary, #161616); -} -.cds--pagination-nav__page:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--pagination-nav__page:focus { - outline-style: dotted; - } -} -.cds--pagination-nav__page:disabled, .cds--pagination-nav__page.cds--pagination-nav__page--disabled { - background: none; - color: rgba(var(--cds-text-secondary, #525252), 0.5); - outline: none; - pointer-events: none; -} -.cds--pagination-nav__page:not(.cds--pagination-nav__page--direction)::after { - position: absolute; - display: block; - background-color: var(--cds-border-interactive, #0f62fe); - block-size: 0.25rem; - content: ""; - inline-size: 0; - inset-block-end: 0; - inset-inline-start: 50%; - opacity: 0; - transition: width 110ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -@media screen and (prefers-reduced-motion: reduce) { - .cds--pagination-nav__page:not(.cds--pagination-nav__page--direction)::after { - transition: none; - } -} -.cds--pagination-nav__page--active + .cds--pagination-nav__page::after, .cds--pagination-nav__page.cds--pagination-nav__page--active::after { - inline-size: 1rem; - inset-inline-start: calc(50% - 0.5rem); - opacity: 1; -} -.cds--pagination-nav__page.cds--pagination-nav__page--active { - background-color: initial; - color: var(--cds-text-primary, #161616); - font-weight: 600; -} -.cds--pagination-nav__page .cds--pagination-nav__icon { - fill: currentColor; - pointer-events: none; -} - -.cds--pagination-nav__page--direction { - display: flex; - align-items: center; - justify-content: center; - block-size: 3rem; - inline-size: 3rem; - line-height: 0; -} - -.cds--pagination-nav__select { - position: relative; -} - -.cds--pagination-nav__page--select { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - max-block-size: 3rem; - text-indent: calc(50% - 4.5px); -} -@-moz-document url-prefix() { - .cds--pagination-nav__page--select { - text-indent: 0; - } -} - -.cds--pagination-nav__select-icon-wrapper { - position: absolute; - block-size: 100%; - inline-size: 100%; - inset-block-start: 0; - pointer-events: none; -} -.cds--pagination-nav__select-icon-wrapper:not(.cds--pagination-nav__page--direction)::after { - position: absolute; - display: block; - background-color: var(--cds-border-interactive, #0f62fe); - block-size: 0.25rem; - content: ""; - inline-size: 0; - inset-block-end: 0; - inset-inline-start: 50%; - opacity: 0; - transition: width 110ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -@media screen and (prefers-reduced-motion: reduce) { - .cds--pagination-nav__select-icon-wrapper:not(.cds--pagination-nav__page--direction)::after { - transition: none; - } -} -.cds--pagination-nav__page--active + .cds--pagination-nav__select-icon-wrapper::after, .cds--pagination-nav__select-icon-wrapper.cds--pagination-nav__page--active::after { - inline-size: 1rem; - inset-inline-start: calc(50% - 0.5rem); - opacity: 1; -} -.cds--pagination-nav__page--active + .cds--pagination-nav__select-icon-wrapper .cds--pagination-nav__select-icon { - display: none; -} - -.cds--pagination-nav__select-icon { - position: absolute; - inset-block-start: calc(50% - 0.5rem); - inset-inline-start: calc(50% - 0.5rem); - pointer-events: none; -} - -.cds--pagination-nav__accessibility-label { - position: absolute; - overflow: hidden; - padding: 0; - border: 0; - margin: -1px; - block-size: 1px; - clip: rect(0, 0, 0, 0); - inline-size: 1px; - visibility: inherit; - white-space: nowrap; -} - -[dir=rtl] .cds--pagination-nav__list-item svg { - transform: rotate(0.5turn); -} - -.cds--progress-bar { - --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max)); -} - -.cds--progress-bar__label { - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - display: flex; - justify-content: space-between; - color: var(--cds-text-primary, #161616); - margin-block-end: 0.5rem; - min-inline-size: 3rem; -} - -.cds--progress-bar__label-text { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.cds--progress-bar__track { - position: relative; - background-color: var(--cds-layer); - block-size: 0.5rem; - inline-size: 100%; - min-inline-size: 3rem; -} - -.cds--progress-bar--big .cds--progress-bar__track { - block-size: 0.5rem; -} - -.cds--progress-bar--small .cds--progress-bar__track { - block-size: 0.25rem; -} - -.cds--progress-bar__bar { - display: block; - background-color: currentColor; - block-size: 100%; - color: var(--cds-interactive, #0f62fe); - inline-size: 100%; - transform: scaleX(0); - transform-origin: 0 center; - transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -[dir=rtl] .cds--progress-bar__bar { - transform-origin: 100% center; -} - -.cds--progress-bar--indeterminate .cds--progress-bar__track::after { - position: absolute; - animation-duration: 1400ms; - animation-iteration-count: infinite; - animation-name: cds--progress-bar-indeterminate; - animation-timing-function: linear; - background-image: linear-gradient(90deg, var(--cds-interactive, #0f62fe) 12.5%, transparent 12.5%); - background-position-x: 0%; - background-size: 200% 100%; - content: ""; - inset: 0; -} - -[dir=rtl] .cds--progress-bar--indeterminate .cds--progress-bar__track::after { - animation-name: cds--progress-bar-indeterminate-rtl; -} - -.cds--progress-bar__helper-text { - font-size: var(--cds-helper-text-01-font-size, 0.75rem); - line-height: var(--cds-helper-text-01-line-height, 1.33333); - letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px); - color: var(--cds-text-secondary, #525252); - margin-block-start: 0.5rem; -} - -.cds--progress-bar__status-icon { - flex-shrink: 0; - margin-inline-start: var(--cds-layout-density-padding-inline-local); -} - -.cds--progress-bar--finished .cds--progress-bar__bar, -.cds--progress-bar--finished .cds--progress-bar__status-icon { - color: var(--cds-support-success, #24a148); -} - -.cds--progress-bar--error .cds--progress-bar__bar, -.cds--progress-bar--error .cds--progress-bar__status-icon, -.cds--progress-bar--error .cds--progress-bar__helper-text { - color: var(--cds-support-error, #da1e28); -} - -.cds--progress-bar--finished .cds--progress-bar__bar, -.cds--progress-bar--error .cds--progress-bar__bar { - transform: scaleX(1); -} - -.cds--progress-bar--finished.cds--progress-bar--inline .cds--progress-bar__track, -.cds--progress-bar--error.cds--progress-bar--inline .cds--progress-bar__track { - position: absolute; - overflow: hidden; - padding: 0; - border: 0; - margin: -1px; - block-size: 1px; - clip: rect(0, 0, 0, 0); - inline-size: 1px; - visibility: inherit; - white-space: nowrap; -} - -.cds--progress-bar--finished.cds--progress-bar--inline .cds--progress-bar__label, -.cds--progress-bar--error.cds--progress-bar--inline .cds--progress-bar__label { - flex-shrink: 1; - justify-content: flex-start; - margin-inline-end: 0; -} - -@keyframes cds--progress-bar-indeterminate { - 0% { - background-position-x: 25%; - } - 80%, 100% { - background-position-x: -105%; - } -} -@keyframes cds--progress-bar-indeterminate-rtl { - 0% { - background-position-x: -105%; - } - 80%, 100% { - background-position-x: 25%; - } -} -.cds--progress-bar--inline { - display: flex; - align-items: center; -} - -.cds--progress-bar--inline .cds--progress-bar__label { - flex-shrink: 0; - margin-block-end: 0; - margin-inline-end: var(--cds-layout-density-padding-inline-local); -} - -.cds--progress-bar--inline .cds--progress-bar__track { - flex-basis: 0; - flex-grow: 1; -} - -.cds--progress-bar--inline .cds--progress-bar__helper-text { - position: absolute; - overflow: hidden; - padding: 0; - border: 0; - margin: -1px; - block-size: 1px; - clip: rect(0, 0, 0, 0); - inline-size: 1px; - visibility: inherit; - white-space: nowrap; -} - -.cds--progress-bar--indented .cds--progress-bar__label, -.cds--progress-bar--indented .cds--progress-bar__helper-text { - padding-inline: var(--cds-layout-density-padding-inline-local); -} - -.cds--progress { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: flex; - list-style: none; -} -.cds--progress *, -.cds--progress *::before, -.cds--progress *::after { - box-sizing: inherit; -} - -.cds--progress-step { - position: relative; - display: inline-flex; - overflow: visible; - flex-direction: row; - inline-size: 8rem; - min-inline-size: 7rem; -} -.cds--progress-step .cds--tooltip__label { - display: block; -} - -.cds--progress--space-equal .cds--progress-step { - flex-grow: 1; - min-inline-size: 8rem; -} - -.cds--progress-line { - position: absolute; - border: 1px inset transparent; - block-size: 2px; - inline-size: 8rem; - inset-inline-start: 0; -} - -.cds--progress--space-equal .cds--progress-line { - inline-size: 100%; - min-inline-size: 8rem; -} - -.cds--progress-step svg { - position: relative; - z-index: 1; - flex-shrink: 0; - border-radius: 50%; - block-size: 1rem; - fill: var(--cds-interactive, #0f62fe); - inline-size: 1rem; - margin-block-start: 0.625rem; - margin-inline-end: 0.5rem; -} - -.cds--progress--space-equal .cds--progress-text { - overflow: hidden; -} - -.cds--progress-label { - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - overflow: hidden; - margin: 0.5rem 0 0 0; - color: var(--cds-text-primary, #161616); - line-height: 1.45; - max-inline-size: 5.5rem; - text-overflow: ellipsis; - transition: box-shadow 110ms cubic-bezier(0.2, 0, 0.38, 0.9), color 110ms cubic-bezier(0.2, 0, 0.38, 0.9); - white-space: nowrap; -} -.cds--progress-label::before { - display: block; - content: ""; -} - -.cds--progress-label:hover { - box-shadow: 0 0.0625rem var(--cds-link-primary-hover, #0043ce); - color: var(--cds-link-primary-hover, #0043ce); - cursor: pointer; -} - -.cds--progress--space-equal .cds--progress-label { - margin-inline-end: 0.75rem; - max-inline-size: 100%; -} - -.cds--progress-step-button:not(.cds--progress-step-button--unclickable):focus { - outline: none; -} -.cds--progress-step-button:not(.cds--progress-step-button--unclickable):focus-visible .cds--progress-label { - color: var(--cds-focus, #0f62fe); - outline: 0.0625rem solid var(--cds-focus, #0f62fe); -} -.cds--progress-step-button:not(.cds--progress-step-button--unclickable) .cds--progress-label:active { - box-shadow: 0 0.0625rem 0 0 var(--cds-text-primary, #161616); - color: var(--cds-text-primary, #161616); -} - -.cds--progress-label-overflow:hover ~ .cds--tooltip, -.cds--progress-label-overflow:focus ~ .cds--tooltip { - visibility: inherit; -} - -.cds--progress-step .cds--tooltip .cds--tooltip__caret { - margin-inline-start: 0.625rem; -} - -.cds--tooltip__text { - padding: 0; - margin: 0; - font-weight: normal; -} - -.cds--progress-step .cds--tooltip { - font-size: var(--cds-body-01-font-size, 0.875rem); - font-weight: var(--cds-body-01-font-weight, 400); - line-height: var(--cds-body-01-line-height, 1.42857); - letter-spacing: var(--cds-body-01-letter-spacing, 0.16px); - display: block; - padding: 0.5rem 1rem; - color: var(--cds-text-inverse, #ffffff); - inline-size: 7.8125rem; - margin-block-start: 2.5rem; - margin-inline-start: 1.375rem; - min-block-size: 1.5rem; - min-inline-size: 7.1875rem; - visibility: hidden; -} - -.cds--progress-step .cds--tooltip_multi { - font-size: var(--cds-body-01-font-size, 0.875rem); - font-weight: var(--cds-body-01-font-weight, 400); - line-height: var(--cds-body-01-line-height, 1.42857); - letter-spacing: var(--cds-body-01-letter-spacing, 0.16px); - block-size: auto; - color: var(--cds-text-inverse, #ffffff); - inline-size: 9.375rem; -} - -.cds--progress-optional { - font-size: var(--cds-label-01-font-size, 0.75rem); - font-weight: var(--cds-label-01-font-weight, 400); - line-height: var(--cds-label-01-line-height, 1.33333); - letter-spacing: var(--cds-label-01-letter-spacing, 0.32px); - position: absolute; - color: var(--cds-text-secondary, #525252); - inset-inline-start: 0; - margin-block-start: 1.75rem; - margin-inline-start: 1.5rem; - text-align: start; -} - -.cds--progress-step--current .cds--progress-line { - background-color: var(--cds-interactive, #0f62fe); -} - -.cds--progress-step--incomplete svg { - fill: var(--cds-icon-primary, #161616); -} -.cds--progress-step--incomplete .cds--progress-line { - background-color: var(--cds-border-subtle); -} - -.cds--progress-step--complete .cds--progress-line { - background-color: var(--cds-interactive, #0f62fe); -} - -.cds--progress-step-button { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: inline-block; - padding: 0; - border: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: none; - cursor: pointer; - text-align: start; - inline-size: 100%; - display: flex; - text-align: start; -} -.cds--progress-step-button *, -.cds--progress-step-button *::before, -.cds--progress-step-button *::after { - box-sizing: inherit; -} -.cds--progress-step-button::-moz-focus-inner { - border: 0; -} - -.cds--progress-step-button--unclickable { - cursor: default; - outline: none; -} - -.cds--progress-step-button--unclickable .cds--progress-label:hover { - box-shadow: none; - color: var(--cds-text-primary, #161616); - cursor: default; -} - -.cds--progress-step-button--unclickable .cds--tooltip__label:hover { - box-shadow: 0 0.0625rem var(--cds-link-primary, #0f62fe); - color: var(--cds-link-primary, #0f62fe); - cursor: pointer; -} - -.cds--progress-step--disabled { - cursor: not-allowed; - pointer-events: none; -} -.cds--progress-step--disabled svg { - cursor: not-allowed; - fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} -.cds--progress-step--disabled .cds--progress-label, -.cds--progress-step--disabled .cds--progress-label:hover { - box-shadow: none; - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); - cursor: not-allowed; -} -.cds--progress-step--disabled .cds--progress-line { - cursor: not-allowed; -} -.cds--progress-step--disabled .cds--progress-label-overflow:hover ~ .cds--tooltip--definition .cds--tooltip--definition__bottom { - display: none; -} - -.cds--progress__warning > * { - fill: var(--cds-support-error, #da1e28); -} - -.cds--progress.cds--skeleton .cds--progress-label { - position: relative; - padding: 0; - border: none; - background: var(--cds-skeleton-background, #e8e8e8); - box-shadow: none; - pointer-events: none; - block-size: 0.875rem; - inline-size: 2.5rem; - margin-block-start: 0.625rem; -} -.cds--progress.cds--skeleton .cds--progress-label:hover, .cds--progress.cds--skeleton .cds--progress-label:focus, .cds--progress.cds--skeleton .cds--progress-label:active { - border: none; - cursor: default; - outline: none; -} -.cds--progress.cds--skeleton .cds--progress-label::before { - position: absolute; - animation: 3000ms ease-in-out cds--skeleton infinite; - background: var(--cds-skeleton-element, #c6c6c6); - block-size: 100%; - content: ""; - inline-size: 100%; - will-change: transform-origin, transform, opacity; -} -@media (prefers-reduced-motion: reduce) { - .cds--progress.cds--skeleton .cds--progress-label::before { - animation: none; - } -} - -.cds--progress.cds--progress--vertical.cds--skeleton .cds--progress-label { - margin-block-start: 0.0625rem; -} - -.cds--progress--vertical { - display: flex; - flex-direction: column; -} - -.cds--progress--vertical, -.cds--progress-text { - display: flex; - flex-direction: column; -} - -.cds--progress--vertical .cds--progress-step, -.cds--progress--vertical .cds--progress-step-button { - align-content: flex-start; - inline-size: initial; - min-block-size: 3.625rem; - min-inline-size: initial; -} - -.cds--progress--vertical .cds--progress-step svg, -.cds--progress--vertical .cds--progress-step-button svg { - display: inline-block; - margin: 0.0625rem 0.5rem 0; -} - -.cds--progress--vertical .cds--progress-label { - display: inline-block; - margin: 0; - inline-size: initial; - max-inline-size: 10rem; - vertical-align: top; - white-space: initial; -} - -.cds--progress--vertical .cds--progress-step .cds--tooltip { - margin-block-start: 0.5rem; -} - -.cds--progress--vertical .cds--progress-optional { - position: static; - margin: 0 0 auto; - inline-size: 100%; -} - -.cds--progress--vertical .cds--progress-line { - position: absolute; - block-size: 100%; - inline-size: 1px; - inset-block-start: 0; - inset-inline-start: 0; -} - -@keyframes ai-skeleton-animation { - 0% { - transform: translateX(-100%); - } - 100% { - transform: translateX(100%); - } -} -.cds--icon--skeleton { - position: relative; - padding: 0; - border: none; - background: var(--cds-skeleton-background, #e8e8e8); - box-shadow: none; - pointer-events: none; - display: inline-block; - block-size: 1rem; - inline-size: 1rem; -} -.cds--icon--skeleton:hover, .cds--icon--skeleton:focus, .cds--icon--skeleton:active { - border: none; - cursor: default; - outline: none; -} -.cds--icon--skeleton::before { - position: absolute; - animation: 3000ms ease-in-out cds--skeleton infinite; - background: var(--cds-skeleton-element, #c6c6c6); - block-size: 100%; - content: ""; - inline-size: 100%; - will-change: transform-origin, transform, opacity; -} -@media (prefers-reduced-motion: reduce) { - .cds--icon--skeleton::before { - animation: none; - } -} - -.cds--skeleton__placeholder { - position: relative; - padding: 0; - border: none; - background: var(--cds-skeleton-background, #e8e8e8); - box-shadow: none; - pointer-events: none; - block-size: 6.25rem; - inline-size: 6.25rem; -} -.cds--skeleton__placeholder:hover, .cds--skeleton__placeholder:focus, .cds--skeleton__placeholder:active { - border: none; - cursor: default; - outline: none; -} -.cds--skeleton__placeholder::before { - position: absolute; - animation: 3000ms ease-in-out cds--skeleton infinite; - background: var(--cds-skeleton-element, #c6c6c6); - block-size: 100%; - content: ""; - inline-size: 100%; - will-change: transform-origin, transform, opacity; -} -@media (prefers-reduced-motion: reduce) { - .cds--skeleton__placeholder::before { - animation: none; - } -} - -.cds--skeleton__text { - position: relative; - padding: 0; - border: none; - background: var(--cds-skeleton-background, #e8e8e8); - box-shadow: none; - pointer-events: none; - block-size: 1rem; - inline-size: 100%; - margin-block-end: 0.5rem; -} -.cds--skeleton__text:hover, .cds--skeleton__text:focus, .cds--skeleton__text:active { - border: none; - cursor: default; - outline: none; -} -.cds--skeleton__text::before { - position: absolute; - animation: 3000ms ease-in-out cds--skeleton infinite; - background: var(--cds-skeleton-element, #c6c6c6); - block-size: 100%; - content: ""; - inline-size: 100%; - will-change: transform-origin, transform, opacity; -} -@media (prefers-reduced-motion: reduce) { - .cds--skeleton__text::before { - animation: none; - } -} - -.cds--skeleton__heading { - block-size: 1.5rem; -} - -.cds--skeleton__text--ai, -.cds--skeleton__placeholder--ai, -.cds--skeleton__icon--ai { - overflow: hidden; - background: var(--cds-ai-skeleton-background, #d0e2ff); -} - -.cds--skeleton__text--ai::before, -.cds--skeleton__placeholder--ai::before, -.cds--skeleton__icon--ai::before { - animation: 1250ms ease-in-out ai-skeleton-animation infinite; - background: linear-gradient(to right, rgba(69, 137, 255, 0) 0%, rgba(69, 137, 255, 0.5) 50%, rgba(69, 137, 255, 0) 100%); -} - -.cds--skeleton__placeholder--ai::before, -.cds--skeleton__icon--ai::before { - inline-size: 200%; -} - -.cds--skeleton__placeholder--ai { - border-radius: 0.5rem; -} - -.cds--skeleton__text--ai { - border-radius: 1rem; -} - -.cds--skeleton__icon--ai { - border-radius: 0.125rem; -} - -.cds--slider-container { - position: relative; - display: flex; - align-items: center; - gap: 1rem; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} - -.cds--slider { - position: relative; - padding: 1rem 0; - cursor: pointer; - inline-size: 100%; - max-inline-size: 40rem; - min-inline-size: 12.5rem; -} -.cds--slider-container--two-handles .cds--slider { - margin-inline: 0.25rem; -} - -.cds--slider__range-label { - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - color: var(--cds-text-primary, #161616); - white-space: nowrap; -} - -.cds--slider__track { - position: absolute; - background: var(--cds-border-subtle); - block-size: 0.125rem; - inline-size: 100%; - transform: translate(0%, -50%); -} - -.cds--slider__track:before { - position: absolute; - display: inline-block; - background: var(--cds-border-subtle); - block-size: 0.25rem; - content: ""; - inline-size: 0.125rem; - inset-block-start: -0.3125rem; - inset-inline-start: 50%; - transform: translate(-50%, 0); -} - -.cds--slider__filled-track { - position: absolute; - background: var(--cds-layer-selected-inverse, #161616); - block-size: 0.125rem; - inline-size: 100%; - pointer-events: none; - transform: translate(0%, -50%); - transform-origin: left; - transition: background 110ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -.cds--slider__thumb-wrapper { - position: absolute; - z-index: 3; - block-size: 0.875rem; - inline-size: 0.875rem; - transform: translate(-50%, -50%); - --cds-tooltip-padding-inline: 0.5rem; - --cds-popover-offset: 0.5rem; -} -.cds--slider-container--rtl .cds--slider__thumb-wrapper { - transform: translate(50%, -50%); -} - -.cds--slider__thumb-wrapper--lower, -.cds--slider__thumb-wrapper--upper { - block-size: 24px; - inline-size: 16px; - --cds-popover-offset: var(--cds-popover-caret-height, 0.5rem); -} - -.cds--slider__thumb-wrapper--lower { - transform: translate(-100%, -50%); -} -.cds--slider__thumb-wrapper--lower > .cds--popover > .cds--popover-content { - transform: translate(50%, calc(-100% - var(--cds-popover-offset, 0rem))); -} -.cds--slider__thumb-wrapper--lower > .cds--popover > .cds--popover-caret { - inset-inline-start: revert; - transform: translate(50%, calc(-1 * var(--cds-popover-offset, 0rem))); -} - -.cds--slider-container--rtl .cds--slider__thumb-wrapper--lower { - transform: translate(100%, -50%); -} -.cds--slider-container--rtl .cds--slider__thumb-wrapper--lower > .cds--popover > .cds--popover-content { - transform: translate(0, calc(-100% - var(--cds-popover-offset, 0rem))); -} -.cds--slider-container--rtl .cds--slider__thumb-wrapper--lower > .cds--popover > .cds--popover-caret { - transform: translate(-50%, calc(-1 * var(--cds-popover-offset, 0rem))); -} - -.cds--slider__thumb-wrapper--upper { - transform: translate(0, -50%); -} -.cds--slider__thumb-wrapper--upper > .cds--popover > .cds--popover-content { - transform: translate(-50%, calc(-100% - var(--cds-popover-offset, 0rem))); -} -.cds--slider__thumb-wrapper--upper > .cds--popover > .cds--popover-caret { - transform: translate(-50%, calc(-1 * var(--cds-popover-offset, 0rem))); -} - -.cds--slider-container--rtl .cds--slider__thumb-wrapper--upper { - transform: translate(0, -50%); -} -.cds--slider-container--rtl .cds--slider__thumb-wrapper--upper > .cds--popover > .cds--popover-content { - transform: translate(0, calc(-100% - var(--cds-popover-offset, 0rem))); -} -.cds--slider-container--rtl .cds--slider__thumb-wrapper--upper > .cds--popover > .cds--popover-caret { - transform: translate(50%, calc(-1 * var(--cds-popover-offset, 0rem))); -} - -.cds--slider__thumb { - position: absolute; - border-radius: 50%; - background: var(--cds-layer-selected-inverse, #161616); - box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 2px transparent; - inset: 0; - outline: none; - transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), background 110ms cubic-bezier(0.2, 0, 0.38, 0.9), box-shadow 110ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -.cds--slider__thumb:hover { - transform: scale(1.4286); -} -.cds--slider__thumb:focus { - background-color: var(--cds-interactive, #0f62fe); - box-shadow: inset 0 0 0 2px var(--cds-interactive, #0f62fe), inset 0 0 0 3px var(--cds-layer); - transform: scale(1.4286); -} -.cds--slider__thumb:active { - box-shadow: inset 0 0 0 2px var(--cds-interactive, #0f62fe); - transform: scale(1.4286); -} - -.cds--slider__thumb-icon { - fill: var(--cds-layer-selected-inverse, #161616); -} - -.cds--slider__thumb-icon--focus { - display: none; - fill: var(--cds-interactive, #0f62fe); -} - -.cds--slider__thumb--lower, -.cds--slider__thumb--upper { - position: absolute; - /* stylelint-disable-next-line declaration-property-value-disallowed-list */ - border-radius: unset; - background-color: transparent; - box-shadow: none; - inset: 0; - transition: none; -} -.cds--slider__thumb--lower::before, -.cds--slider__thumb--upper::before { - position: absolute; - z-index: -1; - display: block; - background: var(--cds-background, #ffffff); - block-size: 0.125rem; - content: ""; - inline-size: 0.375rem; - inset-block-start: calc(50% - 0.0625rem); - inset-inline-end: 0; -} -.cds--slider__thumb--lower:hover, -.cds--slider__thumb--upper:hover { - transform: none; -} -.cds--slider__thumb--lower:hover .cds--slider__thumb-icon, -.cds--slider__thumb--upper:hover .cds--slider__thumb-icon { - fill: var(--cds-text-secondary, #525252); -} -.cds--slider__thumb--lower:active, -.cds--slider__thumb--upper:active { - box-shadow: none; - transform: none; -} -.cds--slider__thumb--lower:focus, -.cds--slider__thumb--upper:focus { - background-color: transparent; - box-shadow: none; - transform: none; -} -.cds--slider__thumb--lower:focus .cds--slider__thumb-icon, -.cds--slider__thumb--upper:focus .cds--slider__thumb-icon { - display: none; - fill: var(--cds-interactive, #0f62fe); -} -.cds--slider__thumb--lower:focus .cds--slider__thumb-icon--focus, -.cds--slider__thumb--upper:focus .cds--slider__thumb-icon--focus { - display: block; -} - -.cds--slider__thumb--lower:focus::before, -.cds--slider__thumb--upper:focus::before { - inline-size: 100%; -} - -.cds--slider__thumb--upper { - transform: none; -} -.cds--slider__thumb--upper::before { - inset-inline-end: auto; - inset-inline-start: 0; -} -.cds--slider__thumb--upper:hover, .cds--slider__thumb--upper:active, .cds--slider__thumb--upper:focus { - transform: none; -} - -.cds--slider__input { - display: none; -} - -.cds--slider-text-input-wrapper { - position: relative; -} - -.cds--slider-text-input-wrapper--hidden { - display: none; -} - -.cds--slider-text-input, -.cds-slider-text-input { - -moz-appearance: textfield; - -webkit-appearance: textfield; - appearance: textfield; - block-size: 2.5rem; - inline-size: 4rem; -} -.cds--slider-text-input::-webkit-outer-spin-button, .cds--slider-text-input::-webkit-inner-spin-button, -.cds-slider-text-input::-webkit-outer-spin-button, -.cds-slider-text-input::-webkit-inner-spin-button { - display: none; -} - -.cds--slider__thumb:focus ~ .cds--slider__filled-track, -.cds--slider__thumb-wrapper:focus-within ~ .cds--slider__filled-track { - background-color: var(--cds-border-interactive, #0f62fe); -} - -.cds--slider-text-input.cds--text-input--invalid, -.cds--slider-text-input--warn { - inline-size: 6rem; - padding-inline-end: 3rem; -} - -.cds--slider__invalid-icon { - position: absolute; - fill: var(--cds-support-error, #da1e28); - inset-block-start: 50%; - inset-inline-end: 1rem; - transform: translateY(-50%); -} - -.cds--slider__validation-msg.cds--form-requirement { - display: block; - overflow: visible; - max-block-size: 100%; -} - -.cds--slider__validation-msg--invalid { - color: var(--cds-text-error, #da1e28); -} - -.cds--slider__invalid-icon.cds--slider__invalid-icon--warning { - fill: var(--cds-support-warning, #f1c21b); -} - -.cds--slider__invalid-icon--warning path:first-of-type { - fill: #000000; - opacity: 1; -} - -.cds--label--disabled ~ .cds--slider-container > .cds--slider__range-label { - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--slider--disabled.cds--slider { - cursor: not-allowed; -} - -.cds--slider--disabled .cds--slider__thumb { - background-color: var(--cds-border-disabled, #c6c6c6); -} -.cds--slider--disabled .cds--slider__thumb:hover { - cursor: not-allowed; - transform: translate(-50%, -50%); -} -.cds--slider--disabled .cds--slider__thumb:focus { - background-color: var(--cds-border-disabled, #c6c6c6); - box-shadow: none; - outline: none; - transform: translate(-50%, -50%); -} -.cds--slider--disabled .cds--slider__thumb:active { - background: var(--cds-border-disabled, #c6c6c6); - transform: translate(-50%, -50%); -} - -.cds--slider--disabled .cds--slider__track, -.cds--slider--disabled .cds--slider__filled-track, -.cds--slider--disabled .cds--slider__thumb:focus ~ .cds--slider__filled-track { - background-color: var(--cds-border-disabled, #c6c6c6); -} - -.cds--slider--disabled ~ .cds--form-item .cds--slider-text-input, -.cds--slider--disabled ~ .cds--slider-text-input { - border: none; - background-color: var(--cds-field); - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); - cursor: not-allowed; - transition: none; -} -.cds--slider--disabled ~ .cds--form-item .cds--slider-text-input:active, .cds--slider--disabled ~ .cds--form-item .cds--slider-text-input:focus, .cds--slider--disabled ~ .cds--form-item .cds--slider-text-input:hover, -.cds--slider--disabled ~ .cds--slider-text-input:active, -.cds--slider--disabled ~ .cds--slider-text-input:focus, -.cds--slider--disabled ~ .cds--slider-text-input:hover { - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); - outline: none; -} - -.cds--slider--readonly { - cursor: default; -} - -.cds--slider-container--readonly .cds--slider__thumb { - block-size: 0; - inline-size: 0; -} -.cds--slider-container--readonly .cds--slider__thumb::before, .cds--slider-container--readonly .cds--slider__thumb::after { - display: none; -} - -.cds--slider-container--readonly .cds--slider-text-input { - background-color: transparent; -} - -.cds--slider__status-msg.cds--form-requirement { - display: block; - overflow: visible; - max-block-size: 100%; -} - -.cds--slider-container.cds--skeleton .cds--slider__range-label { - position: relative; - padding: 0; - border: none; - background: var(--cds-skeleton-background, #e8e8e8); - box-shadow: none; - pointer-events: none; - block-size: 0.75rem; - inline-size: 1.25rem; -} -.cds--slider-container.cds--skeleton .cds--slider__range-label:hover, .cds--slider-container.cds--skeleton .cds--slider__range-label:focus, .cds--slider-container.cds--skeleton .cds--slider__range-label:active { - border: none; - cursor: default; - outline: none; -} -.cds--slider-container.cds--skeleton .cds--slider__range-label::before { - position: absolute; - animation: 3000ms ease-in-out cds--skeleton infinite; - background: var(--cds-skeleton-element, #c6c6c6); - block-size: 100%; - content: ""; - inline-size: 100%; - will-change: transform-origin, transform, opacity; -} -@media (prefers-reduced-motion: reduce) { - .cds--slider-container.cds--skeleton .cds--slider__range-label::before { - animation: none; - } -} - -.cds--slider-container.cds--skeleton .cds--slider__track { - cursor: default; - pointer-events: none; -} - -.cds--slider-container.cds--skeleton .cds--slider__thumb-wrapper { - inset-inline-start: 50%; -} -.cds--slider-container.cds--skeleton .cds--slider__thumb { - cursor: default; - pointer-events: none; -} -.cds--slider-container.cds--skeleton .cds--slider__thumb-wrapper--lower { - inset-inline-start: 0; -} -.cds--slider-container.cds--skeleton .cds--slider__thumb-wrapper--upper { - inset-inline-start: 100%; -} - -.cds--popover-container.cds--slider__thumb-wrapper { - position: absolute; -} - -/* stylelint-disable */ -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--slider__thumb { - outline: 1px solid transparent; - } -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--slider__thumb:focus { - color: Highlight; - outline: 1px solid Highlight; - } -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--slider__track { - outline: 1px solid transparent; - } -} - -/* stylelint-enable */ -.cds--toggletip-label { - font-size: var(--cds-body-01-font-size, 0.875rem); - font-weight: var(--cds-body-01-font-weight, 400); - line-height: var(--cds-body-01-line-height, 1.42857); - letter-spacing: var(--cds-body-01-letter-spacing, 0.16px); - color: var(--cds-text-secondary, #525252); - margin-inline-end: 0.5rem; -} - -.cds--toggletip-button { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: inline-block; - padding: 0; - border: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: none; - cursor: pointer; - text-align: start; - inline-size: 100%; - display: flex; - align-items: center; -} -.cds--toggletip-button *, -.cds--toggletip-button *::before, -.cds--toggletip-button *::after { - box-sizing: inherit; -} -.cds--toggletip-button::-moz-focus-inner { - border: 0; -} - -.cds--toggletip-button svg { - fill: var(--cds-icon-secondary, #525252); -} - -.cds--toggletip-button:hover svg, -.cds--toggletip--open .cds--toggletip-button svg { - fill: var(--cds-icon-primary, #161616); -} - -.cds--toggletip-button:focus { - outline: 1px solid var(--cds-focus, #0f62fe); -} -@media screen and (prefers-contrast) { - .cds--toggletip-button:focus { - outline-style: dotted; - } -} - -.cds--toggletip { - --cds-popover-offset: 0.8125rem; -} - -.cds--toggletip-content { - --cds-button-focus-color: var(--cds-focus-inverse, #ffffff); - --cds-link-text-color: var(--cds-link-inverse, #78a9ff); - --cds-link-hover-text-color: var(--cds-link-inverse-hover, #a6c8ff); - --cds-link-visited-text-color: var(--cds-link-inverse-visited, #be95ff); - --cds-link-focus-text-color: var(--cds-focus-inverse, #ffffff); - font-size: var(--cds-body-01-font-size, 0.875rem); - font-weight: var(--cds-body-01-font-weight, 400); - line-height: var(--cds-body-01-line-height, 1.42857); - letter-spacing: var(--cds-body-01-letter-spacing, 0.16px); - display: grid; - padding: 1rem; - max-inline-size: 18rem; - row-gap: 1rem; -} - -.cds--toggletip-content p { - font-size: var(--cds-body-01-font-size, 0.875rem); - font-weight: var(--cds-body-01-font-weight, 400); - line-height: var(--cds-body-01-line-height, 1.42857); - letter-spacing: var(--cds-body-01-letter-spacing, 0.16px); -} - -.cds--toggletip-actions { - display: flex; - align-items: center; - justify-content: space-between; - -moz-column-gap: 1rem; - column-gap: 1rem; -} - -.cds--slug { - display: flex; -} - -.cds--slug:has(> .cds--popover--open) { - z-index: 2; -} - -.cds--slug .cds--slug__button { - position: relative; - display: flex; - align-items: center; - justify-content: center; - border: 1px solid var(--cds-border-inverse, #161616); - background: transparent; - color: var(--cds-text-primary, #161616); - font-weight: 600; - outline: none; - transition: color 70ms cubic-bezier(0, 0, 0.38, 0.9), border-color 70ms cubic-bezier(0, 0, 0.38, 0.9), box-shadow 70ms cubic-bezier(0, 0, 0.38, 0.9), background 70ms cubic-bezier(0, 0, 0.38, 0.9); -} -.cds--slug .cds--slug__button--mini { - height: 1rem; - width: 1rem; - font-size: 0.5625rem; - line-height: 0.75rem; -} -.cds--slug .cds--slug__button--2xs { - height: 1.25rem; - width: 1.25rem; - font-size: 0.75rem; - line-height: 1rem; -} -.cds--slug .cds--slug__button--xs { - height: 1.5rem; - width: 1.5rem; - font-size: 0.75rem; - line-height: 1rem; -} -.cds--slug .cds--slug__button--sm { - height: 2rem; - width: 2rem; - font-size: 1rem; - line-height: 1.3125rem; -} -.cds--slug .cds--slug__button--md { - height: 2.5rem; - width: 2.5rem; - font-size: 1rem; - line-height: 1.3125rem; -} -.cds--slug .cds--slug__button--lg { - height: 3rem; - width: 3rem; - font-size: 1rem; - line-height: 1.3125rem; -} -.cds--slug .cds--slug__button--xl { - height: 4rem; - width: 4rem; - font-size: 1.25rem; - line-height: 1.625rem; -} - -.cds--slug .cds--slug__button:focus { - border: 1px solid var(--cds-focus, #0f62fe); - box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe); -} - -.cds--slug .cds--slug__button.cds--slug__button--mini:focus, -.cds--slug .cds--slug__button.cds--slug__button--2xs:focus { - box-shadow: none; -} - -.cds--slug .cds--slug__button:hover { - background: var(--cds-border-inverse, #161616); - color: var(--cds-text-inverse, #ffffff); -} - -.cds--slug .cds--slug__button:hover:active { - background: var(--cds-border-inverse, #161616); - box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe), inset 0 0 0 2px var(--cds-focus-inset, #ffffff); - color: var(--cds-text-inverse, #ffffff); -} - -.cds--slug .cds--slug__button.cds--slug__button--mini:hover:active, -.cds--slug .cds--slug__button.cds--slug__button--2xs:hover:active { - box-shadow: inset 0 0 0 1px var(--cds-focus-inset, #ffffff); -} - -.cds--slug__text { - position: relative; - z-index: 1; -} - -.cds--slug .cds--slug__button--inline { - border: 1px solid transparent; - border-radius: 0.0625rem; - background: transparent; - block-size: initial; - color: var(--cds-text-primary, #161616); - font-size: 0.875rem; - inline-size: initial; - line-height: initial; - padding-inline: 0.25rem; -} - -.cds--slug__button--inline::before { - display: none; -} - -.cds--slug .cds--slug__button--inline:focus { - border-color: var(--cds-focus, #0f62fe); - box-shadow: none; -} - -.cds--slug .cds--slug__button--inline:hover, -.cds--slug .cds--slug__button--inline:hover:active { - border-color: var(--cds-icon-secondary, #525252); - background: transparent; - box-shadow: none; - color: var(--cds-text-secondary, #525252); -} - -.cds--slug .cds--slug__button--inline:focus:hover { - border-color: var(--cds-focus, #0f62fe); -} - -.cds--slug .cds--slug__button--inline:hover .cds--slug__text::before { - background: var(--cds-icon-secondary, #525252); -} - -.cds--slug__button--inline .cds--slug__text { - padding-inline-start: 0.5rem; -} - -.cds--slug__button--inline.cds--slug__button--lg .cds--slug__text, -.cds--slug__button--inline.cds--slug__button--xl .cds--slug__text { - padding-inline-start: 0.75rem; -} - -.cds--slug__button--inline .cds--slug__text::before { - position: absolute; - display: inline-block; - background: var(--cds-icon-primary, #161616); - block-size: 0.25rem; - content: ""; - inline-size: 0.25rem; - inset-block-start: 50%; - inset-inline-start: 0; - opacity: 1; - transform: translateY(-50%); - transition: background 70ms cubic-bezier(0, 0, 0.38, 0.9), box-shadow 70ms cubic-bezier(0, 0, 0.38, 0.9); -} - -.cds--slug__button--lg .cds--slug__text::before, -.cds--slug__button--xl .cds--slug__text::before { - block-size: 0.5rem; - inline-size: 0.5rem; -} - -.cds--slug__button--inline.cds--slug__button--mini, -.cds--slug__button--inline.cds--slug__button--mini .cds--slug__additional-text, -.cds--slug__button--inline.cds--slug__button--2xs, -.cds--slug__button--inline.cds--slug__button--2xs .cds--slug__additional-text, -.cds--slug__button--inline.cds--slug__button--xs, -.cds--slug__button--inline.cds--slug__button--xs .cds--slug__additional-text, -.cds--slug__button--inline.cds--slug__button--sm, -.cds--slug__button--inline.cds--slug__button--sm .cds--slug__additional-text { - font-size: 0.75rem; -} - -.cds--slug__button--inline.cds--slug__button--lg, -.cds--slug__button--inline.cds--slug__button--xl { - font-size: 1rem; -} - -.cds--slug .cds--slug__button--inline-with-content { - border: 1px solid var(--cds-border-inverse, #161616); - padding-block: 0.125rem; - padding-inline: 0.5rem; -} - -.cds--slug__button--inline-with-content .cds--slug__additional-text { - font-size: var(--cds-body-compact-02-font-size, 1rem); - font-weight: var(--cds-body-compact-02-font-weight, 400); - line-height: var(--cds-body-compact-02-line-height, 1.375); - letter-spacing: var(--cds-body-compact-02-letter-spacing, 0); - padding-inline-start: 0.25rem; -} - -.cds--slug__button--inline.cds--slug__button--md .cds--slug__additional-text { - font-size: 0.875rem; -} - -.cds--slug .cds--slug__button--inline-with-content:focus, -.cds--slug .cds--slug__button--inline-with-content:hover:focus { - box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe); -} - -.cds--slug .cds--slug-content { - background: linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff))) border-box; - border: 1px solid transparent; - border-radius: 0.5rem; - box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), -40px 44px 60px -24px var(--cds-ai-popover-shadow-outer-01, rgba(0, 67, 206, 0.06)), -56px 64px 64px -24px var(--cds-ai-popover-shadow-outer-02, rgba(0, 0, 0, 0.04)); - color: var(--cds-text-primary, #161616); - min-inline-size: 17.5rem; -} - -.cds--slug > .cds--toggletip > .cds--popover > .cds--popover-caret, -.cds--slug > .cds--toggletip.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret { - background: transparent; - clip-path: none; -} - -.cds--slug > .cds--toggletip:is(.cds--popover--top, -.cds--popover--top-right, -.cds--popover--top-left, -.cds--popover--top-end, -.cds--popover--top-start, -.cds--popover--bottom, -.cds--popover--bottom-right, -.cds--popover--bottom-left, -.cds--popover--bottom-start, -.cds--popover--bottom-end, -.cds--popover--left, -.cds--popover--left-top, -.cds--popover--left-bottom, -.cds--popover--left-start, -.cds--popover--left-end, -.cds--popover--right, -.cds--popover--right-top, -.cds--popover--right-bottom, -.cds--popover--right-start, -.cds--popover--right-end) > .cds--popover > .cds--popover-caret::before, -.cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--top, -.cds--popover--top-right, -.cds--popover--top-left, -.cds--popover--top-end, -.cds--popover--top-start, -.cds--popover--bottom, -.cds--popover--bottom-right, -.cds--popover--bottom-left, -.cds--popover--bottom-start, -.cds--popover--bottom-end, -.cds--popover--left, -.cds--popover--left-top, -.cds--popover--left-bottom, -.cds--popover--left-start, -.cds--popover--left-end, -.cds--popover--right, -.cds--popover--right-top, -.cds--popover--right-bottom, -.cds--popover--right-start, -.cds--popover--right-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::before { - position: absolute; - display: block; - border: 1px solid var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)); - background: var(--cds-background, #ffffff); - block-size: 0.75rem; - clip-path: polygon(98% 0, 0 0, -52% 150%) border-box; - content: ""; - inline-size: 0.75rem; - transform: rotate(45deg); -} - -.cds--slug > .cds--toggletip:is(.cds--popover--top, -.cds--popover--top-right, -.cds--popover--top-left, -.cds--popover--top-end, -.cds--popover--top-start, -.cds--popover--bottom, -.cds--popover--bottom-right, -.cds--popover--bottom-left, -.cds--popover--bottom-start, -.cds--popover--bottom-end, -.cds--popover--left, -.cds--popover--left-top, -.cds--popover--left-bottom, -.cds--popover--left-start, -.cds--popover--left-end, -.cds--popover--right, -.cds--popover--right-top, -.cds--popover--right-bottom, -.cds--popover--right-start, -.cds--popover--right-end) > .cds--popover > .cds--popover-caret::after, -.cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--top, -.cds--popover--top-right, -.cds--popover--top-left, -.cds--popover--top-end, -.cds--popover--top-start, -.cds--popover--bottom, -.cds--popover--bottom-right, -.cds--popover--bottom-left, -.cds--popover--bottom-start, -.cds--popover--bottom-end, -.cds--popover--left, -.cds--popover--left-top, -.cds--popover--left-bottom, -.cds--popover--left-start, -.cds--popover--left-end, -.cds--popover--right, -.cds--popover--right-top, -.cds--popover--right-bottom, -.cds--popover--right-start, -.cds--popover--right-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::after { - position: absolute; - display: block; - background: var(--cds-background, #ffffff); - block-size: 0.875rem; - content: ""; - inline-size: 0.125rem; -} - -.cds--slug > .cds--toggletip:is(.cds--popover--top, -.cds--popover--top-right, -.cds--popover--top-left, -.cds--popover--top-end, -.cds--popover--top-start) > .cds--popover > .cds--popover-caret::before, -.cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--top, -.cds--popover--top-right, -.cds--popover--top-left, -.cds--popover--top-end, -.cds--popover--top-start) > .cds--popover > .cds--popover-content > .cds--popover-caret::before { - inset-block-end: 0.0625rem; - transform: rotate(-135deg); -} -.cds--slug > .cds--toggletip:is(.cds--popover--top, -.cds--popover--top-right, -.cds--popover--top-left, -.cds--popover--top-end, -.cds--popover--top-start) > .cds--popover > .cds--popover-caret::after, -.cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--top, -.cds--popover--top-right, -.cds--popover--top-left, -.cds--popover--top-end, -.cds--popover--top-start) > .cds--popover > .cds--popover-content > .cds--popover-caret::after { - background: var(--cds-ai-popover-caret-bottom-background, #eaf1ff); - block-size: 0.125rem; - border-end-end-radius: 50%; - border-end-start-radius: 50%; - inline-size: 0.875rem; - inset-block-start: -0.125rem; - inset-inline-start: -0.0625rem; -} - -.cds--slug > .cds--toggletip:is(.cds--popover--top, -.cds--popover--top-right, -.cds--popover--top-left, -.cds--popover--top-end, -.cds--popover--top-start) > .cds--popover > .cds--slug-content--with-actions + .cds--popover-caret::after { - display: none; -} - -.cds--slug > .cds--toggletip:is(.cds--popover--right, -.cds--popover--right-bottom, -.cds--popover--right-top, -.cds--popover--right-start, -.cds--popover--right-end) > .cds--popover > .cds--popover-caret::before, -.cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--right, -.cds--popover--right-bottom, -.cds--popover--right-top, -.cds--popover--right-start, -.cds--popover--right-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::before { - inset-inline-start: 0.0625rem; - transform: rotate(-45deg); -} -.cds--slug > .cds--toggletip:is(.cds--popover--right, -.cds--popover--right-bottom, -.cds--popover--right-top, -.cds--popover--right-start, -.cds--popover--right-end) > .cds--popover > .cds--popover-caret::after, -.cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--right, -.cds--popover--right-bottom, -.cds--popover--right-top, -.cds--popover--right-start, -.cds--popover--right-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::after { - border-end-start-radius: 50%; - border-start-start-radius: 50%; - inset-block-start: -0.0625rem; - inset-inline-start: 0.375rem; -} - -.cds--slug > .cds--toggletip:is(.cds--popover--bottom, -.cds--popover--bottom-left, -.cds--popover--bottom-right, -.cds--popover--bottom-start, -.cds--popover--bottom-end) > .cds--popover > .cds--popover-caret::before, -.cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--bottom, -.cds--popover--bottom-left, -.cds--popover--bottom-right, -.cds--popover--bottom-start, -.cds--popover--bottom-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::before { - inset-block-start: 0.0625rem; - transform: rotate(45deg); -} -.cds--slug > .cds--toggletip:is(.cds--popover--bottom, -.cds--popover--bottom-left, -.cds--popover--bottom-right, -.cds--popover--bottom-start, -.cds--popover--bottom-end) > .cds--popover > .cds--popover-caret::after, -.cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--bottom, -.cds--popover--bottom-left, -.cds--popover--bottom-right, -.cds--popover--bottom-start, -.cds--popover--bottom-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::after { - block-size: 0.125rem; - border-start-end-radius: 50%; - border-start-start-radius: 50%; - inline-size: 0.875rem; - inset-block-end: -0.15625rem; - inset-inline-start: -0.0625rem; -} - -.cds--slug > .cds--toggletip:is(.cds--popover--left, -.cds--popover--left-bottom, -.cds--popover--left-top, -.cds--popover--left-start, -.cds--popover--left-end) > .cds--popover > .cds--popover-caret::before, -.cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--left, -.cds--popover--left-bottom, -.cds--popover--left-top, -.cds--popover--left-start, -.cds--popover--left-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::before { - inset-inline-end: 0.0625rem; - transform: rotate(135deg); -} -.cds--slug > .cds--toggletip:is(.cds--popover--left, -.cds--popover--left-bottom, -.cds--popover--left-top, -.cds--popover--left-start, -.cds--popover--left-end) > .cds--popover > .cds--popover-caret::after, -.cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--left, -.cds--popover--left-bottom, -.cds--popover--left-top, -.cds--popover--left-start, -.cds--popover--left-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::after { - border-end-end-radius: 50%; - border-start-end-radius: 50%; - inset-block-start: -0.0625rem; - inset-inline-start: -0.125rem; -} - -.cds--slug > .cds--toggletip:is(.cds--popover--left-bottom, -.cds--popover--right-bottom, -.cds--popover--left-end, -.cds--popover--right-end) > .cds--popover > .cds--popover-caret::after, -.cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--left-bottom, -.cds--popover--right-bottom, -.cds--popover--left-end, -.cds--popover--right-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::after { - background: transparent; -} - -.cds--slug > .cds--toggletip:is(.cds--popover--left-bottom, -.cds--popover--right-bottom, -.cds--popover--left-end, -.cds--popover--right-end, -.cds--popover--top, -.cds--popover--top-right, -.cds--popover--top-left, -.cds--popover--top-end, -.cds--popover--top-start) > .cds--popover > .cds--popover-caret::before, -.cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--left-bottom, -.cds--popover--right-bottom, -.cds--popover--left-end, -.cds--popover--right-end, -.cds--popover--top, -.cds--popover--top-right, -.cds--popover--top-left, -.cds--popover--top-end, -.cds--popover--top-start) > .cds--popover > .cds--popover-content > .cds--popover-caret::before { - border-color: var(--cds-ai-popover-caret-bottom, #78a9ff); - background: var(--cds-ai-popover-caret-bottom-background, #eaf1ff); -} - -.cds--slug > .cds--toggletip:is(.cds--popover--left-bottom, -.cds--popover--right-bottom, -.cds--popover--left-end, -.cds--popover--right-end, -.cds--popover--top, -.cds--popover--top-right, -.cds--popover--top-left, -.cds--popover--top-end, -.cds--popover--top-start) > .cds--popover:has(.cds--slug-content--with-actions) > .cds--popover-caret::before, -.cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--left-bottom, -.cds--popover--right-bottom, -.cds--popover--left-end, -.cds--popover--right-end, -.cds--popover--top, -.cds--popover--top-right, -.cds--popover--top-left, -.cds--popover--top-start, -.cds--popover--top-end) > .cds--popover:has(.cds--slug-content--with-actions) > .cds--popover-content > .cds--popover-caret::before { - background: var(--cds-ai-popover-caret-bottom-background-actions, #e9effa); -} - -.cds--slug > .cds--toggletip:is(.cds--popover--left, -.cds--popover--right) > .cds--popover > .cds--popover-caret::before, -.cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--left, -.cds--popover--right) > .cds--popover > .cds--popover-content > .cds--popover-caret::before { - border-color: var(--cds-ai-popover-caret-center, #a0c3ff); -} - -.cds--slug .cds--toggletip-content { - padding-block-end: 5rem; - padding-block-start: 1.5rem; - padding-inline: 1.5rem; -} - -.cds--slug .cds--slug-content .cds--toggletip-content { - max-inline-size: 20rem; -} - -.cds--slug .cds--slug-actions { - position: absolute; - justify-content: flex-end; - -webkit-backdrop-filter: blur(85px); - backdrop-filter: blur(85px); - background: rgba(0, 0, 0, 0.01); - border-end-end-radius: 0.5rem; - border-end-start-radius: 0.5rem; - -moz-column-gap: 0; - column-gap: 0; - inline-size: 100%; - inset-block-end: 0; - inset-inline-end: 0; -} - -.cds--slug .cds--slug-actions .cds--btn:focus { - border-color: var(--cds-focus, #0f62fe); - box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe), inset 0 0 0 2px var(--cds-background, #ffffff); -} - -.cds--slug .cds--slug-actions .cds--btn--primary { - order: 1; - border-end-end-radius: 0.4375rem; -} - -.cds--slug.cds--slug--revert { - transform: translate(0.5rem, -50%); -} - -.cds--slug--revert .cds--btn--icon-only { - align-items: center; - padding-block-start: 0; -} - -.cds--slug--revert .cds--btn--icon-only svg { - margin: 0; -} - -.cds--stack-horizontal { - display: inline-grid; - -moz-column-gap: var(--cds-stack-gap, 0); - column-gap: var(--cds-stack-gap, 0); - grid-auto-flow: column; -} - -.cds--stack-vertical { - display: grid; - grid-auto-flow: row; - row-gap: var(--cds-stack-gap, 0); -} - -.cds--stack-scale-1 { - --cds-stack-gap: 0.125rem; -} - -.cds--stack-scale-2 { - --cds-stack-gap: 0.25rem; -} - -.cds--stack-scale-3 { - --cds-stack-gap: 0.5rem; -} - -.cds--stack-scale-4 { - --cds-stack-gap: 0.75rem; -} - -.cds--stack-scale-5 { - --cds-stack-gap: 1rem; -} - -.cds--stack-scale-6 { - --cds-stack-gap: 1.5rem; -} - -.cds--stack-scale-7 { - --cds-stack-gap: 2rem; -} - -.cds--stack-scale-8 { - --cds-stack-gap: 2.5rem; -} - -.cds--stack-scale-9 { - --cds-stack-gap: 3rem; -} - -.cds--stack-scale-10 { - --cds-stack-gap: 4rem; -} - -.cds--stack-scale-11 { - --cds-stack-gap: 5rem; -} - -.cds--stack-scale-12 { - --cds-stack-gap: 6rem; -} - -.cds--stack-scale-13 { - --cds-stack-gap: 10rem; -} - -.cds--structured-list--selection .cds--structured-list-td, -.cds--structured-list--selection .cds--structured-list-th { - padding-inline-end: 1rem; - padding-inline-start: 1rem; -} -.cds--structured-list--selection .cds--structured-list-td:first-child, -.cds--structured-list--selection .cds--structured-list-th:first-child { - padding-inline-end: 1rem; - padding-inline-start: 1rem; -} - -.cds--structured-list-row--focused-within { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--structured-list-row--focused-within { - outline-style: dotted; - } -} - -.cds--structured-list { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: table; - background-color: var(--cds-layer) transparent; - border-collapse: collapse; - border-spacing: 0; - inline-size: 100%; - overflow-x: auto; -} -.cds--structured-list *, -.cds--structured-list *::before, -.cds--structured-list *::after { - box-sizing: inherit; -} -.cds--structured-list.cds--structured-list--condensed .cds--structured-list-td, .cds--structured-list.cds--structured-list--condensed .cds--structured-list-th { - padding: 0.5rem; -} -.cds--structured-list .cds--structured-list-row .cds--structured-list-td:first-of-type, -.cds--structured-list .cds--structured-list-row .cds--structured-list-th:first-of-type { - padding-inline-start: 1rem; -} -.cds--structured-list.cds--structured-list--flush .cds--structured-list-row .cds--structured-list-td, .cds--structured-list.cds--structured-list--flush .cds--structured-list-row .cds--structured-list-th, .cds--structured-list.cds--structured-list--flush .cds--structured-list-row .cds--structured-list-td:first-of-type, .cds--structured-list.cds--structured-list--flush .cds--structured-list-row .cds--structured-list-th:first-of-type { - padding-inline-end: 1rem; - padding-inline-start: 0; -} - -.cds--structured-list-row { - display: table-row; - border-block-start: 1px solid var(--cds-border-subtle); - transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -.cds--structured-list-tbody .cds--structured-list-row:last-child { - border-block-end: 1px solid var(--cds-border-subtle); -} - -.cds--structured-list-row--header-row { - border: none; -} - -.cds--structured-list--selection .cds--structured-list-row:hover:not(.cds--structured-list-row--header-row):not(.cds--structured-list-row--selected) { - border-color: var(--cds-layer-hover); - background-color: var(--cds-layer-hover); - cursor: pointer; -} - -.cds--structured-list--selection .cds--structured-list-row:hover:not(.cds--structured-list-row--header-row):not(.cds--structured-list-row--selected) + .cds--structured-list-row { - border-color: var(--cds-layer-hover); -} - -.cds--structured-list--selection .cds--structured-list-row.cds--structured-list-row--selected { - border-color: var(--cds-layer-selected); - background-color: var(--cds-layer-selected); -} - -.cds--structured-list--selection .cds--structured-list-row--selected + .cds--structured-list-row { - border-color: var(--cds-layer-selected); -} - -.cds--structured-list--selection .cds--structured-list-row.cds--structured-list-row--selected .cds--structured-list-td { - color: var(--cds-text-primary, #161616); -} - -.cds--structured-list-row.cds--structured-list-row--header-row { - cursor: inherit; -} - -.cds--structured-list--selection .cds--structured-list-row:hover:not(.cds--structured-list-row--header-row) > .cds--structured-list-td, -.cds--structured-list--selection .cds--structured-list-row.cds--structured-list-row--selected > .cds--structured-list-td { - color: var(--cds-text-primary, #161616); -} - -.cds--structured-list-thead { - display: table-header-group; - vertical-align: middle; -} - -.cds--structured-list-th { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - padding: 1rem 0.5rem 0.5rem 0.5rem; - font-size: var(--cds-heading-compact-01-font-size, 0.875rem); - font-weight: var(--cds-heading-compact-01-font-weight, 600); - line-height: var(--cds-heading-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px); - display: table-cell; - block-size: 2.5rem; - color: var(--cds-text-primary, #161616); - font-weight: 600; - text-align: start; - text-transform: none; - vertical-align: top; -} -.cds--structured-list-th *, -.cds--structured-list-th *::before, -.cds--structured-list-th *::after { - box-sizing: inherit; -} - -.cds--structured-list-tbody { - display: table-row-group; - vertical-align: middle; -} - -.cds--structured-list-td { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - font-size: var(--cds-body-01-font-size, 0.875rem); - font-weight: var(--cds-body-01-font-weight, 400); - line-height: var(--cds-body-01-line-height, 1.42857); - letter-spacing: var(--cds-body-01-letter-spacing, 0.16px); - padding: 1rem 0.5rem 1.5rem 0.5rem; - position: relative; - display: table-cell; - color: var(--cds-text-secondary, #525252); - max-inline-size: 36rem; - transition: color 110ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -.cds--structured-list-td *, -.cds--structured-list-td *::before, -.cds--structured-list-td *::after { - box-sizing: inherit; -} - -.cds--structured-list-content--nowrap { - white-space: nowrap; -} - -.cds--structured-list-input + .cds--structured-list-td { - text-align: end; -} - -.cds--structured-list-svg { - display: inline-block; - margin-block-start: 0.125rem; - transition: all 110ms cubic-bezier(0.2, 0, 0.38, 0.9); - vertical-align: top; -} - -.cds--structured-list-input:checked + .cds--structured-list-row .cds--structured-list-svg, -.cds--structured-list-input:checked + .cds--structured-list-td .cds--structured-list-svg { - fill: var(--cds-icon-primary, #161616); -} - -.cds--structured-list-svg { - fill: transparent; -} - -.cds--structured-list--selection .cds--structured-list-td:last-child { - inline-size: 2rem; - padding-inline-start: 0; -} - -.cds--structured-list.cds--skeleton .cds--structured-list-th:first-child { - inline-size: 8%; -} -.cds--structured-list.cds--skeleton .cds--structured-list-th:nth-child(3n+2) { - inline-size: 30%; -} -.cds--structured-list.cds--skeleton .cds--structured-list-th:nth-child(3n+3) { - inline-size: 15%; -} -.cds--structured-list.cds--skeleton span { - position: relative; - padding: 0; - border: none; - background: var(--cds-skeleton-background, #e8e8e8); - box-shadow: none; - pointer-events: none; - display: block; - block-size: 1rem; - inline-size: 75%; -} -.cds--structured-list.cds--skeleton span:hover, .cds--structured-list.cds--skeleton span:focus, .cds--structured-list.cds--skeleton span:active { - border: none; - cursor: default; - outline: none; -} -.cds--structured-list.cds--skeleton span::before { - position: absolute; - animation: 3000ms ease-in-out cds--skeleton infinite; - background: var(--cds-skeleton-element, #c6c6c6); - block-size: 100%; - content: ""; - inline-size: 100%; - will-change: transform-origin, transform, opacity; -} -@media (prefers-reduced-motion: reduce) { - .cds--structured-list.cds--skeleton span::before { - animation: none; - } -} - -.cds--structured-list.cds--structured-list--selection.cds--skeleton .cds--structured-list-th:first-child { - inline-size: 5%; -} -.cds--structured-list.cds--structured-list--selection.cds--skeleton .cds--structured-list-th:first-child span { - display: none; -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--structured-list-input:checked + .cds--structured-list-td .cds--structured-list-svg { - fill: ButtonText; - } -} - -.cds--structured-list__icon { - margin-block-start: 0.125rem; - vertical-align: top; -} - -.cds--structured-list--selection .cds--structured-list-td:first-child:has(.cds--structured-list__icon) { - inline-size: 2rem; - padding-inline-end: 0; -} - -.cds--tabs.cds--tabs--contained.cds--tabs--full-width .cds--tab--list { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); - inline-size: 100%; -} -.cds--tabs.cds--tabs--contained.cds--tabs--full-width .cds--tab--list .cds--tabs__nav-link .cds--tabs__nav-item-label, -.cds--tabs.cds--tabs--contained.cds--tabs--full-width .cds--tab--list .cds--tabs__nav-link .cds--tabs__nav-item-secondary-label { - overflow: hidden; - text-overflow: ellipsis; -} -.cds--tabs.cds--tabs--contained.cds--tabs--full-width .cds--tab--list .cds--tabs__nav-link .cds--tabs__nav-item--icon { - margin-inline-start: auto; -} - -.cds--tabs, -.cds--tab-content { - --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max)); -} - -.cds--tabs.cds--tabs--tall, -.cds--tabs.cds--tabs--contained.cds--tabs--tall { - --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-lg)), var(--cds-layout-size-height, var(--cds-layout-size-height-xl)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-xl))); -} - -.cds--tabs { - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-md)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-lg))); - position: relative; - display: flex; - block-size: auto; - color: var(--cds-text-primary, #161616); - inline-size: 100%; - max-block-size: var(--cds-layout-size-height-xl); - min-block-size: var(--cds-layout-size-height-local); -} -.cds--tabs html { - font-size: 100%; -} -.cds--tabs body { - font-weight: 400; - font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; -} -.cds--tabs code { - font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace; -} -.cds--tabs strong { - font-weight: 600; -} -.cds--tabs.cds--tabs--contained { - --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-lg)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-xl))); -} -.cds--tabs .cds--tab--list { - display: flex; - inline-size: auto; - overflow-x: auto; - scroll-behavior: smooth; - scrollbar-width: none; - will-change: scroll-position; -} -.cds--tabs .cds--tab--list::-webkit-scrollbar { - display: none; -} -.cds--tabs .cds--tabs__nav { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: flex; -} -.cds--tabs .cds--tabs__nav *, -.cds--tabs .cds--tabs__nav *::before, -.cds--tabs .cds--tabs__nav *::after { - box-sizing: inherit; -} -.cds--tabs .cds--tab--overflow-nav-button { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: inline-block; - padding: 0; - border: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: none; - cursor: pointer; - text-align: start; - inline-size: 100%; - display: flex; - flex-shrink: 0; - align-items: center; - justify-content: center; - background-color: var(--cds-background, #ffffff); - inline-size: 2.5rem; -} -.cds--tabs .cds--tab--overflow-nav-button *, -.cds--tabs .cds--tab--overflow-nav-button *::before, -.cds--tabs .cds--tab--overflow-nav-button *::after { - box-sizing: inherit; -} -.cds--tabs .cds--tab--overflow-nav-button::-moz-focus-inner { - border: 0; -} -.cds--tabs .cds--tab--overflow-nav-button:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--tabs .cds--tab--overflow-nav-button:focus { - outline-style: dotted; - } -} -.cds--tabs .cds--tab--overflow-nav-button--hidden { - display: none; -} -.cds--tabs.cds--tabs--contained .cds--tab--overflow-nav-button { - margin: 0; - background-color: var(--cds-layer-accent); - inline-size: 3rem; -} -.cds--tabs .cds--tab--overflow-nav-button svg { - fill: var(--cds-icon-primary, #161616); -} -.cds--tabs .cds--tab--overflow-nav-button--next { - position: absolute; - inset-block-end: 0; - inset-block-start: 0; - inset-inline-end: 0; -} -.cds--tabs .cds--tab--overflow-nav-button--next::before { - position: absolute; - z-index: 1; - background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--cds-background, #ffffff)); - block-size: 100%; - content: ""; - inline-size: 0.5rem; - inset-inline-start: -0.5rem; -} -.cds--tabs.cds--tabs--contained .cds--tab--overflow-nav-button--next::before { - background-image: linear-gradient(to right, rgba(255, 255, 255, 0), var(--cds-layer-accent)); -} -.cds--tabs .cds--tab--overflow-nav-button--previous { - position: absolute; - inset-block-end: 0; - inset-block-start: 0; - inset-inline-start: 0; -} -.cds--tabs .cds--tab--overflow-nav-button--previous::before { - position: absolute; - z-index: 1; - background: linear-gradient(to left, rgba(255, 255, 255, 0), var(--cds-background, #ffffff)); - block-size: 100%; - content: ""; - inline-size: 0.5rem; - inset-inline-end: -0.5rem; -} -.cds--tabs.cds--tabs--contained .cds--tab--overflow-nav-button--previous::before { - background-image: linear-gradient(to left, rgba(255, 255, 255, 0), var(--cds-layer-accent)); -} -.cds--tabs .cds--tabs--light .cds--tabs__overflow-indicator--left { - background-image: linear-gradient(to left, rgba(255, 255, 255, 0), var(--cds-layer)); -} -.cds--tabs .cds--tabs--light .cds--tabs__overflow-indicator--right { - background-image: linear-gradient(to right, rgba(255, 255, 255, 0), var(--cds-layer)); -} -.cds--tabs.cds--tabs--contained .cds--tabs__overflow-indicator--left { - background-image: linear-gradient(to left, rgba(255, 255, 255, 0), var(--cds-layer-accent)); -} -.cds--tabs.cds--tabs--contained .cds--tabs__overflow-indicator--right { - background-image: linear-gradient(to right, rgba(255, 255, 255, 0), var(--cds-layer-accent)); -} -@media not all and (resolution >= 0.001dpcm) { - @supports (-webkit-appearance: none) and (stroke-color: transparent) { - .cds--tabs .cds--tabs__overflow-indicator--left { - background-image: linear-gradient(to left, rgba(var(--cds-background, #ffffff), 0), var(--cds-background, #ffffff)); - } - .cds--tabs .cds--tabs__overflow-indicator--right { - background-image: linear-gradient(to right, rgba(var(--cds-background, #ffffff), 0), var(--cds-background, #ffffff)); - } - .cds--tabs.cds--tabs--contained .cds--tabs__overflow-indicator--left { - background-image: linear-gradient(to left, rgba(var(--cds-layer-accent), 0), var(--cds-layer-accent)); - } - .cds--tabs.cds--tabs--contained .cds--tabs__overflow-indicator--right { - background-image: linear-gradient(to right, rgba(var(--cds-layer-accent), 0), var(--cds-layer-accent)); - } - } -} -.cds--tabs .cds--tabs__nav-item-label-wrapper { - display: flex; -} -.cds--tabs:not(.cds--tabs--contained) .cds--tabs__nav-item-label-wrapper { - position: relative; - inset-block-start: 0.0625rem; -} -.cds--tabs .cds--tabs__nav-item { - display: flex; - flex: 1 0 auto; - padding: 0; - cursor: pointer; - transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -.cds--tabs .cds--tabs__nav-item html { - font-size: 100%; -} -.cds--tabs .cds--tabs__nav-item body { - font-weight: 400; - font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; -} -.cds--tabs .cds--tabs__nav-item code { - font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace; -} -.cds--tabs .cds--tabs__nav-item strong { - font-weight: 600; -} -.cds--tabs .cds--tabs__nav-item + .cds--tabs__nav-item { - margin-inline-start: 0.0625rem; -} -.cds--tabs.cds--tabs--contained .cds--tabs__nav-item { - background-color: var(--cds-layer-accent); - box-shadow: -0.0625rem 0 0 0 var(--cds-border-strong); - margin-inline-start: 0; -} -.cds--tabs.cds--tabs--contained .cds--tabs__nav-item--selected + div + .cds--tabs__nav-item { - box-shadow: -0.0625rem 0 0 0 transparent; -} -.cds--tabs .cds--tabs__nav-item .cds--tabs__nav-link { - transition: color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), border-bottom-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -.cds--tabs.cds--tabs--dismissable .cds--tabs__nav-link { - padding-inline-end: 2.5rem; -} -.cds--tabs.cds--tabs--dismissable.cds--tabs--contained .cds--tabs__nav-link { - padding-inline-end: calc(3rem - 1px); -} -.cds--tabs .cds--tabs__nav-item--close { - position: relative; - display: flex; - align-items: center; - inset-inline-start: calc(-0.75rem - 1px); - margin-inline-start: calc(-1.5rem + 1px); -} -.cds--tabs:not(.cds--tabs--contained) .cds--tabs__nav-item--close--hidden { - position: absolute; - overflow: hidden; - padding: 0; - border: 0; - margin: -1px; - block-size: 1px; - clip: rect(0, 0, 0, 0); - inline-size: 1px; - visibility: inherit; - white-space: nowrap; - position: static; - inline-size: 0.1875rem; -} -.cds--tabs.cds--tabs--contained.cds--tabs--full-width .cds--tabs__nav-item--close--hidden { - display: none; -} -.cds--tabs .cds--tabs__nav-item--close-icon { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: inline-block; - padding: 0; - border: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: none; - cursor: pointer; - text-align: start; - inline-size: 100%; - block-size: 1.5rem; - inline-size: 1.5rem; - padding-block: 0.25rem; - padding-inline: 0.25rem; - pointer-events: auto; -} -.cds--tabs .cds--tabs__nav-item--close-icon *, -.cds--tabs .cds--tabs__nav-item--close-icon *::before, -.cds--tabs .cds--tabs__nav-item--close-icon *::after { - box-sizing: inherit; -} -.cds--tabs .cds--tabs__nav-item--close-icon::-moz-focus-inner { - border: 0; -} -.cds--tabs .cds--tabs__nav-item--close-icon svg { - block-size: 1rem; - fill: var(--cds-text-secondary, #525252); - inline-size: 1rem; -} -.cds--tabs .cds--tabs__nav-item--close-icon svg:hover { - fill: var(--cds-text-primary, #161616); -} -.cds--tabs .cds--tabs__nav-item--close-icon:hover { - background-color: var(--cds-layer-hover); -} -.cds--tabs .cds--tabs__nav-item--close-icon:focus, .cds--tabs .cds--tabs__nav-item--close-icon:active { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--tabs .cds--tabs__nav-item--close-icon:focus, .cds--tabs .cds--tabs__nav-item--close-icon:active { - outline-style: dotted; - } -} -.cds--tabs .cds--tabs__nav-item:hover + .cds--tabs__nav-item--close .cds--tabs__nav-item--close-icon svg { - fill: var(--cds-text-primary, #161616); -} -.cds--tabs .cds--tabs__nav-item--close-icon--selected svg { - fill: var(--cds-text-primary, #161616); -} -.cds--tabs .cds--tabs__nav-item:hover + .cds--tabs__nav-item--close .cds--tabs__nav-item--close-icon--disabled, -.cds--tabs .cds--tabs__nav-item--close-icon--disabled, -.cds--tabs .cds--tabs__nav-item--close-icon--disabled:hover { - background-color: inherit; - cursor: not-allowed; -} -.cds--tabs .cds--tabs__nav-item:hover + .cds--tabs__nav-item--close .cds--tabs__nav-item--close-icon--disabled svg, -.cds--tabs .cds--tabs__nav-item--close-icon--disabled svg, -.cds--tabs .cds--tabs__nav-item--close-icon--disabled:hover svg { - fill: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); -} -.cds--tabs .cds--tabs__nav-item:hover + .cds--tabs__nav-item--close .cds--tabs__nav-item--close-icon--disabled:focus, .cds--tabs .cds--tabs__nav-item:hover + .cds--tabs__nav-item--close .cds--tabs__nav-item--close-icon--disabled:active, -.cds--tabs .cds--tabs__nav-item--close-icon--disabled:focus, -.cds--tabs .cds--tabs__nav-item--close-icon--disabled:active, -.cds--tabs .cds--tabs__nav-item--close-icon--disabled:hover:focus, -.cds--tabs .cds--tabs__nav-item--close-icon--disabled:hover:active { - outline: 2px solid transparent; - outline-offset: -2px; -} -.cds--tabs .cds--tabs__nav-item--icon { - display: flex; - align-items: center; - padding-inline-start: 0.5rem; -} -.cds--tabs .cds--tabs__nav-item--icon-left { - display: flex; - align-items: center; - margin-block-start: -2px; - padding-inline-end: 0.5rem; -} -.cds--tabs.cds--tabs--contained .cds--tabs__nav-item--icon { - padding-inline-start: var(--cds-layout-density-padding-inline-local); -} -.cds--tabs .cds--tabs__nav-link { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: inline-block; - padding: 0; - border: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: none; - cursor: pointer; - text-align: start; - outline: 2px solid transparent; - outline-offset: -2px; - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - overflow: hidden; - border-block-end: 2px solid var(--cds-border-subtle); - color: var(--cds-text-secondary, #525252); - padding-inline: var(--cds-layout-density-padding-inline-local); - text-align: start; - text-decoration: none; - text-overflow: ellipsis; - transition: border 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9); - white-space: nowrap; -} -.cds--tabs .cds--tabs__nav-link *, -.cds--tabs .cds--tabs__nav-link *::before, -.cds--tabs .cds--tabs__nav-link *::after { - box-sizing: inherit; -} -.cds--tabs .cds--tabs__nav-link::-moz-focus-inner { - border: 0; -} -.cds--tabs .cds--tabs__nav-link:focus, .cds--tabs .cds--tabs__nav-link:active { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--tabs .cds--tabs__nav-link:focus, .cds--tabs .cds--tabs__nav-link:active { - outline-style: dotted; - } -} -.cds--tabs.cds--tabs--contained .cds--tabs__nav-link { - border-block-end: 0; - padding-inline: var(--cds-layout-density-padding-inline-local); -} -.cds--tabs.cds--tabs--contained:not(.cds--tabs--tall) .cds--tabs__nav-item-label { - line-height: calc(3rem - (0.5rem * 2)); -} -.cds--tabs.cds--tabs--contained .cds--tabs__nav-item-secondary-label { - font-size: var(--cds-label-01-font-size, 0.75rem); - font-weight: var(--cds-label-01-font-weight, 400); - line-height: var(--cds-label-01-line-height, 1.33333); - letter-spacing: var(--cds-label-01-letter-spacing, 0.32px); - min-block-size: 1rem; -} -.cds--tabs.cds--tabs__icon--default .cds--tab--list, .cds--tabs.cds--tabs__icon--lg .cds--tab--list { - overflow-x: visible; -} -.cds--tabs .cds--tabs__nav-item--icon-only, .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--icon-only { - display: flex; - align-items: center; - justify-content: center; - padding: 0; - block-size: var(--cds-layout-size-height-local); - inline-size: var(--cds-layout-size-height-local); -} -.cds--tabs .cds--tabs__nav-item--icon-only .cds--tabs__nav-item-label, .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--icon-only .cds--tabs__nav-item-label { - line-height: 0; -} -.cds--tabs:not(.cds--tabs--contained) .cds--tabs__nav-item:not(.cds--tabs__nav-item--selected):not(.cds--tabs__nav-item--disabled):hover { - border-block-end: 2px solid var(--cds-border-strong); - color: var(--cds-text-primary, #161616); -} -.cds--tabs.cds--tabs--contained .cds--tabs__nav-item:not(.cds--tabs__nav-item--selected):not(.cds--tabs__nav-item--disabled):not(.cds--tabs__nav-item--hover-off):hover { - background-color: var(--cds-layer-accent-hover); - color: var(--cds-text-primary, #161616); -} -.cds--tabs .cds--tabs__nav-item--selected { - border-block-end: 2px solid var(--cds-border-interactive, #0f62fe); - transition: color 70ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -.cds--tabs.cds--tabs--contained .cds--tabs__nav-item--selected + .cds--tabs__nav-item { - box-shadow: none; -} -.cds--tabs.cds--tabs--contained .cds--tabs__nav-item.cds--tabs__nav-item--selected { - box-shadow: inset 0 2px 0 0 var(--cds-border-interactive, #0f62fe); -} -.cds--tabs.cds--tabs--contained .cds--tabs__nav-item--selected, -.cds--tabs .cds--tabs__nav-item--selected, -.cds--tabs .cds--tabs__nav-item--selected:focus .cds--tabs__nav-link:focus, -.cds--tabs .cds--tabs__nav-item--selected:active .cds--tabs__nav-link:active { - font-size: var(--cds-heading-compact-01-font-size, 0.875rem); - font-weight: var(--cds-heading-compact-01-font-weight, 600); - line-height: var(--cds-heading-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px); - color: var(--cds-text-primary, #161616); -} -.cds--tabs.cds--tabs--contained:not(.cds--tabs--tall) .cds--tabs__nav-item--selected, .cds--tabs.cds--tabs--contained:not(.cds--tabs--tall) .cds--tabs__nav-item--selected:hover { - line-height: calc(3rem - (0.5rem * 2)); -} -.cds--tabs.cds--tabs--contained .cds--tabs__nav-item--selected, .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--selected:hover { - background-color: var(--cds-layer); -} -.cds--tabs.cds--tabs--contained .cds--tabs__nav-item--selected .cds--tabs__nav-link:focus, -.cds--tabs.cds--tabs--contained .cds--tabs__nav-item--selected .cds--tabs__nav-link:active, .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--selected:hover .cds--tabs__nav-link:focus, -.cds--tabs.cds--tabs--contained .cds--tabs__nav-item--selected:hover .cds--tabs__nav-link:active { - box-shadow: none; -} -.cds--tabs.cds--tabs--light.cds--tabs--contained .cds--tabs__nav-item--selected, .cds--tabs.cds--tabs--light.cds--tabs--contained .cds--tabs__nav-item--selected:hover { - background-color: var(--cds-background, #ffffff); -} -.cds--tabs .cds--tabs__nav-item--disabled { - background-color: transparent; - border-block-end: 2px solid var(--cds-border-disabled, #c6c6c6); - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); - outline: none; -} -.cds--tabs .cds--tabs__nav-item--disabled:hover { - border-block-end: 2px solid var(--cds-border-disabled, #c6c6c6); - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); - cursor: not-allowed; -} -.cds--tabs.cds--tabs--contained .cds--tabs__nav-item.cds--tabs__nav-item--disabled, .cds--tabs.cds--tabs--contained .cds--tabs__nav-item.cds--tabs__nav-item--disabled:hover { - background-color: var(--cds-button-disabled, #c6c6c6); -} -.cds--tabs .cds--tabs__nav-item--disabled:focus, -.cds--tabs .cds--tabs__nav-item--disabled:active { - border-block-end: 2px solid var(--cds-border-disabled, #c6c6c6); - outline: none; - pointer-events: none; -} -.cds--tabs .cds--tabs--light .cds--tabs__nav-item--disabled .cds--tabs__nav-link { - border-block-end-color: var(--cds-border-subtle); -} -.cds--tabs .cds--tabs--light .cds--tabs__nav-item--disabled:hover .cds--tabs__nav-link { - border-block-end-color: var(--cds-border-subtle); -} -.cds--tabs .cds--tabs--light .cds--tabs__nav-item--disabled .cds--tabs__nav-link:focus, -.cds--tabs .cds--tabs--light .cds--tabs__nav-item--disabled .cds--tabs__nav-link:active { - border-block-end-color: var(--cds-border-subtle); -} -.cds--tabs.cds--tabs--contained .cds--tabs__nav-item--disabled { - border-block-end: none; - color: var(--cds-text-on-color-disabled, #8d8d8d); -} - -.cds--tab-content { - padding: var(--cds-layout-density-padding-inline-local); -} -.cds--tab-content:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--tab-content:focus { - outline-style: dotted; - } -} - -.cds--tabs--contained ~ .cds--tab-content { - background: var(--cds-layer); -} - -.cds--tab-content--interactive:focus { - outline: none; -} - -.cds--tabs.cds--skeleton { - cursor: default; - pointer-events: none; -} - -.cds--skeleton.cds--tabs:not(.cds--tabs--contained) .cds--tabs__nav-link { - border-block-end: 2px solid var(--cds-skeleton-element, #c6c6c6); -} - -.cds--tabs.cds--skeleton .cds--tabs__nav-link { - display: flex; - align-items: center; - padding: 0 var(--cds-layout-density-padding-inline-local); - block-size: 100%; - inline-size: 10rem; -} - -.cds--tabs.cds--skeleton .cds--tabs__nav-link span { - position: relative; - padding: 0; - border: none; - background: var(--cds-skeleton-background, #e8e8e8); - box-shadow: none; - pointer-events: none; - display: block; - block-size: 0.875rem; - inline-size: 100%; -} -.cds--tabs.cds--skeleton .cds--tabs__nav-link span:hover, .cds--tabs.cds--skeleton .cds--tabs__nav-link span:focus, .cds--tabs.cds--skeleton .cds--tabs__nav-link span:active { - border: none; - cursor: default; - outline: none; -} -.cds--tabs.cds--skeleton .cds--tabs__nav-link span::before { - position: absolute; - animation: 3000ms ease-in-out cds--skeleton infinite; - background: var(--cds-skeleton-element, #c6c6c6); - block-size: 100%; - content: ""; - inline-size: 100%; - will-change: transform-origin, transform, opacity; -} -@media (prefers-reduced-motion: reduce) { - .cds--tabs.cds--skeleton .cds--tabs__nav-link span::before { - animation: none; - } -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--tabs__nav-item .cds--tabs__nav-item--selected .cds--tabs__nav-item--selected { - color: Highlight; - outline: 1px solid Highlight; - } -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--tabs .cds--tabs__nav-item--disabled .cds--tabs__nav-link { - color: GrayText; - fill: GrayText; - } -} - -.cds--tile-group html { - font-size: 100%; -} -.cds--tile-group body { - font-weight: 400; - font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; -} -.cds--tile-group code { - font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace; -} -.cds--tile-group strong { - font-weight: 600; -} - -.cds--tile { - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max)); - position: relative; - display: block; - padding: var(--cds-layout-density-padding-inline-local); - background-color: var(--cds-layer); - min-block-size: 4rem; - min-inline-size: 8rem; - outline: 2px solid transparent; - outline-offset: -2px; -} -.cds--tile:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--tile:focus { - outline-style: dotted; - } -} - -.cds--tile--light { - background-color: var(--cds-layer-02, #ffffff); -} - -.cds--tile--clickable, -.cds--tile--selectable { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - padding: var(--cds-layout-density-padding-inline-local); - cursor: pointer; - transition: 150ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -.cds--tile--clickable *, -.cds--tile--clickable *::before, -.cds--tile--clickable *::after, -.cds--tile--selectable *, -.cds--tile--selectable *::before, -.cds--tile--selectable *::after { - box-sizing: inherit; -} -.cds--tile--clickable:hover, -.cds--tile--selectable:hover { - background: var(--cds-layer-hover); -} - -.cds--tile--clickable { - color: var(--cds-text-primary, #161616); - text-decoration: none; -} -.cds--tile--clickable:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; - text-decoration: none; -} -@media screen and (prefers-contrast) { - .cds--tile--clickable:focus { - outline-style: dotted; - } -} -.cds--tile--clickable:hover .cds--tile__checkmark, .cds--tile--clickable:focus .cds--tile__checkmark { - opacity: 1; -} - -.cds--tile--expandable::-moz-focus-inner { - border: 0; -} - -.cds--tile--clickable:hover, -.cds--tile--clickable:active, -.cds--tile--clickable:visited, -.cds--tile--clickable:visited:hover { - color: var(--cds-text-primary, #161616); - text-decoration: none; -} - -.cds--tile--clickable.cds--link--disabled, -.cds--tile--clickable:hover.cds--link--disabled { - display: block; - padding: var(--cds-layout-density-padding-inline-local); - background-color: var(--cds-layer); - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); - cursor: not-allowed; -} - -.cds--tile--clickable .cds--tile--icon, -.cds--tile--clickable.cds--link--disabled .cds--tile--disabled-icon { - position: absolute; - inset-block-end: var(--cds-layout-density-padding-inline-local); - inset-inline-end: var(--cds-layout-density-padding-inline-local); -} - -.cds--tile--clickable .cds--tile--icon { - fill: var(--cds-icon-interactive, #0f62fe); -} - -.cds--tile--clickable.cds--link--disabled .cds--tile--disabled-icon { - fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--tile--clickable.cds--link--disabled .cds--tile--icon { - display: none; -} - -.cds--tile--selectable { - border: 1px solid transparent; - padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem); -} - -.cds--tile__checkmark { - position: absolute; - border: none; - background: transparent; - block-size: 1rem; - inset-block-start: var(--cds-layout-density-padding-inline-local); - inset-inline-end: var(--cds-layout-density-padding-inline-local); - transition: 110ms cubic-bezier(0.2, 0, 0.38, 0.9); - opacity: 0; -} -.cds--tile__checkmark svg { - border-radius: 50%; - fill: var(--cds-icon-secondary, #525252); -} -.cds--tile__checkmark:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--tile__checkmark:focus { - outline-style: dotted; - } -} - -.cds--tile__checkmark--persistent { - opacity: 1; -} - -.cds--tile__chevron { - position: absolute; - display: flex; - align-items: center; - justify-content: center; - block-size: calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem); - inline-size: calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem); - inset-block-end: 0; - inset-inline-end: 0; -} -.cds--tile__chevron svg { - fill: var(--cds-icon-primary, #161616); - transform-origin: center; - transition: 110ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -@media screen and (prefers-reduced-motion: reduce) { - .cds--tile__chevron svg { - transition: none; - } -} -@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) { - .cds--tile__chevron svg { - fill: ButtonText; - } -} - -.cds--tile__chevron--interactive { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: inline-block; - padding: 0; - border: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: none; - cursor: pointer; - text-align: start; - inline-size: 100%; - position: absolute; - display: flex; - align-items: center; - justify-content: center; - block-size: calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem); - inline-size: calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem); - inset-block-end: 0; - inset-inline-end: 0; -} -.cds--tile__chevron--interactive *, -.cds--tile__chevron--interactive *::before, -.cds--tile__chevron--interactive *::after { - box-sizing: inherit; -} -.cds--tile__chevron--interactive::-moz-focus-inner { - border: 0; -} -.cds--tile__chevron--interactive:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -.cds--tile__chevron--interactive:hover { - background-color: var(--cds-layer-hover); - cursor: pointer; -} - -.cds--tile--expandable { - position: relative; - overflow: hidden; - border: 0; - color: inherit; - cursor: pointer; - font-family: inherit; - font-size: inherit; - inline-size: 100%; - text-align: start; - transition: max-height 150ms cubic-bezier(0.2, 0, 0.38, 0.9); - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); -} -.cds--tile--expandable:hover { - background: var(--cds-layer-hover); -} - -.cds--tile--expandable.cds--tile--expandable--interactive { - border: none; - cursor: default; - transition: max-height 150ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -.cds--tile--expandable.cds--tile--expandable--interactive:hover { - background-color: var(--cds-layer); -} -.cds--tile--expandable.cds--tile--expandable--interactive:focus { - outline: none; -} - -.cds--tile--expandable--interactive:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--tile--expandable--interactive:focus { - outline-style: dotted; - } -} - -.cds--tile-content__below-the-fold { - display: block; - opacity: 0; - transition: opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9), visibility 110ms cubic-bezier(0.2, 0, 0.38, 0.9); - visibility: hidden; -} - -.cds--tile--is-expanded { - overflow: visible; - transition: max-height 110ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -.cds--tile--is-expanded .cds--tile__chevron svg { - transform: rotate(180deg); -} -.cds--tile--is-expanded .cds--tile-content__below-the-fold { - opacity: 1; - transition: opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9), visibility 110ms cubic-bezier(0.2, 0, 0.38, 0.9); - visibility: inherit; -} -@media not all and (resolution >= 0.001dpcm) { - @supports (-webkit-appearance: none) and (stroke-color: transparent) { - .cds--tile--is-expanded .cds--tile-content__below-the-fold { - overflow-y: auto; - } - } -} - -.cds--tile--is-selected { - border: 1px solid var(--cds-layer-selected-inverse, #161616); -} - -.cds--tile--is-selected .cds--tile__checkmark { - opacity: 1; -} - -.cds--tile--is-selected .cds--tile__checkmark svg { - fill: var(--cds-icon-primary, #161616); -} -@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) { - .cds--tile--is-selected .cds--tile__checkmark svg { - fill: ButtonText; - } -} - -.cds--tile-content { - block-size: 100%; - inline-size: 100%; -} - -.cds--tile-input { - position: absolute; - overflow: hidden; - padding: 0; - border: 0; - margin: -1px; - block-size: 1px; - clip: rect(0, 0, 0, 0); - inline-size: 1px; - visibility: inherit; - white-space: nowrap; -} - -.cds--tile-input:focus + .cds--tile { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--tile-input:focus + .cds--tile { - outline-style: dotted; - } -} - -.cds--tile--disabled.cds--tile--selectable { - background-color: var(--cds-layer); - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); - cursor: not-allowed; -} - -.cds--tile--disabled.cds--tile--selectable.cds--tile--light { - background-color: var(--cds-layer-02, #ffffff); -} - -.cds--tile--disabled.cds--tile--is-selected { - border-color: var(--cds-border-disabled, #c6c6c6); -} - -.cds--tile--disabled .cds--tile__checkmark svg { - fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--tile > .cds--slug, -.cds--tile--expandable > div > .cds--slug, -.cds--tile--clickable .cds--tile--slug-icon { - position: absolute; - inset-block-start: 1rem; - inset-inline-end: 1rem; -} - -.cds--tile.cds--tile--selectable > .cds--slug { - inset-inline-end: 2.5rem; -} - -.cds--tile.cds--tile--selectable.cds--tile--radio > .cds--slug { - inset-inline-end: 1rem; - transition: inset-inline-end 110ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -.cds--tile.cds--tile--selectable.cds--tile--radio.cds--tile--is-selected > .cds--slug { - inset-inline-end: 2.5rem; -} - -.cds--tile.cds--tile--clickable > .cds--slug { - pointer-events: none; -} - -.cds--tile--slug.cds--tile { - background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box; - border: 1px solid transparent; - box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 4px 8px 0 var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1)); -} - -.cds--tile--slug.cds--tile--expandable:hover { - background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box; -} - -.cds--tile--slug.cds--tile--selectable::before, -.cds--tile--slug.cds--tile--selectable::after, -.cds--tile--slug.cds--tile--clickable::before { - position: absolute; - display: block; - block-size: 100%; - content: ""; - inline-size: 100%; - inset-block-start: 0; - inset-inline-start: 0; - opacity: 0; - transition: opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -.cds--tile--slug.cds--tile--selectable::before, -.cds--tile--slug.cds--tile--clickable::before { - background: linear-gradient(to top, var(--cds-ai-aura-hover-start, rgba(69, 137, 255, 0.32)) 0%, 15%, var(--cds-ai-aura-hover-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-ai-aura-hover-background, #edf5ff), var(--cds-ai-aura-hover-background, #edf5ff)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-ai-aura-hover-background, #edf5ff), var(--cds-ai-aura-hover-background, #edf5ff)) border-box; - box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1)); -} - -.cds--tile--slug.cds--tile--selectable:hover::before, -.cds--tile--slug.cds--tile--clickable:hover::before { - opacity: 1; -} - -.cds--tile--slug.cds--tile--selectable:focus, -.cds--tile--slug.cds--tile--clickable:focus, -.cds--tile-input:focus + .cds--tile--slug.cds--tile { - outline-offset: -1px; -} - -.cds--tile--slug.cds--tile--selectable::after { - background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box, linear-gradient(to bottom, var(--cds-border-inverse, #161616), var(--cds-border-inverse, #161616)) border-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box; - box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 4px 8px 0 var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1)); -} - -.cds--tile--slug.cds--tile--selectable:hover::after { - opacity: 0; -} - -.cds--tile--slug.cds--tile--is-selected::after { - opacity: 1; -} - -.cds--tile--slug.cds--tile--is-selected { - border-color: var(--cds-border-inverse, #161616); -} - -.cds--tile--slug.cds--tile--selectable .cds--tile-content, -.cds--tile--slug.cds--tile--clickable .cds--tile-content { - position: relative; - cursor: pointer; -} - -.cds--tile--slug.cds--tile--selectable .cds--tile-content, -.cds--tile--slug.cds--tile--clickable .cds--tile-content, -.cds--tile--slug.cds--tile--selectable > .cds--tile__checkmark, -.cds--tile--slug.cds--tile--is-selected .cds--slug { - z-index: 1; -} - -.cds--tile--slug.cds--tile--selectable .cds--slug:has(> .cds--popover--open) { - z-index: 2; -} - -.cds--tile--slug.cds--tile--selectable > .cds--slug, -.cds--tile--slug.cds--tile--selectable > .cds--tile__checkmark { - z-index: 1; -} - -.cds--tile--expandable:has(.cds--slug > .cds--popover--open) { - overflow: visible; -} - -.cds--tile--clickable .cds--tile--slug-icon rect { - stroke: var(--cds-icon-primary, #161616); -} - -.cds--tile--clickable .cds--tile--slug-icon path { - fill: var(--cds-icon-primary, #161616); -} - -.cds--tile--slug-rounded, -.cds--tile--slug-rounded.cds--tile--selectable::before, -.cds--tile--slug-rounded.cds--tile--selectable::after, -.cds--tile--slug-rounded.cds--tile--clickable::before { - border-radius: 0.5rem; -} - -.cds--tile--slug-rounded .cds--tile__chevron { - border-end-end-radius: 0.5rem; -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--tile__chevron svg, - .cds--tile__checkmark svg, - .cds--tile--is-selected .cds--tile__checkmark svg { - fill: ButtonText; - } -} - -.cds--time-picker { - display: flex; - align-items: flex-end; -} - -.cds--time-picker__select { - justify-content: center; - margin-inline-start: 0.125rem; -} - -.cds--time-picker__input { - position: relative; - display: flex; - flex-direction: column; -} - -.cds--time-picker__error__icon { - position: absolute; - display: flex; - block-size: 100%; - inset-block-start: 50%; - inset-inline-end: 1rem; - place-items: center; - transform: translateY(-50%); -} - -.cds--time-picker__error__icon .cds--checkbox__invalid-icon { - fill: var(--cds-support-error, #da1e28); -} - -.cds--time-picker .cds--select-input { - margin: 0; - inline-size: auto; - line-height: 1; - min-inline-size: auto; - padding-inline-end: 3rem; -} - -.cds--time-picker__input-field { - outline: 2px solid transparent; - outline-offset: -2px; - font-family: var(--cds-code-02-font-family, 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace); - font-size: var(--cds-code-02-font-size, 0.875rem); - font-weight: var(--cds-code-02-font-weight, 400); - line-height: var(--cds-code-02-line-height, 1.42857); - letter-spacing: var(--cds-code-02-letter-spacing, 0.32px); - display: flex; - align-items: center; - block-size: 2.5rem; - inline-size: 4.875rem; - transition: outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9); -} -.cds--time-picker__input-field::-moz-placeholder { - color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4)); - opacity: 1; -} -.cds--time-picker__input-field::placeholder { - color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4)); - opacity: 1; -} - -.cds--time-picker__input-field-error { - inline-size: 6.175rem; -} - -.cds--time-picker--light .cds--select-input { - background-color: var(--cds-field-02, #ffffff); -} -.cds--time-picker--light .cds--select-input:hover { - background-color: var(--cds-field-hover); -} -.cds--time-picker--light .cds--select-input:disabled, .cds--time-picker--light .cds--select-input:hover:disabled { - background-color: transparent; - border-block-end: 1px solid transparent; - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); - cursor: not-allowed; -} - -.cds--time-picker--sm .cds--select-input, -.cds--time-picker--sm .cds--time-picker__input-field { - block-size: 2rem; - max-block-size: 2rem; -} - -.cds--time-picker--lg .cds--select-input, -.cds--time-picker--lg .cds--time-picker__input-field { - block-size: 3rem; - max-block-size: 3rem; -} - -.cds--time-picker--readonly .cds--time-picker__input-field { - background-color: transparent; - border-block-end-color: var(--cds-border-subtle); -} - -.cds--time-picker--readonly .cds--select-input { - background-color: transparent; - border-block-end-color: var(--cds-border-subtle); - cursor: default; -} - -.cds--time-picker--readonly .cds--select-input + .cds--select__arrow { - fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--toggle { - display: inline-block; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} - -.cds--toggle__label-text { - font-size: var(--cds-label-01-font-size, 0.75rem); - font-weight: var(--cds-label-01-font-weight, 400); - line-height: var(--cds-label-01-line-height, 1.33333); - letter-spacing: var(--cds-label-01-letter-spacing, 0.32px); - display: block; - color: var(--cds-text-secondary, #525252); - margin-block-end: 1rem; -} - -.cds--toggle__button { - position: absolute; - overflow: hidden; - padding: 0; - border: 0; - margin: -1px; - block-size: 1px; - clip: rect(0, 0, 0, 0); - inline-size: 1px; - visibility: inherit; - white-space: nowrap; -} -.cds--toggle__button:focus { - outline: none; -} - -.cds--toggle__appearance { - display: inline-grid; - align-items: center; - -moz-column-gap: 0.5rem; - column-gap: 0.5rem; - cursor: pointer; - grid-template-columns: max-content max-content; -} - -.cds--toggle__switch { - position: relative; - border-radius: 0.75rem; - background-color: var(--cds-toggle-off, #8d8d8d); - block-size: 1.5rem; - inline-size: 3rem; - transition: background-color 70ms cubic-bezier(0.2, 0, 1, 0.9); -} -.cds--toggle__switch::before { - position: absolute; - border-radius: 50%; - background-color: var(--cds-icon-on-color, #ffffff); - block-size: 1.125rem; - content: ""; - inline-size: 1.125rem; - inset-block-start: 0.1875rem; - inset-inline-start: 0.1875rem; - transition: transform 70ms cubic-bezier(0.2, 0, 1, 0.9); -} -@media screen and (prefers-reduced-motion: reduce) { - .cds--toggle__switch::before { - transition: none; - } -} - -.cds--toggle__button:focus + .cds--toggle__label .cds--toggle__switch, -.cds--toggle:not(.cds--toggle--disabled):active .cds--toggle__switch { - box-shadow: 0 0 0 1px var(--cds-focus-inset, #ffffff), 0 0 0 3px var(--cds-focus, #0f62fe); -} - -.cds--toggle__switch--checked { - background-color: var(--cds-support-success, #24a148); -} -.cds--toggle__switch--checked::before { - transform: translateX(1.5rem); -} - -.cds--toggle__text { - font-size: var(--cds-body-01-font-size, 0.875rem); - font-weight: var(--cds-body-01-font-weight, 400); - line-height: var(--cds-body-01-line-height, 1.42857); - letter-spacing: var(--cds-body-01-letter-spacing, 0.16px); - color: var(--cds-text-primary, #161616); -} - -.cds--toggle__appearance--sm .cds--toggle__switch { - block-size: 1rem; - inline-size: 2rem; -} -.cds--toggle__appearance--sm .cds--toggle__switch::before { - block-size: 0.625rem; - inline-size: 0.625rem; -} - -.cds--toggle__appearance--sm .cds--toggle__switch--checked::before { - transform: translateX(1rem); -} - -.cds--toggle__check { - position: absolute; - block-size: 0.3125rem; - fill: var(--cds-support-success, #24a148); - inline-size: 0.375rem; - inset-block-start: 0.375rem; - inset-inline-end: 0.3125rem; - visibility: hidden; -} - -.cds--toggle__switch--checked .cds--toggle__check { - visibility: visible; -} - -.cds--toggle--disabled .cds--toggle__appearance { - cursor: not-allowed; -} - -.cds--toggle--disabled .cds--toggle__label-text, -.cds--toggle--disabled .cds--toggle__text { - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--toggle--disabled .cds--toggle__switch { - background-color: var(--cds-button-disabled, #c6c6c6); -} -.cds--toggle--disabled .cds--toggle__switch::before { - background-color: var(--cds-icon-on-color-disabled, #8d8d8d); -} - -.cds--toggle--disabled .cds--toggle__check { - fill: var(--cds-button-disabled, #c6c6c6); -} - -.cds--toggle--readonly .cds--toggle__appearance { - cursor: default; -} - -.cds--toggle--readonly .cds--toggle__switch { - border: 1px solid var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); - background-color: transparent; -} -.cds--toggle--readonly .cds--toggle__switch::before { - background-color: var(--cds-text-primary, #161616); - inset-block-start: 0.125rem; - inset-inline-start: 0.125rem; -} - -.cds--toggle--readonly .cds--toggle__check { - fill: var(--cds-background, #ffffff); - inset-block-start: 0.3125rem; - inset-inline-end: 0.25rem; -} - -.cds--toggle--readonly .cds--toggle__text { - cursor: text; - -webkit-user-select: text; - -moz-user-select: text; - user-select: text; -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--toggle__switch, - .cds--toggle__switch::before { - outline: 1px solid transparent; - } -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--toggle__button:focus + .cds--toggle__label .cds--toggle__switch, - .cds--toggle:not(.cds--toggle--disabled):active .cds--toggle__switch { - color: Highlight; - outline: 1px solid Highlight; - } -} - -.cds--toggle--skeleton { - display: flex; - align-items: center; -} - -.cds--toggle--skeleton .cds--toggle__skeleton-circle { - position: relative; - overflow: hidden; - border-radius: 50%; - background: var(--cds-skeleton-background, #e8e8e8); - border-radius: 50%; - block-size: 1.125rem; - inline-size: 1.125rem; -} -.cds--toggle--skeleton .cds--toggle__skeleton-circle::before { - position: absolute; - animation: 3000ms ease-in-out cds--skeleton infinite; - background: var(--cds-skeleton-element, #c6c6c6); - block-size: 100%; - content: ""; - inline-size: 200%; - will-change: transform-origin, transform, opacity; -} -@media (prefers-reduced-motion: reduce) { - .cds--toggle--skeleton .cds--toggle__skeleton-circle::before { - animation: none; - } -} - -.cds--toggle--skeleton .cds--toggle__skeleton-rectangle { - position: relative; - padding: 0; - border: none; - background: var(--cds-skeleton-background, #e8e8e8); - box-shadow: none; - pointer-events: none; - block-size: 0.5rem; - inline-size: 1.5rem; - margin-inline-start: 0.5rem; -} -.cds--toggle--skeleton .cds--toggle__skeleton-rectangle:hover, .cds--toggle--skeleton .cds--toggle__skeleton-rectangle:focus, .cds--toggle--skeleton .cds--toggle__skeleton-rectangle:active { - border: none; - cursor: default; - outline: none; -} -.cds--toggle--skeleton .cds--toggle__skeleton-rectangle::before { - position: absolute; - animation: 3000ms ease-in-out cds--skeleton infinite; - background: var(--cds-skeleton-element, #c6c6c6); - block-size: 100%; - content: ""; - inline-size: 100%; - will-change: transform-origin, transform, opacity; -} -@media (prefers-reduced-motion: reduce) { - .cds--toggle--skeleton .cds--toggle__skeleton-rectangle::before { - animation: none; - } -} - -[dir=rtl] .cds--toggle__switch--checked::before { - transform: translateX(-1.5rem); -} - -[dir=rtl] .cds--toggle__appearance--sm .cds--toggle__switch--checked::before { - transform: translateX(-1rem); -} - -.cds--tree { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - overflow: hidden; -} -.cds--tree *, -.cds--tree *::before, -.cds--tree *::after { - box-sizing: inherit; -} - -.cds--tree-node { - background-color: var(--cds-layer-01, #f4f4f4); - color: var(--cds-text-secondary, #525252); - padding-inline-start: 1rem; -} -.cds--tree-node:focus { - outline: none; -} -.cds--tree-node:hover { - cursor: pointer; -} - -.cds--tree-node__children { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - list-style-type: none; -} -.cds--tree-node__children *, -.cds--tree-node__children *::before, -.cds--tree-node__children *::after { - box-sizing: inherit; -} - -.cds--tree-node--with-icon .cds--tree-node { - margin-inline-start: 0.5rem; -} - -.cds--tree-node:focus > .cds--tree-node__label { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--tree-node:focus > .cds--tree-node__label { - outline-style: dotted; - } -} - -.cds--tree-node--disabled:focus > .cds--tree-node__label { - outline: none; -} - -.cds--tree-node--disabled, -.cds--tree-node--disabled .cds--tree-node__label:hover, -.cds--tree-node--disabled .cds--tree-node__label:hover .cds--tree-node__label__details { - background-color: var(--cds-field-01, #f4f4f4); - color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--tree-node--disabled .cds--tree-parent-node__toggle-icon, -.cds--tree-node--disabled .cds--tree-node__icon, -.cds--tree-node--disabled .cds--tree-node__label:hover .cds--tree-parent-node__toggle-icon, -.cds--tree-node--disabled .cds--tree-node__label:hover .cds--tree-node__icon { - fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25)); -} - -.cds--tree-node--disabled, -.cds--tree-node--disabled .cds--tree-parent-node__toggle-icon:hover { - cursor: not-allowed; -} - -.cds--tree-node__label { - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - display: flex; - flex: 1 1; - align-items: center; - min-block-size: 2rem; -} -.cds--tree-node__label:hover { - background-color: var(--cds-layer-hover-01, #e8e8e8); - color: var(--cds-text-primary, #161616); -} - -.cds--tree-node:not(.cds--tree-parent-node) .cds--tree-node__label { - padding-block-end: 0.4375rem; - padding-block-start: 0.4375rem; -} - -.cds--tree-node__label:hover .cds--tree-node__label__details { - color: var(--cds-text-primary, #161616); -} - -.cds--tree-node__label:hover .cds--tree-parent-node__toggle-icon, -.cds--tree-node__label:hover .cds--tree-node__icon { - fill: var(--cds-icon-primary, #161616); -} - -.cds--tree-leaf-node { - display: flex; - padding-inline-start: 2.5rem; -} - -.cds--tree-leaf-node.cds--tree-node--with-icon { - padding-inline-start: 2rem; -} - -.cds--tree-leaf-node.cds--tree-node--with-icon .cds--tree-leaf-node { - padding-inline-start: 1.5rem; -} - -.cds--tree-node__label__details { - display: flex; - align-items: center; -} - -.cds--tree-node--with-icon .cds--tree-parent-node__toggle { - margin-inline-end: 0; -} - -.cds--tree-parent-node__toggle { - display: flex; - align-items: center; - align-self: flex-start; - border: 0; - block-size: 1.5rem; - inline-size: 1.5rem; - margin-block-start: 0.25rem; - margin-inline-end: 0.25rem; - margin-inline-start: -0.25rem; - padding-inline-start: 0.25rem; -} -.cds--tree-parent-node__toggle:hover { - cursor: pointer; -} -.cds--tree-parent-node__toggle:focus { - outline: none; -} - -.cds--tree-parent-node__toggle-icon { - fill: var(--cds-icon-secondary, #525252); - transform: rotate(-90deg); - transition: all 110ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -.cds--tree-parent-node__toggle-icon--expanded { - transform: rotate(0); -} - -.cds--tree-node__icon { - align-self: flex-start; - fill: var(--cds-icon-secondary, #525252); - margin-block-start: 0.0625rem; - margin-inline-end: 0.5rem; - margin-inline-start: 0.5rem; - min-block-size: 1rem; - min-inline-size: 1rem; -} - -.cds--tree-parent-node__toggle + .cds--tree-node__label__details .cds--tree-node__icon { - margin-inline-start: 0.25rem; -} - -.cds--tree-node--selected > .cds--tree-node__label { - background-color: var(--cds-layer-selected-01, #e0e0e0); - color: var(--cds-text-primary, #161616); -} -.cds--tree-node--selected > .cds--tree-node__label:hover { - background-color: var(--cds-layer-selected-hover-01, #d1d1d1); -} - -.cds--tree-node--selected > .cds--tree-node__label .cds--tree-parent-node__toggle-icon, -.cds--tree-node--selected > .cds--tree-node__label .cds--tree-node__icon { - fill: var(--cds-icon-primary, #161616); -} - -.cds--tree-node--active > .cds--tree-node__label { - position: relative; -} -.cds--tree-node--active > .cds--tree-node__label::before { - position: absolute; - background-color: var(--cds-interactive, #0f62fe); - block-size: 100%; - content: ""; - inline-size: 0.25rem; - inset-block-start: 0; - inset-inline-start: 0; -} - -.cds--tree--xs .cds--tree-node__label { - min-block-size: 1.5rem; -} - -.cds--tree--xs .cds--tree-node:not(.cds--tree-parent-node) .cds--tree-node__label { - padding: 0; -} - -.cds--tree--xs .cds--tree-parent-node__toggle { - margin-block-start: 0; -} - -.cds--content { - padding: 2rem; - color: var(--cds-text-primary, #161616); - will-change: margin-left; -} - -.cds--header ~ .cds--content, -div:has(.cds--header) ~ .cds--content { - margin-block-start: 3rem; -} - -.cds--side-nav ~ .cds--content { - margin-inline-start: 3rem; -} - -.cds--side-nav.cds--side-nav--expanded ~ .cds--content { - margin-inline-start: 16rem; -} - -.cds--header { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - position: fixed; - z-index: 8000; - display: flex; - align-items: center; - background-color: var(--cds-background, #ffffff); - block-size: 3rem; - border-block-end: 1px solid var(--cds-border-subtle); - inset-block-start: 0; - inset-inline-end: 0; - inset-inline-start: 0; -} -.cds--header *, -.cds--header *::before, -.cds--header *::after { - box-sizing: inherit; -} - -.cds--header__action { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: inline-block; - padding: 0; - border: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: none; - cursor: pointer; - text-align: start; - inline-size: 100%; - display: inline-flex; - border: 0.0625rem solid transparent; - block-size: 3rem; - inline-size: 3rem; - transition: background-color 110ms, border-color 110ms; -} -.cds--header__action *, -.cds--header__action *::before, -.cds--header__action *::after { - box-sizing: inherit; -} -.cds--header__action::-moz-focus-inner { - border: 0; -} -@media (max-width: 41.98rem) { - .cds--header__action { - min-inline-size: 3rem; - } -} - -.cds--header__global .cds--popover { - z-index: 8001; -} - -.cds--header__action > :first-child { - margin-block-start: 0; -} - -.cds--header__action > svg.cds--navigation-menu-panel-collapse-icon, -.cds--header__action--active > svg.cds--navigation-menu-panel-expand-icon { - display: none; -} - -.cds--header__action--active > svg.cds--navigation-menu-panel-collapse-icon { - display: inline; -} - -.cds--header__action:hover { - background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12)); -} - -.cds--header__action--active { - background: var(--cds-layer); - border-block-end: 1px solid transparent; - border-inline-end: 1px solid var(--cds-border-subtle); - border-inline-start: 1px solid var(--cds-border-subtle); -} - -.cds--header__action--active > svg { - fill: var(--cds-icon-primary, #161616); -} - -.cds--header__action:focus { - border-color: var(--cds-focus, #0f62fe); - outline: none; -} - -.cds--header__action:active { - background-color: var(--cds-background-active, rgba(141, 141, 141, 0.5)); -} - -.cds--header__action.cds--btn--icon-only { - align-items: center; - justify-content: center; -} - -.cds--btn.cds--btn--icon-only.cds--header__action svg { - fill: var(--cds-icon-secondary, #525252); -} - -.cds--btn.cds--btn--icon-only.cds--header__action:hover svg, -.cds--btn.cds--btn--icon-only.cds--header__action:active svg, -.cds--btn.cds--btn--icon-only.cds--header__action--active svg { - fill: var(--cds-icon-primary, #161616); -} - -.cds--header__menu-trigger > svg { - fill: var(--cds-icon-primary, #161616); -} - -.cds--header__menu-trigger:hover > svg { - fill: var(--cds-icon-primary, #161616); -} - -.cds--header__menu-toggle { - display: flex; - align-items: center; - justify-content: center; -} - -@media (min-width: 66rem) { - .cds--header__menu-toggle__hidden { - display: none; - } -} - -a.cds--header__name { - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - display: flex; - align-items: center; - padding: 0 2rem 0 1rem; - border: 0.125rem solid transparent; - block-size: 100%; - font-weight: 600; - letter-spacing: 0.1px; - line-height: 1.25rem; - outline: none; - text-decoration: none; - transition: border-color 110ms; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} -@media (max-width: 41.98rem) { - a.cds--header__name { - padding: 0 1rem; - } -} - -a.cds--header__name:focus { - border-color: var(--cds-focus, #0f62fe); -} - -.cds--header__name--prefix { - font-weight: 400; -} - -a.cds--header__name, -a.cds--header__name:hover { - color: var(--cds-text-primary, #161616); -} - -.cds--header__menu-toggle:not(.cds--header__menu-toggle__hidden) ~ .cds--header__name { - padding-inline-start: 0.5rem; -} - -.cds--header__nav { - position: relative; - display: none; - block-size: 100%; - padding-inline-start: 1rem; -} -@media (min-width: 66rem) { - .cds--header__nav { - display: block; - } -} -.cds--header__nav::before { - position: absolute; - display: block; - background-color: var(--cds-border-subtle); - block-size: 1.5rem; - content: ""; - inline-size: 0.0625rem; - inset-block-start: 50%; - inset-inline-start: 0; - transform: translateY(-50%); -} - -.cds--header__menu-bar { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: flex; - padding: 0; - margin: 0; - block-size: 100%; - list-style: none; -} -.cds--header__menu-bar *, -.cds--header__menu-bar *::before, -.cds--header__menu-bar *::after { - box-sizing: inherit; -} - -a.cds--header__menu-item { - position: relative; - display: flex; - align-items: center; - padding: 0 1rem; - border: 2px solid transparent; - background-color: var(--cds-background, #ffffff); - block-size: 100%; - color: var(--cds-text-secondary, #525252); - font-size: 0.875rem; - font-weight: 400; - letter-spacing: 0; - line-height: 1.125rem; - text-decoration: none; - transition: background-color 110ms, border-color 110ms, color 110ms; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} - -a.cds--header__menu-item:hover { - background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12)); - color: var(--cds-text-primary, #161616); -} - -.cds--header__action:active, -a.cds--header__menu-item:active { - background-color: var(--cds-background-active, rgba(141, 141, 141, 0.5)); - color: var(--cds-text-primary, #161616); -} - -a.cds--header__menu-item:focus { - border-color: var(--cds-focus, #0f62fe); - outline: none; -} - -a.cds--header__menu-item:hover > svg, -a.cds--header__menu-item:active > svg { - fill: var(--cds-icon-primary, #161616); -} - -a.cds--header__menu-item[aria-current=page], -.cds--header__menu-item--current { - color: var(--cds-text-primary, #161616); -} - -a.cds--header__menu-item[aria-current=page]::after, -.cds--header__menu-item--current::after { - position: absolute; - background-color: var(--cds-border-interactive, #0f62fe); - block-size: 3px; - content: ""; - inline-size: calc(100% + 4px); - inset-block-end: -2px; - inset-inline-start: -2px; -} - -a.cds--header__menu-item[aria-current=page]:focus::after, -.cds--header__menu-item--current:focus::after { - border: 0; -} - -.cds--header__submenu .cds--header__menu a.cds--header__menu-item[aria-current=page]::after, -.cds--header__submenu .cds--header__menu .cds--header__menu-item--current::after { - background-color: var(--cds-border-interactive, #0f62fe); - block-size: calc(100% + 4px); - inline-size: 3px; - inset-block-start: -2px; - inset-inline-start: -2px; -} -.cds--header__submenu .cds--header__menu a.cds--header__menu-item[aria-current=page]:focus::after, -.cds--header__submenu .cds--header__menu .cds--header__menu-item--current:focus::after { - background-color: var(--cds-border-interactive, #0f62fe); - block-size: calc(100% + 4px); - inline-size: 5px; - inset-block-start: -2px; - inset-inline-start: -2px; -} - -a.cds--header__menu-item[aria-current=page]:focus, -a.cds--header__menu-item.cds--header__menu-item--current:focus { - border: 2px solid var(--cds-focus, #0f62fe); -} - -.cds--header__submenu { - position: relative; -} - -.cds--header__menu-title[aria-haspopup=true] { - position: relative; -} - -.cds--header__menu-title[aria-expanded=true] { - z-index: 8002; - background-color: var(--cds-layer); - color: var(--cds-text-secondary, #525252); -} - -.cds--header__menu-title[aria-expanded=true] > .cds--header__menu-arrow { - transform: rotate(180deg); -} - -.cds--header__menu { - display: none; - padding: 0; - margin: 0; - list-style: none; -} - -.cds--header__menu-title[aria-expanded=true] + .cds--header__menu { - position: absolute; - z-index: 8001; - display: flex; - flex-direction: column; - background-color: var(--cds-layer); - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5); - inline-size: 12.5rem; - inset-block-end: 0; - inset-inline-start: 0; - transform: translateY(100%); -} - -.cds--header__menu-title[aria-expanded=true] + .cds--header__menu .cds--header__menu-item { - background-color: var(--cds-layer); -} - -.cds--header__menu-title[aria-expanded=true] + .cds--header__menu .cds--header__menu-item:hover { - background-color: var(--cds-layer-hover); - color: var(--cds-text-primary, #161616); -} - -.cds--header__menu-title[aria-expanded=true] + .cds--header__menu .cds--header__menu-item:active { - background-color: var(--cds-layer-active); - color: var(--cds-text-primary, #161616); -} - -.cds--header__menu-title[aria-expanded=true] + .cds--header__menu .cds--header__menu-item.cds--header__menu-item--current { - background-color: var(--cds-layer-selected); -} -.cds--header__menu-title[aria-expanded=true] + .cds--header__menu .cds--header__menu-item.cds--header__menu-item--current:hover { - background-color: var(--cds-layer-selected-hover); -} - -.cds--header__menu .cds--header__menu-item { - block-size: 3rem; -} - -.cds--header__menu-arrow { - fill: var(--cds-icon-secondary, #525252); - margin-inline-start: 0.5rem; - transition: transform 110ms, fill 110ms; -} - -.cds--header__global { - display: flex; - flex: 1 1; - justify-content: flex-end; - block-size: 100%; -} - -.cds--skip-to-content { - position: absolute; - overflow: hidden; - padding: 0; - border: 0; - margin: -1px; - block-size: 1px; - clip: rect(0, 0, 0, 0); - inline-size: 1px; - visibility: inherit; - white-space: nowrap; -} - -.cds--skip-to-content:focus { - z-index: 9999; - display: flex; - align-items: center; - padding: 0 1rem; - border: 4px solid var(--cds-focus, #0f62fe); - background-color: var(--cds-background, #ffffff); - block-size: 3rem; - clip: auto; - color: var(--cds-text-secondary, #525252); - inline-size: auto; - inset-block-start: 0; - inset-inline-start: 0; - outline: none; -} - -.cds--header-panel { - position: fixed; - z-index: 8000; - overflow: hidden; - border: none; - background-color: var(--cds-layer); - color: var(--cds-text-secondary, #525252); - inline-size: 0; - inset-block-end: 0; - inset-block-start: 3rem; - inset-inline-end: 0; - transition: width 110ms cubic-bezier(0.2, 0, 1, 0.9); - will-change: width; -} - -.cds--header-panel--expanded { - border-inline-end: 1px solid var(--cds-border-subtle); - border-inline-start: 1px solid var(--cds-border-subtle); - inline-size: 16rem; -} - -.cds--side-nav { - position: fixed; - z-index: 8000; - overflow: hidden; - background-color: var(--cds-background, #ffffff); - color: var(--cds-text-secondary, #525252); - inline-size: 3rem; - inset-block-end: 0; - inset-block-start: 0; - inset-inline-start: 0; - max-inline-size: 16rem; - transition: inline-size 0.11s cubic-bezier(0.2, 0, 1, 0.9), transform 0.11s cubic-bezier(0.2, 0, 1, 0.9); - will-change: inline-size; -} - -.cds--side-nav--ux { - inline-size: 16rem; - inset-block-start: 3rem; -} -@media (max-width: 65.98rem) { - .cds--side-nav--ux { - inline-size: 0; - } -} - -.cds--side-nav--rail { - inline-size: 3rem; -} - -.cds--side-nav--hidden { - inline-size: 0; -} - -.cds--side-nav--expanded { - inline-size: 16rem; -} - -.cds--side-nav__overlay { - position: fixed; - background-color: transparent; - block-size: 0; - inline-size: 0; - inset-block-start: 3rem; - inset-inline-start: 0; - opacity: 0; - transition: opacity 300ms cubic-bezier(0.5, 0, 0.1, 1), background-color 300ms cubic-bezier(0.5, 0, 0.1, 1); -} - -@media (max-width: 65.98rem) { - .cds--side-nav__overlay-active { - z-index: 6000; - background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5)); - block-size: 100vh; - inline-size: 100vw; - opacity: 1; - transition: opacity 300ms cubic-bezier(0.5, 0, 0.1, 1), background-color 300ms cubic-bezier(0.5, 0, 0.1, 1); - } -} - -.cds--header ~ .cds--side-nav { - block-size: calc(100% - 48px); - inset-block-start: 3rem; -} - -.cds--side-nav--fixed { - inline-size: 16rem; -} - -.cds--side-nav--collapsed { - inline-size: 16rem; - transform: translateX(-16rem); -} - -.cds--side-nav__navigation { - display: flex; - flex-direction: column; -} - -.cds--side-nav__items { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - overflow: hidden; - flex: 1 1; - padding: 1rem 0 0; -} -.cds--side-nav__items *, -.cds--side-nav__items *::before, -.cds--side-nav__items *::after { - box-sizing: inherit; -} -.cds--side-nav:hover .cds--side-nav__items, .cds--side-nav--fixed .cds--side-nav__items, .cds--side-nav--expanded .cds--side-nav__items { - overflow-y: auto; -} - -.cds--side-nav--ux .cds--side-nav__items { - overflow-y: auto; -} - -.cds--side-nav__item { - overflow: hidden; - block-size: auto; - inline-size: auto; -} - -.cds--side-nav--ux .cds--side-nav__item { - block-size: auto; - inline-size: auto; -} - -.cds--side-nav__item:not(.cds--side-nav__item--active):hover .cds--side-nav__item:not(.cds--side-nav__item--active) > .cds--side-nav__submenu:hover, -.cds--side-nav__item:not(.cds--side-nav__item--active) > .cds--side-nav__link:hover, -.cds--side-nav__menu a.cds--side-nav__link:not(.cds--side-nav__link--current):not([aria-current=page]):hover, -.cds--side-nav a.cds--header__menu-item:hover, -.cds--side-nav .cds--header__menu-title[aria-expanded=true]:hover { - background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12)); - color: var(--cds-text-primary, #161616); -} - -.cds--side-nav__item:not(.cds--side-nav__item--active) > .cds--side-nav__link:hover > span, -.cds--side-nav__item:not(.cds--side-nav__item--active) .cds--side-nav__menu-item > .cds--side-nav__link:hover > span { - color: var(--cds-text-primary, #161616); -} - -.cds--side-nav__item--large { - block-size: auto; -} - -.cds--side-nav__divider { - margin: 0.5rem 1rem; - background-color: var(--cds-border-subtle); - block-size: 1px; - list-style-type: none; -} - -.cds--side-nav__divider hr { - border: none; -} - -.cds--side-nav__submenu { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: inline-block; - padding: 0; - border: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: none; - cursor: pointer; - text-align: start; - inline-size: 100%; - font-size: var(--cds-heading-compact-01-font-size, 0.875rem); - font-weight: var(--cds-heading-compact-01-font-weight, 600); - line-height: var(--cds-heading-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px); - outline: 2px solid transparent; - outline-offset: -2px; - display: flex; - align-items: center; - padding: 0 1rem; - block-size: 2rem; - color: var(--cds-text-secondary, #525252); - transition: color 110ms, background-color 110ms, outline 110ms; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} -.cds--side-nav__submenu *, -.cds--side-nav__submenu *::before, -.cds--side-nav__submenu *::after { - box-sizing: inherit; -} -.cds--side-nav__submenu::-moz-focus-inner { - border: 0; -} - -.cds--side-nav__submenu:hover { - background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12)); - color: var(--cds-text-primary, #161616); -} - -.cds--side-nav__submenu:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--side-nav__submenu:focus { - outline-style: dotted; - } -} - -.cds--side-nav__submenu-title { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - text-align: start; -} - -.cds--side-nav__icon.cds--side-nav__submenu-chevron { - display: flex; - flex: 1 1; - justify-content: flex-end; -} - -.cds--side-nav__submenu-chevron > svg { - block-size: 1rem; - inline-size: 1rem; - transition: transform 110ms; -} - -.cds--side-nav__submenu[aria-expanded=true] .cds--side-nav__submenu-chevron > svg { - transform: rotate(180deg); -} - -.cds--side-nav__item--large .cds--side-nav__submenu { - block-size: 3rem; -} - -.cds--side-nav__item--active .cds--side-nav__submenu:hover { - background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2)); - color: var(--cds-text-primary, #161616); -} - -.cds--side-nav__item--active .cds--side-nav__submenu[aria-expanded=false] { - position: relative; - background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2)); - color: var(--cds-text-primary, #161616); -} -.cds--side-nav__item--active .cds--side-nav__submenu[aria-expanded=false]::before { - position: absolute; - background-color: var(--cds-border-interactive, #0f62fe); - content: ""; - inline-size: 3px; - inset-block-end: 0; - inset-block-start: 0; - inset-inline-start: 0; -} - -.cds--side-nav__item--active .cds--side-nav__submenu-title { - color: var(--cds-text-primary, #161616); - font-weight: 600; -} - -.cds--side-nav__item--active .cds--side-nav__icon > svg { - fill: var(--cds-icon-primary, #161616); -} - -.cds--side-nav__menu { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: block; - max-block-size: 0; - visibility: hidden; -} -.cds--side-nav__menu *, -.cds--side-nav__menu *::before, -.cds--side-nav__menu *::after { - box-sizing: inherit; -} - -.cds--side-nav__submenu[aria-expanded=true] + .cds--side-nav__menu { - max-block-size: 93.75rem; - visibility: inherit; -} - -.cds--side-nav__menu a.cds--side-nav__link { - block-size: 2rem; - font-weight: 400; - min-block-size: 2rem; - padding-inline-start: 2rem; -} - -.cds--side-nav__item.cds--side-nav__item--icon a.cds--side-nav__link { - padding-inline-start: 4.5rem; -} - -.cds--side-nav__menu a.cds--side-nav__link--current, -.cds--side-nav__menu a.cds--side-nav__link[aria-current=page], -a.cds--side-nav__link--current { - background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2)); -} -.cds--side-nav__menu a.cds--side-nav__link--current > span, -.cds--side-nav__menu a.cds--side-nav__link[aria-current=page] > span, -a.cds--side-nav__link--current > span { - color: var(--cds-text-primary, #161616); - font-weight: 600; -} - -a.cds--side-nav__link, -.cds--side-nav a.cds--header__menu-item, -.cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu { - outline: 2px solid transparent; - outline-offset: -2px; - font-size: var(--cds-heading-compact-01-font-size, 0.875rem); - font-weight: var(--cds-heading-compact-01-font-weight, 600); - line-height: var(--cds-heading-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px); - position: relative; - display: flex; - align-items: center; - padding: 0 1rem; - min-block-size: 2rem; - text-decoration: none; - transition: color 110ms, background-color 110ms, outline 110ms; -} - -.cds--side-nav__item--large a.cds--side-nav__link { - block-size: 3rem; -} - -a.cds--side-nav__link > .cds--side-nav__link-text, -.cds--side-nav a.cds--header__menu-item .cds--text-truncate-end { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - color: var(--cds-text-secondary, #525252); - font-size: 0.875rem; - letter-spacing: 0.1px; - line-height: 1.25rem; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} - -a.cds--side-nav__link:focus, -.cds--side-nav a.cds--header__menu-item:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - a.cds--side-nav__link:focus, - .cds--side-nav a.cds--header__menu-item:focus { - outline-style: dotted; - } -} - -a.cds--side-nav__link[aria-current=page], -a.cds--side-nav__link--current { - background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2)); - font-weight: 600; -} - -a.cds--side-nav__link[aria-current=page] .cds--side-nav__link-text, -a.cds--side-nav__link--current .cds--side-nav__link-text { - color: var(--cds-text-primary, #161616); -} - -a.cds--side-nav__link[aria-current=page]::before, -a.cds--side-nav__link--current::before { - position: absolute; - background-color: var(--cds-border-interactive, #0f62fe); - content: ""; - inline-size: 3px; - inset-block-end: 0; - inset-block-start: 0; - inset-inline-start: 0; -} - -.cds--side-nav__icon { - display: flex; - flex: 0 0 1rem; - align-items: center; - justify-content: center; -} - -.cds--side-nav__icon:not(.cds--side-nav__submenu-chevron) { - margin-inline-end: 1.5rem; -} - -.cds--side-nav__icon > svg { - block-size: 1rem; - fill: var(--cds-icon-secondary, #525252); - inline-size: 1rem; -} - -.cds--side-nav__icon > svg.cds--side-nav-collapse-icon { - display: none; -} - -.cds--side-nav--expanded .cds--side-nav__icon > svg.cds--side-nav-expand-icon { - display: none; -} - -.cds--side-nav--expanded .cds--side-nav__icon > svg.cds--side-nav-collapse-icon { - display: block; -} - -.cds--side-nav--fixed a.cds--side-nav__link, -.cds--side-nav--fixed .cds--side-nav__submenu { - padding-inline-start: 1rem; -} - -.cds--side-nav--fixed .cds--side-nav__item:not(.cds--side-nav__item--icon) .cds--side-nav__menu a.cds--side-nav__link { - padding-inline-start: 2rem; -} - -@media (max-width: 65.98rem) { - .cds--side-nav .cds--header__nav { - display: block; - } -} - -.cds--side-nav__header-navigation { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: none; -} -.cds--side-nav__header-navigation *, -.cds--side-nav__header-navigation *::before, -.cds--side-nav__header-navigation *::after { - box-sizing: inherit; -} -@media (max-width: 65.98rem) { - .cds--side-nav__header-navigation { - position: relative; - display: block; - margin-block-end: 2rem; - } -} - -.cds--side-nav__header-divider::after { - position: absolute; - background: var(--cds-border-subtle); - block-size: 0.0625rem; - content: ""; - inline-size: calc(100% - 32px); - inset-block-end: -1rem; - inset-inline-start: 1rem; -} - -.cds--side-nav a.cds--header__menu-item { - justify-content: space-between; - color: var(--cds-text-secondary, #525252); - white-space: nowrap; -} -.cds--side-nav a.cds--header__menu-item[aria-expanded=true] { - background-color: transparent; -} - -.cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu { - padding: 0; - background-color: transparent; - box-shadow: none; - inline-size: 100%; - inset-block-end: inherit; - transform: none; -} -.cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu li { - inline-size: 100%; -} -.cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu a.cds--header__menu-item { - font-weight: 400; - padding-inline-start: 4.25rem; -} -.cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu a.cds--header__menu-item:hover { - background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12)); - color: var(--cds-text-primary, #161616); -} -.cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu a.cds--header__menu-item--current:hover { - background-color: var(--cds-layer-selected-hover); -} - -.cds--side-nav .cds--side-nav__header-navigation a.cds--header__menu-item[aria-current=page]::after, -.cds--side-nav .cds--side-nav__header-navigation .cds--header__menu-item--current::after { - block-size: calc(100% + 4px); - inline-size: 3px; -} - -.cds--side-nav .cds--header__menu a.cds--header__menu-item { - block-size: inherit; -} - -.cds--side-nav a.cds--header__menu-item:hover .cds--header__menu-arrow, -.cds--side-nav a.cds--header__menu-item:focus .cds--header__menu-arrow, -.cds--side-nav .cds--header__menu-arrow { - fill: var(--cds-icon-secondary, #525252); -} - -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--side-nav__icon > svg, - .cds--side-nav a.cds--header__menu-item:hover .cds--header__menu-arrow, - .cds--side-nav a.cds--header__menu-item:focus .cds--header__menu-arrow, - .cds--side-nav .cds--header__menu-arrow { - fill: ButtonText; - } -} - -.cds--switcher { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - color: var(--cds-text-secondary, #525252); -} -.cds--switcher *, -.cds--switcher *::before, -.cds--switcher *::after { - box-sizing: inherit; -} - -.cds--switcher__item { - block-size: 2rem; - inline-size: 100%; -} - -.cds--switcher__item:nth-child(1) { - margin-block-start: 1rem; -} - -.cds--switcher__item--divider { - display: block; - border: none; - margin: 0.5rem 1rem; - background: var(--cds-border-subtle); - block-size: 1px; - inline-size: 14rem; -} - -.cds--switcher__item-link { - font-size: var(--cds-heading-compact-01-font-size, 0.875rem); - font-weight: var(--cds-heading-compact-01-font-weight, 600); - line-height: var(--cds-heading-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px); - display: block; - padding: 0.375rem 1rem; - block-size: 2rem; - color: var(--cds-text-secondary, #525252); - text-decoration: none; -} -.cds--switcher__item-link:hover:not(.cds--switcher__item-link--selected) { - background: var(--cds-layer-hover); - color: var(--cds-text-primary, #161616); - cursor: pointer; -} -.cds--switcher__item-link:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -.cds--switcher__item-link:active { - background: var(--cds-layer-active); - color: var(--cds-text-primary, #161616); -} - -.cds--switcher__item-link--selected { - background: var(--cds-layer-selected); - color: var(--cds-text-primary, #161616); -} - -.cds--content { - padding: 2rem; - color: var(--cds-text-primary, #161616); - will-change: margin-left; -} - -.cds--header ~ .cds--content, -div:has(.cds--header) ~ .cds--content { - margin-block-start: 3rem; -} - -.cds--side-nav ~ .cds--content { - margin-inline-start: 3rem; -} - -.cds--side-nav.cds--side-nav--expanded ~ .cds--content { - margin-inline-start: 16rem; -} - -.cds--header { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - position: fixed; - z-index: 8000; - display: flex; - align-items: center; - background-color: var(--cds-background, #ffffff); - block-size: 3rem; - border-block-end: 1px solid var(--cds-border-subtle); - inset-block-start: 0; - inset-inline-end: 0; - inset-inline-start: 0; -} -.cds--header *, -.cds--header *::before, -.cds--header *::after { - box-sizing: inherit; -} - -.cds--header__action { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: inline-block; - padding: 0; - border: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: none; - cursor: pointer; - text-align: start; - inline-size: 100%; - display: inline-flex; - border: 0.0625rem solid transparent; - block-size: 3rem; - inline-size: 3rem; - transition: background-color 110ms, border-color 110ms; -} -.cds--header__action *, -.cds--header__action *::before, -.cds--header__action *::after { - box-sizing: inherit; -} -.cds--header__action::-moz-focus-inner { - border: 0; -} -@media (max-width: 41.98rem) { - .cds--header__action { - min-inline-size: 3rem; - } -} - -.cds--header__global .cds--popover { - z-index: 8001; -} - -.cds--header__action > :first-child { - margin-block-start: 0; -} - -.cds--header__action > svg.cds--navigation-menu-panel-collapse-icon, -.cds--header__action--active > svg.cds--navigation-menu-panel-expand-icon { - display: none; -} - -.cds--header__action--active > svg.cds--navigation-menu-panel-collapse-icon { - display: inline; -} - -.cds--header__action:hover { - background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12)); -} - -.cds--header__action--active { - background: var(--cds-layer); - border-block-end: 1px solid transparent; - border-inline-end: 1px solid var(--cds-border-subtle); - border-inline-start: 1px solid var(--cds-border-subtle); -} - -.cds--header__action--active > svg { - fill: var(--cds-icon-primary, #161616); -} - -.cds--header__action:focus { - border-color: var(--cds-focus, #0f62fe); - outline: none; -} - -.cds--header__action:active { - background-color: var(--cds-background-active, rgba(141, 141, 141, 0.5)); +/* General Styles */ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + line-height: 1.6; + background-color: #000000; + color: #fff; } -.cds--header__action.cds--btn--icon-only { - align-items: center; - justify-content: center; +/* Skip to main content link for accessibility */ +.skip-to-content { + position: absolute; + top: -40px; + left: 0; + background: #000000; + color: white; + padding: 8px 16px; + z-index: 1000; + transition: top 0.3s ease; } -.cds--btn.cds--btn--icon-only.cds--header__action svg { - fill: var(--cds-icon-secondary, #525252); +.skip-to-content:focus { + top: 0; } -.cds--btn.cds--btn--icon-only.cds--header__action:hover svg, -.cds--btn.cds--btn--icon-only.cds--header__action:active svg, -.cds--btn.cds--btn--icon-only.cds--header__action--active svg { - fill: var(--cds-icon-primary, #161616); +/* Header Styling with Carbon Design System */ +header { + background-color: #161616; + color: #ffffff; + padding: 16px 32px; + display: flex; + justify-content: space-between; + align-items: center; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + border-bottom: 1px solid #262626; +} + +/* Custom Styling for Skunkworks Title */ +.skunkworks-title { + color: #ffffff; + font-family: 'IBM Plex Sans', Arial, sans-serif; + font-weight: 700; + font-size: 2.5rem; + text-transform: uppercase; + letter-spacing: 2px; + margin: 0; + padding: 10px 0; + text-align: center; + background-color: #161616; + border-bottom: 2px solid #262626; +} + +/* Navigation Styling */ +nav { + flex-grow: 1; + text-align: right; + display: none; /* Hide the nav menu by default */ +} + +nav ul { + list-style-type: none; + padding: 0; + margin: 0; + display: flex; + justify-content: flex-end; + flex-wrap: wrap; + gap: 10px; } -.cds--header__menu-trigger > svg { - fill: var(--cds-icon-primary, #161616); +nav ul li { + margin: 0; + position: relative; } -.cds--header__menu-trigger:hover > svg { - fill: var(--cds-icon-primary, #161616); +nav ul li a { + color: #ffffff; + text-decoration: none; + display: block; + padding: 8px 16px; + font-family: 'IBM Plex Sans', Arial, sans-serif; + font-size: 1rem; + border-radius: 4px; + transition: background-color 0.2s ease, color 0.2s ease; } -.cds--header__menu-toggle { - display: flex; - align-items: center; - justify-content: center; +nav ul li a:hover { + background-color: #262626; + color: #0f62fe; } -@media (min-width: 66rem) { - .cds--header__menu-toggle__hidden { +nav ul li ul { display: none; - } -} - -a.cds--header__name { - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); - display: flex; - align-items: center; - padding: 0 2rem 0 1rem; - border: 0.125rem solid transparent; - block-size: 100%; - font-weight: 600; - letter-spacing: 0.1px; - line-height: 1.25rem; - outline: none; - text-decoration: none; - transition: border-color 110ms; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} -@media (max-width: 41.98rem) { - a.cds--header__name { - padding: 0 1rem; - } -} - -a.cds--header__name:focus { - border-color: var(--cds-focus, #0f62fe); -} - -.cds--header__name--prefix { - font-weight: 400; -} - -a.cds--header__name, -a.cds--header__name:hover { - color: var(--cds-text-primary, #161616); -} - -.cds--header__menu-toggle:not(.cds--header__menu-toggle__hidden) ~ .cds--header__name { - padding-inline-start: 0.5rem; + position: absolute; + top: 100%; + left: 0; + background-color: #262626; + padding: 8px 0; + margin: 0; + list-style-type: none; + z-index: 1000; + border-radius: 4px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } -.cds--header__nav { - position: relative; - display: none; - block-size: 100%; - padding-inline-start: 1rem; -} -@media (min-width: 66rem) { - .cds--header__nav { +nav ul li:hover ul { display: block; - } -} -.cds--header__nav::before { - position: absolute; - display: block; - background-color: var(--cds-border-subtle); - block-size: 1.5rem; - content: ""; - inline-size: 0.0625rem; - inset-block-start: 50%; - inset-inline-start: 0; - transform: translateY(-50%); -} - -.cds--header__menu-bar { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: flex; - padding: 0; - margin: 0; - block-size: 100%; - list-style: none; -} -.cds--header__menu-bar *, -.cds--header__menu-bar *::before, -.cds--header__menu-bar *::after { - box-sizing: inherit; -} - -a.cds--header__menu-item { - position: relative; - display: flex; - align-items: center; - padding: 0 1rem; - border: 2px solid transparent; - background-color: var(--cds-background, #ffffff); - block-size: 100%; - color: var(--cds-text-secondary, #525252); - font-size: 0.875rem; - font-weight: 400; - letter-spacing: 0; - line-height: 1.125rem; - text-decoration: none; - transition: background-color 110ms, border-color 110ms, color 110ms; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} - -a.cds--header__menu-item:hover { - background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12)); - color: var(--cds-text-primary, #161616); -} - -.cds--header__action:active, -a.cds--header__menu-item:active { - background-color: var(--cds-background-active, rgba(141, 141, 141, 0.5)); - color: var(--cds-text-primary, #161616); -} - -a.cds--header__menu-item:focus { - border-color: var(--cds-focus, #0f62fe); - outline: none; -} - -a.cds--header__menu-item:hover > svg, -a.cds--header__menu-item:active > svg { - fill: var(--cds-icon-primary, #161616); -} - -a.cds--header__menu-item[aria-current=page], -.cds--header__menu-item--current { - color: var(--cds-text-primary, #161616); -} - -a.cds--header__menu-item[aria-current=page]::after, -.cds--header__menu-item--current::after { - position: absolute; - background-color: var(--cds-border-interactive, #0f62fe); - block-size: 3px; - content: ""; - inline-size: calc(100% + 4px); - inset-block-end: -2px; - inset-inline-start: -2px; -} - -a.cds--header__menu-item[aria-current=page]:focus::after, -.cds--header__menu-item--current:focus::after { - border: 0; -} - -.cds--header__submenu .cds--header__menu a.cds--header__menu-item[aria-current=page]::after, -.cds--header__submenu .cds--header__menu .cds--header__menu-item--current::after { - background-color: var(--cds-border-interactive, #0f62fe); - block-size: calc(100% + 4px); - inline-size: 3px; - inset-block-start: -2px; - inset-inline-start: -2px; -} -.cds--header__submenu .cds--header__menu a.cds--header__menu-item[aria-current=page]:focus::after, -.cds--header__submenu .cds--header__menu .cds--header__menu-item--current:focus::after { - background-color: var(--cds-border-interactive, #0f62fe); - block-size: calc(100% + 4px); - inline-size: 5px; - inset-block-start: -2px; - inset-inline-start: -2px; -} - -a.cds--header__menu-item[aria-current=page]:focus, -a.cds--header__menu-item.cds--header__menu-item--current:focus { - border: 2px solid var(--cds-focus, #0f62fe); -} - -.cds--header__submenu { - position: relative; -} - -.cds--header__menu-title[aria-haspopup=true] { - position: relative; -} - -.cds--header__menu-title[aria-expanded=true] { - z-index: 8002; - background-color: var(--cds-layer); - color: var(--cds-text-secondary, #525252); } -.cds--header__menu-title[aria-expanded=true] > .cds--header__menu-arrow { - transform: rotate(180deg); +nav ul li ul li a { + padding: 10px 15px; + color: #ffffff; + font-size: 0.875rem; } -.cds--header__menu { - display: none; - padding: 0; - margin: 0; - list-style: none; +nav ul li ul li a:hover { + background-color: #333333; + color: #0f62fe; } -.cds--header__menu-title[aria-expanded=true] + .cds--header__menu { - position: absolute; - z-index: 8001; - display: flex; - flex-direction: column; - background-color: var(--cds-layer); - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5); - inline-size: 12.5rem; - inset-block-end: 0; - inset-inline-start: 0; - transform: translateY(100%); -} - -.cds--header__menu-title[aria-expanded=true] + .cds--header__menu .cds--header__menu-item { - background-color: var(--cds-layer); -} - -.cds--header__menu-title[aria-expanded=true] + .cds--header__menu .cds--header__menu-item:hover { - background-color: var(--cds-layer-hover); - color: var(--cds-text-primary, #161616); -} - -.cds--header__menu-title[aria-expanded=true] + .cds--header__menu .cds--header__menu-item:active { - background-color: var(--cds-layer-active); - color: var(--cds-text-primary, #161616); -} - -.cds--header__menu-title[aria-expanded=true] + .cds--header__menu .cds--header__menu-item.cds--header__menu-item--current { - background-color: var(--cds-layer-selected); -} -.cds--header__menu-title[aria-expanded=true] + .cds--header__menu .cds--header__menu-item.cds--header__menu-item--current:hover { - background-color: var(--cds-layer-selected-hover); -} - -.cds--header__menu .cds--header__menu-item { - block-size: 3rem; -} - -.cds--header__menu-arrow { - fill: var(--cds-icon-secondary, #525252); - margin-inline-start: 0.5rem; - transition: transform 110ms, fill 110ms; -} - -.cds--header__global { - display: flex; - flex: 1 1; - justify-content: flex-end; - block-size: 100%; -} - -.cds--skip-to-content { - position: absolute; - overflow: hidden; - padding: 0; - border: 0; - margin: -1px; - block-size: 1px; - clip: rect(0, 0, 0, 0); - inline-size: 1px; - visibility: inherit; - white-space: nowrap; -} - -.cds--skip-to-content:focus { - z-index: 9999; - display: flex; - align-items: center; - padding: 0 1rem; - border: 4px solid var(--cds-focus, #0f62fe); - background-color: var(--cds-background, #ffffff); - block-size: 3rem; - clip: auto; - color: var(--cds-text-secondary, #525252); - inline-size: auto; - inset-block-start: 0; - inset-inline-start: 0; - outline: none; -} - -.cds--header-panel { - position: fixed; - z-index: 8000; - overflow: hidden; - border: none; - background-color: var(--cds-layer); - color: var(--cds-text-secondary, #525252); - inline-size: 0; - inset-block-end: 0; - inset-block-start: 3rem; - inset-inline-end: 0; - transition: width 110ms cubic-bezier(0.2, 0, 1, 0.9); - will-change: width; -} - -.cds--header-panel--expanded { - border-inline-end: 1px solid var(--cds-border-subtle); - border-inline-start: 1px solid var(--cds-border-subtle); - inline-size: 16rem; -} - -.cds--side-nav { - position: fixed; - z-index: 8000; - overflow: hidden; - background-color: var(--cds-background, #ffffff); - color: var(--cds-text-secondary, #525252); - inline-size: 3rem; - inset-block-end: 0; - inset-block-start: 0; - inset-inline-start: 0; - max-inline-size: 16rem; - transition: inline-size 0.11s cubic-bezier(0.2, 0, 1, 0.9), transform 0.11s cubic-bezier(0.2, 0, 1, 0.9); - will-change: inline-size; -} - -.cds--side-nav--ux { - inline-size: 16rem; - inset-block-start: 3rem; -} -@media (max-width: 65.98rem) { - .cds--side-nav--ux { - inline-size: 0; - } -} - -.cds--side-nav--rail { - inline-size: 3rem; -} - -.cds--side-nav--hidden { - inline-size: 0; -} - -.cds--side-nav--expanded { - inline-size: 16rem; -} - -.cds--side-nav__overlay { - position: fixed; - background-color: transparent; - block-size: 0; - inline-size: 0; - inset-block-start: 3rem; - inset-inline-start: 0; - opacity: 0; - transition: opacity 300ms cubic-bezier(0.5, 0, 0.1, 1), background-color 300ms cubic-bezier(0.5, 0, 0.1, 1); -} - -@media (max-width: 65.98rem) { - .cds--side-nav__overlay-active { - z-index: 6000; - background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5)); - block-size: 100vh; - inline-size: 100vw; - opacity: 1; - transition: opacity 300ms cubic-bezier(0.5, 0, 0.1, 1), background-color 300ms cubic-bezier(0.5, 0, 0.1, 1); - } -} - -.cds--header ~ .cds--side-nav { - block-size: calc(100% - 48px); - inset-block-start: 3rem; -} - -.cds--side-nav--fixed { - inline-size: 16rem; -} - -.cds--side-nav--collapsed { - inline-size: 16rem; - transform: translateX(-16rem); -} - -.cds--side-nav__navigation { - display: flex; - flex-direction: column; -} - -.cds--side-nav__items { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - overflow: hidden; - flex: 1 1; - padding: 1rem 0 0; -} -.cds--side-nav__items *, -.cds--side-nav__items *::before, -.cds--side-nav__items *::after { - box-sizing: inherit; -} -.cds--side-nav:hover .cds--side-nav__items, .cds--side-nav--fixed .cds--side-nav__items, .cds--side-nav--expanded .cds--side-nav__items { - overflow-y: auto; -} - -.cds--side-nav--ux .cds--side-nav__items { - overflow-y: auto; -} - -.cds--side-nav__item { - overflow: hidden; - block-size: auto; - inline-size: auto; -} - -.cds--side-nav--ux .cds--side-nav__item { - block-size: auto; - inline-size: auto; -} - -.cds--side-nav__item:not(.cds--side-nav__item--active):hover .cds--side-nav__item:not(.cds--side-nav__item--active) > .cds--side-nav__submenu:hover, -.cds--side-nav__item:not(.cds--side-nav__item--active) > .cds--side-nav__link:hover, -.cds--side-nav__menu a.cds--side-nav__link:not(.cds--side-nav__link--current):not([aria-current=page]):hover, -.cds--side-nav a.cds--header__menu-item:hover, -.cds--side-nav .cds--header__menu-title[aria-expanded=true]:hover { - background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12)); - color: var(--cds-text-primary, #161616); -} - -.cds--side-nav__item:not(.cds--side-nav__item--active) > .cds--side-nav__link:hover > span, -.cds--side-nav__item:not(.cds--side-nav__item--active) .cds--side-nav__menu-item > .cds--side-nav__link:hover > span { - color: var(--cds-text-primary, #161616); -} - -.cds--side-nav__item--large { - block-size: auto; -} - -.cds--side-nav__divider { - margin: 0.5rem 1rem; - background-color: var(--cds-border-subtle); - block-size: 1px; - list-style-type: none; -} - -.cds--side-nav__divider hr { - border: none; -} - -.cds--side-nav__submenu { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: inline-block; - padding: 0; - border: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: none; - cursor: pointer; - text-align: start; - inline-size: 100%; - font-size: var(--cds-heading-compact-01-font-size, 0.875rem); - font-weight: var(--cds-heading-compact-01-font-weight, 600); - line-height: var(--cds-heading-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px); - outline: 2px solid transparent; - outline-offset: -2px; - display: flex; - align-items: center; - padding: 0 1rem; - block-size: 2rem; - color: var(--cds-text-secondary, #525252); - transition: color 110ms, background-color 110ms, outline 110ms; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} -.cds--side-nav__submenu *, -.cds--side-nav__submenu *::before, -.cds--side-nav__submenu *::after { - box-sizing: inherit; -} -.cds--side-nav__submenu::-moz-focus-inner { - border: 0; -} - -.cds--side-nav__submenu:hover { - background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12)); - color: var(--cds-text-primary, #161616); -} - -.cds--side-nav__submenu:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--side-nav__submenu:focus { - outline-style: dotted; - } -} - -.cds--side-nav__submenu-title { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - text-align: start; -} - -.cds--side-nav__icon.cds--side-nav__submenu-chevron { - display: flex; - flex: 1 1; - justify-content: flex-end; -} - -.cds--side-nav__submenu-chevron > svg { - block-size: 1rem; - inline-size: 1rem; - transition: transform 110ms; -} - -.cds--side-nav__submenu[aria-expanded=true] .cds--side-nav__submenu-chevron > svg { - transform: rotate(180deg); -} - -.cds--side-nav__item--large .cds--side-nav__submenu { - block-size: 3rem; -} - -.cds--side-nav__item--active .cds--side-nav__submenu:hover { - background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2)); - color: var(--cds-text-primary, #161616); +/* Burger Menu Styling */ +.burger { + font-size: 28px; + cursor: pointer; + display: block; + color: #ffffff; + padding: 8px; + border-radius: 4px; + transition: background-color 0.2s ease; } -.cds--side-nav__item--active .cds--side-nav__submenu[aria-expanded=false] { - position: relative; - background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2)); - color: var(--cds-text-primary, #161616); -} -.cds--side-nav__item--active .cds--side-nav__submenu[aria-expanded=false]::before { - position: absolute; - background-color: var(--cds-border-interactive, #0f62fe); - content: ""; - inline-size: 3px; - inset-block-end: 0; - inset-block-start: 0; - inset-inline-start: 0; +.burger:hover { + background-color: #262626; } -.cds--side-nav__item--active .cds--side-nav__submenu-title { - color: var(--cds-text-primary, #161616); - font-weight: 600; +/* General Section Styling */ +.section { + padding: 20px; + margin: 20px 0; + display: block; } -.cds--side-nav__item--active .cds--side-nav__icon > svg { - fill: var(--cds-icon-primary, #161616); +/* Welcome Section Styling */ +.welcome-section { + background-color: #ffffff; + text-align: center; + color: #000000; + padding: 20px; + box-shadow: none; } -.cds--side-nav__menu { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: block; - max-block-size: 0; - visibility: hidden; -} -.cds--side-nav__menu *, -.cds--side-nav__menu *::before, -.cds--side-nav__menu *::after { - box-sizing: inherit; +.welcome-section-content { + max-width: 800px; + margin: 0 auto; + padding: 20px; + border: 2px solid #333333; + border-radius: 8px; } -.cds--side-nav__submenu[aria-expanded=true] + .cds--side-nav__menu { - max-block-size: 93.75rem; - visibility: inherit; +/* Grid Layout for Tiles */ +.grid-container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 20px; } -.cds--side-nav__menu a.cds--side-nav__link { - block-size: 2rem; - font-weight: 400; - min-block-size: 2rem; - padding-inline-start: 2rem; +/* Carbon Tile Styling */ +.carbon-tile { + padding: 20px; + background-color: #ffffff; + border-radius: 8px; + text-align: center; + color: #000000; + transition: background-color 0.3s ease; } -.cds--side-nav__item.cds--side-nav__item--icon a.cds--side-nav__link { - padding-inline-start: 4.5rem; +.carbon-tile:hover { + background-color: #000000; } -.cds--side-nav__menu a.cds--side-nav__link--current, -.cds--side-nav__menu a.cds--side-nav__link[aria-current=page], -a.cds--side-nav__link--current { - background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2)); -} -.cds--side-nav__menu a.cds--side-nav__link--current > span, -.cds--side-nav__menu a.cds--side-nav__link[aria-current=page] > span, -a.cds--side-nav__link--current > span { - color: var(--cds-text-primary, #161616); - font-weight: 600; +.carbon-tile img { + max-width: 100%; + height: auto; + margin-bottom: 10px; } -a.cds--side-nav__link, -.cds--side-nav a.cds--header__menu-item, -.cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu { - outline: 2px solid transparent; - outline-offset: -2px; - font-size: var(--cds-heading-compact-01-font-size, 0.875rem); - font-weight: var(--cds-heading-compact-01-font-weight, 600); - line-height: var(--cds-heading-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px); - position: relative; - display: flex; - align-items: center; - padding: 0 1rem; - min-block-size: 2rem; - text-decoration: none; - transition: color 110ms, background-color 110ms, outline 110ms; +/* Form General Styling */ +#contactForm { + max-width: 600px; + margin: 0 auto; + padding: 32px; + background-color: #1c1c1c; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } -.cds--side-nav__item--large a.cds--side-nav__link { - block-size: 3rem; +#contactForm .form-group { + margin-bottom: 32px; /* Default spacing between form items */ } -a.cds--side-nav__link > .cds--side-nav__link-text, -.cds--side-nav a.cds--header__menu-item .cds--text-truncate-end { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - color: var(--cds-text-secondary, #525252); - font-size: 0.875rem; - letter-spacing: 0.1px; - line-height: 1.25rem; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; +#contactForm label { + display: block; + margin-bottom: 8px; + font-size: 0.75rem; /* Label font size */ + font-weight: 400; /* Regular weight */ + color: #cccccc; /* Light gray color for labels */ } -a.cds--side-nav__link:focus, -.cds--side-nav a.cds--header__menu-item:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - a.cds--side-nav__link:focus, - .cds--side-nav a.cds--header__menu-item:focus { - outline-style: dotted; - } +#contactForm input, +#contactForm textarea { + width: 100%; + padding: 12px 16px; + font-size: 0.875rem; /* Field text font size */ + font-weight: 400; /* Regular weight */ + color: #ffffff; /* White text color */ + background-color: #333333; /* Dark background */ + border: 1px solid #444444; /* Subtle border color */ + border-radius: 4px; + box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.5); /* Subtle inner shadow */ + transition: border-color 0.3s ease, box-shadow 0.3s ease; } -a.cds--side-nav__link[aria-current=page], -a.cds--side-nav__link--current { - background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2)); - font-weight: 600; +#contactForm input:focus, +#contactForm textarea:focus { + border-color: #0f62fe; /* IBM Blue for focus */ + box-shadow: 0px 0px 8px rgba(15, 98, 254, 0.5); /* Blue glow on focus */ } -a.cds--side-nav__link[aria-current=page] .cds--side-nav__link-text, -a.cds--side-nav__link--current .cds--side-nav__link-text { - color: var(--cds-text-primary, #161616); +#contactForm textarea { + resize: vertical; + min-height: 120px; /* Minimum height for textarea */ } -a.cds--side-nav__link[aria-current=page]::before, -a.cds--side-nav__link--current::before { - position: absolute; - background-color: var(--cds-border-interactive, #0f62fe); - content: ""; - inline-size: 3px; - inset-block-end: 0; - inset-block-start: 0; - inset-inline-start: 0; +#contactForm button { + background-color: #0f62fe; /* IBM Blue */ + color: #ffffff; + border: none; + padding: 12px 24px; + font-size: 1rem; + cursor: pointer; + transition: background-color 0.3s ease, box-shadow 0.3s ease; + border-radius: 4px; + display: block; + margin: 48px auto 0; /* Center the button, margin-top for spacing */ + box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */ } -.cds--side-nav__icon { - display: flex; - flex: 0 0 1rem; - align-items: center; - justify-content: center; +#contactForm button:hover { + background-color: #0053ba; /* Darker blue on hover */ + box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Increase shadow on hover */ } -.cds--side-nav__icon:not(.cds--side-nav__submenu-chevron) { - margin-inline-end: 1.5rem; +/* General Heading Styling */ +h1, h2, h3 { + color: #ffffff; + font-family: 'IBM Plex Sans', Arial, sans-serif; + font-weight: 600; + margin-bottom: 20px; } -.cds--side-nav__icon > svg { - block-size: 1rem; - fill: var(--cds-icon-secondary, #525252); - inline-size: 1rem; +h4, h5, h6 { + color: #000000; + font-family: 'IBM Plex Sans', Arial, sans-serif; + font-weight: 600; + margin-bottom: 20px; } -.cds--side-nav__icon > svg.cds--side-nav-collapse-icon { - display: none; +/* Specific Heading Sizes */ +h1 { + font-size: 2.5rem; + line-height: 1.2; + margin-top: 40px; + border-bottom: 2px solid #444; + padding-bottom: 10px; } -.cds--side-nav--expanded .cds--side-nav__icon > svg.cds--side-nav-expand-icon { - display: none; +h2 { + font-size: 2rem; + line-height: 1.3; + margin-top: 30px; + border-bottom: 1px solid #444; + padding-bottom: 8px; } -.cds--side-nav--expanded .cds--side-nav__icon > svg.cds--side-nav-collapse-icon { - display: block; +h3 { + font-size: 1.75rem; + line-height: 1.4; + margin-top: 25px; } -.cds--side-nav--fixed a.cds--side-nav__link, -.cds--side-nav--fixed .cds--side-nav__submenu { - padding-inline-start: 1rem; +h4 { + font-size: 1.5rem; + line-height: 1.5; + margin-top: 20px; } -.cds--side-nav--fixed .cds--side-nav__item:not(.cds--side-nav__item--icon) .cds--side-nav__menu a.cds--side-nav__link { - padding-inline-start: 2rem; +h5 { + font-size: 1.25rem; + line-height: 1.6; + margin-top: 15px; } -@media (max-width: 65.98rem) { - .cds--side-nav .cds--header__nav { - display: block; - } +h6 { + font-size: 1rem; + line-height: 1.6; + margin-top: 10px; } -.cds--side-nav__header-navigation { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: none; -} -.cds--side-nav__header-navigation *, -.cds--side-nav__header-navigation *::before, -.cds--side-nav__header-navigation *::after { - box-sizing: inherit; -} -@media (max-width: 65.98rem) { - .cds--side-nav__header-navigation { - position: relative; - display: block; - margin-block-end: 2rem; - } +/* Additional Heading Styling */ +h1, h2 { + text-transform: uppercase; + letter-spacing: 1.5px; } -.cds--side-nav__header-divider::after { - position: absolute; - background: var(--cds-border-subtle); - block-size: 0.0625rem; - content: ""; - inline-size: calc(100% - 32px); - inset-block-end: -1rem; - inset-inline-start: 1rem; +h3, h4, h5, h6 { + color: #000000; } -.cds--side-nav a.cds--header__menu-item { - justify-content: space-between; - color: var(--cds-text-secondary, #525252); - white-space: nowrap; -} -.cds--side-nav a.cds--header__menu-item[aria-expanded=true] { - background-color: transparent; +/* Search Input Styling */ +#partnerSearch { + width: 100%; + max-width: 400px; + padding: 12px 16px; + font-size: 1rem; + border: 1px solid #444; + border-radius: 4px; + background-color: #222; + color: #ffffff; + outline: none; + transition: border-color 0.3s ease, box-shadow 0.3s ease; + box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.5); } -.cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu { - padding: 0; - background-color: transparent; - box-shadow: none; - inline-size: 100%; - inset-block-end: inherit; - transform: none; -} -.cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu li { - inline-size: 100%; -} -.cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu a.cds--header__menu-item { - font-weight: 400; - padding-inline-start: 4.25rem; -} -.cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu a.cds--header__menu-item:hover { - background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12)); - color: var(--cds-text-primary, #161616); -} -.cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu a.cds--header__menu-item--current:hover { - background-color: var(--cds-layer-selected-hover); +/* Focus State */ +#partnerSearch:focus { + border-color: #0f62fe; + box-shadow: 0px 0px 8px rgba(15, 98, 254, 0.5); } -.cds--side-nav .cds--side-nav__header-navigation a.cds--header__menu-item[aria-current=page]::after, -.cds--side-nav .cds--side-nav__header-navigation .cds--header__menu-item--current::after { - block-size: calc(100% + 4px); - inline-size: 3px; +/* Placeholder Text Styling */ +#partnerSearch::placeholder { + color: #888; + font-style: italic; } -.cds--side-nav .cds--header__menu a.cds--header__menu-item { - block-size: inherit; +/* Partner List Grid */ +.partners-list { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 20px; + text-align: center; } -.cds--side-nav a.cds--header__menu-item:hover .cds--header__menu-arrow, -.cds--side-nav a.cds--header__menu-item:focus .cds--header__menu-arrow, -.cds--side-nav .cds--header__menu-arrow { - fill: var(--cds-icon-secondary, #525252); +/* Partner Item Styling */ +.partner-item { + background-color: #ffffff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; } -@media screen and (-ms-high-contrast: active), (forced-colors: active) { - .cds--side-nav__icon > svg, - .cds--side-nav a.cds--header__menu-item:hover .cds--header__menu-arrow, - .cds--side-nav a.cds--header__menu-item:focus .cds--header__menu-arrow, - .cds--side-nav .cds--header__menu-arrow { - fill: ButtonText; - } +.partner-item img { + max-width: 100%; + max-height: 100px; + object-fit: contain; } -.cds--switcher { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - color: var(--cds-text-secondary, #525252); -} -.cds--switcher *, -.cds--switcher *::before, -.cds--switcher *::after { - box-sizing: inherit; +/* Centered Container Styling */ +.centered-container { + max-width: 800px; + margin: 0 auto; + background-color: #ffffff; + padding: 20px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); + border-radius: 8px; + text-align: center; + color: #000; } -.cds--switcher__item { - block-size: 2rem; - inline-size: 100%; -} +/* LinkedIn Button Styling */ +.libutton { + display: flex; + flex-direction: column; + justify-content: center; + padding: 7px; + text-align: center; + outline: none; + text-decoration: none !important; + color: #ffffff !important; + width: 200px; + height: 32px; + border-radius: 16px; + background-color: #ffffff; + font-family: "SF Pro Text", Helvetica, sans-serif; + margin: 10px auto; +} + +/* Icon Styling */ +.icon { + width: 20px; + height: 20px; + margin-right: 5px; +} + +.service-icon { + width: 40px; + height: 40px; + display: block; + margin: 0 auto 10px auto; +} + +/* Footer Styling */ +footer { + background-color: #333; + color: #fff; + text-align: center; + padding: 10px 0; +} + +/* Center the button and style it to match your site's color scheme */ +button { + background-color: #333; + color: #fff; + border: none; + padding: 12px 24px; + cursor: pointer; + transition: background-color 0.3s ease, box-shadow 0.3s ease; + font-size: 1rem; + text-align: center; + border-radius: 4px; + display: block; + margin: 20px auto; + box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); +} + +button:hover { + background-color: #555; + box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); +} + +/* Mobile Styles */ +@media (max-width: 768px) { + nav { + display: none; + width: 100%; + background: #333; + text-align: center; + position: absolute; + top: 50px; + left: 0; + z-index: 1000; + } -.cds--switcher__item:nth-child(1) { - margin-block-start: 1rem; -} + nav ul { + flex-direction: column; + } -.cds--switcher__item--divider { - display: block; - border: none; - margin: 0.5rem 1rem; - background: var(--cds-border-subtle); - block-size: 1px; - inline-size: 14rem; -} + nav ul li { + margin: 10px 0; + } -.cds--switcher__item-link { - font-size: var(--cds-heading-compact-01-font-size, 0.875rem); - font-weight: var(--cds-heading-compact-01-font-weight, 600); - line-height: var(--cds-heading-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px); - display: block; - padding: 0.375rem 1rem; - block-size: 2rem; - color: var(--cds-text-secondary, #525252); - text-decoration: none; -} -.cds--switcher__item-link:hover:not(.cds--switcher__item-link--selected) { - background: var(--cds-layer-hover); - color: var(--cds-text-primary, #161616); - cursor: pointer; -} -.cds--switcher__item-link:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -.cds--switcher__item-link:active { - background: var(--cds-layer-active); - color: var(--cds-text-primary, #161616); -} + .partners-list { + grid-template-columns: 1fr; + } -.cds--switcher__item-link--selected { - background: var(--cds-layer-selected); - color: var(--cds-text-primary, #161616); + nav.visible { + display: block; + } } \ No newline at end of file