/*!********************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./scss/common/common.scss ***!
\********************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*******************************************************************************
* Licensed Materials - Property of IBM
* (c) Copyright IBM Corporation 2015, 2024. All Rights Reserved.
*
* Note to U.S. Government Users Restricted Rights:
* Use, duplication or disclosure restricted by GSA ADP Schedule
* Contract with IBM Corp.
*******************************************************************************/
/*******************************************************************************
* Licensed Materials - Property of IBM
* (c) Copyright IBM Corporation 2024 All Rights Reserved.
*
* Note to U.S. Government Users Restricted Rights:
* Use, duplication or disclosure restricted by GSA ADP Schedule
* Contract with IBM Corp.
*******************************************************************************/
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: 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(../404c0909c893f95ee0dc.woff2) format("woff2"), url(../962cfb135eb81a80c239.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(../6dc1395379557355e28d.woff2) format("woff2"), url(../f3938458fa6048e8a833.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(../8a014da16bb5df1e9830.woff2) format("woff2"), url(../49b97d3a9224cb6bd5ac.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(../68c556c669c532459374.woff2) format("woff2"), url(../2034d12242df27d980b8.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(../62fd670eebf4976bb6df.woff2) format("woff2"), url(../8cd3fae70878b55de45b.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(../02e1d2dbd3774a8f5658.woff2) format("woff2"), url(../f4031df8380579c41ed7.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(../422493740da495c4413f.woff2) format("woff2"), url(../8e05df04c42299bc9c31.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(../9022078be982e16dc192.woff2) format("woff2"), url(../9b6742916c10378bb045.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(../c6dd22ce106021638df7.woff2) format("woff2"), url(../c204ba906a18b66bed05.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(../95b38dc2556a6c46dc6c.woff2) format("woff2"), url(../066f70960ee0bd4c07f5.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(../6956fe0f5e625049f7e2.woff2) format("woff2"), url(../49290aeb66b58f856f84.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(../987d18f198bd7d9fa265.woff2) format("woff2"), url(../3f4766bc8c4721b8d7a6.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(../cacfd1d7dbd14067b970.woff2) format("woff2"), url(../56c52b5b71ff7d0decad.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(../8af6b3d1e1a4ac4fdd49.woff2) format("woff2"), url(../0befeb0f9f061f052717.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(../19239848cb5cdf02953e.woff2) format("woff2"), url(../fdef8ecc502e23149bcc.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(../64e1054a50262b9083ab.woff2) format("woff2"), url(../5687219882cd972495e6.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(../e7c487ed0bd3af889f66.woff2) format("woff2"), url(../c81d3db94f7270abbebf.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(../983c50a737da66c0bd02.woff2) format("woff2"), url(../f432bafd941d9016122c.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(../f968050d6a8297e66619.woff2) format("woff2"), url(../c25bc2c3e5c0f0b089a2.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(../aa343b4fcab1658acc56.woff2) format("woff2"), url(../e26dfdb6948e56dcf16c.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(../cd9a0204454ff0e22880.woff2) format("woff2"), url(../d6f3290223965413af92.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(../723a4b364f38da1e93e0.woff2) format("woff2"), url(../257967d345c4d73a616e.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(../729e5174c878b0a30035.woff2) format("woff2"), url(../d55e14dce62503dcad5f.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(../b0ec1af29941e0f52305.woff2) format("woff2"), url(../f4367aaef942e4cbea24.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(../8212ca4bb829a5d9f858.woff2) format("woff2"), url(../bbae2f8ceda944a1ecd5.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(../f31b6425f37c2b71c3fc.woff2) format("woff2"), url(../164bc7c64a15028f6b19.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(../22f2f7f20d522f25d8ec.woff2) format("woff2"), url(../3afa7954e621de8a516a.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(../a81d5c10cd640839a4b8.woff2) format("woff2"), url(../3f0da7edcbb8d01dcb97.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(../74025371289e2bab9590.woff2) format("woff2"), url(../784d3444a92b4f1b77bc.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(../0c7e37865f4bb741d719.woff2) format("woff2"), url(../cc628a3da5e5810acebe.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: 300;
src: url(../4c3ed2a3f44451a96594.woff2) format("woff2"), url(../c3a84513ace37e633e6c.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(../6bdf3ec568a6634a4aea.woff2) format("woff2"), url(../7f15c4783287134ac710.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(../32a6fcddf51918f011f5.woff2) format("woff2"), url(../efbc47072be0090327f8.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(../d69d5111a1f16e74d2fb.woff2) format("woff2"), url(../608bff2bb28ccfd74ca0.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(../bfefc1c5dd4c689b4f0f.woff2) format("woff2"), url(../e5b7f5835bf8b91304bf.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(../3028d912b8189a439418.woff2) format("woff2"), url(../abeb6d68a7f128eaa1cd.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(../4f746f1bbc05d6e9497f.woff2) format("woff2"), url(../b55f8f00b5929160ed27.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(../c89e876b0e1fd2a0c661.woff2) format("woff2"), url(../332d509af7965c98d5af.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(../eb36767a3caa8dfc71e8.woff2) format("woff2"), url(../13aa346ec359eaa168e2.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(../bb730844c9185c864437.woff2) format("woff2"), url(../40e1012bdd73a02c83f8.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(../022d7839fbf0b01f1279.woff2) format("woff2"), url(../92086fc1b9953ba20acd.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(../957995d81ad3284f963f.woff2) format("woff2"), url(../5192df154d7f8cb9b76c.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(../42c5469340604f5e79d5.woff2) format("woff2"), url(../178f507500fb1dabcf4e.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(../c26797e2920f701bf68f.woff2) format("woff2"), url(../9340a047e2c400a8eff4.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(../cf8cdfc9a1ead9d332f5.woff2) format("woff2"), url(../9df11ababf0dd515e6a3.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(../c781dd3e68cf4db696e2.woff2) format("woff2"), url(../f5be008474d38b4cf15a.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(../c8cf918de7d9deffd15c.woff2) format("woff2"), url(../54028f60020ee6ac16c1.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(../8bbf2e3b118b1732ea16.woff2) format("woff2"), url(../6fcf28e2972af1d72ef8.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(../3fb99cf388da08c31bd7.woff2) format("woff2"), url(../b729b57f022eb1d859fc.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(../a34802c95c44f5903e18.woff2) format("woff2"), url(../b02a06390388409ab8cd.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(../6d9b6411704ee0e26f31.woff2) format("woff2"), url(../c32b0c98c77e458414dc.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(../9924e57202230ba397b0.woff2) format("woff2"), url(../34ca7aaefd825bca9d62.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(../144035d867f964f2c13d.woff2) format("woff2"), url(../aec9738277936824e421.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(../1ac9d0b721a47c618f27.woff2) format("woff2"), url(../79bc83792898f002dfc0.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(../578aae4082fb12898fe3.woff2) format("woff2"), url(../7d46ea83f372f13d40a0.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(../6557a3c33c4218db6066.woff2) format("woff2"), url(../b649469b999b248dbb70.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(../88cb07ee53507d19f992.woff2) format("woff2"), url(../66e70aaa5d9c7be2b7d9.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(../5e1440da12d78046c31a.woff2) format("woff2"), url(../390315031483cbc78b20.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(../e5317022888823405337.woff2) format("woff2"), url(../86c57595c1697937314b.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(../160c450b41a6dfc1bebe.woff2) format("woff2"), url(../ab33fa58a6e7146d03f0.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(../79752c5c990ac51471f4.woff2) format("woff2"), url(../2b531494817a7008521c.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(../2d855afa565d0006f5fa.woff2) format("woff2"), url(../cc33f663568d938071a0.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(../a1c1f2f0c32534ae4785.woff2) format("woff2"), url(../1b3c2f1d45dbb745b4cf.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(../9326d3d6ca3411249fd4.woff2) format("woff2"), url(../b8020bf5b1afb9556569.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(../907c442ef0bf7886cbbc.woff2) format("woff2"), url(../f5b2fe58c9057281ea3f.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(../e0d279d30dd9df7831ce.woff2) format("woff2"), url(../96a9036ba12617504616.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(../dacaf9bef27fac67fb17.woff2) format("woff2"), url(../b3bbe4705c54760ade6b.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(../e589f9b7ff20e7e011ee.woff2) format("woff2"), url(../4f0c4a9ba045ef843752.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(../62f5f45b32f0702031ad.woff2) format("woff2"), url(../951b1b92a4b8315c27a1.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(../8000079133e696898c7e.woff2) format("woff2"), url(../5a07c14cd7519e0fa02d.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(../362a779400aac0be5a12.woff2) format("woff2"), url(../806a7a7745e7bd864174.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(../0eb6e423b08540bb2757.woff2) format("woff2"), url(../762888d30d179075ea6c.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(../0755d9c25fe86099a1fb.woff2) format("woff2"), url(../dd406a41dc851acc7615.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(../95db32b85d6efe3f0c92.woff2) format("woff2"), url(../a7c1ee99b038bc0777e0.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(../4882dd164789ce7f44fe.woff2) format("woff2"), url(../b0afed71b45a7f38e794.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(../44c432e4a678791737ca.woff2) format("woff2"), url(../452cc78a1baf50168631.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(../189265eddd933218a2c4.woff2) format("woff2"), url(../cdb54c58914c803c9ed6.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(../2e0b1ce3e5a1765917d0.woff2) format("woff2"), url(../0e5132569fd3eaea21cc.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(../90822629c9f43acb1cf8.woff2) format("woff2"), url(../c8298f275f960d821949.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(../92f1cafa16c646cffd37.woff2) format("woff2"), url(../f064c7d4889d1db43518.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(../347e5ea493b441f06459.woff2) format("woff2"), url(../1223fdf597c1c7a57096.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(../42df6ba8755c7591afbe.woff2) format("woff2"), url(../091d3a63042974d54d8a.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(../27626c129fe4aa22e2e6.woff2) format("woff2"), url(../0e49dbb9071356a97aa7.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(../5d3700da8be3c5172b76.woff2) format("woff2"), url(../a07b795a96fa2b6691d1.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(../a1f7181f7c86baf1c351.woff2) format("woff2"), url(../42423f4a1cfd745854a5.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(../2861a6629748147a32ea.woff2) format("woff2"), url(../d96e5a614e96c351c453.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(../9e3f7d82b48ac62c7cb5.woff2) format("woff2"), url(../a32f901b42b9ddcc6e85.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(../e655f59b8f3ed3b7c9fe.woff2) format("woff2"), url(../794699869c58056513c7.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(../7984062acac19d00de83.woff2) format("woff2"), url(../3647330588ae297a0bd4.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(../6305238484fd3cc045b0.woff2) format("woff2"), url(../b691d8c0c5110ea3659e.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--css-grid--start {
margin-inline-start: 0;
}
.cds--css-grid--end {
margin-inline-end: 0;
}
.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: #fcf4d6;
--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: #a2191f;
--cds-tag-hover-red: #ffc2c5;
--cds-tag-background-magenta: #ffd6e8;
--cds-tag-color-magenta: #9f1853;
--cds-tag-hover-magenta: #ffbdda;
--cds-tag-background-purple: #e8daff;
--cds-tag-color-purple: #6929c4;
--cds-tag-hover-purple: #dcc7ff;
--cds-tag-background-blue: #d0e2ff;
--cds-tag-color-blue: #0043ce;
--cds-tag-hover-blue: #b8d3ff;
--cds-tag-background-cyan: #bae6ff;
--cds-tag-color-cyan: #00539a;
--cds-tag-hover-cyan: #99daff;
--cds-tag-background-teal: #9ef0f0;
--cds-tag-color-teal: #005d5d;
--cds-tag-hover-teal: #57e5e5;
--cds-tag-background-green: #a7f0ba;
--cds-tag-color-green: #0e6027;
--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: #fcf4d6;
--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: #a2191f;
--cds-tag-hover-red: #ffc2c5;
--cds-tag-background-magenta: #ffd6e8;
--cds-tag-color-magenta: #9f1853;
--cds-tag-hover-magenta: #ffbdda;
--cds-tag-background-purple: #e8daff;
--cds-tag-color-purple: #6929c4;
--cds-tag-hover-purple: #dcc7ff;
--cds-tag-background-blue: #d0e2ff;
--cds-tag-color-blue: #0043ce;
--cds-tag-hover-blue: #b8d3ff;
--cds-tag-background-cyan: #bae6ff;
--cds-tag-color-cyan: #00539a;
--cds-tag-hover-cyan: #99daff;
--cds-tag-background-teal: #9ef0f0;
--cds-tag-color-teal: #005d5d;
--cds-tag-hover-teal: #57e5e5;
--cds-tag-background-green: #a7f0ba;
--cds-tag-color-green: #0e6027;
--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: #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: #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: #001d6c;
--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;
}
.cds--accordion *,
.cds--accordion *::before,
.cds--accordion *::after {
box-sizing: inherit;
}
.cds--accordion {
inline-size: 100%;
list-style: none;
}
.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 {
transition: background-color cubic-bezier(0.2, 0, 0.38, 0.9) 110ms;
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;
appearance: none;
background: none;
cursor: pointer;
text-align: start;
inline-size: 100%;
}
.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 {
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);
}
.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;
transition: all 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
.cds--accordion__arrow {
flex: 0 0 1rem;
block-size: 1rem;
fill: var(--cds-icon-primary, #161616);
inline-size: 1rem;
transform: rotate(-270deg) /*rtl:ignore*/;
}
.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);
}
.cds--accordion__title {
z-index: 1;
inline-size: 100%;
padding-inline-start: 1rem;
text-align: start;
}
.cds--accordion__wrapper {
display: none;
overflow: hidden;
padding: 0;
max-block-size: 0;
opacity: 0;
transition: all 110ms cubic-bezier(0, 0, 0.38, 0.9) allow-discrete;
-ms-writing-mode: lr-tb;
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 {
display: block;
overflow: visible;
max-block-size: fit-content;
opacity: 1;
padding-block: 0.5rem;
padding-block-end: 1.5rem;
}
.cds--accordion__item--active > .cds--accordion__heading > .cds--accordion__arrow {
fill: var(--cds-icon-primary, #161616);
transform: rotate(-90deg) /*rtl:ignore*/;
}
/** starting style also not supported widely
* https://caniuse.com/mdn-css_at-rules_starting-style
*/
/* Needs to be after the previous accordion__item--active rule
to take effect, as the specificity is the same */
@starting-style {
.cds--accordion__item--active > .cds--accordion__wrapper {
padding: 0;
max-block-size: 0;
opacity: 0;
}
}
.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: var(--cds-layout-density-padding-inline-local) 0;
}
[dir=rtl] .cds--accordion--start .cds--accordion__title {
margin-inline-end: 0;
padding-inline-start: 0;
}
@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-content {
filter: 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: 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: 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: 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: 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: 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;
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;
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: 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: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem) calc(var(--cds-layout-density-padding-inline-local) * 3 + 1rem - 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 {
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--icon-only.cds--btn--danger--ghost {
padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 1rem);
}
.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%;
inset-inline-start: 0;
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--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;
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;
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__button--mini::after,
.cds--slug__button--2xs::after {
position: absolute;
display: block;
block-size: 24px;
content: "";
inline-size: 24px;
}
.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: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: 1.5rem 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;
backdrop-filter: blur(85px);
background: rgba(0, 0, 0, 0.01);
border-end-end-radius: 0.5rem;
border-end-start-radius: 0.5rem;
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--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%;
}
.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;
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: auto 0;
}
.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: auto 0;
}
.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%;
inset-inline-start: 0;
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: 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;
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%;
inset-inline-start: 0;
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--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--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.0625rem;
padding-inline-start: 1.25rem;
-webkit-user-select: none;
-ms-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;
-ms-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%;
inset-inline-start: 0;
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: 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: 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;
max-inline-size: unset;
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: 50% auto;
}
.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: 50% auto;
}
.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%;
inset-inline-start: 0;
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;
}
@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;
}
}
.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:-ms-input-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: 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;
border-color: transparent transparent var(--cds-background-inverse, #393939);
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--toggle-password-tooltip .cds--popover-content {
min-inline-size: 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--password__visibility__toggle:disabled.cds--tooltip__trigger {
cursor: default;
}
.cds--text-input--password__visibility__toggle:disabled.cds--tooltip__trigger svg {
fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
}
.cds--text-input--password__visibility__toggle:disabled.cds--tooltip__trigger:hover {
cursor: default;
}
.cds--text-input--password__visibility__toggle:disabled.cds--tooltip__trigger:hover svg {
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:-ms-input-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%;
inset-inline-start: 0;
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;
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;
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;
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: 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, #a2191f);
}
.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, #9f1853);
}
.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, #6929c4);
}
.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, #0043ce);
}
.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, #00539a);
}
.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, #005d5d);
}
.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, #0e6027);
}
.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--disabled:not(.cds--tag--operational) .cds--tag__label,
.cds--tag--filter.cds--tag--disabled .cds--tag__label,
.cds--tag--interactive.cds--tag--disabled .cds--tag__label {
background-color: var(--cds-layer);
color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
}
.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%;
inset-inline-start: 0;
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;
}
.cds--tag--filter .cds--slug {
min-inline-size: 2.00875rem;
}
@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;
}
.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;
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: 1rem 3rem;
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;
-ms-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;
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;
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;
-ms-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: 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;
-ms-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: 0.4375rem 0.4375rem;
}
.cds--list-box--lg .cds--list-box__menu-item__option {
block-size: 3rem;
padding-block: 0.9375rem 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: 0.5rem 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--slug--revert::after {
inset-block-start: 0.5rem;
inset-inline-end: -0.0625rem;
}
.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--combo-box.cds--list-box--expanded:has(input[aria-activedescendant]:not([aria-activedescendant=""])) .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);
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;
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;
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: 0;
}
.cds--contained-list--inset-rulers .cds--contained-list-item:not(:last-of-type)::before {
inset-inline: var(--cds-layout-density-padding-inline-local) 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: 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;
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: 0.875rem 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;
}
.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;
-ms-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%;
inset-inline-start: 0;
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: 0.5rem 0;
}
.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: 1rem 1.5rem;
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:hover .cds--link:not(.cds--popover-container .cds--link) {
color: var(--cds-link-secondary, #0043ce);
}
.cds--data-table tr:hover .cds--link--disabled:not(.cds--popover-container .cds--link) {
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: 1rem 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: 1rem 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: 1rem 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-01, #c6c6c6);
border-block-start: 1px solid var(--cds-layer);
color: var(--cds-text-secondary, #525252);
padding-inline: 1rem 1rem;
}
.cds--data-table td + td:first-of-type,
.cds--data-table tbody th + td:first-of-type {
padding-inline-start: 0.75rem;
}
.cds--layer-two .cds--data-table td,
.cds--layer-two .cds--data-table tbody th {
border-block-end: 1px solid var(--cds-border-subtle-02, #e0e0e0);
}
.cds--layer-three .cds--data-table td,
.cds--layer-three .cds--data-table tbody th {
border-block-end: 1px solid var(--cds-border-subtle-03, #c6c6c6);
}
@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: 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: 1rem 0.25rem;
}
.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: 0.625rem 1.375rem;
}
.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: 0.125rem 0.125rem;
}
.cds--data-table--xs td,
.cds--data-table--xs tbody tr th {
padding-block: 0.125rem 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: 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: 0.4375rem 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: 0.4375rem 0.375rem;
}
.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: 0.1875rem 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: 0.4375rem 0.4375rem;
}
.cds--data-table--md td,
.cds--data-table--md tbody tr th {
padding-block: 0.4375rem 0.375rem;
}
.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: 0.1875rem 0.1875rem;
}
.cds--data-table--md .cds--table-column-menu {
padding-block: 0.1875rem 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: 1rem 1rem;
}
.cds--data-table--xl td,
.cds--data-table--xl tbody tr th {
padding-block: 1rem 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: 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;
}
@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: 0.9375rem 1rem;
}
.cds--data-table--sticky-header.cds--data-table--xs th .cds--table-header-label {
padding-block: 0.1875rem 0;
}
.cds--data-table--sticky-header.cds--data-table--sm th .cds--table-header-label {
padding-block: 0.5rem 0;
}
.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;
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:-ms-input-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]:-ms-input-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;
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:-ms-input-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:-ms-input-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:-ms-input-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%;
inset-inline-start: 0;
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:-ms-input-placeholder, .cds--search--md.cds--skeleton .cds--search-input:-ms-input-placeholder, .cds--search--sm.cds--skeleton .cds--search-input:-ms-input-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:-ms-input-placeholder {
position: relative;
opacity: 0;
transition-duration: 70ms;
-ms-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:-ms-input-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--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(:-ms-input-placeholder) {
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;
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;
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(:-ms-input-placeholder) {
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: 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: 1rem 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(:-ms-input-placeholder) {
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: 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: 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-01, #c6c6c6);
}
.cds--layer-two .cds--data-table td.cds--table-expand {
border-block-end: 1px solid var(--cds-border-subtle-02, #e0e0e0);
}
.cds--layer-three .cds--data-table td.cds--table-expand {
border-block-end: 1px solid var(--cds-border-subtle-03, #c6c6c6);
}
.cds--data-table th.cds--table-expand + .cds--table-column-checkbox,
.cds--data-table td.cds--table-expand + .cds--table-column-checkbox {
padding-inline: 0.375rem 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;
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%;
inset-inline-start: 0;
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%;
inset-inline-start: 0;
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%;
inset-inline-start: 0;
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;
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: 1rem 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: 0;
}
.cds--data-table.cds--data-table--top-aligned-header.cds--data-table--sm th.cds--table-sort__header {
padding-block: 0.4375rem 0.4375rem;
}
.cds--data-table.cds--data-table--top-aligned-header.cds--data-table--xs th.cds--table-sort__header {
padding-block: 0.125rem 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: 0.5rem 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: 0.5rem 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: auto 0.5rem;
}
.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: absolute;
display: block;
inset-block-start: auto;
}
.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;
-ms-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: 0.25rem 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;
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:-ms-input-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:-ms-input-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%;
inset-inline-start: 0;
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:-ms-input-placeholder, .cds--date-picker__input.cds--skeleton:-ms-input-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%;
inset-inline-start: 0;
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 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: 1rem 2.625rem;
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;
overflow: hidden auto;
flex-direction: column;
background-color: var(--cds-layer);
inline-size: 100%;
list-style: none;
max-block-size: 0;
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: 0.4375rem 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%;
inset-inline-start: 0;
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;
}
@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;
}
@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;
}
@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;
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;
}
@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;
}
}
.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: 2.0625rem 0.8125rem;
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--combo-box) {
outline: none;
}
.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: relative;
padding: 0;
border: none;
background: var(--cds-skeleton-background, #e8e8e8);
box-shadow: none;
pointer-events: none;
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__field:hover, .cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__field:focus, .cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__field:active {
border: none;
cursor: default;
outline: none;
}
.cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__field::before {
position: absolute;
animation: 3000ms ease-in-out cds--skeleton infinite;
background: var(--cds-skeleton-element, #c6c6c6);
block-size: 100%;
content: "";
inline-size: 100%;
inset-inline-start: 0;
will-change: transform-origin, transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
.cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__field::before {
animation: none;
}
}
.cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__label {
position: relative;
padding: 0;
border: none;
background: var(--cds-skeleton-background, #e8e8e8);
box-shadow: none;
pointer-events: none;
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__label:hover, .cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__label:focus, .cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__label:active {
border: none;
cursor: default;
outline: none;
}
.cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__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%;
inset-inline-start: 0;
will-change: transform-origin, transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
.cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__label::before {
animation: none;
}
}
.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--list-box__wrapper--fluid--focus .cds--combo-box.cds--list-box--expanded:has(input[aria-activedescendant]:not([aria-activedescendant=""])) .cds--combo-box--input--focus.cds--text-input {
outline-offset: -0.0625rem;
outline-width: 0.0625rem;
}
.cds--list-box__wrapper--fluid .cds--combo-box .cds--list-box__selection {
inset-block: auto 0.625rem;
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: auto 0.5rem;
}
.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:not(:has(.cds--slug--revert)) .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--multi-select--selectall .cds--list-box__menu-item:first-child .cds--list-box__menu-item__option {
padding: 0.6875rem 1rem;
margin: 0;
border-block-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
}
.cds--multi-select.cds--multi-select--selectall .cds--list-box__menu-item:nth-child(2) .cds--list-box__menu-item__option {
border-block-start: none;
}
.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--checkbox-label::before {
margin-block: 0;
}
.cds--multi-select .cds--list-box__menu-item__option .cds--checkbox:indeterminate + .cds--checkbox-label::after {
inset-block-start: 0.5625rem;
}
.cds--multi-select .cds--list-box__menu-item__option .cds--checkbox-label::after {
inset-block-start: 0.3125rem;
}
.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--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--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;
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: 1rem 6rem;
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 {
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;
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;
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%;
inset-inline-start: 0;
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;
}
.cds--number.cds--skeleton.cds--number--sm {
block-size: 2rem;
}
.cds--number.cds--skeleton.cds--number--md {
block-size: 2.5rem;
}
.cds--number.cds--skeleton.cds--number--lg {
block-size: 3rem;
}
@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;
}
}
.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;
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;
}
@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: 0.5rem 2rem;
}
.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%;
inset-inline-start: 0;
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--slug--revert::after {
inset-block-start: 0.5rem;
inset-inline-end: -0.0625rem;
}
.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:-ms-input-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%;
max-inline-size: 100%;
}
.cds--text-area__wrapper--cols {
inline-size: auto;
}
.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:-ms-input-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%;
inset-inline-start: 0;
will-change: transform-origin, transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
.cds--text-area.cds--skeleton::before {
animation: none;
}
}
.cds--text-area.cds--skeleton:-ms-input-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-02-font-size, 0.875rem);
font-weight: var(--cds-label-02-font-weight, 400);
line-height: var(--cds-label-02-line-height, 1.28572);
letter-spacing: var(--cds-label-02-letter-spacing, 0.16px);
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--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: 0.5rem 3rem;
padding-inline: 1rem 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: -2rem;
}
.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: 1rem 3rem;
}
.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;
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:has(.cds--autoalign) {
mask-image: none;
}
.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;
}
.cds--modal-footer .cds--btn:not(.cds--skeleton) {
padding-block: 0.875rem 2rem;
}
.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 {
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;
}
@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;
}
}
.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, #fcf4d6);
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);
}
@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;
}
}
.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, #fcf4d6);
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-block-end: 1rem;
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);
padding-block-start: 0.5rem;
}
.cds--toast-notification--low-contrast .cds--toast-notification__caption {
color: var(--cds-text-primary, #161616);
}
@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;
}
}
.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, #fcf4d6);
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: 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);
}
@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;
}
}
.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: 0.0625rem 1rem;
}
.cds--pagination__right .cds--pagination__text.cds--pagination__page-text {
margin-inline: 1rem 0.0625rem;
}
.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: 0.0625rem 1rem;
}
.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);
--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-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));
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;
appearance: none;
background: none;
cursor: pointer;
text-align: start;
position: relative;
display: block;
padding: calc((var(--cds-layout-size-height-local) - 0.875rem) / 2) 0.25rem;
border-radius: 0;
color: var(--cds-text-primary, #161616);
font-weight: 400;
line-height: 1;
min-inline-size: var(--cds-layout-size-height-local);
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;
-ms-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 {
appearance: none;
max-block-size: var(--cds-layout-size-height-local);
text-indent: calc(50% - 4.5px);
}
@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.25rem);
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;
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%;
inset-inline-start: 0;
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%;
inset-inline-start: 0;
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%;
inset-inline-start: 0;
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%;
inset-inline-start: 0;
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;
-ms-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;
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: 0 auto;
}
.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 {
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: none;
}
.cds--slider--disabled .cds--slider__thumb:focus {
background-color: var(--cds-border-disabled, #c6c6c6);
box-shadow: none;
outline: none;
transform: none;
}
.cds--slider--disabled .cds--slider__thumb:active {
background: var(--cds-border-disabled, #c6c6c6);
box-shadow: none;
transform: none;
}
.cds--slider--disabled .cds--slider__thumb--lower,
.cds--slider--disabled .cds--slider__thumb--upper {
background-color: transparent;
}
.cds--slider--disabled .cds--slider__thumb--lower:active, .cds--slider--disabled .cds--slider__thumb--lower:hover, .cds--slider--disabled .cds--slider__thumb--lower:focus,
.cds--slider--disabled .cds--slider__thumb--upper:active,
.cds--slider--disabled .cds--slider__thumb--upper:hover,
.cds--slider--disabled .cds--slider__thumb--upper:focus {
background-color: transparent;
transform: none;
}
.cds--slider--disabled .cds--slider__thumb--lower .cds--slider__thumb-icon,
.cds--slider--disabled .cds--slider__thumb--upper .cds--slider__thumb-icon {
fill: var(--cds-border-disabled, #c6c6c6);
}
.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%;
inset-inline-start: 0;
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;
}
@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;
}
}
.cds--stack-horizontal {
display: inline-grid;
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: 1rem 1rem;
}
.cds--structured-list--selection .cds--structured-list-td:first-child,
.cds--structured-list--selection .cds--structured-list-th:first-child {
padding-inline: 1rem 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: 0 1rem;
}
.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%;
inset-inline-start: 0;
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--tabs--vertical .cds--tabs__nav-link .cds--tabs__nav-item-label {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
white-space: normal;
}
.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);
overflow-x: hidden;
}
.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--vertical {
background: var(--cds-layer);
box-shadow: inset -1px 0 var(--cds-border-subtle);
grid-column: span 2;
max-block-size: none;
}
@media (min-width: 66rem) {
.cds--tabs.cds--tabs--vertical {
grid-column: span 4;
}
}
.cds--tabs.cds--tabs--vertical .cds--tab--list {
overflow: visible auto;
flex-direction: column;
inline-size: 100%;
}
.cds--tabs.cds--tabs--vertical .cds--tab--list-gradient_bottom {
position: absolute;
background: linear-gradient(to bottom, transparent, var(--cds-layer));
block-size: 4rem;
inset-block-end: 0;
inset-inline: 0;
pointer-events: none;
}
.cds--tabs.cds--tabs--vertical .cds--tab--list-gradient_top {
position: absolute;
background: linear-gradient(to top, transparent, var(--cds-layer));
block-size: 4rem;
inset-block-start: 0;
inset-inline: 0;
pointer-events: 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;
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:hover {
background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
}
.cds--tabs .cds--tab--overflow-nav-button:active {
background-color: var(--cds-background-active, rgba(141, 141, 141, 0.5));
}
.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--tabs--contained .cds--tab--overflow-nav-button:hover {
background-color: var(--cds-layer-accent-hover);
}
.cds--tabs.cds--tabs--contained .cds--tab--overflow-nav-button:active {
background-color: var(--cds-layer-accent-active);
}
.cds--tabs .cds--tab--overflow-nav-button svg {
z-index: 2;
fill: var(--cds-icon-primary, #161616);
}
.cds--tabs .cds--tab--overflow-nav-button svg:active, .cds--tabs .cds--tab--overflow-nav-button svg:hover {
fill: var(--cds-icon-primary, #161616);
}
.cds--tabs .cds--tab--overflow-nav-button--next {
position: relative;
inset-block: 0;
inset-inline-end: 0;
}
.cds--tabs .cds--tab--overflow-nav-button--next::before {
position: absolute;
z-index: 1;
block-size: 100%;
content: "";
inline-size: 0.5rem;
inset-inline-start: -0.5rem;
}
.cds--tabs:not(.cds--tabs--contained) .cds--tab--overflow-nav-button--next::before {
background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--cds-background, #ffffff));
}
.cds--tabs:not(.cds--tabs--contained) .cds--tab--overflow-nav-button--previous::before {
background: linear-gradient(to left, rgba(255, 255, 255, 0), var(--cds-background, #ffffff));
}
.cds--tabs .cds--tab--overflow-nav-button--previous {
position: relative;
z-index: 1;
inset-block: 0;
inset-inline-start: 0;
}
.cds--tabs .cds--tab--overflow-nav-button--previous::before {
position: absolute;
z-index: 1;
block-size: 100%;
content: "";
inline-size: 0.5rem;
inset-inline-end: -0.5rem;
}
.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--vertical .cds--tabs__nav-item {
flex: none;
background-color: var(--cds-layer-01, #f4f4f4);
block-size: 4rem;
border-block-end: 1px solid var(--cds-border-subtle);
border-inline-end: 1px solid var(--cds-border-subtle);
box-shadow: inset 3px 0 0 0 var(--cds-border-subtle);
inline-size: 100%;
margin-inline-start: 0;
}
.cds--tabs.cds--tabs--contained:not(.cds--tabs--vertical) .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;
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;
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:not(.cds--tabs--vertical) .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--vertical:not(.cds--tabs--tall) .cds--tabs__nav-item-label {
line-height: var(--cds-body-compact-01-line-height);
}
.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 {
margin-inline-end: 0.0625rem;
}
.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--vertical .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-hover);
box-shadow: inset 3px 0 0 0 var(--cds-border-strong);
}
.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--vertical .cds--tabs__nav-item.cds--tabs__nav-item--selected {
border-inline: none;
box-shadow: inset 3px 0 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-subtle);
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-subtle);
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--vertical .cds--tabs__nav-item.cds--tabs__nav-item--disabled, .cds--tabs.cds--tabs--vertical .cds--tabs__nav-item.cds--tabs__nav-item--disabled:hover {
background-color: var(--cds-layer);
border-block-end: 1px solid var(--cds-border-subtle);
}
.cds--tabs .cds--tabs__nav-item--disabled:focus,
.cds--tabs .cds--tabs__nav-item--disabled:active {
border-block-end: 2px solid var(--cds-border-subtle);
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:not(.cds--tabs--vertical) .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--tabs--vertical ~ .cds--tab-content {
grid-column: 3/-1;
overflow-y: auto;
}
.cds--tabs--vertical ~ .cds--tab-content .cds--text-input--fluid .cds--text-input,
.cds--tabs--vertical ~ .cds--tab-content .cds--text-area--fluid .cds--text-area__wrapper,
.cds--tabs--vertical ~ .cds--tab-content .cds--text-area--fluid .cds--text-area,
.cds--tabs--vertical ~ .cds--tab-content .cds--search--fluid .cds--search-input,
.cds--tabs--vertical ~ .cds--tab-content .cds--select--fluid .cds--select-input,
.cds--tabs--vertical ~ .cds--tab-content .cds--text-area--fluid .cds--text-area__wrapper[data-invalid] .cds--text-area__divider + .cds--form-requirement,
.cds--tabs--vertical ~ .cds--tab-content .cds--list-box__wrapper--fluid .cds--list-box,
.cds--tabs--vertical ~ .cds--tab-content .cds--list-box__wrapper--fluid.cds--list-box__wrapper,
.cds--tabs--vertical ~ .cds--tab-content .cds--number-input--fluid input[type=number],
.cds--tabs--vertical ~ .cds--tab-content .cds--number-input--fluid .cds--number__control-btn::before,
.cds--tabs--vertical ~ .cds--tab-content .cds--number-input--fluid .cds--number__control-btn::after,
.cds--tabs--vertical ~ .cds--tab-content .cds--date-picker--fluid .ccdsds--date-picker-input__wrapper .cds--date-picker__input {
background-color: var(--cds-field-01, #f4f4f4);
}
.cds--tabs--vertical ~ .cds--tab-content .cds--list-box__wrapper--fluid .cds--list-box__menu {
background-color: var(--cds-layer-01, #f4f4f4);
}
.cds--tabs--vertical ~ .cds--tab-content .cds--list-box__menu-item:hover {
background-color: var(--cds-layer-hover-02, #e8e8e8);
}
.cds--tabs--vertical ~ .cds--tab-content .cds--list-box__menu-item--active {
background-color: var(--cds-layer-selected-02, #e0e0e0);
}
.cds--tabs--vertical ~ .cds--tab-content .cds--list-box__menu-item--active:hover {
background-color: var(--cds-layer-selected-hover-02, #d1d1d1);
}
.cds--tabs--vertical ~ .cds--tab-content .cds--number-input--fluid .cds--number__control-btn:hover::before,
.cds--tabs--vertical ~ .cds--tab-content .cds--number-input--fluid .cds--number__control-btn:hover::after {
background-color: var(--cds-field-hover);
}
.cds--tabs--vertical ~ .cds--tab-content .cds--number-input--fluid .cds--number__control-btn:focus::before,
.cds--tabs--vertical ~ .cds--tab-content .cds--number-input--fluid .cds--number__control-btn:focus::after {
border-inline-start: 2px solid var(--cds-focus, #0f62fe);
}
@media (min-width: 66rem) {
.cds--tabs--vertical ~ .cds--tab-content {
grid-column: 5/-1;
}
}
.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%;
inset-inline-start: 0;
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;
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:-ms-input-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;
-ms-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;
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::after,
.cds--toggle:not(.cds--toggle--disabled):active .cds--toggle__switch::after {
display: block;
border: 2px solid var(--cds-focus, #0f62fe);
border-radius: 1rem;
block-size: calc(100% + 0.375rem);
content: "";
inline-size: calc(100% + 0.375rem);
margin-block-start: -0.1875rem;
margin-inline-start: -0.1875rem;
}
.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;
-ms-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%;
inset-inline-start: 0;
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--hidden {
display: none;
}
.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;
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: 0.4375rem 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: -0.25rem 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: 0.5rem 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: 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;
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;
-ms-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;
-ms-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 0%;
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: 3rem 0;
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;
overflow-y: auto;
}
.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: 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 0%;
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;
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;
-ms-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;
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: 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;
-ms-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: 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: 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;
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;
-ms-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;
-ms-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 0%;
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: 3rem 0;
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;
overflow-y: auto;
}
.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: 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 0%;
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;
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;
-ms-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;
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: 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;
-ms-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: 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--tabs__nav-link .cds--tag {
border: 0;
margin: 0 0 0 0.25rem;
}
.cds--table-settings-menu__option {
padding: 0 1.25rem 2rem;
}
.cds--table-settings-menu__option .cds--fieldset {
margin: 0;
padding: 0;
}
.cds--table-settings-menu__option legend {
font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
font-weight: var(--cds-heading-compact-01-font-weight, 600);
letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-heading-compact-01-line-height, 1.28572);
padding: 1rem 0 0.5rem;
}
.cds--table-settings-menu__option:last-of-type {
padding-bottom: 0;
}
.cds--table-settings-menu__body.cds--overflow-menu-options--open {
width: 14.625rem;
}
.cds--table-settings-menu__body.cds--overflow-menu-options[data-floating-menu-direction=bottom]:after {
width: 3rem;
}
.cds--table-settings-menu__body.cds--overflow-menu-options button:last-child {
background-color: var(--cds-button-secondary, #393939);
bottom: 0;
margin-top: 1rem;
position: sticky;
width: 100%;
}
.cds--table-with-filters.cds--data-table-container {
overflow: visible;
}
.cds--table-with-filters .cds--table-toolbar {
border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
flex-direction: row;
overflow: visible;
}
.cds--table-with-filters .cds--table-toolbar .cds--multi-select__wrapper .cds--combo-box {
border: none;
}
.cds--table-with-filters .cds--table-toolbar .cds--multi-select__wrapper .cds--text-input {
background-color: var(--cds-layer-01, #f4f4f4);
border: none;
}
.cds--table-with-filters .cds--table-toolbar .cds--dropdown__wrapper, .cds--table-with-filters .cds--table-toolbar .cds--multi-select__wrapper {
align-items: center;
border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
display: flex;
margin-right: 0;
padding-right: 0.5rem;
white-space: nowrap;
}
.cds--table-with-filters .cds--table-toolbar .cds--dropdown__wrapper .cds--label, .cds--table-with-filters .cds--table-toolbar .cds--multi-select__wrapper .cds--label {
padding-left: 1rem;
}
.cds--table-with-filters .cds--table-toolbar .cds--dropdown__wrapper .cds--text-input, .cds--table-with-filters .cds--table-toolbar .cds--multi-select__wrapper .cds--text-input {
padding: 0 2rem 0 0.5rem;
}
.cds--table-with-filters .cds--table-toolbar .cds--dropdown__wrapper .cds--list-box__menu-icon, .cds--table-with-filters .cds--table-toolbar .cds--multi-select__wrapper .cds--list-box__menu-icon {
right: 0.5rem;
}
.cds--table-with-filters .cds--table-toolbar .cds--dropdown__wrapper .cds--dropdown, .cds--table-with-filters .cds--table-toolbar .cds--dropdown__wrapper .cds--multi-select, .cds--table-with-filters .cds--table-toolbar .cds--multi-select__wrapper .cds--dropdown, .cds--table-with-filters .cds--table-toolbar .cds--multi-select__wrapper .cds--multi-select {
width: 10rem;
}
.cds--table-with-filters .cds--table-toolbar .cds--dropdown__wrapper .cds--list-box--inline, .cds--table-with-filters .cds--table-toolbar .cds--dropdown__wrapper .cds--multi-select--inline, .cds--table-with-filters .cds--table-toolbar .cds--multi-select__wrapper .cds--list-box--inline, .cds--table-with-filters .cds--table-toolbar .cds--multi-select__wrapper .cds--multi-select--inline {
background-color: var(--cds-layer-01, #f4f4f4);
height: 100%;
max-height: 3rem;
}
.cds--table-with-filters .cds--table-toolbar .cds--dropdown__wrapper .cds--list-box__field, .cds--table-with-filters .cds--table-toolbar .cds--multi-select__wrapper .cds--list-box__field {
height: 100%;
}
.cds--table-with-filters .cds--table-toolbar .cds--dropdown__wrapper .cds--list-box__field input.cds--text-input:-ms-input-placeholder, .cds--table-with-filters .cds--table-toolbar .cds--multi-select__wrapper .cds--list-box__field input.cds--text-input:-ms-input-placeholder {
text-overflow: ellipsis;
}
.cds--table-with-filters .cds--table-toolbar .cds--dropdown__wrapper .cds--list-box__field input.cds--text-input:placeholder-shown, .cds--table-with-filters .cds--table-toolbar .cds--multi-select__wrapper .cds--list-box__field input.cds--text-input:placeholder-shown {
text-overflow: ellipsis;
}
.cds--table-with-filters .cds--table-toolbar .cds--dropdown__wrapper.cds--dropdown__wrapper--inline .cds--label, .cds--table-with-filters .cds--table-toolbar .cds--multi-select__wrapper.cds--dropdown__wrapper--inline .cds--label {
padding-left: 1rem;
}
@media (max-width: 672px) {
.cds--table-with-filters .cds--table-toolbar .cds--dropdown__wrapper.cds--list-box__wrapper--inline .cds--label, .cds--table-with-filters .cds--table-toolbar .cds--multi-select__wrapper.cds--list-box__wrapper--inline .cds--label {
display: none;
}
}
.cds--table-with-filters .cds--table-toolbar .cds--dropdown__wrapper .cds--multi-select--filterable--input-focused .cds--list-box__field, .cds--table-with-filters .cds--table-toolbar .cds--multi-select__wrapper .cds--multi-select--filterable--input-focused .cds--list-box__field {
padding: 2px;
}
.cds--table-with-filters .cds--table-toolbar .cds--batch-actions--active ~ .cds--dropdown__wrapper, .cds--table-with-filters .cds--table-toolbar .cds--batch-actions--active ~ .cds--multi-select__wrapper {
display: none;
}
.cds--table-toolbar-button {
border: none !important;
height: 100%;
justify-content: center !important;
width: 3rem !important;
}
.cds--table-toolbar-button svg path {
fill: var(--cds-text-secondary, #525252) !important;
}
.cds--table-toolbar-button:focus {
outline: 2px solid var(--cds-focus, #0f62fe) !important;
outline-offset: -2px !important;
}
.cds--table-toolbar-button.cds--table-toolbar-filter-button.panel-open {
border-bottom: 1px solid var(--cds-layer-01, #f4f4f4) !important;
border-left: 1px solid var(--cds-border-subtle-01, #c6c6c6) !important;
}
.cds--table-toolbar-button.cds--table-toolbar-filter-button.panel-open:not(:last-child) {
border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6) !important;
}
.cds--table-toolbar-filter-panel {
background: var(--cds-layer-01, #f4f4f4);
display: flex;
flex-wrap: wrap;
}
.cds--table-toolbar-filter-panel .cds--filters-button-bar {
display: flex;
justify-content: flex-end;
width: 100%;
}
.cds--table-toolbar-filter-panel .cds--filters-button-bar button {
margin: 1rem 1rem 1rem 0;
}
.cds--table-toolbar-filter-panel .cds--list-box__wrapper, .cds--table-toolbar-filter-panel .cds--multi-select__wrapper {
margin: 1.5rem 1rem 1rem;
min-width: 15rem;
}
.cds--table-toolbar-filter-panel .cds--form-item .cds--date-picker-container {
margin-top: 0.125rem;
}
.cds--table-toolbar-filter-tags {
align-items: center;
background: var(--cds-layer-01, #f4f4f4);
display: flex;
justify-content: space-between;
padding-left: 1rem;
}
.cds--table-toolbar-filter-tags button.cds--tag {
margin: 0.75rem 0.5rem 0.75rem 0;
}
.cds--table-toolbar-filter-tags button.cds--tag .cds--tag__label {
font-size: 12px;
}
.cds--table-toolbar-filter-tags .cds--filters-clear svg path, .cds--table-toolbar-filter-tags .cds--filters-clear:hover svg path {
fill: var(--cds-button-secondary, #393939);
}
.cds--table-with-toolbar-buttons .cds--table-toolbar, .cds--table-with-toolbar-buttons.cds--data-table-container {
overflow: visible;
}
.cds--table-with-toolbar-buttons .cds--table-toolbar-button.cds--btn--disabled {
cursor: not-allowed;
}
:root body:not(.cds--dark-theme, .bx--dark-theme) .cpc--side-panel-container {
--cds-ai-aura-end:hsla(0,0%,100%,0);
--cds-ai-aura-hover-background:#edf5ff;
--cds-ai-aura-hover-end:hsla(0,0%,100%,0);
--cds-ai-aura-hover-start:rgba(69,137,255,.32);
--cds-ai-aura-start:rgba(69,137,255,.1);
--cds-ai-aura-start-sm:rgba(69,137,255,.16);
--cds-ai-border-end:#78a9ff;
--cds-ai-border-start:rgba(166,200,255,.64);
--cds-ai-border-strong:#4589ff;
--cds-ai-drop-shadow:rgba(15,98,254,.1);
--cds-ai-inner-shadow:rgba(69,137,255,.1);
--cds-ai-overlay:rgba(0,17,65,.5);
--cds-ai-popover-background:#fff;
--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,.06);
--cds-ai-popover-shadow-outer-02:rgba(0,0,0,.04);
--cds-ai-skeleton-background:#d0e2ff;
--cds-ai-skeleton-element-background:#4589ff;
--cds-background:#fff;
--cds-background-active:hsla(0,0%,55%,.5);
--cds-background-brand:#0f62fe;
--cds-background-hover:hsla(0,0%,55%,.12);
--cds-background-inverse:#393939;
--cds-background-inverse-hover:#474747;
--cds-background-selected:hsla(0,0%,55%,.2);
--cds-background-selected-hover:hsla(0,0%,55%,.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:#fff;
--cds-chat-bubble-border:#e0e0e0;
--cds-chat-bubble-user:#e0e0e0;
--cds-chat-button:#0f62fe;
--cds-chat-button-active:hsla(0,0%,55%,.5);
--cds-chat-button-hover:hsla(0,0%,55%,.12);
--cds-chat-button-selected:hsla(0,0%,55%,.2);
--cds-chat-button-text-hover:#0043ce;
--cds-chat-button-text-selected:#525252;
--cds-chat-header-background:#fff;
--cds-chat-prompt-background:#fff;
--cds-chat-prompt-border-end:hsla(0,0%,96%,0);
--cds-chat-prompt-border-start:#f4f4f4;
--cds-chat-shell-background:#fff;
--cds-field-01:#f4f4f4;
--cds-field-02:#fff;
--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:#fff;
--cds-focus-inverse:#fff;
--cds-highlight:#d0e2ff;
--cds-icon-disabled:hsla(0,0%,9%,.25);
--cds-icon-interactive:#0f62fe;
--cds-icon-inverse:#fff;
--cds-icon-on-color:#fff;
--cds-icon-on-color-disabled:#8d8d8d;
--cds-icon-primary:#161616;
--cds-icon-secondary:#525252;
--cds-interactive:#0f62fe;
--cds-layer-01:#f4f4f4;
--cds-layer-02:#fff;
--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-primary:#0f62fe;
--cds-link-primary-hover:#0043ce;
--cds-link-secondary:#0043ce;
--cds-link-visited:#8a3ffc;
--cds-overlay:hsla(0,0%,9%,.5);
--cds-shadow:rgba(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:hsla(0,0%,9%,.25);
--cds-text-error:#da1e28;
--cds-text-helper:#6f6f6f;
--cds-text-inverse:#fff;
--cds-text-on-color:#fff;
--cds-text-on-color-disabled:#8d8d8d;
--cds-text-placeholder:hsla(0,0%,9%,.4);
--cds-text-primary:#161616;
--cds-text-secondary:#525252;
--cds-toggle-off:#8d8d8d;
--cds-spacing-01:0.125rem;
--cds-spacing-02:0.25rem;
--cds-spacing-03:0.5rem;
--cds-spacing-04:0.75rem;
--cds-spacing-05:1rem;
--cds-spacing-06:1.5rem;
--cds-spacing-07:2rem;
--cds-spacing-08:2.5rem;
--cds-spacing-09:3rem;
--cds-spacing-10:4rem;
--cds-spacing-11:5rem;
--cds-spacing-12:6rem;
--cds-spacing-13:10rem;
--cds-fluid-spacing-01:0;
--cds-fluid-spacing-02:2vw;
--cds-fluid-spacing-03:5vw;
--cds-fluid-spacing-04:10vw;
--cds-caption-01-font-size:0.75rem;
--cds-caption-01-font-weight:400;
--cds-caption-01-line-height:1.33333;
--cds-caption-01-letter-spacing:0.32px;
--cds-caption-02-font-size:0.875rem;
--cds-caption-02-font-weight:400;
--cds-caption-02-line-height:1.28572;
--cds-caption-02-letter-spacing:0.32px;
--cds-label-01-font-size:0.75rem;
--cds-label-01-font-weight:400;
--cds-label-01-line-height:1.33333;
--cds-label-01-letter-spacing:0.32px;
--cds-label-02-font-size:0.875rem;
--cds-label-02-font-weight:400;
--cds-label-02-line-height:1.28572;
--cds-label-02-letter-spacing:0.16px;
--cds-helper-text-01-font-size:0.75rem;
--cds-helper-text-01-line-height:1.33333;
--cds-helper-text-01-letter-spacing:0.32px;
--cds-helper-text-02-font-size:0.875rem;
--cds-helper-text-02-font-weight:400;
--cds-helper-text-02-line-height:1.28572;
--cds-helper-text-02-letter-spacing:0.16px;
--cds-body-short-01-font-size:0.875rem;
--cds-body-short-01-font-weight:400;
--cds-body-short-01-line-height:1.28572;
--cds-body-short-01-letter-spacing:0.16px;
--cds-body-short-02-font-size:1rem;
--cds-body-short-02-font-weight:400;
--cds-body-short-02-line-height:1.375;
--cds-body-short-02-letter-spacing:0;
--cds-body-long-01-font-size:0.875rem;
--cds-body-long-01-font-weight:400;
--cds-body-long-01-line-height:1.42857;
--cds-body-long-01-letter-spacing:0.16px;
--cds-body-long-02-font-size:1rem;
--cds-body-long-02-font-weight:400;
--cds-body-long-02-line-height:1.5;
--cds-body-long-02-letter-spacing:0;
--cds-code-01-font-family:"IBM Plex Mono",system-ui,-apple-system,BlinkMacSystemFont,".SFNSText-Regular",monospace;
--cds-code-01-font-size:0.75rem;
--cds-code-01-font-weight:400;
--cds-code-01-line-height:1.33333;
--cds-code-01-letter-spacing:0.32px;
--cds-code-02-font-family:"IBM Plex Mono",system-ui,-apple-system,BlinkMacSystemFont,".SFNSText-Regular",monospace;
--cds-code-02-font-size:0.875rem;
--cds-code-02-font-weight:400;
--cds-code-02-line-height:1.42857;
--cds-code-02-letter-spacing:0.32px;
--cds-heading-01-font-size:0.875rem;
--cds-heading-01-font-weight:600;
--cds-heading-01-line-height:1.42857;
--cds-heading-01-letter-spacing:0.16px;
--cds-heading-02-font-size:1rem;
--cds-heading-02-font-weight:600;
--cds-heading-02-line-height:1.5;
--cds-heading-02-letter-spacing:0;
--cds-productive-heading-01-font-size:0.875rem;
--cds-productive-heading-01-font-weight:600;
--cds-productive-heading-01-line-height:1.28572;
--cds-productive-heading-01-letter-spacing:0.16px;
--cds-productive-heading-02-font-size:1rem;
--cds-productive-heading-02-font-weight:600;
--cds-productive-heading-02-line-height:1.375;
--cds-productive-heading-02-letter-spacing:0;
--cds-productive-heading-03-font-size:1.25rem;
--cds-productive-heading-03-font-weight:400;
--cds-productive-heading-03-line-height:1.4;
--cds-productive-heading-03-letter-spacing:0;
--cds-productive-heading-04-font-size:1.75rem;
--cds-productive-heading-04-font-weight:400;
--cds-productive-heading-04-line-height:1.28572;
--cds-productive-heading-04-letter-spacing:0;
--cds-productive-heading-05-font-size:2rem;
--cds-productive-heading-05-font-weight:400;
--cds-productive-heading-05-line-height:1.25;
--cds-productive-heading-05-letter-spacing:0;
--cds-productive-heading-06-font-size:2.625rem;
--cds-productive-heading-06-font-weight:300;
--cds-productive-heading-06-line-height:1.199;
--cds-productive-heading-06-letter-spacing:0;
--cds-productive-heading-07-font-size:3.375rem;
--cds-productive-heading-07-font-weight:300;
--cds-productive-heading-07-line-height:1.19;
--cds-productive-heading-07-letter-spacing:0;
--cds-expressive-paragraph-01-font-size:1.5rem;
--cds-expressive-paragraph-01-font-weight:300;
--cds-expressive-paragraph-01-line-height:1.334;
--cds-expressive-paragraph-01-letter-spacing:0;
--cds-expressive-heading-01-font-size:0.875rem;
--cds-expressive-heading-01-font-weight:600;
--cds-expressive-heading-01-line-height:1.42857;
--cds-expressive-heading-01-letter-spacing:0.16px;
--cds-expressive-heading-02-font-size:1rem;
--cds-expressive-heading-02-font-weight:600;
--cds-expressive-heading-02-line-height:1.5;
--cds-expressive-heading-02-letter-spacing:0;
--cds-expressive-heading-03-font-size:1.25rem;
--cds-expressive-heading-03-font-weight:400;
--cds-expressive-heading-03-line-height:1.4;
--cds-expressive-heading-03-letter-spacing:0;
--cds-expressive-heading-04-font-size:1.75rem;
--cds-expressive-heading-04-font-weight:400;
--cds-expressive-heading-04-line-height:1.28572;
--cds-expressive-heading-04-letter-spacing:0;
--cds-expressive-heading-05-font-size:2rem;
--cds-expressive-heading-05-font-weight:400;
--cds-expressive-heading-05-line-height:1.25;
--cds-expressive-heading-05-letter-spacing:0;
--cds-expressive-heading-06-font-size:2rem;
--cds-expressive-heading-06-font-weight:600;
--cds-expressive-heading-06-line-height:1.25;
--cds-expressive-heading-06-letter-spacing:0;
--cds-quotation-01-font-family:"IBM Plex Serif",system-ui,-apple-system,BlinkMacSystemFont,".SFNSText-Regular",serif;
--cds-quotation-01-font-size:1.25rem;
--cds-quotation-01-font-weight:400;
--cds-quotation-01-line-height:1.3;
--cds-quotation-01-letter-spacing:0;
--cds-quotation-02-font-family:"IBM Plex Serif",system-ui,-apple-system,BlinkMacSystemFont,".SFNSText-Regular",serif;
--cds-quotation-02-font-size:2rem;
--cds-quotation-02-font-weight:300;
--cds-quotation-02-line-height:1.25;
--cds-quotation-02-letter-spacing:0;
--cds-display-01-font-size:2.625rem;
--cds-display-01-font-weight:300;
--cds-display-01-line-height:1.19;
--cds-display-01-letter-spacing:0;
--cds-display-02-font-size:2.625rem;
--cds-display-02-font-weight:600;
--cds-display-02-line-height:1.19;
--cds-display-02-letter-spacing:0;
--cds-display-03-font-size:2.625rem;
--cds-display-03-font-weight:300;
--cds-display-03-line-height:1.19;
--cds-display-03-letter-spacing:0;
--cds-display-04-font-size:2.625rem;
--cds-display-04-font-weight:300;
--cds-display-04-line-height:1.19;
--cds-display-04-letter-spacing:0;
--cds-legal-01-font-size:0.75rem;
--cds-legal-01-font-weight:400;
--cds-legal-01-line-height:1.33333;
--cds-legal-01-letter-spacing:0.32px;
--cds-legal-02-font-size:0.875rem;
--cds-legal-02-font-weight:400;
--cds-legal-02-line-height:1.28572;
--cds-legal-02-letter-spacing:0.16px;
--cds-body-compact-01-font-size:0.875rem;
--cds-body-compact-01-font-weight:400;
--cds-body-compact-01-line-height:1.28572;
--cds-body-compact-01-letter-spacing:0.16px;
--cds-body-compact-02-font-size:1rem;
--cds-body-compact-02-font-weight:400;
--cds-body-compact-02-line-height:1.375;
--cds-body-compact-02-letter-spacing:0;
--cds-heading-compact-01-font-size:0.875rem;
--cds-heading-compact-01-font-weight:600;
--cds-heading-compact-01-line-height:1.28572;
--cds-heading-compact-01-letter-spacing:0.16px;
--cds-heading-compact-02-font-size:1rem;
--cds-heading-compact-02-font-weight:600;
--cds-heading-compact-02-line-height:1.375;
--cds-heading-compact-02-letter-spacing:0;
--cds-body-01-font-size:0.875rem;
--cds-body-01-font-weight:400;
--cds-body-01-line-height:1.42857;
--cds-body-01-letter-spacing:0.16px;
--cds-body-02-font-size:1rem;
--cds-body-02-font-weight:400;
--cds-body-02-line-height:1.5;
--cds-body-02-letter-spacing:0;
--cds-heading-03-font-size:1.25rem;
--cds-heading-03-font-weight:400;
--cds-heading-03-line-height:1.4;
--cds-heading-03-letter-spacing:0;
--cds-heading-04-font-size:1.75rem;
--cds-heading-04-font-weight:400;
--cds-heading-04-line-height:1.28572;
--cds-heading-04-letter-spacing:0;
--cds-heading-05-font-size:2rem;
--cds-heading-05-font-weight:400;
--cds-heading-05-line-height:1.25;
--cds-heading-05-letter-spacing:0;
--cds-heading-06-font-size:2.625rem;
--cds-heading-06-font-weight:300;
--cds-heading-06-line-height:1.199;
--cds-heading-06-letter-spacing:0;
--cds-heading-07-font-size:3.375rem;
--cds-heading-07-font-weight:300;
--cds-heading-07-line-height:1.19;
--cds-heading-07-letter-spacing:0;
--cds-fluid-heading-03-font-size:1.25rem;
--cds-fluid-heading-03-font-weight:400;
--cds-fluid-heading-03-line-height:1.4;
--cds-fluid-heading-03-letter-spacing:0;
--cds-fluid-heading-04-font-size:1.75rem;
--cds-fluid-heading-04-font-weight:400;
--cds-fluid-heading-04-line-height:1.28572;
--cds-fluid-heading-04-letter-spacing:0;
--cds-fluid-heading-05-font-size:2rem;
--cds-fluid-heading-05-font-weight:400;
--cds-fluid-heading-05-line-height:1.25;
--cds-fluid-heading-05-letter-spacing:0;
--cds-fluid-heading-06-font-size:2rem;
--cds-fluid-heading-06-font-weight:600;
--cds-fluid-heading-06-line-height:1.25;
--cds-fluid-heading-06-letter-spacing:0;
--cds-fluid-paragraph-01-font-size:1.5rem;
--cds-fluid-paragraph-01-font-weight:300;
--cds-fluid-paragraph-01-line-height:1.334;
--cds-fluid-paragraph-01-letter-spacing:0;
--cds-fluid-quotation-01-font-family:"IBM Plex Serif",system-ui,-apple-system,BlinkMacSystemFont,".SFNSText-Regular",serif;
--cds-fluid-quotation-01-font-size:1.25rem;
--cds-fluid-quotation-01-font-weight:400;
--cds-fluid-quotation-01-line-height:1.3;
--cds-fluid-quotation-01-letter-spacing:0;
--cds-fluid-quotation-02-font-family:"IBM Plex Serif",system-ui,-apple-system,BlinkMacSystemFont,".SFNSText-Regular",serif;
--cds-fluid-quotation-02-font-size:2rem;
--cds-fluid-quotation-02-font-weight:300;
--cds-fluid-quotation-02-line-height:1.25;
--cds-fluid-quotation-02-letter-spacing:0;
--cds-fluid-display-01-font-size:2.625rem;
--cds-fluid-display-01-font-weight:300;
--cds-fluid-display-01-line-height:1.19;
--cds-fluid-display-01-letter-spacing:0;
--cds-fluid-display-02-font-size:2.625rem;
--cds-fluid-display-02-font-weight:600;
--cds-fluid-display-02-line-height:1.19;
--cds-fluid-display-02-letter-spacing:0;
--cds-fluid-display-03-font-size:2.625rem;
--cds-fluid-display-03-font-weight:300;
--cds-fluid-display-03-line-height:1.19;
--cds-fluid-display-03-letter-spacing:0;
--cds-fluid-display-04-font-size:2.625rem;
--cds-fluid-display-04-font-weight:300;
--cds-fluid-display-04-line-height:1.19;
--cds-fluid-display-04-letter-spacing:0;
--cds-true: ;
--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);
}
:root .cpc--banner--with-gradient, :root .cpc--configuration-summary {
--cds-ai-aura-end:hsla(0,0%,100%,0);
--cds-ai-aura-hover-background:#edf5ff;
--cds-ai-aura-hover-end:hsla(0,0%,100%,0);
--cds-ai-aura-hover-start:rgba(69,137,255,.32);
--cds-ai-aura-start:rgba(69,137,255,.1);
--cds-ai-aura-start-sm:rgba(69,137,255,.16);
--cds-ai-border-end:#78a9ff;
--cds-ai-border-start:rgba(166,200,255,.64);
--cds-ai-border-strong:#4589ff;
--cds-ai-drop-shadow:rgba(15,98,254,.1);
--cds-ai-inner-shadow:rgba(69,137,255,.1);
--cds-ai-overlay:rgba(0,17,65,.5);
--cds-ai-popover-background:#fff;
--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,.06);
--cds-ai-popover-shadow-outer-02:rgba(0,0,0,.04);
--cds-ai-skeleton-background:#d0e2ff;
--cds-ai-skeleton-element-background:#4589ff;
--cds-background:#f4f4f4;
--cds-background-active:hsla(0,0%,55%,.5);
--cds-background-brand:#0f62fe;
--cds-background-hover:hsla(0,0%,55%,.12);
--cds-background-inverse:#393939;
--cds-background-inverse-hover:#474747;
--cds-background-selected:hsla(0,0%,55%,.2);
--cds-background-selected-hover:hsla(0,0%,55%,.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:#fff;
--cds-chat-bubble-border:#e0e0e0;
--cds-chat-bubble-user:#e0e0e0;
--cds-chat-button:#0f62fe;
--cds-chat-button-active:hsla(0,0%,55%,.5);
--cds-chat-button-hover:hsla(0,0%,55%,.12);
--cds-chat-button-selected:hsla(0,0%,55%,.2);
--cds-chat-button-text-hover:#0043ce;
--cds-chat-button-text-selected:#525252;
--cds-chat-header-background:#fff;
--cds-chat-prompt-background:#fff;
--cds-chat-prompt-border-end:hsla(0,0%,96%,0);
--cds-chat-prompt-border-start:#f4f4f4;
--cds-chat-shell-background:#fff;
--cds-field-01:#fff;
--cds-field-02:#f4f4f4;
--cds-field-03:#fff;
--cds-field-hover-01:#e8e8e8;
--cds-field-hover-02:#e8e8e8;
--cds-field-hover-03:#e8e8e8;
--cds-focus:#0f62fe;
--cds-focus-inset:#fff;
--cds-focus-inverse:#fff;
--cds-highlight:#d0e2ff;
--cds-icon-disabled:hsla(0,0%,9%,.25);
--cds-icon-interactive:#0f62fe;
--cds-icon-inverse:#fff;
--cds-icon-on-color:#fff;
--cds-icon-on-color-disabled:#8d8d8d;
--cds-icon-primary:#161616;
--cds-icon-secondary:#525252;
--cds-interactive:#0f62fe;
--cds-layer-01:#fff;
--cds-layer-02:#f4f4f4;
--cds-layer-03:#fff;
--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-primary:#0f62fe;
--cds-link-primary-hover:#0043ce;
--cds-link-secondary:#0043ce;
--cds-link-visited:#8a3ffc;
--cds-overlay:hsla(0,0%,9%,.5);
--cds-shadow:rgba(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:hsla(0,0%,9%,.25);
--cds-text-error:#da1e28;
--cds-text-helper:#6f6f6f;
--cds-text-inverse:#fff;
--cds-text-on-color:#fff;
--cds-text-on-color-disabled:#8d8d8d;
--cds-text-placeholder:hsla(0,0%,9%,.4);
--cds-text-primary:#161616;
--cds-text-secondary:#525252;
--cds-toggle-off:#8d8d8d;
--cds-spacing-01:0.125rem;
--cds-spacing-02:0.25rem;
--cds-spacing-03:0.5rem;
--cds-spacing-04:0.75rem;
--cds-spacing-05:1rem;
--cds-spacing-06:1.5rem;
--cds-spacing-07:2rem;
--cds-spacing-08:2.5rem;
--cds-spacing-09:3rem;
--cds-spacing-10:4rem;
--cds-spacing-11:5rem;
--cds-spacing-12:6rem;
--cds-spacing-13:10rem;
--cds-fluid-spacing-01:0;
--cds-fluid-spacing-02:2vw;
--cds-fluid-spacing-03:5vw;
--cds-fluid-spacing-04:10vw;
--cds-caption-01-font-size:0.75rem;
--cds-caption-01-font-weight:400;
--cds-caption-01-line-height:1.33333;
--cds-caption-01-letter-spacing:0.32px;
--cds-caption-02-font-size:0.875rem;
--cds-caption-02-font-weight:400;
--cds-caption-02-line-height:1.28572;
--cds-caption-02-letter-spacing:0.32px;
--cds-label-01-font-size:0.75rem;
--cds-label-01-font-weight:400;
--cds-label-01-line-height:1.33333;
--cds-label-01-letter-spacing:0.32px;
--cds-label-02-font-size:0.875rem;
--cds-label-02-font-weight:400;
--cds-label-02-line-height:1.28572;
--cds-label-02-letter-spacing:0.16px;
--cds-helper-text-01-font-size:0.75rem;
--cds-helper-text-01-line-height:1.33333;
--cds-helper-text-01-letter-spacing:0.32px;
--cds-helper-text-02-font-size:0.875rem;
--cds-helper-text-02-font-weight:400;
--cds-helper-text-02-line-height:1.28572;
--cds-helper-text-02-letter-spacing:0.16px;
--cds-body-short-01-font-size:0.875rem;
--cds-body-short-01-font-weight:400;
--cds-body-short-01-line-height:1.28572;
--cds-body-short-01-letter-spacing:0.16px;
--cds-body-short-02-font-size:1rem;
--cds-body-short-02-font-weight:400;
--cds-body-short-02-line-height:1.375;
--cds-body-short-02-letter-spacing:0;
--cds-body-long-01-font-size:0.875rem;
--cds-body-long-01-font-weight:400;
--cds-body-long-01-line-height:1.42857;
--cds-body-long-01-letter-spacing:0.16px;
--cds-body-long-02-font-size:1rem;
--cds-body-long-02-font-weight:400;
--cds-body-long-02-line-height:1.5;
--cds-body-long-02-letter-spacing:0;
--cds-code-01-font-family:"IBM Plex Mono",system-ui,-apple-system,BlinkMacSystemFont,".SFNSText-Regular",monospace;
--cds-code-01-font-size:0.75rem;
--cds-code-01-font-weight:400;
--cds-code-01-line-height:1.33333;
--cds-code-01-letter-spacing:0.32px;
--cds-code-02-font-family:"IBM Plex Mono",system-ui,-apple-system,BlinkMacSystemFont,".SFNSText-Regular",monospace;
--cds-code-02-font-size:0.875rem;
--cds-code-02-font-weight:400;
--cds-code-02-line-height:1.42857;
--cds-code-02-letter-spacing:0.32px;
--cds-heading-01-font-size:0.875rem;
--cds-heading-01-font-weight:600;
--cds-heading-01-line-height:1.42857;
--cds-heading-01-letter-spacing:0.16px;
--cds-heading-02-font-size:1rem;
--cds-heading-02-font-weight:600;
--cds-heading-02-line-height:1.5;
--cds-heading-02-letter-spacing:0;
--cds-productive-heading-01-font-size:0.875rem;
--cds-productive-heading-01-font-weight:600;
--cds-productive-heading-01-line-height:1.28572;
--cds-productive-heading-01-letter-spacing:0.16px;
--cds-productive-heading-02-font-size:1rem;
--cds-productive-heading-02-font-weight:600;
--cds-productive-heading-02-line-height:1.375;
--cds-productive-heading-02-letter-spacing:0;
--cds-productive-heading-03-font-size:1.25rem;
--cds-productive-heading-03-font-weight:400;
--cds-productive-heading-03-line-height:1.4;
--cds-productive-heading-03-letter-spacing:0;
--cds-productive-heading-04-font-size:1.75rem;
--cds-productive-heading-04-font-weight:400;
--cds-productive-heading-04-line-height:1.28572;
--cds-productive-heading-04-letter-spacing:0;
--cds-productive-heading-05-font-size:2rem;
--cds-productive-heading-05-font-weight:400;
--cds-productive-heading-05-line-height:1.25;
--cds-productive-heading-05-letter-spacing:0;
--cds-productive-heading-06-font-size:2.625rem;
--cds-productive-heading-06-font-weight:300;
--cds-productive-heading-06-line-height:1.199;
--cds-productive-heading-06-letter-spacing:0;
--cds-productive-heading-07-font-size:3.375rem;
--cds-productive-heading-07-font-weight:300;
--cds-productive-heading-07-line-height:1.19;
--cds-productive-heading-07-letter-spacing:0;
--cds-expressive-paragraph-01-font-size:1.5rem;
--cds-expressive-paragraph-01-font-weight:300;
--cds-expressive-paragraph-01-line-height:1.334;
--cds-expressive-paragraph-01-letter-spacing:0;
--cds-expressive-heading-01-font-size:0.875rem;
--cds-expressive-heading-01-font-weight:600;
--cds-expressive-heading-01-line-height:1.42857;
--cds-expressive-heading-01-letter-spacing:0.16px;
--cds-expressive-heading-02-font-size:1rem;
--cds-expressive-heading-02-font-weight:600;
--cds-expressive-heading-02-line-height:1.5;
--cds-expressive-heading-02-letter-spacing:0;
--cds-expressive-heading-03-font-size:1.25rem;
--cds-expressive-heading-03-font-weight:400;
--cds-expressive-heading-03-line-height:1.4;
--cds-expressive-heading-03-letter-spacing:0;
--cds-expressive-heading-04-font-size:1.75rem;
--cds-expressive-heading-04-font-weight:400;
--cds-expressive-heading-04-line-height:1.28572;
--cds-expressive-heading-04-letter-spacing:0;
--cds-expressive-heading-05-font-size:2rem;
--cds-expressive-heading-05-font-weight:400;
--cds-expressive-heading-05-line-height:1.25;
--cds-expressive-heading-05-letter-spacing:0;
--cds-expressive-heading-06-font-size:2rem;
--cds-expressive-heading-06-font-weight:600;
--cds-expressive-heading-06-line-height:1.25;
--cds-expressive-heading-06-letter-spacing:0;
--cds-quotation-01-font-family:"IBM Plex Serif",system-ui,-apple-system,BlinkMacSystemFont,".SFNSText-Regular",serif;
--cds-quotation-01-font-size:1.25rem;
--cds-quotation-01-font-weight:400;
--cds-quotation-01-line-height:1.3;
--cds-quotation-01-letter-spacing:0;
--cds-quotation-02-font-family:"IBM Plex Serif",system-ui,-apple-system,BlinkMacSystemFont,".SFNSText-Regular",serif;
--cds-quotation-02-font-size:2rem;
--cds-quotation-02-font-weight:300;
--cds-quotation-02-line-height:1.25;
--cds-quotation-02-letter-spacing:0;
--cds-display-01-font-size:2.625rem;
--cds-display-01-font-weight:300;
--cds-display-01-line-height:1.19;
--cds-display-01-letter-spacing:0;
--cds-display-02-font-size:2.625rem;
--cds-display-02-font-weight:600;
--cds-display-02-line-height:1.19;
--cds-display-02-letter-spacing:0;
--cds-display-03-font-size:2.625rem;
--cds-display-03-font-weight:300;
--cds-display-03-line-height:1.19;
--cds-display-03-letter-spacing:0;
--cds-display-04-font-size:2.625rem;
--cds-display-04-font-weight:300;
--cds-display-04-line-height:1.19;
--cds-display-04-letter-spacing:0;
--cds-legal-01-font-size:0.75rem;
--cds-legal-01-font-weight:400;
--cds-legal-01-line-height:1.33333;
--cds-legal-01-letter-spacing:0.32px;
--cds-legal-02-font-size:0.875rem;
--cds-legal-02-font-weight:400;
--cds-legal-02-line-height:1.28572;
--cds-legal-02-letter-spacing:0.16px;
--cds-body-compact-01-font-size:0.875rem;
--cds-body-compact-01-font-weight:400;
--cds-body-compact-01-line-height:1.28572;
--cds-body-compact-01-letter-spacing:0.16px;
--cds-body-compact-02-font-size:1rem;
--cds-body-compact-02-font-weight:400;
--cds-body-compact-02-line-height:1.375;
--cds-body-compact-02-letter-spacing:0;
--cds-heading-compact-01-font-size:0.875rem;
--cds-heading-compact-01-font-weight:600;
--cds-heading-compact-01-line-height:1.28572;
--cds-heading-compact-01-letter-spacing:0.16px;
--cds-heading-compact-02-font-size:1rem;
--cds-heading-compact-02-font-weight:600;
--cds-heading-compact-02-line-height:1.375;
--cds-heading-compact-02-letter-spacing:0;
--cds-body-01-font-size:0.875rem;
--cds-body-01-font-weight:400;
--cds-body-01-line-height:1.42857;
--cds-body-01-letter-spacing:0.16px;
--cds-body-02-font-size:1rem;
--cds-body-02-font-weight:400;
--cds-body-02-line-height:1.5;
--cds-body-02-letter-spacing:0;
--cds-heading-03-font-size:1.25rem;
--cds-heading-03-font-weight:400;
--cds-heading-03-line-height:1.4;
--cds-heading-03-letter-spacing:0;
--cds-heading-04-font-size:1.75rem;
--cds-heading-04-font-weight:400;
--cds-heading-04-line-height:1.28572;
--cds-heading-04-letter-spacing:0;
--cds-heading-05-font-size:2rem;
--cds-heading-05-font-weight:400;
--cds-heading-05-line-height:1.25;
--cds-heading-05-letter-spacing:0;
--cds-heading-06-font-size:2.625rem;
--cds-heading-06-font-weight:300;
--cds-heading-06-line-height:1.199;
--cds-heading-06-letter-spacing:0;
--cds-heading-07-font-size:3.375rem;
--cds-heading-07-font-weight:300;
--cds-heading-07-line-height:1.19;
--cds-heading-07-letter-spacing:0;
--cds-fluid-heading-03-font-size:1.25rem;
--cds-fluid-heading-03-font-weight:400;
--cds-fluid-heading-03-line-height:1.4;
--cds-fluid-heading-03-letter-spacing:0;
--cds-fluid-heading-04-font-size:1.75rem;
--cds-fluid-heading-04-font-weight:400;
--cds-fluid-heading-04-line-height:1.28572;
--cds-fluid-heading-04-letter-spacing:0;
--cds-fluid-heading-05-font-size:2rem;
--cds-fluid-heading-05-font-weight:400;
--cds-fluid-heading-05-line-height:1.25;
--cds-fluid-heading-05-letter-spacing:0;
--cds-fluid-heading-06-font-size:2rem;
--cds-fluid-heading-06-font-weight:600;
--cds-fluid-heading-06-line-height:1.25;
--cds-fluid-heading-06-letter-spacing:0;
--cds-fluid-paragraph-01-font-size:1.5rem;
--cds-fluid-paragraph-01-font-weight:300;
--cds-fluid-paragraph-01-line-height:1.334;
--cds-fluid-paragraph-01-letter-spacing:0;
--cds-fluid-quotation-01-font-family:"IBM Plex Serif",system-ui,-apple-system,BlinkMacSystemFont,".SFNSText-Regular",serif;
--cds-fluid-quotation-01-font-size:1.25rem;
--cds-fluid-quotation-01-font-weight:400;
--cds-fluid-quotation-01-line-height:1.3;
--cds-fluid-quotation-01-letter-spacing:0;
--cds-fluid-quotation-02-font-family:"IBM Plex Serif",system-ui,-apple-system,BlinkMacSystemFont,".SFNSText-Regular",serif;
--cds-fluid-quotation-02-font-size:2rem;
--cds-fluid-quotation-02-font-weight:300;
--cds-fluid-quotation-02-line-height:1.25;
--cds-fluid-quotation-02-letter-spacing:0;
--cds-fluid-display-01-font-size:2.625rem;
--cds-fluid-display-01-font-weight:300;
--cds-fluid-display-01-line-height:1.19;
--cds-fluid-display-01-letter-spacing:0;
--cds-fluid-display-02-font-size:2.625rem;
--cds-fluid-display-02-font-weight:600;
--cds-fluid-display-02-line-height:1.19;
--cds-fluid-display-02-letter-spacing:0;
--cds-fluid-display-03-font-size:2.625rem;
--cds-fluid-display-03-font-weight:300;
--cds-fluid-display-03-line-height:1.19;
--cds-fluid-display-03-letter-spacing:0;
--cds-fluid-display-04-font-size:2.625rem;
--cds-fluid-display-04-font-weight:300;
--cds-fluid-display-04-line-height:1.19;
--cds-fluid-display-04-letter-spacing:0;
--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);
}
:root .cpc--side-nav--inverse, :root body.bx--dark-theme .cpc--side-panel-container, :root body.cds--dark-theme .cpc--side-panel-container {
--cds-ai-aura-end:transparent;
--cds-ai-aura-hover-background:#474747;
--cds-ai-aura-hover-end:transparent;
--cds-ai-aura-hover-start:rgba(69,137,255,.4);
--cds-ai-aura-start:rgba(69,137,255,.1);
--cds-ai-aura-start-sm:rgba(69,137,255,.16);
--cds-ai-border-end:#4589ff;
--cds-ai-border-start:rgba(166,200,255,.36);
--cds-ai-border-strong:#78a9ff;
--cds-ai-drop-shadow:rgba(0,0,0,.28);
--cds-ai-inner-shadow:rgba(69,137,255,.16);
--cds-ai-overlay:rgba(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,.12);
--cds-ai-popover-shadow-outer-02:rgba(0,0,0,.08);
--cds-ai-skeleton-background:rgba(120,169,255,.5);
--cds-ai-skeleton-element-background:rgba(120,169,255,.3);
--cds-background:#262626;
--cds-background-active:hsla(0,0%,55%,.4);
--cds-background-brand:#0f62fe;
--cds-background-hover:hsla(0,0%,55%,.16);
--cds-background-inverse:#f4f4f4;
--cds-background-inverse-hover:#e8e8e8;
--cds-background-selected:hsla(0,0%,55%,.24);
--cds-background-selected-hover:hsla(0,0%,55%,.32);
--cds-border-disabled:hsla(0,0%,55%,.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:hsla(0,0%,55%,.4);
--cds-chat-button-hover:hsla(0,0%,55%,.16);
--cds-chat-button-selected:hsla(0,0%,55%,.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:#fff;
--cds-focus-inset:#161616;
--cds-focus-inverse:#0f62fe;
--cds-highlight:#0043ce;
--cds-icon-disabled:hsla(0,0%,96%,.25);
--cds-icon-interactive:#fff;
--cds-icon-inverse:#161616;
--cds-icon-on-color:#fff;
--cds-icon-on-color-disabled:hsla(0,0%,100%,.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-primary:#78a9ff;
--cds-link-primary-hover:#a6c8ff;
--cds-link-secondary:#a6c8ff;
--cds-link-visited:#be95ff;
--cds-overlay:rgba(0,0,0,.65);
--cds-shadow:rgba(0,0,0,.8);
--cds-skeleton-background:#333;
--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:hsla(0,0%,96%,.25);
--cds-text-error:#ffb3b8;
--cds-text-helper:#c6c6c6;
--cds-text-inverse:#161616;
--cds-text-on-color:#fff;
--cds-text-on-color-disabled:hsla(0,0%,100%,.25);
--cds-text-placeholder:hsla(0,0%,96%,.4);
--cds-text-primary:#f4f4f4;
--cds-text-secondary:#c6c6c6;
--cds-toggle-off:#8d8d8d;
--cds-spacing-01:0.125rem;
--cds-spacing-02:0.25rem;
--cds-spacing-03:0.5rem;
--cds-spacing-04:0.75rem;
--cds-spacing-05:1rem;
--cds-spacing-06:1.5rem;
--cds-spacing-07:2rem;
--cds-spacing-08:2.5rem;
--cds-spacing-09:3rem;
--cds-spacing-10:4rem;
--cds-spacing-11:5rem;
--cds-spacing-12:6rem;
--cds-spacing-13:10rem;
--cds-fluid-spacing-01:0;
--cds-fluid-spacing-02:2vw;
--cds-fluid-spacing-03:5vw;
--cds-fluid-spacing-04:10vw;
--cds-caption-01-font-size:0.75rem;
--cds-caption-01-font-weight:400;
--cds-caption-01-line-height:1.33333;
--cds-caption-01-letter-spacing:0.32px;
--cds-caption-02-font-size:0.875rem;
--cds-caption-02-font-weight:400;
--cds-caption-02-line-height:1.28572;
--cds-caption-02-letter-spacing:0.32px;
--cds-label-01-font-size:0.75rem;
--cds-label-01-font-weight:400;
--cds-label-01-line-height:1.33333;
--cds-label-01-letter-spacing:0.32px;
--cds-label-02-font-size:0.875rem;
--cds-label-02-font-weight:400;
--cds-label-02-line-height:1.28572;
--cds-label-02-letter-spacing:0.16px;
--cds-helper-text-01-font-size:0.75rem;
--cds-helper-text-01-line-height:1.33333;
--cds-helper-text-01-letter-spacing:0.32px;
--cds-helper-text-02-font-size:0.875rem;
--cds-helper-text-02-font-weight:400;
--cds-helper-text-02-line-height:1.28572;
--cds-helper-text-02-letter-spacing:0.16px;
--cds-body-short-01-font-size:0.875rem;
--cds-body-short-01-font-weight:400;
--cds-body-short-01-line-height:1.28572;
--cds-body-short-01-letter-spacing:0.16px;
--cds-body-short-02-font-size:1rem;
--cds-body-short-02-font-weight:400;
--cds-body-short-02-line-height:1.375;
--cds-body-short-02-letter-spacing:0;
--cds-body-long-01-font-size:0.875rem;
--cds-body-long-01-font-weight:400;
--cds-body-long-01-line-height:1.42857;
--cds-body-long-01-letter-spacing:0.16px;
--cds-body-long-02-font-size:1rem;
--cds-body-long-02-font-weight:400;
--cds-body-long-02-line-height:1.5;
--cds-body-long-02-letter-spacing:0;
--cds-code-01-font-family:"IBM Plex Mono",system-ui,-apple-system,BlinkMacSystemFont,".SFNSText-Regular",monospace;
--cds-code-01-font-size:0.75rem;
--cds-code-01-font-weight:400;
--cds-code-01-line-height:1.33333;
--cds-code-01-letter-spacing:0.32px;
--cds-code-02-font-family:"IBM Plex Mono",system-ui,-apple-system,BlinkMacSystemFont,".SFNSText-Regular",monospace;
--cds-code-02-font-size:0.875rem;
--cds-code-02-font-weight:400;
--cds-code-02-line-height:1.42857;
--cds-code-02-letter-spacing:0.32px;
--cds-heading-01-font-size:0.875rem;
--cds-heading-01-font-weight:600;
--cds-heading-01-line-height:1.42857;
--cds-heading-01-letter-spacing:0.16px;
--cds-heading-02-font-size:1rem;
--cds-heading-02-font-weight:600;
--cds-heading-02-line-height:1.5;
--cds-heading-02-letter-spacing:0;
--cds-productive-heading-01-font-size:0.875rem;
--cds-productive-heading-01-font-weight:600;
--cds-productive-heading-01-line-height:1.28572;
--cds-productive-heading-01-letter-spacing:0.16px;
--cds-productive-heading-02-font-size:1rem;
--cds-productive-heading-02-font-weight:600;
--cds-productive-heading-02-line-height:1.375;
--cds-productive-heading-02-letter-spacing:0;
--cds-productive-heading-03-font-size:1.25rem;
--cds-productive-heading-03-font-weight:400;
--cds-productive-heading-03-line-height:1.4;
--cds-productive-heading-03-letter-spacing:0;
--cds-productive-heading-04-font-size:1.75rem;
--cds-productive-heading-04-font-weight:400;
--cds-productive-heading-04-line-height:1.28572;
--cds-productive-heading-04-letter-spacing:0;
--cds-productive-heading-05-font-size:2rem;
--cds-productive-heading-05-font-weight:400;
--cds-productive-heading-05-line-height:1.25;
--cds-productive-heading-05-letter-spacing:0;
--cds-productive-heading-06-font-size:2.625rem;
--cds-productive-heading-06-font-weight:300;
--cds-productive-heading-06-line-height:1.199;
--cds-productive-heading-06-letter-spacing:0;
--cds-productive-heading-07-font-size:3.375rem;
--cds-productive-heading-07-font-weight:300;
--cds-productive-heading-07-line-height:1.19;
--cds-productive-heading-07-letter-spacing:0;
--cds-expressive-paragraph-01-font-size:1.5rem;
--cds-expressive-paragraph-01-font-weight:300;
--cds-expressive-paragraph-01-line-height:1.334;
--cds-expressive-paragraph-01-letter-spacing:0;
--cds-expressive-heading-01-font-size:0.875rem;
--cds-expressive-heading-01-font-weight:600;
--cds-expressive-heading-01-line-height:1.42857;
--cds-expressive-heading-01-letter-spacing:0.16px;
--cds-expressive-heading-02-font-size:1rem;
--cds-expressive-heading-02-font-weight:600;
--cds-expressive-heading-02-line-height:1.5;
--cds-expressive-heading-02-letter-spacing:0;
--cds-expressive-heading-03-font-size:1.25rem;
--cds-expressive-heading-03-font-weight:400;
--cds-expressive-heading-03-line-height:1.4;
--cds-expressive-heading-03-letter-spacing:0;
--cds-expressive-heading-04-font-size:1.75rem;
--cds-expressive-heading-04-font-weight:400;
--cds-expressive-heading-04-line-height:1.28572;
--cds-expressive-heading-04-letter-spacing:0;
--cds-expressive-heading-05-font-size:2rem;
--cds-expressive-heading-05-font-weight:400;
--cds-expressive-heading-05-line-height:1.25;
--cds-expressive-heading-05-letter-spacing:0;
--cds-expressive-heading-06-font-size:2rem;
--cds-expressive-heading-06-font-weight:600;
--cds-expressive-heading-06-line-height:1.25;
--cds-expressive-heading-06-letter-spacing:0;
--cds-quotation-01-font-family:"IBM Plex Serif",system-ui,-apple-system,BlinkMacSystemFont,".SFNSText-Regular",serif;
--cds-quotation-01-font-size:1.25rem;
--cds-quotation-01-font-weight:400;
--cds-quotation-01-line-height:1.3;
--cds-quotation-01-letter-spacing:0;
--cds-quotation-02-font-family:"IBM Plex Serif",system-ui,-apple-system,BlinkMacSystemFont,".SFNSText-Regular",serif;
--cds-quotation-02-font-size:2rem;
--cds-quotation-02-font-weight:300;
--cds-quotation-02-line-height:1.25;
--cds-quotation-02-letter-spacing:0;
--cds-display-01-font-size:2.625rem;
--cds-display-01-font-weight:300;
--cds-display-01-line-height:1.19;
--cds-display-01-letter-spacing:0;
--cds-display-02-font-size:2.625rem;
--cds-display-02-font-weight:600;
--cds-display-02-line-height:1.19;
--cds-display-02-letter-spacing:0;
--cds-display-03-font-size:2.625rem;
--cds-display-03-font-weight:300;
--cds-display-03-line-height:1.19;
--cds-display-03-letter-spacing:0;
--cds-display-04-font-size:2.625rem;
--cds-display-04-font-weight:300;
--cds-display-04-line-height:1.19;
--cds-display-04-letter-spacing:0;
--cds-legal-01-font-size:0.75rem;
--cds-legal-01-font-weight:400;
--cds-legal-01-line-height:1.33333;
--cds-legal-01-letter-spacing:0.32px;
--cds-legal-02-font-size:0.875rem;
--cds-legal-02-font-weight:400;
--cds-legal-02-line-height:1.28572;
--cds-legal-02-letter-spacing:0.16px;
--cds-body-compact-01-font-size:0.875rem;
--cds-body-compact-01-font-weight:400;
--cds-body-compact-01-line-height:1.28572;
--cds-body-compact-01-letter-spacing:0.16px;
--cds-body-compact-02-font-size:1rem;
--cds-body-compact-02-font-weight:400;
--cds-body-compact-02-line-height:1.375;
--cds-body-compact-02-letter-spacing:0;
--cds-heading-compact-01-font-size:0.875rem;
--cds-heading-compact-01-font-weight:600;
--cds-heading-compact-01-line-height:1.28572;
--cds-heading-compact-01-letter-spacing:0.16px;
--cds-heading-compact-02-font-size:1rem;
--cds-heading-compact-02-font-weight:600;
--cds-heading-compact-02-line-height:1.375;
--cds-heading-compact-02-letter-spacing:0;
--cds-body-01-font-size:0.875rem;
--cds-body-01-font-weight:400;
--cds-body-01-line-height:1.42857;
--cds-body-01-letter-spacing:0.16px;
--cds-body-02-font-size:1rem;
--cds-body-02-font-weight:400;
--cds-body-02-line-height:1.5;
--cds-body-02-letter-spacing:0;
--cds-heading-03-font-size:1.25rem;
--cds-heading-03-font-weight:400;
--cds-heading-03-line-height:1.4;
--cds-heading-03-letter-spacing:0;
--cds-heading-04-font-size:1.75rem;
--cds-heading-04-font-weight:400;
--cds-heading-04-line-height:1.28572;
--cds-heading-04-letter-spacing:0;
--cds-heading-05-font-size:2rem;
--cds-heading-05-font-weight:400;
--cds-heading-05-line-height:1.25;
--cds-heading-05-letter-spacing:0;
--cds-heading-06-font-size:2.625rem;
--cds-heading-06-font-weight:300;
--cds-heading-06-line-height:1.199;
--cds-heading-06-letter-spacing:0;
--cds-heading-07-font-size:3.375rem;
--cds-heading-07-font-weight:300;
--cds-heading-07-line-height:1.19;
--cds-heading-07-letter-spacing:0;
--cds-fluid-heading-03-font-size:1.25rem;
--cds-fluid-heading-03-font-weight:400;
--cds-fluid-heading-03-line-height:1.4;
--cds-fluid-heading-03-letter-spacing:0;
--cds-fluid-heading-04-font-size:1.75rem;
--cds-fluid-heading-04-font-weight:400;
--cds-fluid-heading-04-line-height:1.28572;
--cds-fluid-heading-04-letter-spacing:0;
--cds-fluid-heading-05-font-size:2rem;
--cds-fluid-heading-05-font-weight:400;
--cds-fluid-heading-05-line-height:1.25;
--cds-fluid-heading-05-letter-spacing:0;
--cds-fluid-heading-06-font-size:2rem;
--cds-fluid-heading-06-font-weight:600;
--cds-fluid-heading-06-line-height:1.25;
--cds-fluid-heading-06-letter-spacing:0;
--cds-fluid-paragraph-01-font-size:1.5rem;
--cds-fluid-paragraph-01-font-weight:300;
--cds-fluid-paragraph-01-line-height:1.334;
--cds-fluid-paragraph-01-letter-spacing:0;
--cds-fluid-quotation-01-font-family:"IBM Plex Serif",system-ui,-apple-system,BlinkMacSystemFont,".SFNSText-Regular",serif;
--cds-fluid-quotation-01-font-size:1.25rem;
--cds-fluid-quotation-01-font-weight:400;
--cds-fluid-quotation-01-line-height:1.3;
--cds-fluid-quotation-01-letter-spacing:0;
--cds-fluid-quotation-02-font-family:"IBM Plex Serif",system-ui,-apple-system,BlinkMacSystemFont,".SFNSText-Regular",serif;
--cds-fluid-quotation-02-font-size:2rem;
--cds-fluid-quotation-02-font-weight:300;
--cds-fluid-quotation-02-line-height:1.25;
--cds-fluid-quotation-02-letter-spacing:0;
--cds-fluid-display-01-font-size:2.625rem;
--cds-fluid-display-01-font-weight:300;
--cds-fluid-display-01-line-height:1.19;
--cds-fluid-display-01-letter-spacing:0;
--cds-fluid-display-02-font-size:2.625rem;
--cds-fluid-display-02-font-weight:600;
--cds-fluid-display-02-line-height:1.19;
--cds-fluid-display-02-letter-spacing:0;
--cds-fluid-display-03-font-size:2.625rem;
--cds-fluid-display-03-font-weight:300;
--cds-fluid-display-03-line-height:1.19;
--cds-fluid-display-03-letter-spacing:0;
--cds-fluid-display-04-font-size:2.625rem;
--cds-fluid-display-04-font-weight:300;
--cds-fluid-display-04-line-height:1.19;
--cds-fluid-display-04-letter-spacing:0;
--cds-true: ;
--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--grid {
margin-inline: auto;
max-inline-size: 99rem;
padding-inline: 1rem;
}
@media (min-width: 42rem) {
.cds--grid {
padding-inline: 2rem;
}
}
@media (min-width: 99rem) {
.cds--grid {
padding-inline: 2.5rem;
}
.cds--grid--full-width {
max-inline-size: 100%;
}
}
.cds--row {
display: flex;
flex-wrap: wrap;
margin-inline: -1rem;
}
.cds--col-padding, .cds--row-padding [class*=cds--col] {
padding-block: 1rem;
}
.cds--grid--condensed [class*=cds--col] {
padding-block: 0.03125rem;
}
.cds--col {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col, .cds--row--condensed .cds--col {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col, .cds--row--narrow .cds--col {
padding-inline: 0 1rem;
}
.cds--col-sm-0 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-sm-0, .cds--row--condensed .cds--col-sm-0 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-sm-0, .cds--row--narrow .cds--col-sm-0 {
padding-inline: 0 1rem;
}
.cds--col-sm-1 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-sm-1, .cds--row--condensed .cds--col-sm-1 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-sm-1, .cds--row--narrow .cds--col-sm-1 {
padding-inline: 0 1rem;
}
.cds--col-sm-2 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-sm-2, .cds--row--condensed .cds--col-sm-2 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-sm-2, .cds--row--narrow .cds--col-sm-2 {
padding-inline: 0 1rem;
}
.cds--col-sm-3 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-sm-3, .cds--row--condensed .cds--col-sm-3 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-sm-3, .cds--row--narrow .cds--col-sm-3 {
padding-inline: 0 1rem;
}
.cds--col-sm-4 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-sm-4, .cds--row--condensed .cds--col-sm-4 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-sm-4, .cds--row--narrow .cds--col-sm-4 {
padding-inline: 0 1rem;
}
.cds--col-sm, .cds--col-sm--auto {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-sm, .cds--grid--condensed .cds--col-sm--auto, .cds--row--condensed .cds--col-sm, .cds--row--condensed .cds--col-sm--auto {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-sm, .cds--grid--narrow .cds--col-sm--auto, .cds--row--narrow .cds--col-sm, .cds--row--narrow .cds--col-sm--auto {
padding-inline: 0 1rem;
}
.cds--col, .cds--col-sm {
flex-basis: 0;
flex-grow: 1;
max-inline-size: 100%;
}
.cds--col--auto, .cds--col-sm--auto {
flex: 1 0 0%;
inline-size: auto;
max-inline-size: 100%;
}
.cds--col-sm-0 {
display: none;
}
.cds--col-sm-1 {
display: block;
flex: 0 0 25%;
max-inline-size: 25%;
}
.cds--col-sm-2 {
display: block;
flex: 0 0 50%;
max-inline-size: 50%;
}
.cds--col-sm-3 {
display: block;
flex: 0 0 75%;
max-inline-size: 75%;
}
.cds--col-sm-4 {
display: block;
flex: 0 0 100%;
max-inline-size: 100%;
}
.cds--offset-sm-0 {
margin-inline-start: 0;
}
.cds--offset-sm-1 {
margin-inline-start: 25%;
}
.cds--offset-sm-2 {
margin-inline-start: 50%;
}
.cds--offset-sm-3 {
margin-inline-start: 75%;
}
.cds--col-md-0 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-md-0, .cds--row--condensed .cds--col-md-0 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-md-0, .cds--row--narrow .cds--col-md-0 {
padding-inline: 0 1rem;
}
.cds--col-md-1 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-md-1, .cds--row--condensed .cds--col-md-1 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-md-1, .cds--row--narrow .cds--col-md-1 {
padding-inline: 0 1rem;
}
.cds--col-md-2 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-md-2, .cds--row--condensed .cds--col-md-2 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-md-2, .cds--row--narrow .cds--col-md-2 {
padding-inline: 0 1rem;
}
.cds--col-md-3 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-md-3, .cds--row--condensed .cds--col-md-3 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-md-3, .cds--row--narrow .cds--col-md-3 {
padding-inline: 0 1rem;
}
.cds--col-md-4 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-md-4, .cds--row--condensed .cds--col-md-4 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-md-4, .cds--row--narrow .cds--col-md-4 {
padding-inline: 0 1rem;
}
.cds--col-md-5 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-md-5, .cds--row--condensed .cds--col-md-5 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-md-5, .cds--row--narrow .cds--col-md-5 {
padding-inline: 0 1rem;
}
.cds--col-md-6 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-md-6, .cds--row--condensed .cds--col-md-6 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-md-6, .cds--row--narrow .cds--col-md-6 {
padding-inline: 0 1rem;
}
.cds--col-md-7 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-md-7, .cds--row--condensed .cds--col-md-7 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-md-7, .cds--row--narrow .cds--col-md-7 {
padding-inline: 0 1rem;
}
.cds--col-md-8 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-md-8, .cds--row--condensed .cds--col-md-8 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-md-8, .cds--row--narrow .cds--col-md-8 {
padding-inline: 0 1rem;
}
.cds--col-md, .cds--col-md--auto {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-md, .cds--grid--condensed .cds--col-md--auto, .cds--row--condensed .cds--col-md, .cds--row--condensed .cds--col-md--auto {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-md, .cds--grid--narrow .cds--col-md--auto, .cds--row--narrow .cds--col-md, .cds--row--narrow .cds--col-md--auto {
padding-inline: 0 1rem;
}
@media (min-width: 42rem) {
.cds--col, .cds--col-md {
flex-basis: 0;
flex-grow: 1;
max-inline-size: 100%;
}
.cds--col--auto, .cds--col-md--auto {
flex: 1 0 0%;
inline-size: auto;
max-inline-size: 100%;
}
.cds--col-md-0 {
display: none;
}
.cds--col-md-1 {
display: block;
flex: 0 0 12.5%;
max-inline-size: 12.5%;
}
.cds--col-md-2 {
display: block;
flex: 0 0 25%;
max-inline-size: 25%;
}
.cds--col-md-3 {
display: block;
flex: 0 0 37.5%;
max-inline-size: 37.5%;
}
.cds--col-md-4 {
display: block;
flex: 0 0 50%;
max-inline-size: 50%;
}
.cds--col-md-5 {
display: block;
flex: 0 0 62.5%;
max-inline-size: 62.5%;
}
.cds--col-md-6 {
display: block;
flex: 0 0 75%;
max-inline-size: 75%;
}
.cds--col-md-7 {
display: block;
flex: 0 0 87.5%;
max-inline-size: 87.5%;
}
.cds--col-md-8 {
display: block;
flex: 0 0 100%;
max-inline-size: 100%;
}
.cds--offset-md-0 {
margin-inline-start: 0;
}
.cds--offset-md-1 {
margin-inline-start: 12.5%;
}
.cds--offset-md-2 {
margin-inline-start: 25%;
}
.cds--offset-md-3 {
margin-inline-start: 37.5%;
}
.cds--offset-md-4 {
margin-inline-start: 50%;
}
.cds--offset-md-5 {
margin-inline-start: 62.5%;
}
.cds--offset-md-6 {
margin-inline-start: 75%;
}
.cds--offset-md-7 {
margin-inline-start: 87.5%;
}
}
.cds--col-lg-0 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-lg-0, .cds--row--condensed .cds--col-lg-0 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-lg-0, .cds--row--narrow .cds--col-lg-0 {
padding-inline: 0 1rem;
}
.cds--col-lg-1 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-lg-1, .cds--row--condensed .cds--col-lg-1 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-lg-1, .cds--row--narrow .cds--col-lg-1 {
padding-inline: 0 1rem;
}
.cds--col-lg-2 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-lg-2, .cds--row--condensed .cds--col-lg-2 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-lg-2, .cds--row--narrow .cds--col-lg-2 {
padding-inline: 0 1rem;
}
.cds--col-lg-3 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-lg-3, .cds--row--condensed .cds--col-lg-3 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-lg-3, .cds--row--narrow .cds--col-lg-3 {
padding-inline: 0 1rem;
}
.cds--col-lg-4 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-lg-4, .cds--row--condensed .cds--col-lg-4 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-lg-4, .cds--row--narrow .cds--col-lg-4 {
padding-inline: 0 1rem;
}
.cds--col-lg-5 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-lg-5, .cds--row--condensed .cds--col-lg-5 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-lg-5, .cds--row--narrow .cds--col-lg-5 {
padding-inline: 0 1rem;
}
.cds--col-lg-6 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-lg-6, .cds--row--condensed .cds--col-lg-6 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-lg-6, .cds--row--narrow .cds--col-lg-6 {
padding-inline: 0 1rem;
}
.cds--col-lg-7 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-lg-7, .cds--row--condensed .cds--col-lg-7 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-lg-7, .cds--row--narrow .cds--col-lg-7 {
padding-inline: 0 1rem;
}
.cds--col-lg-8 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-lg-8, .cds--row--condensed .cds--col-lg-8 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-lg-8, .cds--row--narrow .cds--col-lg-8 {
padding-inline: 0 1rem;
}
.cds--col-lg-9 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-lg-9, .cds--row--condensed .cds--col-lg-9 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-lg-9, .cds--row--narrow .cds--col-lg-9 {
padding-inline: 0 1rem;
}
.cds--col-lg-10 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-lg-10, .cds--row--condensed .cds--col-lg-10 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-lg-10, .cds--row--narrow .cds--col-lg-10 {
padding-inline: 0 1rem;
}
.cds--col-lg-11 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-lg-11, .cds--row--condensed .cds--col-lg-11 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-lg-11, .cds--row--narrow .cds--col-lg-11 {
padding-inline: 0 1rem;
}
.cds--col-lg-12 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-lg-12, .cds--row--condensed .cds--col-lg-12 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-lg-12, .cds--row--narrow .cds--col-lg-12 {
padding-inline: 0 1rem;
}
.cds--col-lg-13 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-lg-13, .cds--row--condensed .cds--col-lg-13 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-lg-13, .cds--row--narrow .cds--col-lg-13 {
padding-inline: 0 1rem;
}
.cds--col-lg-14 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-lg-14, .cds--row--condensed .cds--col-lg-14 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-lg-14, .cds--row--narrow .cds--col-lg-14 {
padding-inline: 0 1rem;
}
.cds--col-lg-15 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-lg-15, .cds--row--condensed .cds--col-lg-15 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-lg-15, .cds--row--narrow .cds--col-lg-15 {
padding-inline: 0 1rem;
}
.cds--col-lg-16 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-lg-16, .cds--row--condensed .cds--col-lg-16 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-lg-16, .cds--row--narrow .cds--col-lg-16 {
padding-inline: 0 1rem;
}
.cds--col-lg, .cds--col-lg--auto {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-lg, .cds--grid--condensed .cds--col-lg--auto, .cds--row--condensed .cds--col-lg, .cds--row--condensed .cds--col-lg--auto {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-lg, .cds--grid--narrow .cds--col-lg--auto, .cds--row--narrow .cds--col-lg, .cds--row--narrow .cds--col-lg--auto {
padding-inline: 0 1rem;
}
@media (min-width: 66rem) {
.cds--col, .cds--col-lg {
flex-basis: 0;
flex-grow: 1;
max-inline-size: 100%;
}
.cds--col--auto, .cds--col-lg--auto {
flex: 1 0 0%;
inline-size: auto;
max-inline-size: 100%;
}
.cds--col-lg-0 {
display: none;
}
.cds--col-lg-1 {
display: block;
flex: 0 0 6.25%;
max-inline-size: 6.25%;
}
.cds--col-lg-2 {
display: block;
flex: 0 0 12.5%;
max-inline-size: 12.5%;
}
.cds--col-lg-3 {
display: block;
flex: 0 0 18.75%;
max-inline-size: 18.75%;
}
.cds--col-lg-4 {
display: block;
flex: 0 0 25%;
max-inline-size: 25%;
}
.cds--col-lg-5 {
display: block;
flex: 0 0 31.25%;
max-inline-size: 31.25%;
}
.cds--col-lg-6 {
display: block;
flex: 0 0 37.5%;
max-inline-size: 37.5%;
}
.cds--col-lg-7 {
display: block;
flex: 0 0 43.75%;
max-inline-size: 43.75%;
}
.cds--col-lg-8 {
display: block;
flex: 0 0 50%;
max-inline-size: 50%;
}
.cds--col-lg-9 {
display: block;
flex: 0 0 56.25%;
max-inline-size: 56.25%;
}
.cds--col-lg-10 {
display: block;
flex: 0 0 62.5%;
max-inline-size: 62.5%;
}
.cds--col-lg-11 {
display: block;
flex: 0 0 68.75%;
max-inline-size: 68.75%;
}
.cds--col-lg-12 {
display: block;
flex: 0 0 75%;
max-inline-size: 75%;
}
.cds--col-lg-13 {
display: block;
flex: 0 0 81.25%;
max-inline-size: 81.25%;
}
.cds--col-lg-14 {
display: block;
flex: 0 0 87.5%;
max-inline-size: 87.5%;
}
.cds--col-lg-15 {
display: block;
flex: 0 0 93.75%;
max-inline-size: 93.75%;
}
.cds--col-lg-16 {
display: block;
flex: 0 0 100%;
max-inline-size: 100%;
}
.cds--offset-lg-0 {
margin-inline-start: 0;
}
.cds--offset-lg-1 {
margin-inline-start: 6.25%;
}
.cds--offset-lg-2 {
margin-inline-start: 12.5%;
}
.cds--offset-lg-3 {
margin-inline-start: 18.75%;
}
.cds--offset-lg-4 {
margin-inline-start: 25%;
}
.cds--offset-lg-5 {
margin-inline-start: 31.25%;
}
.cds--offset-lg-6 {
margin-inline-start: 37.5%;
}
.cds--offset-lg-7 {
margin-inline-start: 43.75%;
}
.cds--offset-lg-8 {
margin-inline-start: 50%;
}
.cds--offset-lg-9 {
margin-inline-start: 56.25%;
}
.cds--offset-lg-10 {
margin-inline-start: 62.5%;
}
.cds--offset-lg-11 {
margin-inline-start: 68.75%;
}
.cds--offset-lg-12 {
margin-inline-start: 75%;
}
.cds--offset-lg-13 {
margin-inline-start: 81.25%;
}
.cds--offset-lg-14 {
margin-inline-start: 87.5%;
}
.cds--offset-lg-15 {
margin-inline-start: 93.75%;
}
}
.cds--col-xlg-0 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-xlg-0, .cds--row--condensed .cds--col-xlg-0 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-xlg-0, .cds--row--narrow .cds--col-xlg-0 {
padding-inline: 0 1rem;
}
.cds--col-xlg-1 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-xlg-1, .cds--row--condensed .cds--col-xlg-1 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-xlg-1, .cds--row--narrow .cds--col-xlg-1 {
padding-inline: 0 1rem;
}
.cds--col-xlg-2 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-xlg-2, .cds--row--condensed .cds--col-xlg-2 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-xlg-2, .cds--row--narrow .cds--col-xlg-2 {
padding-inline: 0 1rem;
}
.cds--col-xlg-3 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-xlg-3, .cds--row--condensed .cds--col-xlg-3 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-xlg-3, .cds--row--narrow .cds--col-xlg-3 {
padding-inline: 0 1rem;
}
.cds--col-xlg-4 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-xlg-4, .cds--row--condensed .cds--col-xlg-4 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-xlg-4, .cds--row--narrow .cds--col-xlg-4 {
padding-inline: 0 1rem;
}
.cds--col-xlg-5 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-xlg-5, .cds--row--condensed .cds--col-xlg-5 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-xlg-5, .cds--row--narrow .cds--col-xlg-5 {
padding-inline: 0 1rem;
}
.cds--col-xlg-6 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-xlg-6, .cds--row--condensed .cds--col-xlg-6 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-xlg-6, .cds--row--narrow .cds--col-xlg-6 {
padding-inline: 0 1rem;
}
.cds--col-xlg-7 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-xlg-7, .cds--row--condensed .cds--col-xlg-7 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-xlg-7, .cds--row--narrow .cds--col-xlg-7 {
padding-inline: 0 1rem;
}
.cds--col-xlg-8 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-xlg-8, .cds--row--condensed .cds--col-xlg-8 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-xlg-8, .cds--row--narrow .cds--col-xlg-8 {
padding-inline: 0 1rem;
}
.cds--col-xlg-9 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-xlg-9, .cds--row--condensed .cds--col-xlg-9 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-xlg-9, .cds--row--narrow .cds--col-xlg-9 {
padding-inline: 0 1rem;
}
.cds--col-xlg-10 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-xlg-10, .cds--row--condensed .cds--col-xlg-10 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-xlg-10, .cds--row--narrow .cds--col-xlg-10 {
padding-inline: 0 1rem;
}
.cds--col-xlg-11 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-xlg-11, .cds--row--condensed .cds--col-xlg-11 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-xlg-11, .cds--row--narrow .cds--col-xlg-11 {
padding-inline: 0 1rem;
}
.cds--col-xlg-12 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-xlg-12, .cds--row--condensed .cds--col-xlg-12 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-xlg-12, .cds--row--narrow .cds--col-xlg-12 {
padding-inline: 0 1rem;
}
.cds--col-xlg-13 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-xlg-13, .cds--row--condensed .cds--col-xlg-13 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-xlg-13, .cds--row--narrow .cds--col-xlg-13 {
padding-inline: 0 1rem;
}
.cds--col-xlg-14 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-xlg-14, .cds--row--condensed .cds--col-xlg-14 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-xlg-14, .cds--row--narrow .cds--col-xlg-14 {
padding-inline: 0 1rem;
}
.cds--col-xlg-15 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-xlg-15, .cds--row--condensed .cds--col-xlg-15 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-xlg-15, .cds--row--narrow .cds--col-xlg-15 {
padding-inline: 0 1rem;
}
.cds--col-xlg-16 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-xlg-16, .cds--row--condensed .cds--col-xlg-16 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-xlg-16, .cds--row--narrow .cds--col-xlg-16 {
padding-inline: 0 1rem;
}
.cds--col-xlg, .cds--col-xlg--auto {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-xlg, .cds--grid--condensed .cds--col-xlg--auto, .cds--row--condensed .cds--col-xlg, .cds--row--condensed .cds--col-xlg--auto {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-xlg, .cds--grid--narrow .cds--col-xlg--auto, .cds--row--narrow .cds--col-xlg, .cds--row--narrow .cds--col-xlg--auto {
padding-inline: 0 1rem;
}
@media (min-width: 82rem) {
.cds--col, .cds--col-xlg {
flex-basis: 0;
flex-grow: 1;
max-inline-size: 100%;
}
.cds--col--auto, .cds--col-xlg--auto {
flex: 1 0 0%;
inline-size: auto;
max-inline-size: 100%;
}
.cds--col-xlg-0 {
display: none;
}
.cds--col-xlg-1 {
display: block;
flex: 0 0 6.25%;
max-inline-size: 6.25%;
}
.cds--col-xlg-2 {
display: block;
flex: 0 0 12.5%;
max-inline-size: 12.5%;
}
.cds--col-xlg-3 {
display: block;
flex: 0 0 18.75%;
max-inline-size: 18.75%;
}
.cds--col-xlg-4 {
display: block;
flex: 0 0 25%;
max-inline-size: 25%;
}
.cds--col-xlg-5 {
display: block;
flex: 0 0 31.25%;
max-inline-size: 31.25%;
}
.cds--col-xlg-6 {
display: block;
flex: 0 0 37.5%;
max-inline-size: 37.5%;
}
.cds--col-xlg-7 {
display: block;
flex: 0 0 43.75%;
max-inline-size: 43.75%;
}
.cds--col-xlg-8 {
display: block;
flex: 0 0 50%;
max-inline-size: 50%;
}
.cds--col-xlg-9 {
display: block;
flex: 0 0 56.25%;
max-inline-size: 56.25%;
}
.cds--col-xlg-10 {
display: block;
flex: 0 0 62.5%;
max-inline-size: 62.5%;
}
.cds--col-xlg-11 {
display: block;
flex: 0 0 68.75%;
max-inline-size: 68.75%;
}
.cds--col-xlg-12 {
display: block;
flex: 0 0 75%;
max-inline-size: 75%;
}
.cds--col-xlg-13 {
display: block;
flex: 0 0 81.25%;
max-inline-size: 81.25%;
}
.cds--col-xlg-14 {
display: block;
flex: 0 0 87.5%;
max-inline-size: 87.5%;
}
.cds--col-xlg-15 {
display: block;
flex: 0 0 93.75%;
max-inline-size: 93.75%;
}
.cds--col-xlg-16 {
display: block;
flex: 0 0 100%;
max-inline-size: 100%;
}
.cds--offset-xlg-0 {
margin-inline-start: 0;
}
.cds--offset-xlg-1 {
margin-inline-start: 6.25%;
}
.cds--offset-xlg-2 {
margin-inline-start: 12.5%;
}
.cds--offset-xlg-3 {
margin-inline-start: 18.75%;
}
.cds--offset-xlg-4 {
margin-inline-start: 25%;
}
.cds--offset-xlg-5 {
margin-inline-start: 31.25%;
}
.cds--offset-xlg-6 {
margin-inline-start: 37.5%;
}
.cds--offset-xlg-7 {
margin-inline-start: 43.75%;
}
.cds--offset-xlg-8 {
margin-inline-start: 50%;
}
.cds--offset-xlg-9 {
margin-inline-start: 56.25%;
}
.cds--offset-xlg-10 {
margin-inline-start: 62.5%;
}
.cds--offset-xlg-11 {
margin-inline-start: 68.75%;
}
.cds--offset-xlg-12 {
margin-inline-start: 75%;
}
.cds--offset-xlg-13 {
margin-inline-start: 81.25%;
}
.cds--offset-xlg-14 {
margin-inline-start: 87.5%;
}
.cds--offset-xlg-15 {
margin-inline-start: 93.75%;
}
}
.cds--col-max-0 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-max-0, .cds--row--condensed .cds--col-max-0 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-max-0, .cds--row--narrow .cds--col-max-0 {
padding-inline: 0 1rem;
}
.cds--col-max-1 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-max-1, .cds--row--condensed .cds--col-max-1 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-max-1, .cds--row--narrow .cds--col-max-1 {
padding-inline: 0 1rem;
}
.cds--col-max-2 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-max-2, .cds--row--condensed .cds--col-max-2 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-max-2, .cds--row--narrow .cds--col-max-2 {
padding-inline: 0 1rem;
}
.cds--col-max-3 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-max-3, .cds--row--condensed .cds--col-max-3 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-max-3, .cds--row--narrow .cds--col-max-3 {
padding-inline: 0 1rem;
}
.cds--col-max-4 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-max-4, .cds--row--condensed .cds--col-max-4 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-max-4, .cds--row--narrow .cds--col-max-4 {
padding-inline: 0 1rem;
}
.cds--col-max-5 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-max-5, .cds--row--condensed .cds--col-max-5 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-max-5, .cds--row--narrow .cds--col-max-5 {
padding-inline: 0 1rem;
}
.cds--col-max-6 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-max-6, .cds--row--condensed .cds--col-max-6 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-max-6, .cds--row--narrow .cds--col-max-6 {
padding-inline: 0 1rem;
}
.cds--col-max-7 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-max-7, .cds--row--condensed .cds--col-max-7 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-max-7, .cds--row--narrow .cds--col-max-7 {
padding-inline: 0 1rem;
}
.cds--col-max-8 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-max-8, .cds--row--condensed .cds--col-max-8 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-max-8, .cds--row--narrow .cds--col-max-8 {
padding-inline: 0 1rem;
}
.cds--col-max-9 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-max-9, .cds--row--condensed .cds--col-max-9 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-max-9, .cds--row--narrow .cds--col-max-9 {
padding-inline: 0 1rem;
}
.cds--col-max-10 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-max-10, .cds--row--condensed .cds--col-max-10 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-max-10, .cds--row--narrow .cds--col-max-10 {
padding-inline: 0 1rem;
}
.cds--col-max-11 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-max-11, .cds--row--condensed .cds--col-max-11 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-max-11, .cds--row--narrow .cds--col-max-11 {
padding-inline: 0 1rem;
}
.cds--col-max-12 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-max-12, .cds--row--condensed .cds--col-max-12 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-max-12, .cds--row--narrow .cds--col-max-12 {
padding-inline: 0 1rem;
}
.cds--col-max-13 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-max-13, .cds--row--condensed .cds--col-max-13 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-max-13, .cds--row--narrow .cds--col-max-13 {
padding-inline: 0 1rem;
}
.cds--col-max-14 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-max-14, .cds--row--condensed .cds--col-max-14 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-max-14, .cds--row--narrow .cds--col-max-14 {
padding-inline: 0 1rem;
}
.cds--col-max-15 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-max-15, .cds--row--condensed .cds--col-max-15 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-max-15, .cds--row--narrow .cds--col-max-15 {
padding-inline: 0 1rem;
}
.cds--col-max-16 {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-max-16, .cds--row--condensed .cds--col-max-16 {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-max-16, .cds--row--narrow .cds--col-max-16 {
padding-inline: 0 1rem;
}
.cds--col-max, .cds--col-max--auto {
inline-size: 100%;
padding-inline: 1rem;
}
.cds--grid--condensed .cds--col-max, .cds--grid--condensed .cds--col-max--auto, .cds--row--condensed .cds--col-max, .cds--row--condensed .cds--col-max--auto {
padding-inline: 0.03125rem;
}
.cds--grid--narrow .cds--col-max, .cds--grid--narrow .cds--col-max--auto, .cds--row--narrow .cds--col-max, .cds--row--narrow .cds--col-max--auto {
padding-inline: 0 1rem;
}
@media (min-width: 99rem) {
.cds--col, .cds--col-max {
flex-basis: 0;
flex-grow: 1;
max-inline-size: 100%;
}
.cds--col--auto, .cds--col-max--auto {
flex: 1 0 0%;
inline-size: auto;
max-inline-size: 100%;
}
.cds--col-max-0 {
display: none;
}
.cds--col-max-1 {
display: block;
flex: 0 0 6.25%;
max-inline-size: 6.25%;
}
.cds--col-max-2 {
display: block;
flex: 0 0 12.5%;
max-inline-size: 12.5%;
}
.cds--col-max-3 {
display: block;
flex: 0 0 18.75%;
max-inline-size: 18.75%;
}
.cds--col-max-4 {
display: block;
flex: 0 0 25%;
max-inline-size: 25%;
}
.cds--col-max-5 {
display: block;
flex: 0 0 31.25%;
max-inline-size: 31.25%;
}
.cds--col-max-6 {
display: block;
flex: 0 0 37.5%;
max-inline-size: 37.5%;
}
.cds--col-max-7 {
display: block;
flex: 0 0 43.75%;
max-inline-size: 43.75%;
}
.cds--col-max-8 {
display: block;
flex: 0 0 50%;
max-inline-size: 50%;
}
.cds--col-max-9 {
display: block;
flex: 0 0 56.25%;
max-inline-size: 56.25%;
}
.cds--col-max-10 {
display: block;
flex: 0 0 62.5%;
max-inline-size: 62.5%;
}
.cds--col-max-11 {
display: block;
flex: 0 0 68.75%;
max-inline-size: 68.75%;
}
.cds--col-max-12 {
display: block;
flex: 0 0 75%;
max-inline-size: 75%;
}
.cds--col-max-13 {
display: block;
flex: 0 0 81.25%;
max-inline-size: 81.25%;
}
.cds--col-max-14 {
display: block;
flex: 0 0 87.5%;
max-inline-size: 87.5%;
}
.cds--col-max-15 {
display: block;
flex: 0 0 93.75%;
max-inline-size: 93.75%;
}
.cds--col-max-16 {
display: block;
flex: 0 0 100%;
max-inline-size: 100%;
}
.cds--offset-max-0 {
margin-inline-start: 0;
}
.cds--offset-max-1 {
margin-inline-start: 6.25%;
}
.cds--offset-max-2 {
margin-inline-start: 12.5%;
}
.cds--offset-max-3 {
margin-inline-start: 18.75%;
}
.cds--offset-max-4 {
margin-inline-start: 25%;
}
.cds--offset-max-5 {
margin-inline-start: 31.25%;
}
.cds--offset-max-6 {
margin-inline-start: 37.5%;
}
.cds--offset-max-7 {
margin-inline-start: 43.75%;
}
.cds--offset-max-8 {
margin-inline-start: 50%;
}
.cds--offset-max-9 {
margin-inline-start: 56.25%;
}
.cds--offset-max-10 {
margin-inline-start: 62.5%;
}
.cds--offset-max-11 {
margin-inline-start: 68.75%;
}
.cds--offset-max-12 {
margin-inline-start: 75%;
}
.cds--offset-max-13 {
margin-inline-start: 81.25%;
}
.cds--offset-max-14 {
margin-inline-start: 87.5%;
}
.cds--offset-max-15 {
margin-inline-start: 93.75%;
}
}
.cds--no-gutter, .cds--row.cds--no-gutter [class*=cds--col] {
padding-inline: 0;
}
.cds--no-gutter--start, .cds--row.cds--no-gutter--start [class*=cds--col] {
padding-inline-start: 0;
}
.cds--no-gutter--end, .cds--row.cds--no-gutter--end [class*=cds--col] {
padding-inline-end: 0;
}
.cds--hang--start {
padding-inline-start: 1rem;
}
.cds--hang--end {
padding-inline-end: 1rem;
}
.cpc--wait, .cpc--wait * {
cursor: wait !important;
}
.cpc-tooltip-trigger-button {
align-items: center;
appearance: none;
background: none;
background-color: unset;
border: 0;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
display: flex;
font-family: inherit;
font-size: 100%;
inline-size: 100%;
height: 2rem;
justify-content: center;
margin: 0;
padding: 0;
text-align: start;
vertical-align: baseline;
width: 2rem;
}
.cpc-tooltip-trigger-button *, .cpc-tooltip-trigger-button :after, .cpc-tooltip-trigger-button :before {
box-sizing: inherit;
}
.cpc-tooltip-trigger-button::-moz-focus-inner {
border: 0;
}
.cpc-tooltip-trigger-button svg {
fill: var(--cds-background-inverse, #393939);
}
.cpc--layout {
padding-left: 2rem;
padding-right: 2rem;
width: 100%;
}
.cpc--layout__required {
color: var(--cds-button-danger-primary, #da1e28);
font-weight: 600;
}
.cds--g10 .cpc--animated-background, .cds--white .cpc--animated-background {
--custom-animated-background-set-cyan-magenta-purple-1:#bae6ff;
--custom-animated-background-set-cyan-magenta-purple-2:#e8daff;
--custom-animated-background-set-cyan-magenta-purple-3:#ffd6e8;
--custom-animated-background-set-cyan-magenta-purple-4:#e8daff;
--custom-animated-background-set-cyan-magenta-purple-5:#bae6ff;
--custom-animated-background-set-cyan-magenta-purple-6:#ffd6e8;
--custom-animated-background-set-cyan-teal-1:#bae6ff;
--custom-animated-background-set-cyan-teal-2:#d9fbfb;
--custom-animated-background-set-cyan-teal-3:#bae6ff;
--custom-animated-background-set-cyan-teal-4:#bae6ff;
--custom-animated-background-set-cyan-teal-5:#d9fbfb;
}
.cds--g100 .cpc--animated-background, .cds--g90 .cpc--animated-background {
--custom-animated-background-set-cyan-magenta-purple-1:#012749;
--custom-animated-background-set-cyan-magenta-purple-2:#31135e;
--custom-animated-background-set-cyan-magenta-purple-3:#510224;
--custom-animated-background-set-cyan-magenta-purple-4:#31135e;
--custom-animated-background-set-cyan-magenta-purple-5:#012749;
--custom-animated-background-set-cyan-magenta-purple-6:#510224;
--custom-animated-background-set-cyan-teal-1:#012749;
--custom-animated-background-set-cyan-teal-2:#022b30;
--custom-animated-background-set-cyan-teal-3:#012749;
--custom-animated-background-set-cyan-teal-4:#012749;
--custom-animated-background-set-cyan-teal-5:#022b30;
}
.cpc--animated-background {
background-color: var(--cds-background, #fff);
bottom: 0;
height: 100%;
width: 100%;
}
@keyframes rotate-set-cyan-magenta-purple-1 {
0% {
fill: var(--custom-animated-background-set-cyan-magenta-purple-1);
}
16.6666666667% {
fill: var(--custom-animated-background-set-cyan-magenta-purple-2);
}
33.3333333333% {
fill: var(--custom-animated-background-set-cyan-magenta-purple-3);
}
50% {
fill: var(--custom-animated-background-set-cyan-magenta-purple-4);
}
66.6666666667% {
fill: var(--custom-animated-background-set-cyan-magenta-purple-5);
}
83.3333333333% {
fill: var(--custom-animated-background-set-cyan-magenta-purple-6);
}
}
@keyframes rotate-set-cyan-magenta-purple-2 {
0% {
fill: var(--custom-animated-background-set-cyan-magenta-purple-2);
}
16.6666666667% {
fill: var(--custom-animated-background-set-cyan-magenta-purple-3);
}
33.3333333333% {
fill: var(--custom-animated-background-set-cyan-magenta-purple-4);
}
50% {
fill: var(--custom-animated-background-set-cyan-magenta-purple-5);
}
66.6666666667% {
fill: var(--custom-animated-background-set-cyan-magenta-purple-6);
}
83.3333333333% {
fill: var(--custom-animated-background-set-cyan-magenta-purple-1);
}
}
@keyframes rotate-set-cyan-magenta-purple-3 {
0% {
fill: var(--custom-animated-background-set-cyan-magenta-purple-3);
}
16.6666666667% {
fill: var(--custom-animated-background-set-cyan-magenta-purple-4);
}
33.3333333333% {
fill: var(--custom-animated-background-set-cyan-magenta-purple-5);
}
50% {
fill: var(--custom-animated-background-set-cyan-magenta-purple-6);
}
66.6666666667% {
fill: var(--custom-animated-background-set-cyan-magenta-purple-1);
}
83.3333333333% {
fill: var(--custom-animated-background-set-cyan-magenta-purple-2);
}
}
@keyframes rotate-set-cyan-magenta-purple-4 {
0% {
fill: var(--custom-animated-background-set-cyan-magenta-purple-4);
}
16.6666666667% {
fill: var(--custom-animated-background-set-cyan-magenta-purple-5);
}
33.3333333333% {
fill: var(--custom-animated-background-set-cyan-magenta-purple-6);
}
50% {
fill: var(--custom-animated-background-set-cyan-magenta-purple-1);
}
66.6666666667% {
fill: var(--custom-animated-background-set-cyan-magenta-purple-2);
}
83.3333333333% {
fill: var(--custom-animated-background-set-cyan-magenta-purple-3);
}
}
@keyframes rotate-set-cyan-magenta-purple-5 {
0% {
fill: var(--custom-animated-background-set-cyan-magenta-purple-5);
}
16.6666666667% {
fill: var(--custom-animated-background-set-cyan-magenta-purple-6);
}
33.3333333333% {
fill: var(--custom-animated-background-set-cyan-magenta-purple-1);
}
50% {
fill: var(--custom-animated-background-set-cyan-magenta-purple-2);
}
66.6666666667% {
fill: var(--custom-animated-background-set-cyan-magenta-purple-3);
}
83.3333333333% {
fill: var(--custom-animated-background-set-cyan-magenta-purple-4);
}
}
@keyframes rotate-set-cyan-magenta-purple-6 {
0% {
fill: var(--custom-animated-background-set-cyan-magenta-purple-6);
}
16.6666666667% {
fill: var(--custom-animated-background-set-cyan-magenta-purple-1);
}
33.3333333333% {
fill: var(--custom-animated-background-set-cyan-magenta-purple-2);
}
50% {
fill: var(--custom-animated-background-set-cyan-magenta-purple-3);
}
66.6666666667% {
fill: var(--custom-animated-background-set-cyan-magenta-purple-4);
}
83.3333333333% {
fill: var(--custom-animated-background-set-cyan-magenta-purple-5);
}
}
.cpc--animated-background.set-cyan-magenta-purple svg ellipse {
mix-blend-mode: luminosity;
opacity: 0.8;
transform: scale(0.8);
will-change: transform, fill, opacity;
}
.cpc--animated-background.set-cyan-magenta-purple svg ellipse:first-child {
fill: var(--custom-animated-background-set-cyan-magenta-purple-1);
transform-origin: 0 100%;
}
.cpc--animated-background.set-cyan-magenta-purple svg ellipse:nth-child(2) {
fill: var(--custom-animated-background-set-cyan-magenta-purple-2);
transform-origin: 25% 100%;
}
.cpc--animated-background.set-cyan-magenta-purple svg ellipse:nth-child(3) {
fill: var(--custom-animated-background-set-cyan-magenta-purple-3);
transform-origin: 50% 100%;
}
.cpc--animated-background.set-cyan-magenta-purple svg ellipse:nth-child(4) {
fill: var(--custom-animated-background-set-cyan-magenta-purple-4);
transform-origin: 75% 100%;
}
.cpc--animated-background.set-cyan-magenta-purple svg ellipse:nth-child(5) {
fill: var(--custom-animated-background-set-cyan-magenta-purple-5);
transform-origin: 100% 100%;
}
.cpc--animated-background--motion.set-cyan-magenta-purple svg ellipse:first-child {
animation: scale-bop var(--duration) infinite ease, illuminate var(--duration) infinite alternate ease, rotate-set-cyan-magenta-purple-1 calc(var(--duration) * 5) ease infinite;
animation-delay: calc(var(--duration) / 5 * 0);
}
.cpc--animated-background--motion.set-cyan-magenta-purple svg ellipse:nth-child(2) {
animation: scale-bop var(--duration) infinite ease, illuminate var(--duration) infinite alternate ease, rotate-set-cyan-magenta-purple-2 calc(var(--duration) * 5) ease infinite;
animation-delay: calc(var(--duration) / 5 * 1);
}
.cpc--animated-background--motion.set-cyan-magenta-purple svg ellipse:nth-child(3) {
animation: scale-bop var(--duration) infinite ease, illuminate var(--duration) infinite alternate ease, rotate-set-cyan-magenta-purple-3 calc(var(--duration) * 5) ease infinite;
animation-delay: calc(var(--duration) / 5 * 2);
}
.cpc--animated-background--motion.set-cyan-magenta-purple svg ellipse:nth-child(4) {
animation: scale-bop var(--duration) infinite ease, illuminate var(--duration) infinite alternate ease, rotate-set-cyan-magenta-purple-4 calc(var(--duration) * 5) ease infinite;
animation-delay: calc(var(--duration) / 5 * 3);
}
.cpc--animated-background--motion.set-cyan-magenta-purple svg ellipse:nth-child(5) {
animation: scale-bop var(--duration) infinite ease, illuminate var(--duration) infinite alternate ease, rotate-set-cyan-magenta-purple-5 calc(var(--duration) * 5) ease infinite;
animation-delay: calc(var(--duration) / 5 * 4);
}
@keyframes scale-bop {
0% {
transform: scale(0.8) translateY(0);
}
50% {
transform: scale(1.1, 1.3) translateY(-5%);
}
to {
transform: scale(0.8) translateY(0);
}
}
@keyframes illuminate {
0% {
opacity: 0.8;
}
50% {
opacity: 1;
}
to {
opacity: 0.8;
}
}
@keyframes rotate-set-cyan-teal-1 {
0% {
fill: var(--custom-animated-background-set-cyan-teal-1);
}
20% {
fill: var(--custom-animated-background-set-cyan-teal-2);
}
40% {
fill: var(--custom-animated-background-set-cyan-teal-3);
}
60% {
fill: var(--custom-animated-background-set-cyan-teal-4);
}
80% {
fill: var(--custom-animated-background-set-cyan-teal-5);
}
}
@keyframes rotate-set-cyan-teal-2 {
0% {
fill: var(--custom-animated-background-set-cyan-teal-2);
}
20% {
fill: var(--custom-animated-background-set-cyan-teal-3);
}
40% {
fill: var(--custom-animated-background-set-cyan-teal-4);
}
60% {
fill: var(--custom-animated-background-set-cyan-teal-5);
}
80% {
fill: var(--custom-animated-background-set-cyan-teal-1);
}
}
@keyframes rotate-set-cyan-teal-3 {
0% {
fill: var(--custom-animated-background-set-cyan-teal-3);
}
20% {
fill: var(--custom-animated-background-set-cyan-teal-4);
}
40% {
fill: var(--custom-animated-background-set-cyan-teal-5);
}
60% {
fill: var(--custom-animated-background-set-cyan-teal-1);
}
80% {
fill: var(--custom-animated-background-set-cyan-teal-2);
}
}
@keyframes rotate-set-cyan-teal-4 {
0% {
fill: var(--custom-animated-background-set-cyan-teal-4);
}
20% {
fill: var(--custom-animated-background-set-cyan-teal-5);
}
40% {
fill: var(--custom-animated-background-set-cyan-teal-1);
}
60% {
fill: var(--custom-animated-background-set-cyan-teal-2);
}
80% {
fill: var(--custom-animated-background-set-cyan-teal-3);
}
}
@keyframes rotate-set-cyan-teal-5 {
0% {
fill: var(--custom-animated-background-set-cyan-teal-5);
}
20% {
fill: var(--custom-animated-background-set-cyan-teal-1);
}
40% {
fill: var(--custom-animated-background-set-cyan-teal-2);
}
60% {
fill: var(--custom-animated-background-set-cyan-teal-3);
}
80% {
fill: var(--custom-animated-background-set-cyan-teal-4);
}
}
.cpc--animated-background.set-cyan-teal svg ellipse {
mix-blend-mode: luminosity;
opacity: 0.8;
transform: scale(0.8);
will-change: transform, fill, opacity;
}
.cpc--animated-background.set-cyan-teal svg ellipse:first-child {
fill: var(--custom-animated-background-set-cyan-teal-1);
transform-origin: 0 100%;
}
.cpc--animated-background.set-cyan-teal svg ellipse:nth-child(2) {
fill: var(--custom-animated-background-set-cyan-teal-2);
transform-origin: 25% 100%;
}
.cpc--animated-background.set-cyan-teal svg ellipse:nth-child(3) {
fill: var(--custom-animated-background-set-cyan-teal-3);
transform-origin: 50% 100%;
}
.cpc--animated-background.set-cyan-teal svg ellipse:nth-child(4) {
fill: var(--custom-animated-background-set-cyan-teal-4);
transform-origin: 75% 100%;
}
.cpc--animated-background.set-cyan-teal svg ellipse:nth-child(5) {
fill: var(--custom-animated-background-set-cyan-teal-5);
transform-origin: 100% 100%;
}
.cpc--animated-background--motion.set-cyan-teal svg ellipse:first-child {
animation: scale-bop var(--duration) infinite ease, illuminate var(--duration) infinite alternate ease, rotate-set-cyan-teal-1 calc(var(--duration) * 5) ease infinite;
animation-delay: calc(var(--duration) / 5 * 0);
}
.cpc--animated-background--motion.set-cyan-teal svg ellipse:nth-child(2) {
animation: scale-bop var(--duration) infinite ease, illuminate var(--duration) infinite alternate ease, rotate-set-cyan-teal-2 calc(var(--duration) * 5) ease infinite;
animation-delay: calc(var(--duration) / 5 * 1);
}
.cpc--animated-background--motion.set-cyan-teal svg ellipse:nth-child(3) {
animation: scale-bop var(--duration) infinite ease, illuminate var(--duration) infinite alternate ease, rotate-set-cyan-teal-3 calc(var(--duration) * 5) ease infinite;
animation-delay: calc(var(--duration) / 5 * 2);
}
.cpc--animated-background--motion.set-cyan-teal svg ellipse:nth-child(4) {
animation: scale-bop var(--duration) infinite ease, illuminate var(--duration) infinite alternate ease, rotate-set-cyan-teal-4 calc(var(--duration) * 5) ease infinite;
animation-delay: calc(var(--duration) / 5 * 3);
}
.cpc--animated-background--motion.set-cyan-teal svg ellipse:nth-child(5) {
animation: scale-bop var(--duration) infinite ease, illuminate var(--duration) infinite alternate ease, rotate-set-cyan-teal-5 calc(var(--duration) * 5) ease infinite;
animation-delay: calc(var(--duration) / 5 * 4);
}
.cpc--animated-background__container {
height: 100%;
left: 0;
overflow: hidden;
position: fixed;
top: 0;
transform-origin: center center;
transition: all 0.3s ease-in;
width: 100%;
z-index: -1;
}
.cpc--animated-numbers {
font-size: var(--cds-heading-03-font-size, 1.25rem);
font-weight: var(--cds-heading-03-font-weight, 400);
letter-spacing: var(--cds-heading-03-letter-spacing, 0);
line-height: var(--cds-heading-03-line-height, 1.4);
margin: 1rem 1rem 2rem;
}
.cpc--animated-numbers__sm {
font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
font-weight: var(--cds-heading-compact-01-font-weight, 600);
letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-heading-compact-01-line-height, 1.28572);
}
.cpc--animated-numbers__numbers {
align-items: baseline;
display: flex;
}
.cpc--animated-numbers__numbers-float {
height: 0;
width: 0;
}
.cpc--animated-numbers__previous-number {
display: flex;
position: relative;
}
.cpc--animated-numbers__current-number, .cpc--animated-numbers__previous-number {
color: var(--cds-text-primary, #161616);
font-weight: 300;
}
.cpc--animated-numbers__increase_number-exit {
animation: increaseNumberExit 667ms cubic-bezier(0.2, 0, 0.38, 0.9) 0ms 1 forwards;
}
@media (prefers-reduced-motion: reduce) {
.cpc--animated-numbers__increase_number-exit {
animation-duration: 0.6s;
}
}
.cpc--animated-numbers__increase_number-enter {
animation: increaseNumberEnter 667ms cubic-bezier(0.2, 0, 0.38, 0.9) 0ms 1 forwards;
opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
.cpc--animated-numbers__increase_number-enter {
animation-duration: 0.6s;
}
}
.cpc--animated-numbers__decrease_number-exit {
animation: decreaseNumberExit 667ms cubic-bezier(0.2, 0, 0.38, 0.9) 0ms 1 forwards;
}
@media (prefers-reduced-motion: reduce) {
.cpc--animated-numbers__decrease_number-exit {
animation-duration: 0.6s;
}
}
.cpc--animated-numbers__decrease_number-enter {
animation: decreaseNumberEnter 667ms cubic-bezier(0, 0, 0.38, 0.9) 0ms 1 forwards;
opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
.cpc--animated-numbers__decrease_number-enter {
animation-duration: 0.6s;
}
}
.cpc--animated-numbers__hidden {
display: none;
opacity: 0;
visibility: hidden;
}
.cpc--animated-numbers .cpc--animated-numbers__digit-0 {
animation-delay: 0ms;
}
.cpc--animated-numbers .cpc--animated-numbers__digit-decrease-0 {
animation-delay: 0.21s;
}
.cpc--animated-numbers .cpc--animated-numbers__digit-1 {
animation-delay: 42ms;
}
.cpc--animated-numbers .cpc--animated-numbers__digit-decrease-1 {
animation-delay: 168ms;
}
.cpc--animated-numbers .cpc--animated-numbers__digit-2 {
animation-delay: 84ms;
}
.cpc--animated-numbers .cpc--animated-numbers__digit-3, .cpc--animated-numbers .cpc--animated-numbers__digit-decrease-2 {
animation-delay: 126ms;
}
.cpc--animated-numbers .cpc--animated-numbers__digit-decrease-3 {
animation-delay: 84ms;
}
.cpc--animated-numbers .cpc--animated-numbers__digit-4 {
animation-delay: 168ms;
}
.cpc--animated-numbers .cpc--animated-numbers__digit-decrease-4 {
animation-delay: 42ms;
}
.cpc--animated-numbers .cpc--animated-numbers__digit-5 {
animation-delay: 0.21s;
}
.cpc--animated-numbers .cpc--animated-numbers__digit-decrease-5 {
animation-delay: 0ms;
}
.cds--g10, .cds--white {
--blue-background:#bae6ff;
--blue-text:theme.$text-primary;
}
.cds--dark-theme, .cds--g100, .cds--g90 {
--blue-background:#012749;
--blue-text:theme.$text-on-color;
--blue-link-text:theme.$text-on-color;
}
.cpc--banner {
align-items: center;
background-color: var(--cds-layer-accent-01, #e0e0e0);
display: flex;
justify-content: space-between;
padding: 1rem 2.5rem;
}
.cpc--banner p {
font-weight: 600;
}
.cpc--banner a {
color: var(--cds-support-info, #0043ce);
font-weight: 500;
margin-left: 0.5rem;
}
.cpc--banner__children-container {
align-items: center;
display: flex;
}
.cpc--banner__close-button {
background: transparent;
border: none;
cursor: pointer;
}
.cpc--banner__close-button > svg {
fill: var(--cds-layer-selected-inverse, #161616);
}
.cpc--banner--gradient {
background: #022d9d;
background: linear-gradient(294deg, #022d9d, #584acf 35%);
}
.cpc--banner--gradient, .cpc--banner--gradient a {
color: var(--cds-text-on-color, #fff);
}
.cpc--banner--gradient .cpc--banner__children-container button {
background-color: transparent;
border: 1px solid var(--cds-background, #fff);
color: var(--cds-background, #fff);
margin-left: 0.75rem;
}
.cpc--banner--gradient .cpc--banner__children-container button:hover {
background-color: transparent;
color: inherit;
}
.cpc--banner--gradient .cpc--banner__close-button > svg {
fill: var(--cds-layer-accent-01, #e0e0e0);
}
.cpc--banner--blue {
background-color: var(--blue-background);
color: var(--blue-text);
min-height: 52px;
padding: 0 0 0 2rem;
}
.cpc--banner--blue a {
color: var(--blue-link-text);
}
.cpc--banner--blue .cpc--banner__close-button {
padding: 1rem;
position: static;
right: 0;
top: 0;
}
.cpc--banner--blue .cpc--banner__children-container {
flex-grow: 1;
justify-content: space-between;
}
.cpc--banner--blue .cpc--banner__text-block {
display: inline-block;
margin: 1rem 0;
}
.cpc--banner--blue p.cpc--banner__title {
display: inline;
font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
font-weight: var(--cds-heading-compact-01-font-weight, 600);
letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-heading-compact-01-line-height, 1.28572);
margin-right: 4px;
}
.cpc--banner--blue p.cpc--banner__description {
display: inline;
font-weight: var(--cds-body-01-font-weight, 400);
font-weight: 400;
}
.cpc--banner--blue p.cpc--banner__description, .cpc--card {
font-size: var(--cds-body-01-font-size, 0.875rem);
letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
line-height: var(--cds-body-01-line-height, 1.42857);
}
.cpc--card {
background-color: var(--cds-layer-01, #f4f4f4);
display: flex;
flex-direction: column;
font-weight: var(--cds-body-01-font-weight, 400);
width: 100%;
}
.cpc--card--layer-2 {
background: var(--cds-layer-02, #fff);
}
.cpc--card--call-out {
background-color: #262626;
color: var(--cds-text-on-color, #fff);
}
@media (prefers-reduced-motion: no-preference) {
.cpc--card--fade-in {
animation: carbon--motion(entrance, productive) fadein 145ms 0s 1;
}
@keyframes fadein {
0% {
opacity: 0;
transform: translateY(3rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
}
@media (prefers-reduced-motion: reduce) {
.cpc--card--fade-in {
animation: none;
}
}
.cpc--card__header {
align-items: center;
display: flex;
justify-content: space-between;
padding: 1rem 1rem 0;
position: relative;
}
.cpc--card__header--editable, .cpc--card__header--editing {
padding: 0 0 0 1rem;
}
.cpc--card__header--editing, .cpc--card__header--editing .cpc--card__header-button.cds--btn, .cpc--card__header--editing .cpc--card__header-button.cds--btn .cds--btn__icon path {
fill: var(--cds-text-on-color, #fff);
background-color: var(--cds-button-primary, #0f62fe);
color: var(--cds-text-on-color, #fff);
}
.cpc--card__header--editing .cpc--card__header-button--save.cds--btn:before {
background-color: var(--cds-text-on-color, #fff);
content: "";
display: block;
height: 1rem;
left: 0;
opacity: 1;
position: absolute;
width: 0.05rem;
}
.cpc--card__header--editing .cpc--card__header-button--save.cds--btn:focus:before, .cpc--card__header--editing .cpc--card__header-button--save.cds--btn:hover:before, .cpc--card__header--editing .cpc--card__header-button:focus + .cpc--card__header-button--save.cds--btn:before, .cpc--card__header--editing .cpc--card__header-button:hover + .cpc--card__header-button--save.cds--btn:before {
opacity: 0;
}
.cpc--card__header--editing .cpc--card__header-button.cds--btn:hover {
background-color: var(--cds-button-primary-hover, #0050e6);
}
.cpc--card__header--editing .cpc--card__header-button.cds--btn:active {
background-color: var(--cds-button-primary-active, #002d9c);
}
.cpc--card__header--editing .cpc--card__header-button.cds--btn:focus {
border-color: var(--cds-focus, #0f62fe);
}
.cpc--card__header--editing .cpc--card__header-button.cds--btn:disabled {
background-color: var(--cds-button-disabled, #c6c6c6);
color: var(--cds-text-on-color-disabled, #8d8d8d);
}
.cpc--card__header--editing .cpc--card__header-button.cds--btn:disabled .cds--btn__icon path {
fill: var(--cds-icon-on-color-disabled, #8d8d8d);
}
.cpc--card__title {
font-size: var(--cds-heading-03-font-size, 1.25rem);
font-weight: var(--cds-heading-03-font-weight, 400);
letter-spacing: var(--cds-heading-03-letter-spacing, 0);
line-height: var(--cds-heading-03-line-height, 1.4);
}
.cpc--card__header--small .cpc--card__title {
font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
font-weight: var(--cds-heading-compact-01-font-weight, 600);
letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-heading-compact-01-line-height, 1.28572);
}
.cpc--card__header--double .cpc--card__title {
font-size: var(--cds-heading-05-font-size, 2rem);
font-weight: var(--cds-heading-05-font-weight, 400);
letter-spacing: var(--cds-heading-05-letter-spacing, 0);
line-height: var(--cds-heading-05-line-height, 1.25);
}
.cpc--card__header .cpc--card__subtitle {
color: var(--cds-text-secondary, #525252);
font-size: var(--cds-label-01-font-size, 0.75rem);
font-weight: var(--cds-label-01-font-weight, 400);
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
line-height: var(--cds-label-01-line-height, 1.33333);
}
.cpc--card__header--editing .cpc--card__subtitle {
color: var(--cds-text-on-color, #fff);
}
.cpc--card__body {
padding: 1rem;
}
.cpc--card__body--short {
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
}
.cpc--card__body:first-child, .cpc--card__header--editing + .cpc--card__body {
padding-top: 1rem;
}
.cpc--card__body-content {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.cpc--card__footer {
align-items: center;
display: flex;
flex-wrap: wrap;
}
.cpc--card__footer > * {
margin: 1rem 1rem 0 0;
}
.cpc--card__footer .cds--skeleton {
width: 100%;
}
.cpc--card__image-wrap {
padding-top: 56.25%;
position: relative;
}
.cpc--card__image {
height: auto;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.cpc--card__labeled-rows {
display: grid;
grid-template-columns: minmax(5rem, 33%) minmax(min-content, 66%);
}
.cpc--card__labeled-rows > * {
padding-bottom: 1rem;
}
.cpc--card__labeled-rows > :last-child, .cpc--card__labeled-rows > :nth-last-child(2) {
padding-bottom: 0;
}
.cpc--card__labeled-rows > :nth-child(odd):not(.cpc--card__grid-row--full-width) {
font-size: var(--cds-label-01-font-size, 0.75rem);
font-weight: var(--cds-label-01-font-weight, 400);
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
line-height: var(--cds-label-01-line-height, 1.33333);
}
.cpc--card__labeled-rows > :nth-child(2n):not(.cpc--card__grid-row--full-width) {
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
padding-left: 2rem;
}
.cpc--card__stacked-labeled-rows .cds--row {
row-gap: 1rem;
}
.cpc--card__stacked-labeled-rows-label {
color: var(--cds-text-secondary, #525252);
font-size: var(--cds-label-01-font-size, 0.75rem);
font-weight: var(--cds-label-01-font-weight, 400);
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
line-height: var(--cds-label-01-line-height, 1.33333);
padding-bottom: 0.25rem;
}
.cpc--card__stacked-labeled-rows-value {
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
word-break: break-all;
}
.cpc--card .link-with-icon {
margin-left: 1rem;
margin-right: 0.3rem;
vertical-align: top;
}
.cpc--card-illustration {
align-self: flex-end;
display: none;
display: block;
height: 5rem;
width: 90px;
}
.cpc--card-illustration__image {
display: none;
display: block;
height: 6rem;
transform: translate(38%, 19%);
}
.cpc--cascading-selector {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.cpc--cascading-selector > * {
margin-right: 1rem;
}
.cpc--cascading-selector__parent-container {
display: flex;
flex-direction: column;
width: fit-content;
}
.cpc--cascading-selector > div:last-child {
margin-right: 0;
}
.cpc--cascading-selector__tile-box {
display: flex;
flex-direction: column;
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
}
.cpc--cascading-selector__tile-box__container {
background-color: #fff;
border-bottom: 1px solid #000;
display: flex;
flex-direction: column;
height: 319px;
margin-bottom: 10px;
overflow: hidden;
overflow-y: scroll;
width: 164px;
}
.cpc--cascading-selector__tile-box__container > * {
order: 1;
}
@media (prefers-reduced-motion: no-preference) {
.cpc--cascading-selector__tile-box__container {
transition: height 0.4s cubic-bezier(0.4, 0.14, 0.3, 1);
}
}
.cpc--cascading-selector__tile-box__container--completed {
border-bottom: none;
height: 64px;
overflow-y: hidden;
}
.cpc--cascading-selector__tile-box__container--disabled {
background-color: #f9f9f9;
}
.cpc--cascading-selector__tile-box__container :last-child {
margin-right: 0;
}
@media (prefers-reduced-motion: no-preference) {
.cpc--cascading-selector__tile-box__tile {
animation-duration: 0.6s;
animation-name: slideInTile;
animation-timing-function: cubic-bezier(0.4, 0.14, 0.3, 1);
}
}
.cpc--cascading-selector__tile-box__tile--selected {
order: 0;
}
.cpc--cascading-selector__tile-box__skeleton {
height: 100%;
width: 100%;
}
.cpc--cascading-selector__details {
align-items: center;
display: flex;
flex-direction: column;
padding: 0 1rem;
}
@media (prefers-reduced-motion: no-preference) {
.cpc--cascading-selector__details {
animation-duration: 0.3s;
animation-name: detailsAnim;
animation-timing-function: cubic-bezier(0.4, 0.14, 0.3, 1);
}
}
.cpc--cascading-selector__details__border {
border-bottom: 1px dashed var(--cds-border-strong-01, #8d8d8d);
border-left: 1px dashed var(--cds-border-strong-01, #8d8d8d);
border-right: 1px dashed var(--cds-border-strong-01, #8d8d8d);
height: 16px;
width: 100%;
}
@keyframes slideInTile {
0% {
opacity: 0;
transform: translateY(35%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes detailsAnim {
0% {
opacity: 0;
}
to {
opacity: 1;
}
}
.cpc--catalog-metadata-tag {
display: flex;
flex-direction: row;
}
.cpc--catalog-metadata-tag-item {
background-color: var(--cds-layer-01, #f4f4f4);
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-size: 0.75rem;
font-weight: var(--cds-code-01-font-weight, 400);
height: 1.5rem;
letter-spacing: var(--cds-code-01-letter-spacing, 0.32px);
line-height: var(--cds-code-01-line-height, 1.33333);
margin: 0 0.25rem;
padding: 0.25rem;
}
.cpc--catalog-metadata-tag-skeleton {
height: 1.5rem;
}
.cpc--catalog-tile {
background-color: var(--cds-layer-01, #f4f4f4);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
cursor: pointer;
display: block;
padding: 1rem;
text-decoration: none;
width: 100%;
}
.cpc--catalog-tile:focus {
outline: 2px solid var(--cds-focus, #0f62fe);
}
.cpc--catalog-tile:hover .cpc--catalog-tile__view-tile-arrow {
display: unset;
}
.cpc--catalog-tile:not(.cpc--catalog-tile__list-view):not(.cpc--catalog-tile__consulting-view) {
max-width: 30rem;
}
.cpc--catalog-tile__content-wrapper {
background-color: transparent;
display: flex;
flex-direction: column;
height: 100%;
padding: 0;
position: relative;
width: 100%;
}
.cpc--catalog-tile__consulting-view .cpc--catalog-tile__content-wrapper, .cpc--catalog-tile__list-view .cpc--catalog-tile__content-wrapper {
flex-direction: row;
}
.cpc--catalog-tile__header-container {
display: flex;
flex-direction: column;
min-width: 2.5rem;
}
.cpc--catalog-tile__consulting-view .cpc--catalog-tile__header-container, .cpc--catalog-tile__list-view .cpc--catalog-tile__header-container {
flex-direction: row;
}
.cpc--catalog-tile__icon-container {
background-color: transparent;
display: flex;
flex-direction: column;
margin: 0.25rem;
position: relative;
}
.cpc--catalog-tile__icon-container svg {
height: 2.5rem;
width: 2.5rem;
}
.cpc--catalog-tile__consulting-view .cpc--catalog-tile__icon-container svg, .cpc--catalog-tile__list-view .cpc--catalog-tile__icon-container svg {
height: 1.5rem;
width: 1.5rem;
}
.cpc--catalog-tile .w-90 {
width: 90%;
}
.cpc--catalog-tile .header-tag span {
align-items: center;
display: flex;
justify-content: flex-start;
}
.cpc--catalog-tile .header-tag svg, .cpc--catalog-tile .header-tag__text {
margin: 0.25rem;
}
.cpc--catalog-tile .header-tag svg {
height: 0.875rem;
width: 0.875rem;
}
.cpc--catalog-tile .header-tag-select {
margin-right: 2rem;
}
.cpc--catalog-tile__decorator {
fill: var(--cds-text-primary, #161616);
margin-left: 0.5rem;
position: relative;
top: 1px;
}
.cpc--catalog-tile__decorator svg {
height: 0.875rem;
width: 0.875rem;
}
.cpc--catalog-tile__fs-12-fw-400 {
color: var(--cds-text-secondary, #525252);
font-size: 0.75rem;
font-weight: 400;
margin-left: 0.75rem;
max-width: 22rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cpc--catalog-tile__icon-with-label {
align-items: center;
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
}
.cpc--catalog-tile__icon-with-label-list-con {
align-items: flex-start;
margin-top: 0.5rem;
}
.cpc--catalog-tile__icon-footer {
align-items: flex-end;
display: flex;
justify-content: space-between;
}
.cpc--catalog-tile__view-tile-arrow {
color: var(--cds-link-primary, #0f62fe);
display: none;
}
.cpc--catalog-tile__desc {
max-width: 40rem;
}
.cpc--catalog-tile__desc, .cpc--catalog-tile__desc-container {
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
}
.cpc--catalog-tile__desc-container {
color: var(--cds-text-secondary, #525252);
display: flex;
flex-direction: column;
height: 100%;
line-height: 1.25;
min-height: 6.25rem;
}
.cpc--catalog-tile__button-container {
display: flex;
flex-direction: column;
margin-left: auto;
padding-left: 1rem;
}
.cpc--catalog-tile__button-container a {
font-weight: 600;
width: 7.5rem;
}
.cpc--catalog-tile__button-container a:not(:first-child) {
margin-top: 1rem;
}
.cpc--catalog-tile__consulting-view .cpc--catalog-tile__button-container {
margin: 1rem 0 0;
padding: 0;
}
.cpc--catalog-tile__consulting-view .cpc--catalog-tile__button-container a {
width: auto;
}
.cpc--catalog-tile__tag {
color: var(--cds-text-secondary, #525252);
font-size: 0.75rem;
font-weight: 400;
line-height: 1.25;
}
.cpc--catalog-tile__tag-container {
display: flex;
flex-wrap: wrap;
font-size: var(--cds-label-02-font-size, 0.875rem);
font-weight: var(--cds-label-02-font-weight, 400);
letter-spacing: var(--cds-label-02-letter-spacing, 0.16px);
line-height: var(--cds-label-02-line-height, 1.28572);
}
.cpc--catalog-tile__tag-container li {
align-items: center;
display: flex;
}
.cpc--catalog-tile__tag-container li:not(:last-child):after {
content: " • ";
}
.cpc--catalog-tile__tag-container__tile-tags {
margin-bottom: 1.5rem;
margin-top: 1rem;
}
.cpc--catalog-tile__tag-container__tile-tags .cds--tag.cpc--tag-list--tag {
margin-left: 0;
}
.cpc--catalog-tile__tag-icon-container {
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-between;
}
.cpc--catalog-tile__featured-icon-container {
display: none;
height: 200px;
margin: -1rem -1rem -1rem auto;
min-width: 416px;
overflow: hidden;
padding-left: 1rem;
}
.cpc--catalog-tile__featured-icon-container img, .cpc--catalog-tile__featured-icon-container svg {
height: 200px;
width: 400px;
}
@media screen and (min-width: 66rem) {
.cpc--catalog-tile__featured-icon-container {
display: block;
}
}
.cpc--catalog-tile__header {
color: var(--cds-text-primary, #161616);
margin-bottom: 1rem;
min-width: inherit;
}
.cpc--catalog-tile__header-name {
font-size: var(--cds-heading-02-font-size, 1rem);
font-weight: var(--cds-heading-02-font-weight, 600);
letter-spacing: var(--cds-heading-02-letter-spacing, 0);
line-height: var(--cds-heading-02-line-height, 1.5);
margin: 0;
}
@media screen and (min-width: 550px) {
.cpc--catalog-tile__header {
width: calc(100% - 50px);
}
.cpc--catalog-tile__consulting-view .cpc--catalog-tile__header, .cpc--catalog-tile__list-view .cpc--catalog-tile__header {
max-width: none;
width: 100%;
}
}
.cpc--catalog-tile__search-text {
color: var(--cds-focus, #0f62fe);
}
.cpc--catalog-tile__skeleton {
align-content: flex-start;
background-color: var(--cds-layer-01, #f4f4f4);
display: flex;
flex-direction: column;
height: 12.5rem;
justify-content: space-around;
padding: 1.5rem;
width: 30rem;
}
.cpc--code-editor .invalid-editor {
border: 1px solid var(--cds-text-error, #da1e28);
}
.cpc--code-editor .invalid-message {
color: var(--cds-text-error, #da1e28);
padding-top: 0.5rem;
}
.cpc--code-editor-container {
height: 480px;
margin-top: 1rem;
outline: 1px solid var(--cds-border-strong-01, #8d8d8d);
}
.cpc--code-sample-modal .cds--modal-container {
height: 100%;
padding: 1rem;
}
.cpc--code-sample-modal .cds--modal-container .cds--modal-header {
margin-bottom: 1.5rem;
}
.cpc--code-sample-modal .cds--modal-container .cds--modal-content {
display: flex;
flex-direction: column;
height: 100%;
}
.cpc--code-sample-modal .cds--modal-container .cds--modal-content .cds--layer-two {
flex-grow: 1;
}
.cpc--code-sample-modal .cds--modal-container .cds--modal-close {
margin: 1.25rem 1rem 1rem;
}
.cpc--code-sample-sidepanel .cpc--side-panel__content {
display: flex;
flex-direction: column;
}
.cpc--code-sample-sidepanel .cpc--side-panel__content .cpc--side-panel__body-content {
flex-grow: 1;
}
.cpc--code-sample {
display: flex;
flex-direction: column;
height: 100%;
}
.cpc--code-sample-description {
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
padding: 1rem;
}
.cpc--code-sample .cds--tab-content:not([hidden]) {
display: flex;
flex-direction: column;
flex-grow: 1;
padding: 0;
}
.cpc--code-sample .cds--tab-content:not([hidden]) .cds--snippet {
height: 100%;
max-width: unset;
}
.cpc--code-sample .cpc--message .cds--tile .cpc--message__content {
margin-bottom: 0;
}
.cpc--configuration-summary {
background: var(--cds-layer-selected-inverse, #161616);
color: var(--cds-text-on-color, #fff);
display: none;
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
height: calc(100vh - 3rem);
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
line-height: 0.75rem;
overflow-y: auto;
padding-bottom: 3rem;
position: fixed;
right: 0;
top: 3rem;
width: 24rem;
z-index: z("floating");
}
.cpc--configuration-summary.cpc--configuration-summary--open {
display: block;
}
.cpc--configuration-summary--title {
font-weight: 600;
margin: 1.5rem 1rem;
}
.cpc--configuration-summary--footer {
bottom: 0;
position: fixed;
}
.cpc--configuration-summary--section {
padding: 0.5rem 1rem 0;
}
.cpc--configuration-summary--section-title {
border-bottom: 1px solid var(--cds-border-strong-01, #8d8d8d);
font-size: 0.95rem;
font-weight: 400;
margin: 0 0 0.5rem;
max-width: 24rem;
padding: 0.5rem 0;
}
.cpc--configuration-summary--terms {
color: var(--cds-layer-accent-active-01, #a8a8a8);
}
.cpc--configuration-summary--desc {
color: var(--cds-text-on-color, #fff);
margin: 0.5rem 0 18px;
}
.cpc--context-banner {
background-color: var(--cds-layer-selected-inverse, #161616);
border-width: 0;
border-bottom: 1px solid var(--cds-border-strong-03, #8d8d8d);
border-left: 0 solid var(--cds-border-strong-03, #8d8d8d);
border-right: 0 solid var(--cds-border-strong-03, #8d8d8d);
border-top: 1px solid var(--cds-border-strong-03, #8d8d8d);
color: var(--cds-layer-01, #f4f4f4);
padding: 8px 12px;
}
.cpc--context-banner__note {
display: inline;
font-weight: 700;
}
.cpc--cos-browser__title {
font-size: var(--cds-heading-03-font-size, 1.25rem);
font-weight: var(--cds-heading-03-font-weight, 400);
letter-spacing: var(--cds-heading-03-letter-spacing, 0);
line-height: var(--cds-heading-03-line-height, 1.4);
padding-bottom: 1rem;
}
.cpc--cos-browser__description {
display: flex;
flex-direction: column;
font-size: var(--cds-body-01-font-size, 0.875rem);
font-weight: var(--cds-body-01-font-weight, 400);
letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
line-height: var(--cds-body-01-line-height, 1.42857);
padding-bottom: 1rem;
}
.cpc--cos-browser__description p {
padding-bottom: 0.5rem;
}
.cpc--cos-browser__sections-horizontal {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.cpc--cos-browser__sections-horizontal > div {
flex-basis: 50%;
flex-grow: 1;
}
.cpc--cos-browser__sections-horizontal > div:first-of-type {
margin-right: 2.5rem;
}
.cpc--cos-browser__section {
padding: 0.5rem 0 1rem;
}
.cpc--cos-browser__section-head {
color: var(--cds-text-secondary, #525252);
font-size: var(--cds-label-01-font-size, 0.75rem);
font-weight: var(--cds-label-01-font-weight, 400);
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
line-height: var(--cds-label-01-line-height, 1.33333);
padding-bottom: 0.5rem;
}
.cpc--cos-browser__select-renew-description {
display: flex;
flex-direction: row;
}
.cpc--cos-browser__renew {
margin-left: 0.25rem;
margin-top: 20px;
}
.cpc--cos-browser__select-description {
display: flex;
flex-direction: column;
max-width: 20rem;
width: 100% !important;
}
.cpc--cos-browser__select-skeleton {
max-width: 20rem;
}
.cpc--cos-browser__text {
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
}
.cpc--cos-browser__text-helper {
padding-top: 0.25rem;
}
.cpc--cos-browser__text-helper, .cpc--cos-browser__text-section-title {
font-size: var(--cds-helper-text-01-font-size, 0.75rem);
letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
line-height: var(--cds-helper-text-01-line-height, 1.33333);
}
.cpc--cos-browser__text-section-title {
color: var(--cds-text-secondary, #525252);
margin-bottom: 8px;
}
.cpc--cos-browser__link {
cursor: pointer;
}
.cpc--cos-browser__link-helper {
cursor: pointer;
font-size: 0.75rem !important;
padding-top: 0.25rem;
}
.cpc--cos-browser__breadcrumb ol {
margin: 0 !important;
}
.cpc--cos-browser__breadcrumb-last span, .cpc--cos-browser__breadcrumb-last span:hover {
color: var(--cds-text-primary, #161616);
}
.cpc--cos-browser__table {
table-layout: fixed;
}
.cpc--cos-browser__table-header-radio {
width: 2.5rem;
}
.cpc--cos-browser__table-header-size {
width: 8rem;
}
.cpc--cos-browser__table-header-lastmod {
width: 12rem !important;
}
.cpc--cos-browser__table-search input {
border-bottom-width: 0;
}
.cpc--cos-browser__table-skeleton {
margin-top: -2px;
}
.cpc--cos-browser__middle-ellipsis {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
}
.cpc--cos-browser__middle-ellipsis-left {
flex-shrink: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: pre;
}
.cpc--cos-browser__middle-ellipsis-right {
flex: 0 0 content;
white-space: pre;
}
.cpc--counter {
margin: 16px;
max-width: 200px;
text-align: left;
transition: width 0.1s;
}
.cpc--counter__numbers {
align-items: baseline;
display: flex;
margin-bottom: 1rem;
}
.cpc--counter__previous-step {
height: 0;
position: relative;
width: 0;
}
.cpc--counter__current-step, .cpc--counter__previous-step {
color: var(--cds-text-primary, #161616);
font-size: var(--cds-heading-07-font-size, 3.375rem);
font-weight: var(--cds-heading-07-font-weight, 300);
font-weight: 300;
letter-spacing: var(--cds-heading-07-letter-spacing, 0);
line-height: var(--cds-heading-07-line-height, 1.19);
}
.cpc--counter__increase_number-exit {
animation: increaseNumberExit 0.4s cubic-bezier(0.4, 0.14, 1, 1) 0ms 1 forwards;
}
@media (prefers-reduced-motion: reduce) {
.cpc--counter__increase_number-exit {
animation-duration: 0.6s;
}
}
@keyframes increaseNumberExit {
0% {
opacity: 1;
transform: translateY(0);
}
60% {
opacity: 0;
}
to {
display: none;
opacity: 0;
transform: translateY(-4.5rem);
visibility: hidden;
}
}
.cpc--counter__increase_number-enter {
animation: increaseNumberEnter 0.45s cubic-bezier(0, 0, 0.3, 1) 0ms 1 forwards;
}
@media (prefers-reduced-motion: reduce) {
.cpc--counter__increase_number-enter {
animation-duration: 0.6s;
}
}
@keyframes increaseNumberEnter {
0% {
opacity: 0;
transform: translateY(4.5rem);
}
20% {
opacity: 0;
}
to {
opacity: 1;
transform: translateY(0);
}
}
.cpc--counter__decrease_number-exit {
animation: decreaseNumberExit 0.4s cubic-bezier(0.4, 0.14, 1, 1) 0ms 1 forwards;
}
@media (prefers-reduced-motion: reduce) {
.cpc--counter__decrease_number-exit {
animation-duration: 0.6s;
}
}
@keyframes decreaseNumberExit {
0% {
opacity: 1;
transform: translateY(0);
}
60% {
opacity: 0;
}
to {
display: none;
opacity: 0;
transform: translateY(4.5rem);
visibility: hidden;
}
}
.cpc--counter__decrease_number-enter {
animation: decreaseNumberEnter 0.45s cubic-bezier(0, 0, 0.3, 1) 0ms 1 forwards;
}
@media (prefers-reduced-motion: reduce) {
.cpc--counter__decrease_number-enter {
animation-duration: 0.6s;
}
}
@keyframes decreaseNumberEnter {
0% {
opacity: 0;
transform: translateY(-4.5rem);
}
20% {
opacity: 0;
}
to {
opacity: 1;
transform: translateY(0);
}
}
.cpc--counter__total-steps {
color: var(--cds-text-secondary, #525252);
font-size: var(--cds-heading-04-font-size, 1.75rem);
font-weight: var(--cds-heading-04-font-weight, 400);
letter-spacing: var(--cds-heading-04-letter-spacing, 0);
line-height: var(--cds-heading-04-line-height, 1.28572);
margin-left: 6px;
}
.cpc--counter__label {
color: var(--cds-text-primary, #161616);
font-size: var(--cds-label-02-font-size, 0.875rem);
font-weight: var(--cds-label-02-font-weight, 400);
letter-spacing: var(--cds-label-02-letter-spacing, 0.16px);
line-height: var(--cds-label-02-line-height, 1.28572);
}
.cpc--counter__divider {
background: var(--cds-border-subtle-01, #c6c6c6);
border: 0;
height: 1px;
margin: 14px 0 20px;
text-align: left;
width: 216px;
}
.cpc--counter--skeleton .cpc--counter__numbers {
align-items: flex-end;
}
.cpc--counter--skeleton .cpc--counter__numbers .cpc--counter__current-step .cds--skeleton__placeholder {
height: 60px;
width: 60px;
}
.cpc--counter--skeleton .cpc--counter__numbers .cpc--counter__total-steps {
align-items: center;
display: flex;
}
.cpc--counter--skeleton .cpc--counter__numbers .cpc--counter__total-steps .cds--skeleton__placeholder {
height: 36px;
margin-left: 6px;
width: 36px;
}
.cpc--cron-configurator .cpc--cron-configurator__header {
margin-bottom: 1rem;
}
.cpc--cron-configurator .cpc--cron-configurator__vertical-line {
border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
margin-right: 1rem;
padding-right: 1rem;
}
@media (max-width: 65.98rem) {
.cpc--cron-configurator .cpc--cron-configurator__vertical-line {
display: none;
}
}
.cpc--cron-configurator .cpc--cron-configurator__input__helper-text--highlight {
font-weight: 700;
}
.cpc--cron-configurator .cpc--cron-configurator__input .cds--tooltip {
max-width: 600px;
}
.cpc--cron-configurator .cpc--cron-configurator__input .cds--text-area {
line-height: 1.5rem;
word-spacing: 1rem;
}
.cpc--cron-configurator .cpc--cron-configurator__input .cds--form__helper-text span {
margin-left: 0.25rem;
}
.cpc--cron-configurator .cpc--cron-configurator__patterns {
padding-bottom: 0.5rem;
}
.cpc--cron-configurator .cpc--cron-configurator__patterns__wrapper {
align-items: flex-start;
display: flex !important;
justify-content: space-between;
}
.cpc--cron-configurator .cpc--cron-configurator__patterns .cds--dropdown__wrapper {
width: 100%;
}
.cpc--cron-configurator .cpc--cron-configurator__patterns__reset-button {
align-self: flex-end;
justify-self: flex-end;
margin-top: 1.5rem;
}
.cpc--cron-configurator .cpc--cron-configurator__patterns__toggle .cds--toggle-input__label .cds--toggle__switch {
margin-top: 1.25rem;
}
.cpc--cron-configurator .cpc--cron-configurator__patterns__toggle .cds--form__helper-text.disabled {
color: #c6c6c6;
cursor: not-allowed;
}
.cpc--cron-configurator .cpc--cron-configurator__preview {
margin-top: 1rem;
}
@media (max-width: 65.98rem) {
.cpc--cron-configurator .cpc--cron-configurator__preview {
margin-left: 1rem;
}
}
.cpc--cron-configurator .cpc--cron-configurator__preview__title {
font-size: var(--cds-heading-01-font-size, 0.875rem);
font-weight: var(--cds-heading-01-font-weight, 600);
letter-spacing: var(--cds-heading-01-letter-spacing, 0.16px);
line-height: var(--cds-heading-01-line-height, 1.42857);
}
.cpc--cron-configurator .cpc--cron-configurator__preview__date {
font-size: var(--cds-body-01-font-size, 0.875rem);
font-weight: var(--cds-body-01-font-weight, 400);
letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
line-height: var(--cds-body-01-line-height, 1.42857);
}
.cpc--cron-configurator .cpc--cron-configurator__preview__expand-link {
cursor: pointer;
margin-top: 0.25rem;
}
.cpc--cron-configurator .cpc--cron-configurator__tiles-container .cds--inline-notification {
margin-bottom: 0.5rem;
margin-top: 0.5rem;
max-width: inherit;
}
.cpc--cron-configurator .cpc--cron-configurator__tile, .cpc--cron-configurator .cpc--cron-configurator__tile--selected, .cpc--cron-configurator .cpc--cron-configurator__tile--skeleton {
background-color: var(--cds-field);
cursor: pointer;
display: flex;
justify-content: center;
min-height: 0;
min-width: 0;
padding: 0;
position: relative;
text-align: center;
}
.cpc--cron-configurator .cpc--cron-configurator__tile--selected.focus-visible, .cpc--cron-configurator .cpc--cron-configurator__tile--selected:focus-visible, .cpc--cron-configurator .cpc--cron-configurator__tile--skeleton.focus-visible, .cpc--cron-configurator .cpc--cron-configurator__tile--skeleton:focus-visible, .cpc--cron-configurator .cpc--cron-configurator__tile.focus-visible, .cpc--cron-configurator .cpc--cron-configurator__tile:focus-visible {
border-color: var(--cds-focus, #0f62fe);
box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe), inset 0 0 0 2px var(--cds-focus, #0f62fe);
outline: none;
}
.cpc--cron-configurator .cpc--cron-configurator__tile--selected:hover, .cpc--cron-configurator .cpc--cron-configurator__tile--skeleton:hover, .cpc--cron-configurator .cpc--cron-configurator__tile:hover {
background-color: var(--cds-layer-hover);
}
.cpc--cron-configurator .cpc--cron-configurator__tile--selected:hover .cpc--cron-configurator__tile__label--center, .cpc--cron-configurator .cpc--cron-configurator__tile--skeleton:hover .cpc--cron-configurator__tile__label--center, .cpc--cron-configurator .cpc--cron-configurator__tile:hover .cpc--cron-configurator__tile__label--center {
color: var(--cds-background-inverse-hover, #474747);
}
.cpc--cron-configurator .cpc--cron-configurator__tile .cpc--cron-configurator__tile__label, .cpc--cron-configurator .cpc--cron-configurator__tile--selected .cpc--cron-configurator__tile__label {
align-self: center;
bottom: -16px;
color: var(--cds-text-secondary, #525252);
font-size: var(--cds-label-01-font-size, 0.75rem);
font-weight: var(--cds-label-01-font-weight, 400);
justify-self: center;
left: 0;
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
line-height: var(--cds-label-01-line-height, 1.33333);
position: absolute;
text-align: center;
width: inherit;
}
.cpc--cron-configurator .cpc--cron-configurator__tile .cpc--cron-configurator__tile__label--center, .cpc--cron-configurator .cpc--cron-configurator__tile--selected .cpc--cron-configurator__tile__label--center {
align-items: center;
bottom: 0;
color: var(--cds-text-secondary, #525252);
display: flex;
font-size: var(--cds-label-01-font-size, 0.75rem);
font-weight: var(--cds-label-01-font-weight, 400);
justify-content: center;
left: 0;
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
line-height: var(--cds-label-01-line-height, 1.33333);
position: absolute;
right: 0;
text-align: center;
top: 0;
}
.cpc--cron-configurator .cpc--cron-configurator__tile--selected {
background-color: var(--cds-layer-active);
}
.cpc--cron-configurator .cpc--cron-configurator__tile--selected .cpc--cron-configurator__tile__label--center {
color: var(--cds-layer-selected-inverse, #161616);
}
.cpc--cron-configurator .cpc--cron-configurator__tile--selected:hover {
background-color: var(--cds-layer-selected-hover);
}
.cpc--cron-configurator .cpc--cron-configurator__tiles-group--day-of-month, .cpc--cron-configurator .cpc--cron-configurator__tiles-group--day-of-week, .cpc--cron-configurator .cpc--cron-configurator__tiles-group--month, .cpc--cron-configurator .cpc--cron-configurator__tiles-group--skeleton {
background-color: transparent;
margin-bottom: 0.5rem;
}
.cpc--cron-configurator .cpc--cron-configurator__tiles-group--hour, .cpc--cron-configurator .cpc--cron-configurator__tiles-group--minute {
background-color: transparent;
margin-bottom: 1.5rem;
}
.cpc--cron-configurator .cpc--cron-configurator__tiles-group__header {
display: flex;
justify-content: space-between;
margin-bottom: 0.5rem;
}
.cpc--cron-configurator .cpc--cron-configurator__tiles-group__header .cds--label {
align-self: center;
margin-bottom: 0;
}
.cpc--cron-configurator .cpc--cron-configurator__tiles-group__header .cds--dropdown__wrapper--inline {
grid-gap: 0;
}
.cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--minute {
grid-column-gap: 1px;
align-items: flex-end;
display: grid;
grid-template-columns: repeat(60, 1fr);
}
.cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--minute .cpc--cron-configurator__tile, .cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--minute .cpc--cron-configurator__tile--selected, .cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--minute .cpc--cron-configurator__tile--skeleton {
flex: 1;
height: 20px;
}
.cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--minute .cpc--cron-configurator__tile--selected:nth-child(5n+1), .cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--minute .cpc--cron-configurator__tile--skeleton:nth-child(5n+1), .cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--minute .cpc--cron-configurator__tile:nth-child(5n+1) {
height: 30px;
}
.cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--minute .cpc--cron-configurator__tile--selected:last-child, .cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--minute .cpc--cron-configurator__tile--selected:nth-child(10n+1), .cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--minute .cpc--cron-configurator__tile--skeleton:last-child, .cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--minute .cpc--cron-configurator__tile--skeleton:nth-child(10n+1), .cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--minute .cpc--cron-configurator__tile:last-child, .cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--minute .cpc--cron-configurator__tile:nth-child(10n+1) {
height: 35px;
}
.cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--hour {
grid-gap: 1px;
align-items: flex-end;
display: grid;
grid-template-columns: repeat(24, 1fr);
}
.cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--hour .cpc--cron-configurator__tile, .cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--hour .cpc--cron-configurator__tile--selected, .cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--hour .cpc--cron-configurator__tile--skeleton {
bottom: 0;
display: block;
left: 0;
padding-top: 75%;
position: relative;
right: 0;
top: 0;
width: 100%;
}
.cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--hour .cpc--cron-configurator__tile--selected:last-child, .cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--hour .cpc--cron-configurator__tile--selected:nth-child(6n+1), .cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--hour .cpc--cron-configurator__tile--skeleton:last-child, .cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--hour .cpc--cron-configurator__tile--skeleton:nth-child(6n+1), .cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--hour .cpc--cron-configurator__tile:last-child, .cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--hour .cpc--cron-configurator__tile:nth-child(6n+1) {
padding-top: 100%;
}
.cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--month {
grid-gap: 1px;
align-items: flex-start;
display: grid;
grid-auto-rows: 1fr;
grid-template-columns: repeat(4, 1fr);
justify-content: flex-start;
}
.cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--month .cpc--cron-configurator__tile, .cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--month .cpc--cron-configurator__tile--selected, .cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--month .cpc--cron-configurator__tile--skeleton {
bottom: 0;
display: block;
left: 0;
padding-bottom: 50%;
position: relative;
right: 0;
top: 0;
width: 100%;
}
.cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--day-of-week {
grid-gap: 1px;
align-items: flex-start;
display: grid;
grid-template-columns: repeat(7, 1fr);
justify-content: flex-start;
}
.cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--day-of-week .cpc--cron-configurator__tile, .cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--day-of-week .cpc--cron-configurator__tile--selected, .cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--day-of-week .cpc--cron-configurator__tile--skeleton {
bottom: 0;
display: block;
left: 0;
padding-bottom: 42.85%;
position: relative;
right: 0;
top: 0;
width: 100%;
}
.cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--day-of-month {
grid-gap: 1px;
align-items: flex-start;
display: grid;
grid-template-columns: repeat(8, 1fr);
justify-content: flex-start;
}
.cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--day-of-month .cpc--cron-configurator__tile, .cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--day-of-month .cpc--cron-configurator__tile--selected, .cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--day-of-month .cpc--cron-configurator__tile--skeleton {
bottom: 0;
display: block;
left: 0;
padding-bottom: 75%;
position: relative;
right: 0;
top: 0;
width: 100%;
}
.cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--day-of-month .cpc--cron-configurator__tile--skeleton, .cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--day-of-week .cpc--cron-configurator__tile--skeleton, .cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--hour .cpc--cron-configurator__tile--skeleton, .cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--month .cpc--cron-configurator__tile--skeleton {
height: inherit;
}
.cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--day-of-month .cpc--cron-configurator__tile--skeleton:before, .cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--day-of-week .cpc--cron-configurator__tile--skeleton:before, .cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--hour .cpc--cron-configurator__tile--skeleton:before, .cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--month .cpc--cron-configurator__tile--skeleton:before {
left: 0;
top: 0;
}
.cpc--cron-configurator .cpc--cron-configurator__tiles-group__list--minute .cpc--cron-configurator__tile--skeleton {
width: inherit;
}
.cpc--data-list dt {
font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
font-weight: var(--cds-heading-compact-01-font-weight, 600);
letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-heading-compact-01-line-height, 1.28572);
white-space: nowrap;
}
.cpc--data-list dd {
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
}
.cpc--data-list .cds--grid {
padding: 0;
}
.cpc--data-list .cpc--data-list__row {
padding: 0.5rem 0;
}
.cpc--data-list .cpc--data-list__row:not(:last-child) {
border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
}
.cpc--data-list .cpc--data-list__row .cds--overflow-menu {
position: absolute;
right: 0;
top: 1rem;
}
.cpc--data-list .cpc--data-list__col {
margin: 0.5rem 0;
}
.cpc--data-list .cpc--data-list__pagination .cds--btn--ghost {
margin-left: -1rem;
padding-left: calc(1rem - 3px);
padding-right: calc(1rem - 3px);
}
.cpc--data-list--with-row-actions .cds--grid {
padding-right: 1rem;
}
.cpc--data-list--with-row-actions .cpc--data-list__row {
padding-right: 2rem;
position: relative;
}
.cpc--datahook-renderer .cds--row {
padding-bottom: 1.5rem;
}
.cpc--datahook-renderer .cpc--datahook-renderer-subtitle {
font-size: var(--cds-helper-text-01-font-size, 0.75rem);
letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
line-height: var(--cds-helper-text-01-line-height, 1.33333);
}
@keyframes fp-fade-in-down {
0% {
opacity: 0;
transform: translate3d(0, -20px, 0);
}
to {
opacity: 1;
transform: translateZ(0);
}
}
@keyframes fp-slide-left {
0% {
transform: translateZ(0);
}
to {
transform: translate3d(-100%, 0, 0);
}
}
@keyframes fp-slide-left-new {
0% {
transform: translate3d(100%, 0, 0);
}
to {
transform: translateZ(0);
}
}
@keyframes fp-slide-right {
0% {
transform: translateZ(0);
}
to {
transform: translate3d(100%, 0, 0);
}
}
@keyframes fp-slide-right-new {
0% {
transform: translate3d(-100%, 0, 0);
}
to {
transform: translateZ(0);
}
}
@keyframes fp-fade-out {
0% {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes fp-fade-in {
0% {
opacity: 0;
}
to {
opacity: 1;
}
}
.cds--layer-one, :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-two {
--cds-layer:var(--cds-layer-02,#fff);
--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,#fff);
--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);
}
@keyframes cds--hide-feedback {
0% {
opacity: 1;
visibility: inherit;
}
to {
opacity: 0;
visibility: hidden;
}
}
@keyframes cds--show-feedback {
0% {
opacity: 0;
visibility: hidden;
}
to {
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;
}
to {
opacity: 0.3;
transform: scaleX(0);
transform-origin: left;
}
}
input:-webkit-autofill, input:-webkit-autofill:focus, input:-webkit-autofill:hover, textarea:-webkit-autofill, textarea:-webkit-autofill:focus, textarea:-webkit-autofill:hover {
-webkit-text-fill-color: var(--cds-text-primary, #161616);
box-shadow: 0 0 0 1000px var(--cds-field) inset;
}
.cds--fieldset {
border: 0;
box-sizing: border-box;
font-family: inherit;
font-size: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
}
.cds--fieldset *, .cds--fieldset :after, .cds--fieldset :before {
box-sizing: inherit;
}
.cds--form-item {
align-items: flex-start;
display: flex;
flex: 1 1 auto;
flex-direction: column;
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
}
.cds--label {
color: var(--cds-text-secondary, #525252);
display: inline-block;
font-size: var(--cds-label-01-font-size, 0.75rem);
font-weight: var(--cds-label-01-font-weight, 400);
font-weight: 400;
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
line-height: var(--cds-label-01-line-height, 1.33333);
line-height: 1rem;
margin-block-end: 0.5rem;
vertical-align: baseline;
}
.cds--label html {
font-size: 100%;
}
.cds--label body {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: IBM Plex Sans, system-ui, -apple-system, BlinkMacSystemFont, \.SFNSText-Regular, sans-serif;
font-weight: 400;
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);
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
line-height: var(--cds-label-01-line-height, 1.33333);
}
.cds--label--no-margin {
margin-block-end: 0;
}
.cds--label + .cds--tooltip {
inset-block-start: 0.2rem;
inset-inline-start: 0.5rem;
position: relative;
}
.cds--label + .cds--tooltip .cds--tooltip__trigger {
align-items: center;
appearance: none;
background: none;
border: 0;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
display: flex;
font-family: inherit;
font-size: 100%;
font-size: var(--cds-label-01-font-size, 0.75rem);
font-weight: var(--cds-label-01-font-weight, 400);
inline-size: 100%;
justify-content: center;
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
line-height: var(--cds-label-01-line-height, 1.33333);
margin: 0;
padding: 0;
text-align: start;
vertical-align: baseline;
}
.cds--label + .cds--tooltip .cds--tooltip__trigger *, .cds--label + .cds--tooltip .cds--tooltip__trigger :after, .cds--label + .cds--tooltip .cds--tooltip__trigger :before {
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 {
background: var(--cds-skeleton-background, #e8e8e8);
block-size: 0.875rem;
border: none;
box-shadow: none;
inline-size: 4.6875rem;
padding: 0;
pointer-events: none;
position: relative;
}
.cds--label.cds--skeleton:active, .cds--label.cds--skeleton:focus, .cds--label.cds--skeleton:hover {
border: none;
cursor: default;
outline: none;
}
.cds--label.cds--skeleton:before {
animation: cds--skeleton 3s ease-in-out infinite;
background: var(--cds-skeleton-element, #c6c6c6);
block-size: 100%;
content: "";
inline-size: 100%;
position: absolute;
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;
}
.cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus), .cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused), .cds--number[data-invalid] input[type=number]:not(:focus), .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus), .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus), .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:not(:focus), input[data-invalid]:not(:focus) {
outline: 2px solid var(--cds-support-error, #da1e28);
outline-offset: -2px;
}
@media screen and (prefers-contrast) {
.cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus), .cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused), .cds--number[data-invalid] input[type=number]:not(:focus), .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus), .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus), .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:not(:focus), input[data-invalid]:not(:focus) {
outline-style: dotted;
}
}
.cds--date-picker-input__wrapper--invalid ~ .cds--form-requirement, .cds--date-picker-input__wrapper--warn ~ .cds--form-requirement, .cds--date-picker-input__wrapper ~ .cds--form-requirement, .cds--list-box--warning ~ .cds--form-requirement, .cds--list-box[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--select--warning .cds--select-input__wrapper ~ .cds--form-requirement, .cds--select-input__wrapper[data-invalid] ~ .cds--form-requirement, .cds--text-area__wrapper--warn ~ .cds--form-requirement, .cds--text-area__wrapper[data-invalid] ~ .cds--form-requirement, .cds--text-input__field-wrapper--warning > .cds--text-input ~ .cds--form-requirement, .cds--text-input__field-wrapper--warning ~ .cds--form-requirement, .cds--text-input__field-wrapper[data-invalid] ~ .cds--form-requirement, .cds--time-picker--invalid ~ .cds--form-requirement, .cds--time-picker--warning ~ .cds--form-requirement, .cds--time-picker[data-invalid] ~ .cds--form-requirement, input[data-invalid] ~ .cds--form-requirement {
display: block;
font-weight: 400;
max-block-size: 12.5rem;
overflow: visible;
}
.cds--date-picker-input__wrapper--invalid ~ .cds--form-requirement, .cds--date-picker-input__wrapper ~ .cds--form-requirement, .cds--list-box[data-invalid] ~ .cds--form-requirement, .cds--number[data-invalid] .cds--number__input-wrapper ~ .cds--form-requirement, .cds--select-input__wrapper[data-invalid] ~ .cds--form-requirement, .cds--text-area__wrapper[data-invalid] ~ .cds--form-requirement, .cds--text-input__field-wrapper[data-invalid] ~ .cds--form-requirement, .cds--time-picker--invalid ~ .cds--form-requirement, .cds--time-picker[data-invalid] ~ .cds--form-requirement, input[data-invalid] ~ .cds--form-requirement {
color: var(--cds-text-error, #da1e28);
}
.cds--form--fluid .cds--text-input__field-wrapper--warning, .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] {
display: block;
}
.cds--form--fluid input[data-invalid] {
outline: none;
}
.cds--form--fluid .cds--form-requirement {
margin: 0;
padding: 0.5rem 2.5rem 0.5rem 1rem;
}
input:not(output, [data-invalid]):-moz-ui-invalid {
box-shadow: none;
}
.cds--form-requirement {
display: none;
font-size: var(--cds-label-01-font-size, 0.75rem);
font-weight: var(--cds-label-01-font-weight, 400);
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
line-height: var(--cds-label-01-line-height, 1.33333);
margin: 0.25rem 0 0;
max-block-size: 0;
overflow: hidden;
}
.cds--form-requirement html {
font-size: 100%;
}
.cds--form-requirement body {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: IBM Plex Sans, system-ui, -apple-system, BlinkMacSystemFont, \.SFNSText-Regular, sans-serif;
font-weight: 400;
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 {
color: var(--cds-text-secondary, #525252);
font-size: var(--cds-helper-text-01-font-size, 0.75rem);
inline-size: 100%;
letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
line-height: var(--cds-helper-text-01-line-height, 1.33333);
margin-block-start: 0.25rem;
opacity: 1;
z-index: 0;
}
.cds--form__helper-text--disabled, .cds--label--disabled, fieldset[disabled] .cds--form__helper-text, fieldset[disabled] .cds--label {
color: var(--cds-text-disabled, hsla(0, 0%, 9%, 0.25));
}
.flatpickr-calendar {
animation: none;
border: 0;
border-radius: 0;
box-sizing: border-box;
direction: ltr;
inline-size: 19.6875rem;
max-block-size: 0;
opacity: 0;
overflow: hidden;
padding: 0;
position: absolute;
text-align: center;
touch-action: manipulation;
visibility: hidden;
}
@media (forced-colors: active), screen and (-ms-high-contrast: active) {
.flatpickr-calendar {
outline: 1px solid transparent;
}
}
.flatpickr-calendar.inline, .flatpickr-calendar.open {
max-block-size: 40rem;
opacity: 1;
overflow: visible;
visibility: inherit;
}
.flatpickr-calendar.open {
align-items: center;
background-color: var(--cds-layer-01, #f4f4f4);
block-size: 21rem;
border: none;
box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
display: flex;
flex-direction: column;
inline-size: 18rem;
justify-content: center;
margin-block-start: -0.125rem;
overflow: hidden;
padding: 0.25rem 0.25rem 0.5rem;
z-index: 99999;
}
.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 0.11s cubic-bezier(0, 0, 0.38, 0.9);
}
@media screen and (prefers-reduced-motion: reduce) {
.flatpickr-calendar.animate.open {
animation: none;
}
}
.flatpickr-calendar.inline {
display: block;
inset-block-start: 0.125rem;
position: relative;
}
.flatpickr-calendar.static {
inset-block-start: calc(100% + 2px);
position: absolute;
}
.flatpickr-calendar.static.open {
display: block;
z-index: 999;
}
.flatpickr-calendar.hasWeeks {
inline-size: auto;
}
.dayContainer {
block-size: 15.375rem;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
outline: 0;
padding: 0;
}
.flatpickr-calendar .hasTime .dayContainer, .flatpickr-calendar .hasWeeks .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;
inline-size: 100%;
justify-content: space-between;
}
.flatpickr-month {
align-items: center;
background-color: transparent;
block-size: 2.5rem;
color: var(--cds-text-primary, #161616);
display: flex;
font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
font-weight: var(--cds-heading-compact-01-font-weight, 600);
letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-heading-compact-01-line-height, 1.28572);
line-height: 1;
text-align: center;
}
.flatpickr-next-month, .flatpickr-prev-month {
fill: var(--cds-icon-primary, #161616);
align-items: center;
block-size: 2.5rem;
cursor: pointer;
display: flex;
inline-size: 2.5rem;
justify-content: center;
line-height: 16px;
padding: 0;
text-decoration: none;
transform: scale(1);
transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
z-index: 3;
}
@media (forced-colors: active), screen and (-ms-high-contrast: active) {
.flatpickr-next-month, .flatpickr-prev-month {
fill: ButtonText;
}
}
@media screen and (prefers-reduced-motion: reduce) {
.flatpickr-next-month, .flatpickr-prev-month {
transition: none;
}
}
.flatpickr-next-month:hover, .flatpickr-prev-month:hover {
background-color: var(--cds-layer-hover);
}
.flatpickr-next-month.disabled svg, .flatpickr-prev-month.disabled svg {
fill: var(--cds-icon-disabled, hsla(0, 0%, 9%, 0.25));
cursor: not-allowed;
}
.flatpickr-next-month.disabled:hover svg, .flatpickr-prev-month.disabled:hover svg {
fill: var(--cds-icon-disabled, hsla(0, 0%, 9%, 0.25));
}
.flatpickr-current-month {
align-items: center;
block-size: 1.75rem;
display: flex;
font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
font-weight: var(--cds-heading-compact-01-font-weight, 600);
justify-content: center;
letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-heading-compact-01-line-height, 1.28572);
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 {
inline-size: 3.75rem;
position: relative;
}
.numInputWrapper:hover {
background-color: var(--cds-background-hover, hsla(0, 0%, 55%, 0.12));
}
.numInputWrapper .numInput {
-moz-appearance: textfield;
background-color: var(--cds-field-01, #f4f4f4);
border: none;
color: var(--cds-text-primary, #161616);
cursor: default;
display: inline-block;
font-family: inherit;
font-size: inherit;
font-weight: 600;
inline-size: 100%;
margin: 0;
padding: 0.25rem;
}
.numInputWrapper .numInput::-webkit-inner-spin-button, .numInputWrapper .numInput::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.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, hsla(0, 0%, 9%, 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 .arrowDown, .numInputWrapper .arrowUp {
block-size: 50%;
border: none;
cursor: pointer;
inline-size: 0.75rem;
inset-inline-start: 2.6rem;
line-height: 50%;
opacity: 0;
padding: 0 0.25rem 0 0.125rem;
position: absolute;
}
.numInputWrapper .arrowDown:after, .numInputWrapper .arrowUp:after {
border-inline-end: 0.25rem solid transparent;
border-inline-start: 0.25rem solid transparent;
content: "";
display: block;
inset-block-start: 33%;
position: absolute;
}
.numInputWrapper .arrowDown:hover:after, .numInputWrapper .arrowUp:hover:after {
border-block-end-color: var(--cds-button-primary, #0f62fe);
border-block-start-color: var(--cds-button-primary, #0f62fe);
}
.numInputWrapper .arrowDown:active:after, .numInputWrapper .arrowUp: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, hsla(0, 0%, 9%, 0.25));
}
.numInput[disabled] ~ .arrowDown:after {
border-block-start-color: var(--cds-text-disabled, hsla(0, 0%, 9%, 0.25));
}
.numInputWrapper:hover .arrowDown, .numInputWrapper:hover .arrowUp {
opacity: 1;
}
.numInputWrapper:hover .numInput[disabled] ~ .arrowDown, .numInputWrapper:hover .numInput[disabled] ~ .arrowUp {
opacity: 0;
}
.flatpickr-weekdays {
align-items: center;
block-size: 2.5rem;
display: flex;
}
.flatpickr-weekdaycontainer {
display: flex;
inline-size: 100%;
}
.flatpickr-weekday {
color: var(--cds-text-primary, #161616);
cursor: default;
flex: 1;
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
}
.flatpickr-days:focus {
outline: 0;
}
.flatpickr-calendar.animate .dayContainer.slideLeft {
animation: fp-fade-out 0.4s cubic-bezier(0.23, 1, 0.32, 1), fp-slide-left 0.4s 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 0.4s cubic-bezier(0.23, 1, 0.32, 1), fp-slide-left 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.flatpickr-calendar.animate .dayContainer.slideRight {
animation: fp-fade-out 0.4s cubic-bezier(0.23, 1, 0.32, 1), fp-slide-right 0.4s cubic-bezier(0.23, 1, 0.32, 1);
transform: translate3d(100%, 0, 0);
}
.flatpickr-calendar.animate .dayContainer.slideRightNew {
animation: fp-fade-in 0.4s cubic-bezier(0.23, 1, 0.32, 1), fp-slide-right-new 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.flatpickr-day {
align-items: center;
block-size: 2.5rem;
color: var(--cds-text-primary, #161616);
cursor: pointer;
display: flex;
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
inline-size: 2.5rem;
justify-content: center;
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
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-color: var(--cds-button-primary, #0f62fe);
outline-offset: -2px;
}
@media screen and (prefers-contrast) {
.flatpickr-day:focus {
outline-style: dotted;
}
}
.nextMonthDay, .prevMonthDay {
color: var(--cds-text-helper, #6f6f6f);
}
.flatpickr-day.today {
color: var(--cds-link-primary, #0f62fe);
font-weight: 600;
position: relative;
}
.flatpickr-day.today:after {
background-color: var(--cds-link-primary, #0f62fe);
block-size: 0.25rem;
content: "";
display: block;
inline-size: 0.25rem;
inset-block-end: 0.4375rem;
inset-inline-start: 50%;
position: absolute;
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, #fff);
}
@media (forced-colors: active), screen and (-ms-high-contrast: 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, #fff);
outline-offset: -0.1875rem;
}
.flatpickr-day.startRange.selected {
box-shadow: none;
z-index: 2;
}
.flatpickr-day.endRange.inRange, .flatpickr-day.startRange.inRange:not(.selected) {
background: var(--cds-layer-01, #f4f4f4);
outline: 2px solid var(--cds-focus, #0f62fe);
outline-offset: -2px;
z-index: 3;
}
@media screen and (prefers-contrast) {
.flatpickr-day.endRange.inRange, .flatpickr-day.startRange.inRange:not(.selected) {
outline-style: dotted;
}
}
.flatpickr-day.endRange:hover {
background: var(--cds-layer-01, #f4f4f4);
color: var(--cds-text-primary, #161616);
outline: 2px solid var(--cds-focus, #0f62fe);
outline-offset: -2px;
}
@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, #fff);
}
.flatpickr-day.flatpickr-disabled {
color: var(--cds-text-disabled, hsla(0, 0%, 9%, 0.25));
cursor: not-allowed;
}
.flatpickr-day.flatpickr-disabled:hover {
background-color: transparent;
}
.flatpickr-input[readonly] {
cursor: pointer;
}
@media (forced-colors: active), screen and (-ms-high-contrast: active) {
.flatpickr-day.inRange, .flatpickr-day.today {
color: Highlight;
}
}
.cds--date-picker {
display: flex;
}
.cds--date-picker--light .cds--date-picker__input {
background: var(--cds-field-02, #fff);
}
.cds--date-picker ~ .cds--label {
order: 1;
}
.cds--date-picker-container {
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
}
.cds--date-picker-container .cds--label {
display: flex;
}
.cds--date-picker-input__wrapper {
align-items: center;
display: flex;
}
.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, .cds--date-picker__input {
color: var(--cds-text-primary, #161616);
}
.cds--date-picker__input {
background-color: var(--cds-field);
block-size: 2.5rem;
border: none;
border-block-end: 1px solid var(--cds-border-strong);
box-sizing: border-box;
display: block;
font-family: inherit;
font-family: var(--cds-code-02-font-family, "IBM Plex Mono", system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", monospace);
font-size: 100%;
font-size: var(--cds-code-02-font-size, 0.875rem);
font-weight: var(--cds-code-02-font-weight, 400);
letter-spacing: var(--cds-code-02-letter-spacing, 0.32px);
line-height: var(--cds-code-02-line-height, 1.42857);
margin: 0;
outline: 2px solid transparent;
outline-offset: -2px;
padding: 0 1rem;
position: relative;
transition: all 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
vertical-align: baseline;
}
.cds--date-picker__input *, .cds--date-picker__input :after, .cds--date-picker__input :before {
box-sizing: inherit;
}
.cds--date-picker__input.cds--focused, .cds--date-picker__input:focus {
outline: 2px solid var(--cds-focus, #0f62fe);
outline-offset: -2px;
}
@media screen and (prefers-contrast) {
.cds--date-picker__input.cds--focused, .cds--date-picker__input:focus {
outline-style: dotted;
}
}
.cds--date-picker__input:disabled {
background-color: var(--cds-field);
border-block-end: 1px solid transparent;
color: var(--cds-text-disabled, hsla(0, 0%, 9%, 0.25));
cursor: not-allowed;
}
.cds--date-picker__input:disabled:-ms-input-placeholder {
color: var(--cds-text-disabled, hsla(0, 0%, 9%, 0.25));
}
.cds--date-picker__input:disabled::placeholder {
color: var(--cds-text-disabled, hsla(0, 0%, 9%, 0.25));
}
.cds--date-picker__input:disabled:hover {
border-block-end: 1px solid transparent;
}
.cds--date-picker__input:-ms-input-placeholder {
color: var(--cds-text-placeholder, hsla(0, 0%, 9%, 0.4));
opacity: 1;
}
.cds--date-picker__input::placeholder {
color: var(--cds-text-placeholder, hsla(0, 0%, 9%, 0.4));
opacity: 1;
}
.cds--date-picker__input--lg {
block-size: 3rem;
}
.cds--date-picker__input--sm {
block-size: 2rem;
}
.cds--date-picker__icon {
fill: var(--cds-icon-primary, #161616);
inset-block-start: 50%;
inset-inline-end: 1rem;
pointer-events: none;
position: absolute;
transform: translateY(-50%);
z-index: 1;
}
.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: #000;
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;
}
.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 {
inset-block-start: 50%;
inset-inline-end: 2.5rem;
position: absolute;
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, hsla(0, 0%, 100%, 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, hsla(0, 0%, 9%, 0.25));
}
.cds--date-picker.cds--skeleton input, .cds--date-picker__input.cds--skeleton {
background: var(--cds-skeleton-background, #e8e8e8);
border: none;
box-shadow: none;
inline-size: 100%;
padding: 0;
pointer-events: none;
position: relative;
}
.cds--date-picker.cds--skeleton input:active, .cds--date-picker.cds--skeleton input:focus, .cds--date-picker.cds--skeleton input:hover, .cds--date-picker__input.cds--skeleton:active, .cds--date-picker__input.cds--skeleton:focus, .cds--date-picker__input.cds--skeleton:hover {
border: none;
cursor: default;
outline: none;
}
.cds--date-picker.cds--skeleton input:before, .cds--date-picker__input.cds--skeleton:before {
animation: cds--skeleton 3s ease-in-out infinite;
background: var(--cds-skeleton-element, #c6c6c6);
block-size: 100%;
content: "";
inline-size: 100%;
position: absolute;
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:-ms-input-placeholder, .cds--date-picker__input.cds--skeleton:-ms-input-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 {
background: var(--cds-skeleton-background, #e8e8e8);
block-size: 0.875rem;
border: none;
box-shadow: none;
inline-size: 4.6875rem;
padding: 0;
pointer-events: none;
position: relative;
}
.cds--date-picker.cds--skeleton .cds--label:active, .cds--date-picker.cds--skeleton .cds--label:focus, .cds--date-picker.cds--skeleton .cds--label:hover {
border: none;
cursor: default;
outline: none;
}
.cds--date-picker.cds--skeleton .cds--label:before {
animation: cds--skeleton 3s ease-in-out infinite;
background: var(--cds-skeleton-element, #c6c6c6);
block-size: 100%;
content: "";
inline-size: 100%;
position: absolute;
will-change: transform-origin, transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
.cds--date-picker.cds--skeleton .cds--label:before {
animation: none;
}
}
@media (forced-colors: active), screen and (-ms-high-contrast: active) {
.cds--date-picker__icon {
fill: ButtonText;
}
}
.cpc--date-progress__actual-progress, .cpc--date-progress__progress-bar {
background-color: var(--cds-layer-accent-01, #e0e0e0);
height: 11em;
width: 2px;
}
.cpc--date-progress__actual-progress {
background: var(--cds-layer-selected-inverse, #161616);
position: absolute;
top: 0;
transition: height 1.2s ease-out;
}
.cpc--date-progress__container {
height: 11em;
margin-bottom: 2rem;
min-width: 150px;
position: relative;
}
.cpc--date-progress__dot {
background: var(--cds-layer-selected-inverse, #161616);
border-radius: 50%;
flex-shrink: 1;
height: 10px;
width: 10px;
}
.cpc--date-progress__dot-container {
display: flex;
left: -4.25px;
position: absolute;
}
.cpc--date-progress__dot-container--first {
align-items: flex-start;
top: 0;
}
.cpc--date-progress__dot-container--first .cpc--date-progress__dot-content {
top: -5px;
}
.cpc--date-progress__dot-container--last {
align-items: flex-end;
bottom: 0;
}
.cpc--date-progress__dot-container--last .cpc--date-progress__dot-content {
top: 6px;
}
.cpc--date-progress__last-dot {
background: var(--cds-layer-accent-01, #e0e0e0);
border: 1px solid var(--cds-border-subtle-01, #c6c6c6);
}
.cpc--date-progress__dot-content {
word-wrap: break-word;
flex-shrink: 10;
left: 1em;
max-height: 75px;
max-width: 100px;
overflow: auto;
position: relative;
}
.cpc--date-progress__dot-container--actual {
align-items: flex-end;
bottom: 0;
position: absolute;
}
.cpc--date-progress__actual-progress-dot {
opacity: 0;
}
.cpc--date-progress--animating .cpc--date-progress__actual-progress-dot {
opacity: 1;
}
.cpc--date-progress__progress-0 {
height: 0;
}
.cpc--date-progress__progress-20 {
height: 20%;
}
.cpc--date-progress__progress-40 {
height: 40%;
}
.cpc--date-progress__progress-60 {
height: 60%;
}
.cpc--date-progress__progress-80 {
height: 80%;
}
.cpc--date-progress__progress-100 {
height: 100%;
}
.cpc--date-progress__progress-0 .cpc--date-progress__dot, .cpc--date-progress__progress-0 .cpc--date-progress__dot-content, .cpc--date-progress__progress-100 .cpc--date-progress__dot, .cpc--date-progress__progress-100 .cpc--date-progress__dot-content {
opacity: 0;
}
.cpc--date-progress__dot, .cpc--date-progress__dot-content {
transition: opacity 1.2s ease-out;
}
.cpc--date-progress__progress-100 ~ .cpc--date-progress__dot-container--last .cpc--date-progress__dot {
background: var(--cds-layer-selected-inverse, #161616);
border-color: var(--cds-border-inverse, #161616);
}
.cpc--date-progress__progress-100 ~ .cpc--date-progress__dot-container--last .cpc--date-progress__dot-content {
font-weight: 700;
}
.cpc--date-progress__progress-0 ~ .cpc--date-progress__dot-container--first .cpc--date-progress__dot {
background: var(--cds-layer-accent-01, #e0e0e0);
border: 1px solid var(--cds-border-subtle-01, #c6c6c6);
}
.cpc--details-page-description-renderer h4 + .cpc--details-page-description-renderer__item, .cpc--details-page-description-renderer h4 + p {
font-size: var(--cds-body-02-font-size, 1rem);
font-weight: var(--cds-body-02-font-weight, 400);
letter-spacing: var(--cds-body-02-letter-spacing, 0);
line-height: var(--cds-body-02-line-height, 1.5);
margin-bottom: 4rem;
}
.cpc--details-page-description-renderer .cpc--details-page-markdown-renderer > h5:first-of-type {
margin-top: 1.5rem;
}
.cpc--details-page-description-renderer h5 + .cpc--details-page-description-renderer__item, .cpc--details-page-description-renderer h5 + p {
margin-bottom: 1rem;
}
.cpc--details-page-features-renderer h4 + .cpc--details-page-features-renderer__item, .cpc--details-page-features-renderer h4 + p {
font-size: var(--cds-body-02-font-size, 1rem);
font-weight: var(--cds-body-02-font-weight, 400);
letter-spacing: var(--cds-body-02-letter-spacing, 0);
line-height: var(--cds-body-02-line-height, 1.5);
margin-bottom: 4rem;
}
.cpc--details-page-features-renderer h5:first-of-type {
margin-top: 1.5rem;
}
.cpc--details-page-features-renderer h5 + .cpc--details-page-features-renderer__item, .cpc--details-page-features-renderer h5 + p {
margin-bottom: 1rem;
}
.cpc--details-page-markdown-renderer h1 {
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 1rem;
margin-top: 1rem;
}
.cpc--details-page-markdown-renderer h2 {
font-size: 1.0625rem;
font-weight: 400;
margin-bottom: 1rem;
margin-top: 1rem;
text-decoration: underline;
}
.cpc--details-page-markdown-renderer h3, .cpc--details-page-markdown-renderer h4 {
font-size: 1rem;
font-weight: 400;
margin-bottom: 1rem;
margin-top: 1rem;
}
.cpc--details-page-markdown-renderer h5, .cpc--details-page-markdown-renderer h6 {
font-size: 0.875rem;
margin-bottom: 1rem;
margin-top: 1rem;
}
.cpc--details-page-markdown-renderer ol, .cpc--details-page-markdown-renderer p, .cpc--details-page-markdown-renderer table, .cpc--details-page-markdown-renderer ul {
font-size: 0.875rem;
margin-bottom: 0.25rem;
}
.cpc--details-page-markdown-renderer .cds--data-table th {
padding-bottom: 0.875rem;
padding-top: 0.875rem;
}
.cpc--details-page-markdown-renderer .cds--list__item {
font-weight: 400;
}
.cpc--details-page-markdown-renderer .cds--snippet {
margin-bottom: 0.25rem;
}
.cpc--details-page-markdown-renderer .cds--snippet--inline {
background-color: transparent;
cursor: auto;
}
.cpc--details-page-markdown-renderer .cds--snippet--inline code {
padding-left: 0;
padding-right: 0;
}
.cpc--details-page-markdown-renderer .cds--snippet--single {
margin-bottom: 1rem;
}
.cpc--details-page-markdown-renderer .cds--snippet--single .cds--snippet-container {
overflow-x: auto;
}
.cds--white, [storybook-carbon-theme=white] {
--cpc-vertical-tab-border:var(--cds-border-subtle-01,#c6c6c6);
}
.cpc--drawer__wrapper {
align-items: stretch;
background-color: var(--cds-layer-02, #fff);
display: flex;
max-height: 500px;
overflow: auto;
position: relative;
width: 100%;
}
.cpc--drawer__wrapper .cpc--drawer-panel {
background-color: var(--cds-layer);
display: flex;
flex-direction: column;
min-height: 400px;
min-width: 400px;
overflow: auto;
position: relative;
width: fit-content;
}
.cpc--drawer__wrapper .cpc--drawer-panel[hidden] {
display: none;
}
@media (prefers-reduced-motion: no-preference) {
.cpc--drawer__wrapper .cpc--drawer-panel__content, .cpc--drawer__wrapper .cpc--drawer-panel__header {
animation: fadein 145ms cubic-bezier(0, 0, 0.38, 0.9) 0s 1;
}
}
@media (prefers-reduced-motion: reduce) {
.cpc--drawer__wrapper .cpc--drawer-panel__content, .cpc--drawer__wrapper .cpc--drawer-panel__header {
animation: none;
}
}
.cpc--drawer__wrapper .cpc--drawer-panel__header {
align-items: center;
background-color: var(--cds-layer);
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
}
.cpc--drawer__wrapper .cpc--drawer-panel__header-label {
text-wrap: nowrap;
color: var(--cds-text-primary, #161616);
font-size: var(--cds-heading-02-font-size, 1rem);
font-weight: var(--cds-heading-02-font-weight, 600);
letter-spacing: var(--cds-heading-02-letter-spacing, 0);
line-height: var(--cds-heading-02-line-height, 1.5);
overflow: hidden;
padding: 0.75rem 1rem;
text-overflow: ellipsis;
}
.cpc--drawer__wrapper .cpc--drawer-panel__header-link {
text-wrap: nowrap;
align-self: center;
overflow: hidden;
padding: 0.75rem 1rem;
text-overflow: ellipsis;
}
.cpc--drawer__wrapper .cpc--drawer-panel__content-wrapper, .cpc--drawer__wrapper .cpc--drawer-panel__header-actions {
display: flex;
}
.cpc--drawer__wrapper .cpc--drawer-panel__content {
overflow: auto;
padding: 0 1rem 1rem;
}
.cpc--drawer__wrapper .cpc--drawer-panel--empty .cpc--message {
background-color: var(--cds-layer-01, #f4f4f4);
justify-content: flex-start;
}
.cpc--drawer__wrapper .cpc--drawer-item {
align-items: flex-start;
background-color: var(--cds-layer-accent-01, #e0e0e0);
border: 0;
border-bottom: 1px solid var(--cpc-vertical-tab-border, var(--cds-border-subtle-02, #e0e0e0));
color: var(--cds-text-secondary, #525252);
cursor: pointer;
display: flex;
height: 4rem;
justify-content: space-between;
padding: 1rem;
position: relative;
}
.cpc--drawer__wrapper .cpc--drawer-item:focus {
outline: 2px solid var(--cds-focus, #0f62fe);
outline-offset: -2px;
}
.cpc--drawer__wrapper .cpc--drawer-item:focus .cpc--drawer-item-label {
color: var(--cds-text-primary, #161616);
}
.cpc--drawer__wrapper .cpc--drawer-item:focus .cpc--drawer-item-secondary-label {
color: var(--cds-text-secondary, #525252);
}
.cpc--drawer__wrapper .cpc--drawer-item .cpc--drawer-item-label-wrapper {
align-items: flex-start;
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-right: 1rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
.cpc--drawer__wrapper .cpc--drawer-item .cpc--drawer-item-label {
color: var(--cds-text-secondary, #525252);
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
overflow: hidden;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
.cpc--drawer__wrapper .cpc--drawer-item .cpc--drawer-item-secondary-label {
color: var(--cds-text-secondary, #525252);
font-size: var(--cds-label-01-font-size, 0.75rem);
font-weight: var(--cds-label-01-font-weight, 400);
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
line-height: var(--cds-label-01-line-height, 1.33333);
overflow: hidden;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
.cpc--drawer__wrapper .cpc--drawer-item:not(.cpc--drawer-item--selected, .cpc--drawer-item--disabled):hover {
background-color: var(--cds-layer-accent-hover-01, #d1d1d1);
}
.cpc--drawer__wrapper .cpc--drawer-item:not(.cpc--drawer-item--selected, .cpc--drawer-item--disabled):hover .cpc--drawer-item-label {
color: var(--cds-text-primary, #161616);
}
.cpc--drawer__wrapper .cpc--drawer-item--hidden {
display: none;
}
.cpc--drawer__wrapper .cpc--drawer-item--selected {
background-color: var(--cds-layer-01, #f4f4f4);
box-shadow: inset 2px 0 0 0 var(--cds-border-interactive, #0f62fe);
}
.cpc--drawer__wrapper .cpc--drawer-item--selected, .cpc--drawer__wrapper .cpc--drawer-item--selected .cpc--drawer-item-label {
font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
font-weight: var(--cds-heading-compact-01-font-weight, 600);
letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-heading-compact-01-line-height, 1.28572);
}
.cpc--drawer__wrapper .cpc--drawer-item--selected .cpc--drawer-item-label {
color: var(--cds-text-primary, #161616);
}
.cpc--drawer__wrapper .cpc--drawer-item--disabled, .cpc--drawer__wrapper .cpc--drawer-item--disabled:focus, .cpc--drawer__wrapper .cpc--drawer-item--disabled:hover {
background-color: var(--cds-button-disabled, #c6c6c6);
cursor: not-allowed;
outline: 0;
}
.cpc--drawer__wrapper .cpc--drawer-item--disabled .cpc--drawer-item-label, .cpc--drawer__wrapper .cpc--drawer-item--disabled .cpc--drawer-item-secondary-label, .cpc--drawer__wrapper .cpc--drawer-item--disabled:focus .cpc--drawer-item-label, .cpc--drawer__wrapper .cpc--drawer-item--disabled:focus .cpc--drawer-item-secondary-label, .cpc--drawer__wrapper .cpc--drawer-item--disabled:hover .cpc--drawer-item-label, .cpc--drawer__wrapper .cpc--drawer-item--disabled:hover .cpc--drawer-item-secondary-label {
fill: var(--cds-text-on-color-disabled, #8d8d8d);
color: var(--cds-text-on-color-disabled, #8d8d8d);
}
.cpc--drawer__wrapper .cpc--drawer__sidepanel {
display: block;
height: calc(100% - 48px);
position: absolute;
top: 48px;
visibility: hidden;
width: 100%;
z-index: 100;
}
.cpc--drawer__wrapper .cpc--drawer__sidepanel .cpc--drawer--list__wrapper {
position: relative;
visibility: hidden;
width: 60%;
}
.cpc--drawer__wrapper .cpc--drawer__sidepanel .cpc--drawer--list, .cpc--drawer__wrapper .cpc--drawer__sidepanel .cpc--drawer__footer {
transform: translateX(-100%);
visibility: hidden;
}
@media (prefers-reduced-motion: no-preference) {
.cpc--drawer__wrapper .cpc--drawer__sidepanel .cpc--drawer--list, .cpc--drawer__wrapper .cpc--drawer__sidepanel .cpc--drawer__footer {
transition: transform 0.4s ease-in-out, visibility 0.4s;
}
}
@media (prefers-reduced-motion: reduce) {
.cpc--drawer__wrapper .cpc--drawer__sidepanel .cpc--drawer--list, .cpc--drawer__wrapper .cpc--drawer__sidepanel .cpc--drawer__footer {
animation: none;
}
}
.cpc--drawer__wrapper .cpc--drawer__sidepanel .cpc--drawer--list {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.cpc--drawer__wrapper .cpc--drawer__sidepanel .cpc--drawer__footer {
position: absolute;
width: 100%;
}
.cpc--drawer__wrapper .cpc--drawer__sidepanel .cpc--drawer-item {
min-width: 100%;
}
.cpc--drawer__wrapper .cpc--drawer__sidepanel--open {
background-color: var(--cds-overlay, hsla(0, 0%, 9%, 0.5));
visibility: visible;
}
.cpc--drawer__wrapper .cpc--drawer__sidepanel--open .cpc--drawer--list, .cpc--drawer__wrapper .cpc--drawer__sidepanel--open .cpc--drawer__footer {
transform: translateX(0);
visibility: visible;
}
.cpc--drawer__wrapper .cpc--drawer {
background-color: var(--cds-layer-01, #f4f4f4);
border-right: 1px solid var(--cds-border-subtle-00, #e0e0e0);
display: block;
flex-direction: column;
max-width: 250px;
min-width: 200px;
overflow-x: visible;
position: relative;
width: auto;
}
.cpc--drawer__wrapper .cpc--drawer__header {
background-color: var(--cds-layer);
display: flex;
justify-content: flex-end;
position: relative;
width: 100%;
}
.cpc--drawer__wrapper .cpc--drawer__header:after {
background-color: var(--cds-border-subtle-00, #e0e0e0);
bottom: 0;
content: "";
height: 1px;
left: 0;
position: absolute;
width: 100%;
}
.cpc--drawer__wrapper .cpc--drawer__sort-button .cpc--drawer__sort-button__icon {
transition: transform 0.25s cubic-bezier(0.5, 0, 0.1, 1);
}
.cpc--drawer__wrapper .cpc--drawer__sort-button .cpc--drawer__sort-button__icon--desc {
transform: rotate(180deg);
}
.cpc--drawer__wrapper .cpc--drawer__sort-button .cpc--drawer__sort-button__icon--asc {
transform: rotate(0);
}
.cpc--drawer__wrapper .cpc--drawer .cpc--drawer__header-btn-set {
display: flex;
justify-content: flex-end;
width: 100%;
}
.cpc--drawer__wrapper .cpc--drawer__search {
width: 100%;
}
.cpc--drawer__wrapper .cpc--drawer__search .cds--search-input {
border-bottom: 0 solid transparent;
}
.cpc--drawer__wrapper .cpc--drawer__footer {
align-items: center;
background-color: var(--cds-layer);
border-top: 1px solid var(--cds-border-subtle-00, #e0e0e0);
bottom: 0;
display: none;
height: 32px;
left: 0;
overflow: hidden;
padding-left: 1rem;
position: absolute;
width: 100%;
}
.cpc--drawer__wrapper .cpc--drawer__empty-state {
background-color: var(--cds-layer-accent-01, #e0e0e0);
color: var(--cds-text-secondary, #525252);
font-size: var(--cds-body-01-font-size, 0.875rem);
font-weight: var(--cds-body-01-font-weight, 400);
height: 100%;
letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
line-height: var(--cds-body-01-line-height, 1.42857);
padding: 1rem;
}
.cpc--drawer__wrapper .cpc--drawer--empty .cpc--drawer__sidepanel .cpc--drawer--list {
height: 100%;
}
.cpc--drawer__wrapper .cpc--drawer .cpc--drawer--list {
background-color: var(--cds-layer-accent-01, #e0e0e0);
display: flex;
flex-direction: column;
overflow-y: auto;
}
.cpc--drawer__wrapper .cpc--drawer .cpc--drawer--list__wrapper {
height: 100%;
overflow-y: hidden;
}
.cpc--drawer__wrapper .cpc--drawer--list {
height: 100%;
}
.cpc--drawer__wrapper .cpc--drawer-panel__footer {
background-color: var(--cds-layer);
border-top: 1px solid var(--cds-border-subtle-00, #e0e0e0);
bottom: 0;
display: flex;
justify-content: flex-end;
left: 0;
position: relative;
width: 100%;
z-index: 1;
}
.cpc--drawer__wrapper--mobile {
align-items: flex-start;
display: flex;
flex-direction: column;
height: 360px;
justify-content: space-between;
position: relative;
}
.cpc--drawer__wrapper--mobile .cpc--drawer-panel {
background-color: var(--cds-layer);
margin-bottom: 38px;
max-height: 420px;
max-width: 100%;
min-height: 280px;
min-width: 100%;
position: relative;
top: 48px;
}
.cpc--drawer__wrapper--mobile .cpc--drawer {
border-right: 0;
display: flex;
flex-direction: column;
height: 100%;
left: 0;
max-width: 100%;
overflow-y: auto;
position: absolute;
top: 0;
width: 100%;
}
.cpc--drawer__wrapper--mobile .cpc--drawer__header {
justify-content: space-between;
}
.cpc--drawer__wrapper--dynamic .cpc--drawer__footer {
display: flex;
}
.cpc--drawer__wrapper--dynamic .cpc--drawer--list {
height: calc(100% - 80px);
}
.cpc--drawer__wrapper--dynamic .cpc--drawer__sidepanel .cpc--drawer--list {
height: calc(100% - 32px);
}
.cpc--drawer__wrapper--dynamic .cpc--drawer__header {
height: 48px;
}
.cpc--drawer__wrapper--dynamic .cpc--drawer-item:last-child, .cpc--drawer__wrapper--dynamic .cpc--drawer__sidepanel .cpc--drawer-item:last-child {
border-bottom: 1px solid var(--cpc-vertical-tab-border, var(--cds-border-subtle-01, #c6c6c6));
}
.cpc--drawer__wrapper--dynamic .cpc--drawer-panel {
overflow: hidden;
}
.cpc--drawer__wrapper--dynamic .cpc--drawer-panel__header {
align-items: center;
background-color: var(--cds-layer);
display: flex;
flex-direction: row;
justify-content: space-between;
position: relative;
width: 100%;
}
.cpc--drawer__wrapper--dynamic .cpc--drawer-panel__header:after {
background-color: var(--cds-border-subtle-00, #e0e0e0);
bottom: 0;
content: "";
height: 1px;
left: 0;
position: absolute;
width: 100%;
}
.cpc--drawer__wrapper--dynamic .cpc--drawer-panel__content {
padding: 1rem;
}
.cpc--drawer__wrapper--dynamic .cpc--drawer-panel__content-wrapper {
overflow: hidden;
}
.cpc--array-value-preview {
display: flex;
margin-bottom: 0.5rem;
}
.cpc--array-value-preview__container {
align-items: center;
display: flex;
width: 100%;
}
.cpc--array-value-preview__code-snippet {
width: calc(100% - 50px);
}
.cpc--array-value-preview__edit-button.cds--btn {
background: var(--cds-layer-01, #f4f4f4);
height: 100%;
}
.cpc--array-value-preview__edit-button.cds--btn svg {
fill: var(--cds-icon-secondary, #525252);
}
.cpc--array-value-preview__edit-button--light.cds--btn {
background: var(--cds-layer-02, #fff);
}
.cpc--mixed-array-editor__json-editor-container {
margin-bottom: 0.5rem;
}
.mb-2 {
margin-bottom: 2rem;
}
#dynamic-string-array-editor-tag-area-disabled {
margin-bottom: 2rem;
max-height: 8.5625rem;
}
.cpc--dynamic-array-editor__error-message {
color: var(--cds-text-error, #da1e28);
font-size: 0.75rem;
}
.cpc--dynamic-array-editor__mb-1 {
margin-bottom: 1rem;
}
.cpc--data-table.cpc--data-table--parent-width {
min-width: 500px;
}
.cpc--data-table.cpc--data-table--parent-width .cpc--data-table__table-wrapper {
overflow-x: auto;
}
.cpc--data-table {
min-width: fit-content;
}
.cpc--data-table td .cpc--text-overflow {
overflow-wrap: anywhere;
}
.cpc--data-table .cds--data-table-container .cds--toolbar-content {
min-width: min-content;
width: 100%;
}
.cpc--data-table .cds--data-table-container .cds--data-table-header {
background: transparent;
}
.cpc--data-table .cds--table-toolbar-button {
height: min-content;
min-height: 0;
padding: 1rem 1rem calc(1rem - 1px);
}
.cpc--data-table .cds--data-table-content, .cpc--data-table .cpc--data-table__pagination--sm {
overflow-x: visible;
}
.cpc--data-table .cpc--data-table__pagination--sm .cds--pagination__left > *, .cpc--data-table .cpc--data-table__pagination--sm .cds--pagination__right > * {
display: none;
}
.cpc--data-table .cpc--data-table__pagination--sm .cds--pagination__control-buttons, .cpc--data-table .cpc--data-table__pagination--sm .cds--pagination__items-count {
display: initial;
}
.cpc--data-table .cpc--data-table__pagination--sm .cds--pagination__items-count {
margin-left: 0;
}
.cpc--data-table .cpc--data-table__pagination--sm .cds--pagination__control-buttons {
white-space: nowrap;
}
.cpc--data-table td.cpc--data-table__row-actions-cell {
padding-bottom: 0;
padding-top: 0;
}
.cpc--data-table td.cpc--data-table__row-actions-cell .cds--overflow-menu__wrapper {
display: flex;
justify-content: end;
margin: 0;
}
.cpc--data-table td.cpc--data-table__row-actions-cell .cds--overflow-menu__wrapper .cds--overflow-menu--md {
min-height: 0;
padding: 0;
}
.cpc--data-table .cds--data-table--tall td.cpc--data-table__row-actions-cell button.cds--overflow-menu {
margin-top: 0.5rem;
}
.cpc--data-table td.cds--table-expand {
height: unset;
}
.cpc--data-table td.cds--table-expand .cds--table-expand__button {
height: 2.9375rem;
}
.cpc--data-table .cds--data-table--xs .cds--table-expand .cds--table-expand__button {
height: 1.4375rem;
}
.cpc--data-table .cds--data-table--sm .cds--table-expand .cds--table-expand__button {
height: 1.9375rem;
}
.cpc--data-table .cds--data-table--lg .cds--table-expand .cds--table-expand__button, .cpc--data-table .cds--data-table--md .cds--table-expand .cds--table-expand__button, .cpc--data-table .cds--data-table--xl .cds--table-expand .cds--table-expand__button {
height: 2rem;
}
.cpc--data-table .cpc--data-table__row-clickable {
cursor: pointer;
}
.cpc--data-table .cds--data-table tr.cds--parent-row.cds--expandable-row + tr[data-child-row] td {
padding-left: 3rem;
}
.cpc--data-table .cds--data-table td .cds--tag {
margin: 0 0.25rem 0 0;
white-space: nowrap;
}
.cpc--data-table .cds--data-table tr:not([data-child-row=true]) td p {
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
}
.cpc--data-table th.cds--table-expand + .cds--table-column-checkbox + th {
padding-left: 0;
}
.cpc--data-table td.cds--table-expand + .cds--table-column-checkbox + td {
padding-left: 1rem;
}
.cpc--data-table td.cds--table-expand + .cds--table-column-checkbox, .cpc--data-table th.cds--table-expand + .cds--table-column-checkbox {
padding-left: 1rem;
padding-right: 0.25rem;
}
.cpc--data-table tr.cds--expandable-row .cpc--data-list__row {
padding-left: 0.75rem;
}
.cpc--data-table .cpc--data-table__empty-state {
color: var(--cds-text-primary, #161616);
padding: 6rem 2rem;
}
.cpc--data-table .cpc--data-table__empty-state .cpc--data-table__empty-state-col {
flex: unset;
}
.cpc--data-table .cpc--data-table__empty-state .cpc--data-table__empty-state-col .cds--tile, .cpc--data-table .cpc--data-table__empty-state .cpc--data-table__empty-state-col .cpc--message {
background: none;
}
.cpc--data-table .cpc--data-table__empty-state .cpc--data-table__empty-state-icon {
width: 5rem;
}
.cpc--data-table .cpc--data-table__empty-state .cpc--data-table__empty-state-header {
font-size: var(--cds-heading-03-font-size, 1.25rem);
font-weight: var(--cds-heading-03-font-weight, 400);
letter-spacing: var(--cds-heading-03-letter-spacing, 0);
line-height: var(--cds-heading-03-line-height, 1.4);
margin-bottom: 0.25rem;
margin-top: 0.75rem;
}
.cpc--data-table .cpc--data-table__empty-state .cpc--data-table__empty-state-description {
max-width: 18rem;
}
.cpc--data-table .cds--data-table tbody tr.cpc--data-table__no-hover, .cpc--data-table .cds--data-table tbody tr.cpc--data-table__no-hover td {
background: var(--cds-layer-01, #f4f4f4);
}
.cpc--data-table .cds--batch-actions {
min-height: 3rem;
}
.cpc--data-table .cds--batch-actions .cds--batch-summary__para {
margin-right: 12px;
}
.cpc--data-table .cds--table-toolbar-filter-tags .cds--tag--disabled, .cpc--data-table .cds--table-toolbar-filter-tags .cds--tag--filter.cds--tag--disabled, .cpc--data-table .cds--table-toolbar-filter-tags .cds--tag--interactive.cds--tag--disabled {
background-color: var(--cds-field-02, #fff);
}
.cpc--data-table .cpc--progress-bar__section, .cpc--data-table .cpc--status__section {
background-color: var(--cds-layer-accent-01, #e0e0e0);
}
.cds--table-toolbar-filter-panel .cds--form-item {
margin: 1.5rem 1rem 1rem;
max-width: fit-content;
min-width: 15rem;
}
.cds--table-toolbar-filter-panel .cds--form-item .cds--date-picker-container {
justify-content: end;
}
.cds--table-toolbar-filter-panel .cds--form-item .cds--date-picker-container .cds--date-picker__input:disabled, .cds--table-toolbar-filter-panel .cds--multi-select--filterable.cds--list-box--disabled:hover .cds--text-input {
background-color: var(--cds-field-02, #fff);
}
.cpc--data-table--no-header .cds--data-table-header {
display: none;
}
.cds--skeleton.cds--data-table-container {
padding-top: 0;
}
.cpc--data-table--actions-dropdown.cds--overflow-menu {
height: auto;
margin: 0;
padding: 0;
width: auto;
}
.cpc--data-table--actions-dropdown.cds--overflow-menu:focus .cds--btn {
box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe), inset 0 0 0 2px var(--cds-background, #fff);
}
.cpc--data-table--actions-dropdown-list.cds--overflow-menu-options:after {
content: none;
}
.cpc--error-modal .cpc--message {
background-color: transparent;
}
.cpc--error-state .cds--tooltip p.cpc--error-state__caption, .cpc--error-state .cpc--error-state__caption {
font-size: var(--cds-label-01-font-size, 0.75rem);
font-weight: var(--cds-label-01-font-weight, 400);
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
line-height: var(--cds-label-01-line-height, 1.33333);
margin-top: 0.5rem;
}
.cpc--error-state .cpc--message__caption {
margin-top: 1rem;
padding: 0;
}
.cpc--error-state .cpc--message__text-container {
max-width: 36rem;
width: 80%;
}
.cpc--error-state .cpc--message__text-container p {
margin-top: 1rem;
}
.cpc--error-state .cpc--message__text-container .cds--link, .cpc--error-state .cpc--message__text-container p {
font-size: var(--cds-body-compact-02-font-size, 1rem);
font-weight: var(--cds-body-compact-02-font-weight, 400);
letter-spacing: var(--cds-body-compact-02-letter-spacing, 0);
line-height: var(--cds-body-compact-02-line-height, 1.375);
}
.cpc--error-state .cds--actionable-notification__text-wrapper {
display: block;
}
.cpc--error-state .cds--actionable-notification__text-wrapper .cpc--error-state__caption {
color: var(--cds-text-secondary, #525252);
}
.cpc--inline-loading-text-input {
position: relative;
}
.cpc--inline-loading-text-input__loader {
position: absolute;
right: 0.5rem;
top: 0.25em;
}
.cpc--integration-create-card .cds--toggle__skeleton-rectangle, .cpc--integration-create-card .cds--toggle__text {
display: none;
}
.cpc--integration-create-card .cds--css-grid {
align-items: center;
grid-template: "icon title toggle" auto ". description ." auto ". content ." auto "footer footer footer" auto/auto 3fr 1fr;
padding: 0;
}
.cpc--integration-create-card .cds--css-grid div:first-of-type {
grid-area: icon;
}
.cpc--integration-create-card .cds--css-grid div:nth-of-type(2) {
grid-area: title;
}
.cpc--integration-create-card .cds--css-grid div:nth-of-type(2) h2 {
font-size: var(--cds-heading-01-font-size, 0.875rem);
font-weight: var(--cds-heading-01-font-weight, 600);
letter-spacing: var(--cds-heading-01-letter-spacing, 0.16px);
line-height: var(--cds-heading-01-line-height, 1.42857);
}
.cpc--integration-create-card .cds--css-grid div:nth-of-type(3) {
grid-area: toggle;
justify-self: flex-end;
margin: 0;
}
.cpc--integration-create-card .cds--css-grid div:nth-of-type(4) {
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
grid-area: description;
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
margin-bottom: 0.5rem;
}
.cpc--integration-create-card .cds--css-grid div:nth-of-type(5) {
grid-area: content;
margin-bottom: 1rem;
margin-top: 0.5rem;
}
.cpc--integration-create-card .cds--css-grid div:nth-of-type(6) {
grid-area: footer;
margin-left: -1rem;
margin-right: -2rem;
}
.cpc--integration-create-card .cds--subgrid.default-footer {
align-items: center;
grid-template: "left-action right-action" auto/auto;
margin-bottom: -1rem;
}
.cpc--integration-create-card .cds--subgrid.default-footer div:first-of-type {
grid-area: left-action;
}
.cpc--integration-create-card .cds--subgrid.default-footer div:first-of-type .cds--link {
margin-left: 1rem;
}
.cpc--integration-create-card .cds--subgrid.default-footer div:nth-of-type(2) {
grid-area: right-action;
justify-self: flex-end;
}
.json-editor-skeleton {
width: 100%;
}
.json-editor-skeleton > div {
height: 15rem;
width: 100%;
}
.json-editor-react-container {
height: 100%;
width: 100%;
}
.json-editor-react-container .jsoneditor-menu, .json-editor-react-container .jsoneditor-poweredBy, .json-editor-react-container .jsoneditor-statusbar {
display: none;
}
.json-editor-react-container div.jsoneditor-outer .ace_editor {
min-height: 6rem;
}
.json-editor-react-container div.jsoneditor, .json-editor-react-container div.jsoneditor-menu, .json-editor-react-container div.jsoneditor-statusbar, .json-editor-react-container div.jsoneditor-validation-errors-container {
background-color: var(--cds-layer-02, #fff);
border-color: var(--cds-layer-02, #fff);
}
.json-editor-react-container div.jsoneditor-statusbar span.jsoneditor-curserinfo-label, .json-editor-react-container div.jsoneditor-statusbar span.jsoneditor-curserinfo-val {
color: var(--cds-text-primary, #161616);
}
.json-editor-react-container div.jsoneditor textarea.jsoneditor-text, .json-editor-react-container div.jsoneditor-tree {
background-color: #666;
color: #fff;
}
.json-editor-react-container div.jsoneditor-field, .json-editor-react-container div.jsoneditor-value {
color: #fff;
}
.json-editor-react-container table.jsoneditor-search div.jsoneditor-frame {
background: grey;
}
.json-editor-react-container tr.jsoneditor-highlight, .json-editor-react-container tr.jsoneditor-selected {
background-color: grey;
}
.json-editor-react-container div.jsoneditor-field.jsoneditor-highlight, .json-editor-react-container div.jsoneditor-field[contenteditable=true]:focus, .json-editor-react-container div.jsoneditor-field[contenteditable=true]:hover, .json-editor-react-container div.jsoneditor-value.jsoneditor-highlight, .json-editor-react-container div.jsoneditor-value[contenteditable=true]:focus, .json-editor-react-container div.jsoneditor-value[contenteditable=true]:hover {
background-color: grey;
border-color: grey;
}
.json-editor-react-container div.jsoneditor-field.highlight-active, .json-editor-react-container div.jsoneditor-field.highlight-active:focus, .json-editor-react-container div.jsoneditor-field.highlight-active:hover, .json-editor-react-container div.jsoneditor-value.highlight-active, .json-editor-react-container div.jsoneditor-value.highlight-active:focus, .json-editor-react-container div.jsoneditor-value.highlight-active:hover {
background-color: #b1b1b1;
border-color: #b1b1b1;
}
.json-editor-react-container div.jsoneditor-tree button:focus {
background-color: #868686;
}
.json-editor-react-container div.jsoneditor td.jsoneditor-separator, .json-editor-react-container div.jsoneditor-readonly {
color: #acacac;
}
.json-editor-react-container div.jsoneditor-value.jsoneditor-string {
color: #0f8;
}
.json-editor-react-container div.jsoneditor-value.jsoneditor-array, .json-editor-react-container div.jsoneditor-value.jsoneditor-object {
color: #bababa;
}
.json-editor-react-container div.jsoneditor-value.jsoneditor-number {
color: #ff4040;
}
.json-editor-react-container div.jsoneditor-value.jsoneditor-boolean {
color: #ff8048;
}
.json-editor-react-container div.jsoneditor-value.jsoneditor-null {
color: #49a7fc;
}
.json-editor-react-container div.jsoneditor-value.jsoneditor-invalid {
color: #fff;
}
.cpc--json-input {
display: flex;
flex-direction: column;
}
.cpc--json-input__json-editor-container {
align-items: center;
display: flex;
max-width: 5rem;
}
.cpc--json-input__json-editor-overlay {
font-size: 0.875rem;
margin-bottom: 0;
min-width: 5rem;
}
.cpc--json-input__json-editor-edit-button.cds--btn {
margin-left: 0.25rem;
}
.cpc--json-input__json-editor-edit-button.cds--btn svg {
fill: var(--cds-icon-secondary, #525252);
}
@font-face {
font-family: octicons-link;
src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAZwABAAAAAACFQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEU0lHAAAGaAAAAAgAAAAIAAAAAUdTVUIAAAZcAAAACgAAAAoAAQAAT1MvMgAAAyQAAABJAAAAYFYEU3RjbWFwAAADcAAAAEUAAACAAJThvmN2dCAAAATkAAAABAAAAAQAAAAAZnBnbQAAA7gAAACyAAABCUM+8IhnYXNwAAAGTAAAABAAAAAQABoAI2dseWYAAAFsAAABPAAAAZwcEq9taGVhZAAAAsgAAAA0AAAANgh4a91oaGVhAAADCAAAABoAAAAkCA8DRGhtdHgAAAL8AAAADAAAAAwGAACfbG9jYQAAAsAAAAAIAAAACABiATBtYXhwAAACqAAAABgAAAAgAA8ASm5hbWUAAAToAAABQgAAAlXu73sOcG9zdAAABiwAAAAeAAAAME3QpOBwcmVwAAAEbAAAAHYAAAB/aFGpk3jaTY6xa8JAGMW/O62BDi0tJLYQincXEypYIiGJjSgHniQ6umTsUEyLm5BV6NDBP8Tpts6F0v+k/0an2i+itHDw3v2+9+DBKTzsJNnWJNTgHEy4BgG3EMI9DCEDOGEXzDADU5hBKMIgNPZqoD3SilVaXZCER3/I7AtxEJLtzzuZfI+VVkprxTlXShWKb3TBecG11rwoNlmmn1P2WYcJczl32etSpKnziC7lQyWe1smVPy/Lt7Kc+0vWY/gAgIIEqAN9we0pwKXreiMasxvabDQMM4riO+qxM2ogwDGOZTXxwxDiycQIcoYFBLj5K3EIaSctAq2kTYiw+ymhce7vwM9jSqO8JyVd5RH9gyTt2+J/yUmYlIR0s04n6+7Vm1ozezUeLEaUjhaDSuXHwVRgvLJn1tQ7xiuVv/ocTRF42mNgZGBgYGbwZOBiAAFGJBIMAAizAFoAAABiAGIAznjaY2BkYGAA4in8zwXi+W2+MjCzMIDApSwvXzC97Z4Ig8N/BxYGZgcgl52BCSQKAA3jCV8CAABfAAAAAAQAAEB42mNgZGBg4f3vACQZQABIMjKgAmYAKEgBXgAAeNpjYGY6wTiBgZWBg2kmUxoDA4MPhGZMYzBi1AHygVLYQUCaawqDA4PChxhmh/8ODDEsvAwHgMKMIDnGL0x7gJQCAwMAJd4MFwAAAHjaY2BgYGaA4DAGRgYQkAHyGMF8NgYrIM3JIAGVYYDT+AEjAwuDFpBmA9KMDEwMCh9i/v8H8sH0/4dQc1iAmAkALaUKLgAAAHjaTY9LDsIgEIbtgqHUPpDi3gPoBVyRTmTddOmqTXThEXqrob2gQ1FjwpDvfwCBdmdXC5AVKFu3e5MfNFJ29KTQT48Ob9/lqYwOGZxeUelN2U2R6+cArgtCJpauW7UQBqnFkUsjAY/kOU1cP+DAgvxwn1chZDwUbd6CFimGXwzwF6tPbFIcjEl+vvmM/byA48e6tWrKArm4ZJlCbdsrxksL1AwWn/yBSJKpYbq8AXaaTb8AAHja28jAwOC00ZrBeQNDQOWO//sdBBgYGRiYWYAEELEwMTE4uzo5Zzo5b2BxdnFOcALxNjA6b2ByTswC8jYwg0VlNuoCTWAMqNzMzsoK1rEhNqByEyerg5PMJlYuVueETKcd/89uBpnpvIEVomeHLoMsAAe1Id4AAAAAAAB42oWQT07CQBTGv0JBhagk7HQzKxca2sJCE1hDt4QF+9JOS0nbaaYDCQfwCJ7Au3AHj+LO13FMmm6cl7785vven0kBjHCBhfpYuNa5Ph1c0e2Xu3jEvWG7UdPDLZ4N92nOm+EBXuAbHmIMSRMs+4aUEd4Nd3CHD8NdvOLTsA2GL8M9PODbcL+hD7C1xoaHeLJSEao0FEW14ckxC+TU8TxvsY6X0eLPmRhry2WVioLpkrbp84LLQPGI7c6sOiUzpWIWS5GzlSgUzzLBSikOPFTOXqly7rqx0Z1Q5BAIoZBSFihQYQOOBEdkCOgXTOHA07HAGjGWiIjaPZNW13/+lm6S9FT7rLHFJ6fQbkATOG1j2OFMucKJJsxIVfQORl+9Jyda6Sl1dUYhSCm1dyClfoeDve4qMYdLEbfqHf3O/AdDumsjAAB42mNgYoAAZQYjBmyAGYQZmdhL8zLdDEydARfoAqIAAAABAAMABwAKABMAB///AA8AAQAAAAAAAAAAAAAAAAABAAAAAA==) format("woff");
}
.markdown-body .octicon {
fill: currentColor;
display: inline-block;
vertical-align: text-bottom;
}
.markdown-body .anchor {
float: left;
line-height: 1;
margin-left: -20px;
padding-right: 4px;
}
.markdown-body .anchor:focus {
outline: none;
}
.markdown-body h1 .octicon-link, .markdown-body h2 .octicon-link, .markdown-body h3 .octicon-link, .markdown-body h4 .octicon-link, .markdown-body h5 .octicon-link, .markdown-body h6 .octicon-link {
color: #1b1f23;
vertical-align: middle;
visibility: hidden;
}
.markdown-body h1:hover .anchor, .markdown-body h2:hover .anchor, .markdown-body h3:hover .anchor, .markdown-body h4:hover .anchor, .markdown-body h5:hover .anchor, .markdown-body h6:hover .anchor {
text-decoration: none;
}
.markdown-body h1:hover .anchor .octicon-link, .markdown-body h2:hover .anchor .octicon-link, .markdown-body h3:hover .anchor .octicon-link, .markdown-body h4:hover .anchor .octicon-link, .markdown-body h5:hover .anchor .octicon-link, .markdown-body h6:hover .anchor .octicon-link {
visibility: visible;
}
.markdown-body {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
word-wrap: break-word;
color: #24292e;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
font-size: 16px;
line-height: 1.5;
}
.markdown-body .pl-c {
color: #6a737d;
}
.markdown-body .pl-c1, .markdown-body .pl-s .pl-v {
color: #005cc5;
}
.markdown-body .pl-e, .markdown-body .pl-en {
color: #6f42c1;
}
.markdown-body .pl-s .pl-s1, .markdown-body .pl-smi {
color: #24292e;
}
.markdown-body .pl-ent {
color: #22863a;
}
.markdown-body .pl-k {
color: #d73a49;
}
.markdown-body .pl-pds, .markdown-body .pl-s, .markdown-body .pl-s .pl-pse .pl-s1, .markdown-body .pl-sr, .markdown-body .pl-sr .pl-cce, .markdown-body .pl-sr .pl-sra, .markdown-body .pl-sr .pl-sre {
color: #032f62;
}
.markdown-body .pl-smw, .markdown-body .pl-v {
color: #e36209;
}
.markdown-body .pl-bu {
color: #b31d28;
}
.markdown-body .pl-ii {
background-color: #b31d28;
color: #fafbfc;
}
.markdown-body .pl-c2 {
background-color: #d73a49;
color: #fafbfc;
}
.markdown-body .pl-c2:before {
content: "^M";
}
.markdown-body .pl-sr .pl-cce {
color: #22863a;
font-weight: 700;
}
.markdown-body .pl-ml {
color: #735c0f;
}
.markdown-body .pl-mh, .markdown-body .pl-mh .pl-en, .markdown-body .pl-ms {
color: #005cc5;
font-weight: 700;
}
.markdown-body .pl-mi {
color: #24292e;
font-style: italic;
}
.markdown-body .pl-mb {
color: #24292e;
font-weight: 700;
}
.markdown-body .pl-md {
background-color: #ffeef0;
color: #b31d28;
}
.markdown-body .pl-mi1 {
background-color: #f0fff4;
color: #22863a;
}
.markdown-body .pl-mc {
background-color: #ffebda;
color: #e36209;
}
.markdown-body .pl-mi2 {
background-color: #005cc5;
color: #f6f8fa;
}
.markdown-body .pl-mdr {
color: #6f42c1;
font-weight: 700;
}
.markdown-body .pl-ba {
color: #586069;
}
.markdown-body .pl-sg {
color: #959da5;
}
.markdown-body .pl-corl {
color: #032f62;
text-decoration: underline;
}
.markdown-body details {
display: block;
}
.markdown-body summary {
display: list-item;
}
.markdown-body a {
background-color: transparent;
}
.markdown-body a:active, .markdown-body a:hover {
outline-width: 0;
}
.markdown-body strong {
font-weight: inherit;
font-weight: bolder;
}
.markdown-body h1 {
margin: 0.67em 0;
}
.markdown-body img {
border-style: none;
}
.markdown-body code, .markdown-body kbd, .markdown-body pre {
font-family: monospace, monospace;
font-size: 1em;
}
.markdown-body hr {
box-sizing: content-box;
overflow: visible;
}
.markdown-body input {
font: inherit;
margin: 0;
overflow: visible;
}
.markdown-body [type=checkbox] {
box-sizing: border-box;
padding: 0;
}
.markdown-body * {
box-sizing: border-box;
}
.markdown-body input {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
.markdown-body a {
color: #0366d6;
text-decoration: none;
}
.markdown-body a:hover {
text-decoration: underline;
}
.markdown-body strong {
font-weight: 600;
}
.markdown-body hr {
background: transparent;
border-bottom: 1px solid #dfe2e5;
height: 0;
margin: 15px 0;
overflow: hidden;
}
.markdown-body hr:after, .markdown-body hr:before {
content: "";
display: table;
}
.markdown-body hr:after {
clear: both;
}
.markdown-body table {
border-collapse: collapse;
border-spacing: 0;
}
.markdown-body td, .markdown-body th {
padding: 0;
}
.markdown-body details summary {
cursor: pointer;
}
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 {
margin-bottom: 0;
margin-top: 0;
}
.markdown-body h1 {
font-size: 32px;
}
.markdown-body h1, .markdown-body h2 {
font-weight: 600;
}
.markdown-body h2 {
font-size: 24px;
}
.markdown-body h3 {
font-size: 20px;
}
.markdown-body h3, .markdown-body h4 {
font-weight: 600;
}
.markdown-body h4 {
font-size: 16px;
}
.markdown-body h5 {
font-size: 14px;
}
.markdown-body h5, .markdown-body h6 {
font-weight: 600;
}
.markdown-body h6 {
font-size: 12px;
}
.markdown-body p {
margin-bottom: 10px;
margin-top: 0;
}
.markdown-body blockquote {
margin: 0;
}
.markdown-body ol, .markdown-body ul {
margin-bottom: 0;
margin-top: 0;
padding-left: 0;
}
.markdown-body ol ol, .markdown-body ul ol {
list-style-type: lower-roman;
}
.markdown-body ol ol ol, .markdown-body ol ul ol, .markdown-body ul ol ol, .markdown-body ul ul ol {
list-style-type: lower-alpha;
}
.markdown-body dd {
margin-left: 0;
}
.markdown-body code, .markdown-body pre {
font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
font-size: 12px;
}
.markdown-body pre {
margin-bottom: 0;
margin-top: 0;
}
.markdown-body input::-webkit-inner-spin-button, .markdown-body input::-webkit-outer-spin-button {
appearance: none;
margin: 0;
}
.markdown-body .border {
border: 1px solid #e1e4e8 !important;
}
.markdown-body .border-0 {
border: 0 !important;
}
.markdown-body .border-bottom {
border-bottom: 1px solid #e1e4e8 !important;
}
.markdown-body .rounded-1 {
border-radius: 3px !important;
}
.markdown-body .bg-white {
background-color: #fff !important;
}
.markdown-body .bg-gray-light {
background-color: #fafbfc !important;
}
.markdown-body .text-gray-light {
color: #6a737d !important;
}
.markdown-body .mb-0 {
margin-bottom: 0 !important;
}
.markdown-body .my-2 {
margin-bottom: 8px !important;
margin-top: 8px !important;
}
.markdown-body .py-0 {
padding-bottom: 0 !important;
padding-top: 0 !important;
}
.markdown-body .py-2 {
padding-bottom: 8px !important;
padding-top: 8px !important;
}
.markdown-body .pl-3, .markdown-body .px-3 {
padding-left: 16px !important;
}
.markdown-body .px-3 {
padding-right: 16px !important;
}
.markdown-body .f6 {
font-size: 12px !important;
}
.markdown-body .lh-condensed {
line-height: 1.25 !important;
}
.markdown-body .text-bold {
font-weight: 600 !important;
}
.markdown-body:after, .markdown-body:before {
content: "";
display: table;
}
.markdown-body:after {
clear: both;
}
.markdown-body > :first-child {
margin-top: 0 !important;
}
.markdown-body > :last-child {
margin-bottom: 0 !important;
}
.markdown-body a:not([href]) {
color: inherit;
text-decoration: none;
}
.markdown-body blockquote, .markdown-body dl, .markdown-body ol, .markdown-body p, .markdown-body pre, .markdown-body table, .markdown-body ul {
margin-bottom: 16px;
margin-top: 0;
}
.markdown-body hr {
background-color: #e1e4e8;
border: 0;
height: 0.25em;
margin: 24px 0;
padding: 0;
}
.markdown-body blockquote {
border-left: 0.25em solid #dfe2e5;
color: #6a737d;
padding: 0 1em;
}
.markdown-body blockquote > :first-child {
margin-top: 0;
}
.markdown-body blockquote > :last-child {
margin-bottom: 0;
}
.markdown-body kbd {
border: 1px solid #c6cbd1;
border-bottom-color: #959da5;
box-shadow: inset 0 -1px 0 #959da5;
font-size: 11px;
}
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 {
font-weight: 600;
line-height: 1.25;
margin-bottom: 16px;
margin-top: 24px;
}
.markdown-body h1 {
font-size: 2em;
}
.markdown-body h1, .markdown-body h2 {
border-bottom: 1px solid #eaecef;
padding-bottom: 0.3em;
}
.markdown-body h2 {
font-size: 1.5em;
}
.markdown-body h3 {
font-size: 1.25em;
}
.markdown-body h4 {
font-size: 1em;
}
.markdown-body h5 {
font-size: 0.875em;
}
.markdown-body h6 {
color: #6a737d;
font-size: 0.85em;
}
.markdown-body ol, .markdown-body ul {
padding-left: 2em;
}
.markdown-body ol ol, .markdown-body ol ul, .markdown-body ul ol, .markdown-body ul ul {
margin-bottom: 0;
margin-top: 0;
}
.markdown-body li {
word-wrap: break-all;
}
.markdown-body li > p {
margin-top: 16px;
}
.markdown-body li + li {
margin-top: 0.25em;
}
.markdown-body dl {
padding: 0;
}
.markdown-body dl dt {
font-size: 1em;
font-style: italic;
font-weight: 600;
margin-top: 16px;
padding: 0;
}
.markdown-body dl dd {
margin-bottom: 16px;
padding: 0 16px;
}
.markdown-body table {
display: block;
overflow: auto;
width: 100%;
}
.markdown-body table th {
font-weight: 600;
}
.markdown-body table td, .markdown-body table th {
border: 1px solid #dfe2e5;
padding: 6px 13px;
}
.markdown-body table tr {
background-color: #fff;
border-top: 1px solid #c6cbd1;
}
.markdown-body table tr:nth-child(2n) {
background-color: #f6f8fa;
}
.markdown-body img {
background-color: #fff;
box-sizing: content-box;
max-width: 100%;
}
.markdown-body img[align=right] {
padding-left: 20px;
}
.markdown-body img[align=left] {
padding-right: 20px;
}
.markdown-body code {
background-color: rgba(27, 31, 35, 0.05);
border-radius: 3px;
font-size: 85%;
margin: 0;
padding: 0.2em 0.4em;
}
.markdown-body pre {
word-wrap: normal;
}
.markdown-body pre > code {
background: transparent;
border: 0;
font-size: 100%;
margin: 0;
padding: 0;
white-space: pre;
word-break: normal;
}
.markdown-body .highlight {
margin-bottom: 16px;
}
.markdown-body .highlight pre {
margin-bottom: 0;
word-break: normal;
}
.markdown-body .highlight pre, .markdown-body pre {
background-color: #f6f8fa;
border-radius: 3px;
font-size: 85%;
line-height: 1.45;
overflow: auto;
padding: 16px;
}
.markdown-body pre code {
word-wrap: normal;
background-color: transparent;
border: 0;
display: inline;
line-height: inherit;
margin: 0;
max-width: auto;
overflow: visible;
padding: 0;
}
.markdown-body .commit-tease-sha {
color: #444d56;
display: inline-block;
font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
font-size: 90%;
}
.markdown-body .blob-wrapper {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
overflow-x: auto;
overflow-y: hidden;
}
.markdown-body .blob-wrapper-embedded {
max-height: 240px;
overflow-y: auto;
}
.markdown-body .blob-num {
color: rgba(27, 31, 35, 0.3);
cursor: pointer;
font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
font-size: 12px;
line-height: 20px;
min-width: 50px;
padding-left: 10px;
padding-right: 10px;
text-align: right;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
vertical-align: top;
white-space: nowrap;
width: 1%;
}
.markdown-body .blob-num:hover {
color: rgba(27, 31, 35, 0.6);
}
.markdown-body .blob-num:before {
content: attr(data-line-number);
}
.markdown-body .blob-code {
line-height: 20px;
padding-left: 10px;
padding-right: 10px;
position: relative;
vertical-align: top;
}
.markdown-body .blob-code-inner {
word-wrap: normal;
color: #24292e;
font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
font-size: 12px;
overflow: visible;
white-space: pre;
}
.markdown-body .pl-token.active, .markdown-body .pl-token:hover {
background: #ffea7f;
cursor: pointer;
}
.markdown-body kbd {
background-color: #fafbfc;
border: 1px solid #d1d5da;
border-bottom-color: #c6cbd1;
border-radius: 3px;
box-shadow: inset 0 -1px 0 #c6cbd1;
color: #444d56;
display: inline-block;
font: 11px SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
line-height: 10px;
padding: 3px 5px;
vertical-align: middle;
}
.markdown-body :checked + .radio-label {
border-color: #0366d6;
position: relative;
z-index: 1;
}
.markdown-body .tab-size[data-tab-size="1"] {
tab-size: 1;
}
.markdown-body .tab-size[data-tab-size="2"] {
tab-size: 2;
}
.markdown-body .tab-size[data-tab-size="3"] {
tab-size: 3;
}
.markdown-body .tab-size[data-tab-size="4"] {
tab-size: 4;
}
.markdown-body .tab-size[data-tab-size="5"] {
tab-size: 5;
}
.markdown-body .tab-size[data-tab-size="6"] {
tab-size: 6;
}
.markdown-body .tab-size[data-tab-size="7"] {
tab-size: 7;
}
.markdown-body .tab-size[data-tab-size="8"] {
tab-size: 8;
}
.markdown-body .tab-size[data-tab-size="9"] {
tab-size: 9;
}
.markdown-body .tab-size[data-tab-size="10"] {
tab-size: 10;
}
.markdown-body .tab-size[data-tab-size="11"] {
tab-size: 11;
}
.markdown-body .tab-size[data-tab-size="12"] {
tab-size: 12;
}
.markdown-body .task-list-item {
list-style-type: none;
}
.markdown-body .task-list-item + .task-list-item {
margin-top: 3px;
}
.markdown-body .task-list-item input {
margin: 0 0.2em 0.25em -1.6em;
vertical-align: middle;
}
.markdown-body hr {
border-bottom-color: #eee;
}
.markdown-body .pl-0 {
padding-left: 0 !important;
}
.markdown-body .pl-1 {
padding-left: 4px !important;
}
.markdown-body .pl-2 {
padding-left: 8px !important;
}
.markdown-body .pl-3 {
padding-left: 16px !important;
}
.markdown-body .pl-4 {
padding-left: 24px !important;
}
.markdown-body .pl-5 {
padding-left: 32px !important;
}
.markdown-body .pl-6 {
padding-left: 40px !important;
}
.markdown-body .pl-7 {
padding-left: 48px !important;
}
.markdown-body .pl-8 {
padding-left: 64px !important;
}
.markdown-body .pl-9 {
padding-left: 80px !important;
}
.markdown-body .pl-10 {
padding-left: 96px !important;
}
.markdown-body .pl-11 {
padding-left: 112px !important;
}
.markdown-body .pl-12 {
padding-left: 128px !important;
}
.cpc--markdown-renderer {
color: var(--cds-text-primary, #161616);
}
.cpc--markdown-renderer ul {
list-style: disc;
}
.cpc--markdown-renderer table tr {
background-color: var(--cds-layer-01, #f4f4f4);
}
.cpc--markdown-renderer table tr:nth-child(2n) {
background-color: var(--cds-background, #fff);
}
.cpc--markdown-renderer table td, .cpc--markdown-renderer table th {
border-color: var(--cds-border-strong-01, #8d8d8d);
}
.cpc--markdown-renderer .cds--snippet pre, .cpc--markdown-renderer .cds--snippet pre code {
background: unset;
}
.cpc--markdown-renderer--mock {
height: 700px;
overflow: auto;
width: 900px;
}
.cpc--media-gallery {
position: relative;
text-align: center;
width: 100%;
}
.cpc--media-gallery__display {
margin-bottom: 1rem;
}
.cpc--media-gallery__image, .cpc--media-gallery__video {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
.cpc--media-gallery__image {
color: var(--cds-text-primary, #161616);
height: auto;
max-height: 100%;
max-width: 100%;
width: auto;
}
.cpc--media-gallery__video {
height: 100%;
width: 100%;
}
.cpc--media-gallery__media-wrap {
overflow: hidden;
padding-top: 56.33%;
position: relative;
}
.cpc--media-gallery__controls {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
padding-top: 1rem;
}
.cpc--media-gallery__controls p {
padding: 1rem 0;
}
.cpc--media-gallery__display--is-video {
display: initial;
}
.cpc--media-gallery .remove-text-indent {
text-indent: 0;
}
.cpc--media-gallery .cds--pagination-nav__page--select {
appearance: auto;
padding-top: 14px;
}
.cpc--media-gallery .cds--pagination-nav__page--select option {
display: inline;
}
.cpc--media-gallery .cds--pagination-nav__page--select option[hidden] {
display: none;
}
.cpc--media-gallery .cds--pagination-nav__page--select_no_dropdown {
appearance: none;
}
.cpc--media-gallery .cds--pagination-nav__page svg, .cpc--media-gallery .cds--pagination-nav__select-icon-wrapper svg {
fill: var(--cds-text-secondary, #525252);
will-change: transform;
}
.cpc--media-gallery--loaded {
visibility: hidden;
}
.cpc--media-gallery__inline-loading {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: auto;
}
.cpc--media-gallery--overlay-styles {
clip-path: inset(0);
filter: blur(1px);
transition: opacity 2s ease-in;
}
.cpc--media-gallery__image-container {
border: 0;
padding: 0;
}
.cpc--media-gallery__image-clickable:hover {
cursor: pointer;
}
.cpc--media-gallery__image-clickable:focus .cpc--media-gallery__image {
border: 2px solid var(--cds-focus, #0f62fe);
}
.cpc--media-gallery__image-clickable .cpc--media-gallery__image {
border: 2px solid transparent;
}
.cpc--media-gallery__modal {
text-align: left;
}
.cpc--media-gallery__modal .cds--modal-container {
height: auto;
min-height: 32rem;
min-width: 80%;
position: static;
}
.cpc--media-gallery__modal .cds--modal-header {
min-height: 2.25rem;
}
.cpc--media-gallery__modal .cds--modal-content {
margin-top: 0.5rem;
padding: 0 3rem;
}
.cpc--media-gallery__modal .cpc--media-gallery__display {
flex-direction: column;
height: 100%;
margin: 0;
width: 100%;
}
.cpc--media-gallery__modal .cpc--media-gallery__media-wrap {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
padding: 0;
width: 100%;
}
.cpc--media-gallery__modal .cpc--media-gallery__image-container {
align-items: center;
background-color: transparent;
display: flex;
height: 100%;
justify-content: center;
width: 100%;
}
.cpc--media-gallery__modal .cpc--media-gallery--loaded {
display: none;
}
.cpc--media-gallery__modal .cpc--media-gallery__image, .cpc--media-gallery__modal .cpc--media-gallery__video {
position: static;
transform: none;
}
.cpc--media-gallery__modal img.cpc--media-gallery__image, .cpc--media-gallery__modal video.cpc--media-gallery__video {
height: auto;
}
.cpc--media-gallery__modal iframe.cpc--media-gallery__video {
max-width: 50rem;
}
.cpc--media-gallery__modal-left, .cpc--media-gallery__modal-right {
background-color: transparent;
border: 0;
cursor: pointer;
display: flex;
padding: 0;
position: fixed;
top: calc(50% - 1rem);
}
.cpc--media-gallery__modal-left {
left: 0.5rem;
}
.cpc--media-gallery__modal-right {
right: 0.5rem;
}
.cpc--media-gallery .react-transform-wrapper {
height: 100%;
width: 100%;
}
.cpc--media-gallery__modal-zoom-image-controls-container {
display: flex;
flex-direction: column;
height: calc(100% - 2rem);
}
.cpc--media-gallery .react-transform-component {
align-items: center;
background-color: transparent;
display: flex;
height: 100%;
justify-content: center;
width: 100%;
}
.cpc--media-gallery__modal-zoom-controls {
display: flex;
justify-content: center;
padding-bottom: 1rem;
width: 100%;
}
.cpc--media-gallery__modal-zoom-control {
background-color: transparent;
border: 0;
color: var(--cds-text-primary, #161616);
cursor: pointer;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.cpc--message {
background-color: var(--cds-layer-02, #fff);
color: var(--cds-text-secondary, #525252);
}
.cpc--message--sm .cpc--message__icon > svg {
width: 64px;
}
.cpc--message--md .cpc--message__icon > svg {
width: 80px;
}
.cpc--message--lg .cpc--message__icon > svg {
width: 140px;
}
.cpc--message--sm .cpc--message__text, .cpc--message__text {
color: var(--cds-text-primary, #161616);
font-size: var(--cds-body-compact-02-font-size, 1rem);
font-weight: var(--cds-body-compact-02-font-weight, 400);
letter-spacing: var(--cds-body-compact-02-letter-spacing, 0);
line-height: var(--cds-body-compact-02-line-height, 1.375);
padding-top: 1rem;
}
.cpc--message--md .cpc--message__text {
font-size: var(--cds-heading-03-font-size, 1.25rem);
font-weight: var(--cds-heading-03-font-weight, 400);
letter-spacing: var(--cds-heading-03-letter-spacing, 0);
line-height: var(--cds-heading-03-line-height, 1.4);
}
.cpc--message--lg .cpc--message__text {
color: var(--cds-text-secondary, #525252);
font-size: var(--cds-label-01-font-size, 0.75rem);
font-weight: var(--cds-label-01-font-weight, 400);
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
line-height: var(--cds-label-01-line-height, 1.33333);
}
.cpc--message__content {
display: flex;
flex-direction: column;
justify-content: flex-end;
margin-bottom: 1rem;
max-width: 36rem;
min-height: 4rem;
width: 80%;
}
.cpc--message--sm .cpc--message__caption, .cpc--message__caption {
color: var(--cds-text-secondary, #525252);
}
.cpc--message--sm .cpc--message__caption, .cpc--message--sm .cpc--message__caption a, .cpc--message__caption, .cpc--message__caption a {
font-size: var(--cds-label-01-font-size, 0.75rem);
font-weight: var(--cds-label-01-font-weight, 400);
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
line-height: var(--cds-label-01-line-height, 1.33333);
}
.cpc--message--sm .cpc--message__caption a, .cpc--message__caption a {
line-height: 1.5;
}
.cpc--message--md .cpc--message__caption {
font-size: var(--cds-body-01-font-size, 0.875rem);
font-weight: var(--cds-body-01-font-weight, 400);
letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
line-height: var(--cds-body-01-line-height, 1.42857);
}
.cpc--message--lg .cpc--message__caption {
color: var(--cds-text-placeholder, hsla(0, 0%, 9%, 0.4));
font-size: var(--cds-label-01-font-size, 0.75rem);
font-weight: var(--cds-label-01-font-weight, 400);
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
line-height: var(--cds-label-01-line-height, 1.33333);
}
.cpc--message__button-container, .cpc--message__children-container {
display: flex;
padding-top: 1rem;
}
.cpc--message__button-container .cds--btn, .cpc--message__button-container .cds--lin, .cpc--message__children-container .cds--btn, .cpc--message__children-container .cds--lin {
margin-right: 0.5rem;
}
.cpc--mini-order-summary-side-panel .cpc--mini-order-summary-side-panel__summary {
bottom: 4rem;
left: 0;
position: absolute;
width: 100%;
}
.cpc--mini-order-summary-side-panel .cpc--mini-order-summary-side-panel__summary:before {
background-image: linear-gradient(hsla(0, 0%, 100%, 0) 0, var(--cds-icon-inverse, #fff) 100%);
content: "";
height: 2rem;
pointer-events: none;
position: absolute;
top: -2rem;
width: 100%;
}
.cpc--mini-order-summary-side-panel .cpc--side-panel__body-content {
position: unset;
}
.cpc--mini-order-summary-side-panel .cpc--side-panel__content {
transition: height 0.15s cubic-bezier(0.2, 0, 0.38, 0.9);
}
.cpc--mini-order-summary-side-panel .cpc--side-panel__btn-set.cds--btn-set {
background-color: var(--cds-layer-02, #fff);
}
.cpc--mini-order-summary .cds--icon-tooltip {
left: 1rem;
position: absolute;
top: 1rem;
}
.cpc--mini-order-summary.cpc--mini-order-summary--expanded .cpc--mini-order-summary__expand-arrow {
transform: rotate(-180deg);
}
.cpc--mini-order-summary .cpc--mini-order-summary__expand-arrow {
transform: rotate(0);
transition: transform 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
}
.cpc--mini-order-summary .cpc--mini-order-summary__estimate {
display: flex;
flex-direction: column;
margin-top: 1rem;
}
.cpc--mini-order-summary .cpc--mini-order-summary__estimate > .cds--btn--tertiary {
max-width: unset;
}
.cpc--mini-order-summary .cpc--mini-order-summary__notifications {
display: flex;
flex-direction: column;
margin-left: 1rem;
}
.cpc--mini-order-summary .cpc--mini-order-summary__terms--invalid .cds--checkbox-label:before {
border-color: var(--cds-support-error, #da1e28);
}
.cpc--mini-order-summary .cpc--mini-order-summary__terms--invalid .cds--checkbox:focus + .cds--checkbox-label:before {
box-shadow: 0 0 0 2px var(--cds-focus-inset, #fff), 0 0 0 4px var(--cds-support-error, #da1e28);
}
.cpc--mini-order-summary .cpc--order-summary__meta-details {
margin-bottom: 0;
padding-bottom: 1rem;
}
.cpc--mini-order-summary:not(.cpc--mini-order-summary--expanded) .cpc--order-summary__total-cost .cpc--order-summary__heading {
margin-left: 1.5rem;
}
.cpc--mini-order-summary .cpc--order-summary {
height: unset;
overflow: hidden;
position: unset;
transition: height 0.15s cubic-bezier(0.2, 0, 0.38, 0.9);
width: unset;
}
.cpc--mini-order-summary .cpc--order-summary__content {
min-height: unset;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.cpc--mini-order-summary .cpc--order-summary__footer, .cpc--mini-order-summary .cpc--order-summary__header {
margin: 0;
padding-left: 2rem;
}
.cpc--mini-order-summary .cpc--order-summary__header {
align-items: center;
min-height: 4rem;
}
.cpc--mini-order-summary .cpc--order-summary__header .cpc--order-summary__heading {
margin-left: 1.5rem;
padding-top: 0;
}
.cpc--mini-order-summary .cpc--order-summary__switchers {
transform: unset;
}
.cpc--mini-order-summary .cpc--order-summary__footer {
padding-bottom: 1.5rem;
}
.cpc--mini-order-summary .cpc--order-summary__country-switcher .cds--list-box__menu, .cpc--mini-order-summary .cpc--order-summary__currency-switcher .cds--list-box__menu {
min-width: unset;
}
body.cds--dark-theme .cpc--mini-order-summary .cpc--order-summary {
background-color: var(--cds-layer-01, #f4f4f4);
}
.cpc--mini-order-summary .cpc--order-summary__footer-text.cpc--order-summary__links {
padding-top: 1.5rem;
}
.cpc--mini-order-summary .cpc--submit-promo__container {
max-width: unset;
}
.cpc--mini-order-summary .cpc--submit-promo__row div:first-child {
flex: 1 1 auto;
}
.cpc--mini-order-summary .cpc--submit-promo__button-wrapper {
flex: 0 0 auto;
}
.cpc--nested-filterable-dropdown .cds--text-input {
border: 0;
outline: 0;
padding: 0;
width: calc(100% - 1.875rem);
}
.cpc--nested-filterable-dropdown .cds--text-input:focus {
outline: none;
}
.cpc--nested-filterable-dropdown .cds--text-input:-ms-input-placeholder {
color: var(--cds-text-helper, #6f6f6f);
}
.cpc--nested-filterable-dropdown .cds--text-input::placeholder {
color: var(--cds-text-helper, #6f6f6f);
}
.cpc--nested-filterable-dropdown .cds--text-input::-ms-clear {
display: none;
}
.cpc--nested-filterable-dropdown .cds--list-box__field {
height: 100%;
padding: 0 2rem 0 1rem !important;
}
.cpc--nested-filterable-dropdown .cds--list-box__field .cds--list-box__menu-icon {
top: 0.5rem;
}
.cpc--nested-filterable-dropdown .cds--list-box__menu {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
max-height: 25rem;
min-width: 13rem;
}
.cpc--nested-filterable-dropdown .cds--list-box__menu .cds--group-item:not(:first-child) {
padding-top: 0.25rem;
}
.cpc--nested-filterable-dropdown .cds--list-box__menu .cds--group-item .cds--group-label {
display: block;
font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
font-weight: var(--cds-heading-compact-01-font-weight, 600);
letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
letter-spacing: 0.2px;
line-height: var(--cds-heading-compact-01-line-height, 1.28572);
line-height: 1.5rem;
margin: 0.5rem 1rem;
}
.cpc--nested-filterable-dropdown .cds--list-box__menu .cds--list-box__menu-item .cds--checkbox-wrapper {
flex: 1 1 auto;
width: 50%;
}
.cpc--nested-filterable-dropdown .cds--list-box__menu .cds--list-box__menu-item .cds--checkbox-wrapper label {
align-items: center;
display: flex;
padding-top: 0;
}
.cpc--nested-filterable-dropdown .cds--list-box__menu .cds--list-box__menu-item .cds--checkbox-wrapper .cds--checkbox-label-text {
padding: 0;
width: 100%;
}
.cpc--nested-filterable-dropdown .cds--list-box__menu .cds--list-box__menu-item .cds--checkbox-wrapper .cds--list-box__menu-icon {
top: 0;
}
.cpc--nested-filterable-dropdown .cds--list-box__menu .cds--list-box__menu-item .cds--list-box__menu-item__option {
align-items: center;
display: flex;
margin-bottom: 0;
margin-top: 0;
max-width: 100%;
padding: 0.5rem 1.5rem 0.5rem 0;
}
.cpc--nested-filterable-dropdown .cds--list-box__menu .cds--list-box__menu-item .cds--list-box__menu-item--single {
align-items: center;
display: flex;
justify-content: space-between;
line-height: 1.5rem;
}
.cpc--nested-filterable-dropdown .cds--list-box__menu .cds--list-box__menu-item .cds--list-box__menu-item__label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cpc--nested-filterable-dropdown .cds--list-box__menu .cds--list-box__menu-item .cds--tag {
margin: 0 0 0 0.25rem;
white-space: nowrap;
}
.cpc--nested-filterable-dropdown .cds--list-box__menu .cds--list-box__menu-item--checkmark {
position: absolute;
right: 1rem;
}
.cpc--nested-filterable-dropdown .cds--list-box__menu .cds--list-box__menu-item--active {
background-color: var(--cds-background-selected-hover, hsla(0, 0%, 55%, 0.32));
border-bottom-color: var(--cds-layer-accent-hover-01, #d1d1d1);
}
.cpc--nested-filterable-dropdown .cds--list-box__selection--multi {
background-color: var(--cds-icon-primary, #161616);
}
.cpc--nested-filterable-dropdown .cds--list-box__selection--multi svg {
padding: 0 0.175rem;
}
.cpc--nested-filterable-dropdown .cds--list-box__selection--multi svg:hover {
background-color: var(--cds-icon-primary, #161616);
}
.cpc--nested-filterable-dropdown .cds--list-box__selection--multi:focus svg {
border-radius: 50%;
box-shadow: inset 0 0 0 2px #fff;
}
.cpc--nested-filterable-dropdown .cds--list-box__selection--multi ~ .cds--text-input {
width: calc(100% - 5.25rem);
}
.cpc--nested-filterable-dropdown .cds--list-box__selection--multi ~ .cds--text-input:-ms-input-placeholder {
text-overflow: ellipsis;
}
.cpc--nested-filterable-dropdown .cds--list-box__selection--multi ~ .cds--text-input:placeholder-shown {
text-overflow: ellipsis;
}
.cpc--nested-filterable-dropdown .cds--tooltip__label, .cpc--nested-filterable-dropdown .cds--tooltip__trigger {
display: block;
font-size: 0.875rem;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cpc--nested-filterable-dropdown.cds--list-box--disabled .cds--list-box__selection--multi {
background-color: var(--cds-text-disabled, hsla(0, 0%, 9%, 0.25));
pointer-events: none;
}
.cpc--nested-filterable-dropdown--focus .cds--list-box__field {
outline: 2px solid var(--cds-focus, #0f62fe);
outline-offset: -2px;
}
.cpc--nested-filterable-dropdown--expandable {
font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
font-weight: var(--cds-heading-compact-01-font-weight, 600);
letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-heading-compact-01-line-height, 1.28572);
}
.cpc--nested-list-selector {
width: 24rem;
}
.cpc--nested-list-selector .cds--overflow-menu--md {
padding-top: 0;
}
.cpc--nested-list-selector__item {
align-items: center;
border-bottom: 1px solid transparent;
border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
display: flex;
margin: 0 1rem;
outline: 0;
padding: 0.5rem 1.5rem 0.5rem 0;
}
.cpc--nested-list-selector__item .cds--checkbox-wrapper {
flex: 1 1 auto;
margin: 0 !important;
width: 50%;
}
.cpc--nested-list-selector__item .cds--checkbox-label {
align-items: center;
padding: 0 0 0 1.75rem;
width: 100%;
}
.cpc--nested-list-selector__item .cds--checkbox-label-text {
line-height: 1.5rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
.cpc--nested-list-selector__item .cds--skeleton__text {
margin: 0.25rem 0;
}
.cpc--nested-list-selector__item .cds--tag {
margin: 0 0 0 0.25rem;
white-space: nowrap;
}
.cpc--nested-list-selector__item-wrapper:first-of-type .cpc--nested-list-selector__item {
border-top-color: transparent;
}
.cpc--nested-list-selector__item--single {
color: var(--cds-text-primary, #161616);
font-size: 0.875rem;
line-height: 1.5rem;
}
.cpc--nested-list-selector__item--checkmark {
position: absolute;
right: 1rem;
}
.cpc--nested-list-selector__item-label {
cursor: pointer;
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 50%;
}
.cpc--nested-list-selector__item--disabled .cpc--nested-list-selector__item-label {
cursor: not-allowed;
opacity: 0.5;
}
.cpc--nested-list-selector__item--highlighted {
background-color: var(--cds-background-hover, hsla(0, 0%, 55%, 0.12));
}
.cpc--nested-list-selector__item--highlighted + .cpc--nested-list-selector__item-wrapper .cpc--nested-list-selector__item {
border-top-color: transparent;
}
.cpc--nested-list-selector__item-wrapper {
outline: 0;
position: relative;
width: 24rem;
}
.cpc--nested-list-selector-icon {
align-items: center;
cursor: pointer;
display: flex;
margin-left: 0.5rem;
position: absolute;
right: 1rem;
transition: transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
.cpc--nested-list-selector-icon--open {
transform: rotate(180deg);
}
.cpc--nested-list-selector__group-label {
color: var(--cds-text-secondary, #525252);
display: block;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.2px;
line-height: 1.5rem;
margin: 0.5rem 1rem;
}
.cpc--nested-list-selector__group-skeleton {
margin: 0.75rem 1rem;
}
.cpc--nested-list-selector__filter-container {
display: flex;
margin-bottom: 2rem;
}
.cpc--nested-list-selector__filter-container .cds--overflow-menu {
margin-left: 0.25rem;
}
.cpc--nested-list-selector__filter-container .cds--search-magnifier {
display: none;
}
.cpc--nested-list-selector__filter-container .cds--search-input {
padding-left: 1rem;
}
.cpc--nested-list-selector__filter-container .cds--skeleton .cds--search-input {
height: 2.5rem;
}
.cpc--nested-list-selector__filter-menu-item {
font-size: 0.875rem;
width: 100%;
}
.cpc--nested-list-selector__filter-menu-item .cds--btn {
padding-right: 1rem;
width: 100%;
}
.cpc--nested-list-selector__filter-panel {
padding: 1rem;
}
.cpc--nested-list-selector__filter-panel-title {
font-weight: 600;
margin-bottom: 1rem;
}
.cpc--nested-list-selector__filter-options {
width: 14rem;
}
.cpc--nested-list-selector__active-filters {
align-items: center;
display: flex;
margin-bottom: 1rem;
}
.cpc--nested-list-selector__active-filters .cds--label {
margin: 0;
}
.cpc--nested-list-selector__active-filters .cds--link {
min-height: 1.5rem;
padding: 0.25rem;
}
.cpc--nested-list-selector__active-filters .cds--link:hover {
background-color: transparent;
}
.cpc--nested-list-selector__active-filters .cds--link, .cpc--nested-list-selector__active-filters .cds--tag {
margin-left: 0.5rem;
}
.cpc--nested-list-selector__panel {
padding: 1rem 0;
}
.cpc--nested-list-selector__no-match {
color: var(--cds-text-primary, #161616);
font-size: 0.875rem;
font-style: italic;
line-height: 1.5rem;
margin: 0 1rem;
}
.cpc--order-summary {
background-color: var(--cds-layer-01, #f4f4f4);
border-left: 1px solid var(--cds-border-subtle-01, #c6c6c6);
color: var(--cds-text-primary, #161616);
display: flex;
flex-direction: column;
width: 100%;
z-index: 1;
}
@media (min-width: 66rem) {
.cpc--order-summary {
bottom: 0;
height: calc(100vh - 50px);
position: fixed;
right: 0;
width: 22rem;
}
.cpc--order-summary:after {
position: absolute;
}
}
@media (max-height: 700px) {
.cpc--order-summary {
overflow-y: auto;
}
}
.cpc--order-summary:after {
background-color: var(--cds-layer-01, #f4f4f4);
content: "";
height: 100%;
left: 0;
width: 1px;
}
.cpc--order-summary__header {
align-items: center;
border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
display: flex;
justify-content: space-between;
max-width: 100%;
min-height: 4rem;
position: relative;
}
.cpc--order-summary .top-heading, .cpc--order-summary__heading {
display: inline-block;
font-size: var(--cds-heading-03-font-size, 1.25rem);
font-weight: var(--cds-heading-03-font-weight, 400);
letter-spacing: var(--cds-heading-03-letter-spacing, 0);
line-height: var(--cds-heading-03-line-height, 1.4);
}
.cpc--order-summary .top-heading {
margin-left: 1rem;
}
.cpc--order-summary__content {
flex-grow: 1;
margin-top: 1.5px;
min-height: 10rem;
overflow-y: auto;
padding: 1rem;
position: relative;
}
@media (min-width: 42rem) {
.cpc--order-summary__content {
padding: 1rem;
}
}
@media (max-height: 700px) {
.cpc--order-summary__content {
min-height: auto;
overflow-y: visible;
}
}
.cpc--order-summary__footer {
border-top: 1px solid var(--cds-layer-accent-01, #e0e0e0);
margin: 0;
padding: 0 1rem 1.5rem;
position: relative;
}
@media (min-width: 42rem) {
.cpc--order-summary__footer {
margin: 0;
}
}
.cpc--order-summary__button-group {
display: flex;
flex-direction: column;
margin-top: 1rem;
}
.cpc--order-summary__button-group .cpc--code-sample-btn, .cpc--order-summary__button-group .cpc--code-sample-btn > .cds--btn, .cpc--order-summary__button-group > .cds--btn {
width: 100%;
}
:not(.cds--modal-footer) .cpc--order-summary__button-group .cds--btn:not(:last-child) {
margin-bottom: 1rem;
}
.cpc--order-summary__footer:after {
content: "";
height: 1px;
position: absolute;
top: 0;
width: 100%;
}
.cpc--order-summary__footer.cpc--order-summary__footer--no-divider:after {
display: none;
}
.cpc--order-summary__switchers {
position: relative;
z-index: 2;
}
.cpc--order-summary__country-switcher .cds--dropdown__wrapper {
grid-gap: 0;
max-width: 100%;
}
.cpc--order-summary__country-switcher .cds--dropdown {
max-width: 12rem;
min-width: 9rem;
}
.cpc--order-summary__header--wrap {
flex-wrap: wrap;
min-height: auto;
}
.cpc--order-summary__header--wrap .cpc--order-summary__heading {
height: auto;
margin-top: 0.5rem;
}
.cpc--order-summary__header--wrap .cpc--order-summary__switchers {
display: flex;
justify-content: space-between;
min-width: calc(100% + 0.75rem);
padding-top: 0.25rem;
}
.cpc--order-summary__header--wrap .cpc--order-summary__switchers .cpc--order-summary__country-switcher .cds--dropdown {
width: 12rem;
}
.cpc--order-summary__header--wrap .cpc--order-summary__switchers .cpc--order-summary__currency-switcher .cds--dropdown {
max-width: 9rem;
min-width: 6rem;
}
.cpc--order-summary__meta-details {
font-size: var(--cds-label-01-font-size, 0.75rem);
font-weight: var(--cds-label-01-font-weight, 400);
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
line-height: var(--cds-label-01-line-height, 1.33333);
margin-bottom: 1rem;
position: relative;
}
.cpc--order-summary__meta-details .cpc--order-summary__row:first-child {
margin-top: -0.5rem;
min-height: 2rem;
}
.cpc--order-summary__meta-details .cpc--order-summary__row:first-child .cpc--order-summary__heading, .cpc--order-summary__meta-details .cpc--order-summary__row:first-child span.cpc--order-summary__item-value {
align-self: center;
}
.cpc--order-summary__meta-details .cpc--order-summary__estimate-button.cds--btn--ghost.cds--btn--sm {
-ms-hyphens: none;
hyphens: none;
min-width: 6.3125rem;
padding: 0;
}
.cpc--order-summary__meta-details-item {
padding-bottom: 0.25rem;
}
.cpc--order-summary__heading, .cpc--order-summary__heading + .cpc--order-summary__item-value {
font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
font-weight: var(--cds-heading-compact-01-font-weight, 600);
letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-heading-compact-01-line-height, 1.28572);
}
.cpc--order-summary__meta-details-item-value {
color: var(--cds-text-secondary, #525252);
}
.cpc--order-summary__list--left-pad {
padding-left: 1.5rem;
}
.cpc--order-summary__row > .cpc--order-summary__list--left-pad {
padding-left: 0;
}
.cpc--order-summary__row--nest > .cpc--order-summary__list {
position: relative;
}
.cpc--order-summary__details-list {
color: var(--cds-text-secondary, #525252);
font-size: var(--cds-label-01-font-size, 0.75rem);
font-weight: var(--cds-label-01-font-weight, 400);
grid-column: 1/span 2;
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
line-height: var(--cds-label-01-line-height, 1.33333);
padding-top: 0.5rem;
}
.cds--accordion__content .cpc--order-summary__details-list {
padding-top: 0;
}
.cpc--order-summary__row {
grid-gap: 0 0.75rem;
display: grid;
grid-template-columns: auto 4fr;
grid-template-rows: auto;
position: relative;
}
.cpc--order-summary__row--nest:before {
background-color: var(--cds-text-primary, #161616);
content: "";
height: calc(100% - 0.5rem);
left: -1.0875rem;
position: absolute;
top: 0.5rem;
width: 1px;
}
.cpc--order-summary__row--nest:after, .cpc--order-summary__row--nest > .cpc--order-summary__list > .cpc--order-summary__row:before {
background-color: var(--cds-text-primary, #161616);
content: "";
height: 1px;
left: -1.0875rem;
position: absolute;
top: calc(1.5rem + 1px);
width: 0.5rem;
}
.cpc--order-summary__row--nest:after {
top: 0.5rem;
}
.cpc--order-summary__row--nest > .cpc--order-summary__list > .cpc--order-summary__row:last-child:after {
background-color: var(--cds-layer-01, #f4f4f4);
content: "";
height: calc(100% - 1.5rem);
left: -1.125rem;
position: absolute;
top: 1.625rem;
width: 0.25rem;
}
.cpc--order-summary__row > .cpc--order-summary__list > .cpc--order-summary__row {
padding-top: 1rem;
}
.cpc--order-summary__content > .cpc--order-summary__list > .cpc--order-summary__row:not(:first-child) {
margin-top: 1rem;
}
.cpc--order-summary__list > .cpc--order-summary__row {
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
}
.cpc--order-summary__list .cpc--order-summary__item-value {
font-weight: 600;
}
.cpc--order-summary__details-list .cpc--order-summary__item-value {
font-weight: 400;
}
.cpc--order-summary__content > .cpc--order-summary__list > .cpc--order-summary__row > .cpc--order-summary__list {
grid-column: 1/span 2;
}
.cpc--order-summary__item-name, .cpc--order-summary__item-value {
word-wrap: break-word;
-ms-hyphens: auto;
hyphens: auto;
max-width: 18.5rem;
overflow-wrap: break-word;
}
.cpc--order-summary__item-value-green {
color: var(--cds-support-success, #24a148);
justify-self: end;
padding-top: 0.25rem;
text-align: right;
}
.cpc--order-summary__item-name-tag {
word-wrap: break-word;
-ms-hyphens: auto;
hyphens: auto;
margin-left: -0.25rem;
max-width: 18.5rem;
overflow-wrap: break-word;
}
.cpc--order-summary__item-name-discount {
max-width: 10rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cpc--order-summary__item-value {
justify-self: end;
text-align: right;
}
.cpc--order-summary__item-value--emphasis {
color: var(--cds-text-secondary, #525252);
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-style: italic;
font-weight: var(--cds-body-compact-01-font-weight, 400);
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
}
.cpc--order-summary__item-quantity {
align-items: center;
background-color: var(--cds-layer-02, #fff);
border-bottom: 0.5rem solid var(--cds-layer-01, #f4f4f4);
border-top: 0.5rem solid var(--cds-layer-01, #f4f4f4);
display: flex;
font-size: var(--cds-label-01-font-size, 0.75rem);
font-weight: var(--cds-label-01-font-weight, 400);
height: 2rem;
justify-content: center;
left: -1.5rem;
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
line-height: var(--cds-label-01-line-height, 1.33333);
margin-top: -0.5rem;
position: absolute;
transform: translateY(1px);
width: 1rem;
z-index: 1;
}
.cpc--order-summary__terms {
margin: 1rem 0 0;
}
.cpc--order-summary__totals {
color: var(--cds-text-secondary, #525252);
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
padding-top: 1rem;
}
.cpc--order-summary__totals .cpc--order-summary__total-cost {
color: var(--cds-text-primary, #161616);
font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
font-weight: var(--cds-heading-compact-01-font-weight, 600);
letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-heading-compact-01-line-height, 1.28572);
}
.cpc--order-summary__totals .cpc--order-summary__total-cost div:first-child {
display: flex;
}
.cpc--order-summary__totals .cpc--order-summary__row {
padding-top: 0.5rem;
}
.cpc--order-summary__totals .cpc--order-summary__row:first-child {
padding-top: 0;
}
.cpc--order-summary__list > .cpc--order-summary__row > .cpc--order-summary__item_name {
position: relative;
}
.cpc--order-summary__footnotes {
color: var(--cds-text-secondary, #525252);
font-size: var(--cds-label-01-font-size, 0.75rem);
font-style: italic;
font-weight: var(--cds-label-01-font-weight, 400);
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
line-height: var(--cds-label-01-line-height, 1.33333);
padding-top: 1rem;
}
.cpc--order-summary .cpc--submit-promo__feedback-text--success {
color: var(--cds-support-success, #24a148);
}
.cpc--order-summary .cpc--submit-promo__feedback-text--error {
color: var(--cds-support-error, #da1e28);
}
.cpc--order-summary .cpc--submit-promo__feedback-text--error .cds--link {
display: inline;
font-size: inherit;
}
.cpc--order-summary__footer-text {
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
padding-top: 0.75rem;
}
.cpc--order-summary__footer .cds--accordion__item {
border-top: 0;
}
.cpc--order-summary__footer > :not(.cpc--submit-promo__container) .cds--link {
font-size: 100%;
}
.cpc--order-summary .cpc--submit-promo__container {
padding-top: 1rem;
width: 100%;
}
.cpc--order-summary__footer .cds--form-item {
width: 100%;
}
.cpc--order-summary__footer .cds--text-input {
width: 12.5rem;
}
.cpc--order-summary__row .cds--accordion {
grid-column: 1/span 2;
margin-top: 0.25rem;
max-width: 18.5rem;
}
@media (min-width: 42rem) {
.cpc--order-summary__row .cds--accordion {
width: calc(100% + 0.5rem);
}
}
.cpc--order-summary__row .cds--accordion .cds--accordion__item, .cpc--order-summary__row .cds--accordion .cds--accordion__item:last-child {
border: none;
}
.cpc--order-summary__row .cds--accordion .cds--accordion__content {
padding-bottom: 0;
padding-right: 1rem;
}
.cpc--order-summary__content > .cds--inline-notification {
margin-top: 0;
}
.cpc--order-summary__content > .cds--inline-notification ~ .cds--inline-notification {
margin-top: 1rem;
}
.cpc--order-summary__inline-loading {
margin: 0.5rem 0;
padding-bottom: 1rem;
}
.cpc--order-summary__inline-loading:last-child {
margin: 0.5rem 0;
padding-bottom: 0;
}
.cpc--order-summary-tree {
font-size: 0.875rem;
}
.cpc--order-summary-tree .cds--tree {
overflow: hidden;
}
.cpc--order-summary-tree .cds--tree .cds--tree-node {
background-color: var(--cds-layer-01, #f4f4f4);
color: var(--cds-text-secondary, #525252);
padding-left: 1rem;
}
.cpc--order-summary-tree .cds--tree .cds--tree-node--disabled:focus > .cds--tree-node__label, .cpc--order-summary-tree .cds--tree .cds--tree-node:focus {
outline: none;
}
.cpc--order-summary-tree .cds--tree .cds--tree-node--disabled, .cpc--order-summary-tree .cds--tree .cds--tree-node--disabled .cds--tree-node__label:hover, .cpc--order-summary-tree .cds--tree .cds--tree-node--disabled .cds--tree-node__label:hover .cds--tree-node__label__details {
background-color: var(--cds-background-active, hsla(0, 0%, 55%, 0.5));
color: var(--cds-text-disabled, hsla(0, 0%, 9%, 0.25));
}
.cpc--order-summary-tree .cds--tree .cds--tree-node--disabled .cds--tree-node__icon, .cpc--order-summary-tree .cds--tree .cds--tree-node--disabled .cds--tree-node__label:hover .cds--tree-node__icon, .cpc--order-summary-tree .cds--tree .cds--tree-node--disabled .cds--tree-node__label:hover .cds--tree-parent-node__toggle-icon, .cpc--order-summary-tree .cds--tree .cds--tree-node--disabled .cds--tree-parent-node__toggle-icon {
fill: var(--cds-icon-disabled, hsla(0, 0%, 9%, 0.25));
}
.cpc--order-summary-tree .cds--tree .cds--tree-node--disabled, .cpc--order-summary-tree .cds--tree .cds--tree-node--disabled .cds--tree-parent-node__toggle-icon:hover {
cursor: not-allowed;
}
.cpc--order-summary-tree .cds--tree .cds--tree-node__label {
align-items: center;
display: flex;
flex: 1;
margin-left: -2rem !important;
min-height: 2rem;
padding-left: 2rem !important;
}
.cpc--order-summary-tree .cds--tree .cds--tree-node__label:hover {
background-color: var(--cds-background-hover, hsla(0, 0%, 55%, 0.12));
color: var(--cds-text-primary, #161616);
}
.cpc--order-summary-tree .cds--tree .cds--tree-node__label:hover .cds--tree-node__label__details {
color: var(--cds-text-primary, #161616);
}
.cpc--order-summary-tree .cds--tree .cds--tree-node__label:hover .cds--tree-node__icon, .cpc--order-summary-tree .cds--tree .cds--tree-node__label:hover .cds--tree-parent-node__toggle-icon {
fill: var(--cds-icon-primary, #161616);
}
.cpc--order-summary-tree .cds--tree .cds--tree-leaf-node {
display: flex;
padding-left: 2.5rem;
}
.cpc--order-summary-tree .cds--tree .cds--tree-leaf-node.cds--tree-node--with-icon {
padding-left: 2rem;
}
.cpc--order-summary-tree .cds--tree .cds--tree-node__label__details {
align-items: center;
display: flex;
}
.cpc--order-summary-tree .cds--tree .cds--tree-node--with-icon .cds--tree-parent-node__toggle {
margin-right: 0;
}
.cpc--order-summary-tree .cds--tree .cds--tree-parent-node__toggle {
border: 0;
margin-right: 0.5rem;
padding: 0;
}
.cpc--order-summary-tree .cds--tree .cds--tree-parent-node__toggle:hover {
cursor: pointer;
}
.cpc--order-summary-tree .cds--tree .cds--tree-parent-node__toggle:focus {
outline: none;
}
.cpc--order-summary-tree .cds--tree .cds--tree-parent-node__toggle-icon {
fill: var(--cds-icon-secondary, #525252);
transform: rotate(-90deg);
transition: all 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
}
.cpc--order-summary-tree .cds--tree .cds--tree-parent-node__toggle-icon--expanded {
transform: rotate(0);
}
.cpc--order-summary-tree .cds--tree .cds--tree-node__icon {
fill: var(--cds-icon-secondary, #525252);
flex-shrink: 0;
margin-right: 0.5rem;
}
.cpc--order-summary-tree .cds--tree .cds--tree-node--selected > .cds--tree-node__label {
background-color: var(--cds-background-hover, hsla(0, 0%, 55%, 0.12));
color: var(--cds-text-primary, #161616);
}
.cpc--order-summary-tree .cds--tree .cds--tree-node--selected > .cds--tree-node__label:hover {
background-color: var(--cds-background-hover, hsla(0, 0%, 55%, 0.12));
}
.cpc--order-summary-tree .cds--tree .cds--tree-node--selected > .cds--tree-node__label .cds--tree-node__icon, .cpc--order-summary-tree .cds--tree .cds--tree-node--selected > .cds--tree-node__label .cds--tree-parent-node__toggle-icon {
fill: var(--cds-icon-primary, #161616);
}
.cpc--order-summary-tree .cds--tree .cds--tree-node--active > .cds--tree-node__label {
position: relative;
}
.cpc--order-summary-tree .cds--tree--compact .cds--tree-node__label {
min-height: 1.5rem;
}
.cpc--order-summary-tree__header-details {
margin: 0;
padding-bottom: 1rem;
padding-top: 0.5rem;
}
.cpc--order-summary-tree__header-details span {
margin-right: 1rem;
}
.cpc--order-summary-tree__cost-details-line-items {
font-weight: 400;
line-height: 1.5rem;
margin-bottom: 0.5rem;
}
.cpc--order-summary-tree__cost-details {
font-size: 0.75rem;
font-weight: 400;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
}
.cpc--order-summary-tree__cost {
font-size: 0.775rem;
font-weight: 400;
}
.cpc--order-summary-tree__config-item-name {
color: var(--cds-text-primary, #161616);
display: inline-block;
max-width: 10rem;
word-break: break-word;
}
.cpc--order-summary-tree__module-line-item {
flex-grow: 1;
}
.cpc--order-summary-tree__line-item-name {
display: inline-block;
justify-content: space-between;
max-width: 10rem;
word-break: break-word;
}
.cpc--order-summary-tree__resources-item-name {
display: inline-block;
justify-content: space-between;
max-width: 9rem;
word-break: break-word;
}
.cpc--order-summary-tree__line-item-resources-count {
color: var(--cds-text-secondary, #525252);
font-size: 0.8rem;
}
.cpc--order-summary-tree__pricing-data {
float: right;
font-weight: 700;
padding-right: 1rem;
}
.cpc--order-summary-tree__resource-node {
margin-left: 0;
}
.cpc--order-summary-tree__resources-pricing-data {
float: right;
font-weight: 700;
padding-right: 1rem;
}
.cpc--order-summary-tree__tooltip {
position: absolute;
top: -0.75rem;
}
.cpc--order-summary-tree__startingAt {
margin-top: 1.25rem;
}
.cpc--order-summary-tree__footer {
margin: 0 2.5rem 0 1rem;
}
.cpc--order-summary-tree .cds--tree-node__children .cds--tree {
margin-right: 0;
}
.cpc--order-summary-tree__cost-breakdown {
background-color: var(--cds-background-hover, hsla(0, 0%, 55%, 0.12));
margin: 0 0 0 -2rem;
padding: 1rem 0 1rem 4rem;
}
.cpc--order-summary-tree .mb-1 {
line-height: 1.5rem;
}
.cpc--order-summary-tree .bold {
font-size: 1rem;
font-weight: 600;
}
.cpc--order-summary-tree .cds--tree {
border-top: 1px solid var(--cds-layer-accent-01, #e0e0e0);
color: var(--cds-text-on-color, #fff);
margin-left: -1rem;
margin-right: -1rem;
}
.cpc--order-summary-tree .cds--tree-parent-node__toggle {
align-items: unset;
align-self: unset;
display: unset;
}
.cpc--order-summary-tree .cds--tree-node__label {
border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
color: var(--cds-text-primary, #161616);
padding: 0.5rem 0;
}
.cpc--order-summary-tree .cds--tree-node__label__details {
flex-grow: 1;
}
.cpc--order-summary-tree .cds--popover {
padding-left: 1rem;
}
.cpc--actions-panel-sm, .cpc--actions-panel-sm .cds--menu-button__trigger {
display: block;
}
@media (min-width: 42rem) {
.cpc--actions-panel-sm, .cpc--actions-panel-sm .cds--menu-button__trigger {
display: none;
}
}
.cpc--actions-panel, .cpc--actions-panel .cds--menu-button__trigger {
display: none;
}
@media (min-width: 42rem) {
.cpc--actions-panel, .cpc--actions-panel .cds--menu-button__trigger {
display: block;
}
}
.cpc--actions-panel .cds--menu-button__trigger {
display: flex;
height: auto;
width: auto;
}
.cpc--actions-panel-wrap {
position: relative;
}
.cpc--page-header__surfaced-details {
align-items: center;
display: flex;
height: 40px;
}
.cpc--page-header__surfaced-details .cpc--tag-list--label-empty {
padding-left: 0;
}
.cpc--page-header__surfaced-details--list ul {
display: flex;
font-size: var(--cds-helper-text-01-font-size, 0.75rem);
letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
line-height: var(--cds-helper-text-01-line-height, 1.33333);
margin-left: 0;
}
.cpc--page-header__surfaced-details--list li:not(:first-child):before {
content: " • ";
}
.cpc--page-header__surfaced-details--list__label {
font-weight: 600;
}
.cpc--page-header--wrapped-details .cpc--page-header__surfaced-details {
color: var(--cds-text-helper, #6f6f6f);
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
height: max-content;
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
min-width: 100%;
padding-top: 0.5rem;
}
.cpc--page-header:not(.cpc--page-header--wrapped-details) .cpc--page-header__surfaced-details > :first-child {
margin: 0 0.5rem 0 0;
}
.cpc--page-header:not(.cpc--page-header--wrapped-details) .cpc--page-header__surfaced-details > :not(:first-child) {
margin: 0 0.5rem;
}
.cpc--page-header {
background-color: var(--cds-background, #fff);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 1rem 1rem 2rem;
width: 100%;
}
@media (min-width: 42rem) {
.cpc--page-header {
padding: 1rem 2rem 2rem;
}
}
@media (min-width: 66rem) {
.cpc--page-header {
flex-flow: row nowrap;
}
}
.cpc--page-header--light {
background-color: var(--cds-layer-01, #f4f4f4);
border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
}
.cpc--page-header__main {
flex: 1;
width: calc(100% - 3rem);
}
.cpc--page-header__main .cpc--page-header__icon {
position: absolute;
}
.cpc--page-header__main-container {
display: flex;
flex: 1;
flex-wrap: wrap;
margin-right: 1rem;
width: calc(100% - 136px);
}
@media (min-width: 42rem) {
.cpc--page-header__main {
max-width: 100%;
min-width: 17.125rem;
}
}
.cpc--page-header__breadcrumb {
position: relative;
z-index: 1;
}
.cpc--page-header .cds--breadcrumb {
display: flex;
flex-wrap: nowrap;
}
.cpc--page-header .cds--breadcrumb .cds--breadcrumb-item:after, .cpc--page-header .cds--breadcrumb .cds--link, .cpc--page-header .cds--breadcrumb .cpc--page-header__breadcrumb-btn {
font-size: var(--cds-label-01-font-size, 0.75rem);
font-weight: var(--cds-label-01-font-weight, 400);
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
line-height: var(--cds-label-01-line-height, 1.33333);
}
.cpc--page-header .cds--breadcrumb .cds--link, .cpc--page-header .cds--breadcrumb .cpc--page-header__breadcrumb-btn {
color: var(--cds-link-primary, #0f62fe);
}
.cpc--page-header .cds--breadcrumb .cpc--page-header__breadcrumb-btn {
background-color: transparent;
border: 0;
box-sizing: border-box;
font-family: inherit;
margin: 0;
outline: none;
padding: 0;
text-decoration: none;
vertical-align: baseline;
white-space: nowrap;
}
.cpc--page-header .cds--breadcrumb .cpc--page-header__breadcrumb-btn:hover {
cursor: pointer;
text-decoration: underline;
}
.cpc--page-header .cds--breadcrumb .cpc--page-header__breadcrumb-btn:focus {
outline: 1px solid var(--cds-background-brand, #0f62fe);
}
.cpc--page-header .cds--row {
justify-content: space-between;
width: calc(100% + 2rem);
}
.cpc--page-header__title-container {
align-items: center;
display: flex;
flex-wrap: wrap;
max-width: 100%;
min-width: 0;
padding: calc(1rem + 28px) 0 0;
}
.cpc--page-header__breadcrumb + .cpc--page-header__title-container {
padding: 28px 0 0;
}
.cpc--page-header__title-text {
font-size: var(--cpc-heading-05-font-size, 2rem);
font-weight: var(--cpc-heading-05-font-weight, 300);
letter-spacing: var(--cpc-heading-05-letter-spacing, 0);
line-height: var(--cpc-heading-05-line-height, 2.5rem);
line-height: 2.5rem;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 41.98rem) {
.cpc--page-header__title-text {
white-space: nowrap;
}
}
.cpc--page-header__title {
max-width: 100%;
padding-right: 1rem;
position: relative;
}
.cpc--page-header__title--skeleton {
height: 2rem;
margin-bottom: 0;
margin-top: 0.5rem;
}
.cpc--page-header__icon + .cpc--page-header__title-text {
margin-left: 36px;
}
.cpc--page-header__icon {
align-items: center;
display: flex;
height: 100%;
width: 36px;
}
.cpc--page-header__icon-container {
align-items: end;
display: flex;
justify-content: center;
}
.cpc--page-header--with-icon .cpc--page-header__icon {
border-radius: 0.25rem;
height: 64px;
justify-content: center;
padding: 12px;
width: 64px;
}
.cpc--page-header--with-icon .cpc--page-header__icon-background {
background-color: #fff;
}
.cpc--page-header__icon > *, .cpc--page-header__icon > img, .cpc--page-header__icon > svg {
height: 32px;
width: 32px;
}
.cpc--page-header--with-icon .cpc--page-header__icon > *, .cpc--page-header--with-icon .cpc--page-header__icon > img, .cpc--page-header--with-icon .cpc--page-header__icon > svg {
height: 52px;
width: 52px;
}
.cpc--page-header__actions {
align-items: center;
display: flex;
margin-top: calc(28px + 1rem);
max-height: 2.5rem;
position: relative;
}
@media (max-width: 41.98rem) {
.cpc--page-header__actions {
margin-top: 1.5rem;
}
}
.cpc--page-header__actions > *, .cpc--page-header__actions > .cds--btn {
margin-left: 1rem;
}
.cpc--page-header__actions > .cds--btn:first-child, .cpc--page-header__actions > :first-child {
margin-left: 0;
}
.cpc--page-header--with-icon {
padding-bottom: 1rem;
}
.cpc--page-header--with-icon .cpc--page-header__container {
display: flex;
justify-content: space-between;
width: calc(100% + 2rem);
}
.cpc--page-header--with-icon .cpc--page-header__breadcrumb {
margin-left: 2.5rem;
padding-bottom: 0.25rem;
}
.cpc--page-header--with-icon .cpc--page-header__title-text {
margin-left: 2.5rem;
}
.cpc--page-header--with-icon .cpc--page-header__breadcrumb, .cpc--page-header--with-icon .cpc--page-header__title-text, .cpc--page-header--with-icon.cpc--page-header--wrapped-details .cpc--page-header__surfaced-details {
margin-left: 0;
}
@media (min-width: 66rem) {
.cpc--page-header--with-icon .cpc--page-header__breadcrumb, .cpc--page-header--with-icon .cpc--page-header__title-text, .cpc--page-header--with-icon.cpc--page-header--wrapped-details .cpc--page-header__surfaced-details {
margin-left: 0;
}
}
.cpc--page-header--sticky {
position: sticky;
top: 3.125rem;
}
.cpc--page-header--skeleton .cpc--page-header__main {
flex: auto;
width: auto;
}
.cds--grid .cpc--page-header {
padding-left: 0;
padding-right: 0;
}
.cpc--parameters {
margin-bottom: 0.5rem;
}
.cpc--parameters .dirty-bubble {
background: var(--cds-button-primary, #0f62fe);
border-radius: 50%;
height: 4px;
left: 0;
margin: auto 0.25rem auto calc(-1rem + 6px);
width: 4px;
}
.cpc--parameters .dirty-bubble-container {
display: flex;
margin-top: -3px;
}
.cpc--parameters .parameter-input-row {
display: flex;
}
.cpc--parameters .parameter-input-row-reset {
margin-bottom: 2rem;
margin-left: -3rem;
margin-top: auto;
right: -4rem;
}
.cpc--parameters-card {
margin-left: -1rem;
width: calc(100% + 1rem);
}
.cpc--parameters-card .cpc--card__labeled-rows > * {
padding-bottom: 0.5rem;
}
.cpc--parameters-skeleton {
margin-left: -1rem;
width: calc(100% + 1rem);
}
.cpc--parameters-inputs {
margin: 3rem 0;
}
.cpc--parameters-inputs-header {
align-items: center;
display: flex;
font-size: var(--cds-heading-03-font-size, 1.25rem);
font-weight: var(--cds-heading-03-font-weight, 400);
letter-spacing: var(--cds-heading-03-letter-spacing, 0);
line-height: var(--cds-heading-03-line-height, 1.4);
min-height: 48px;
}
.cpc--parameters-inputs-sub-header {
font-size: var(--cds-label-01-font-size, 0.75rem);
font-weight: var(--cds-label-01-font-weight, 400);
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
line-height: var(--cds-label-01-line-height, 1.33333);
padding-top: 0.125rem;
}
.cpc--parameters-inputs .cds--row {
margin-bottom: 2rem;
}
.cpc--parameters-inputs .edit-button-footer {
padding-bottom: 1rem;
}
.cpc--progress-bar {
align-items: center;
display: flex;
}
.cpc--progress-bar__progress {
align-content: stretch;
background-color: var(--cds-layer-accent-01, #e0e0e0);
border-radius: 2rem;
display: flex;
flex-flow: row nowrap;
height: 0.75rem;
overflow: hidden;
position: relative;
}
.cpc--progress-bar__label {
color: var(--cds-text-primary, #161616);
font-size: 0.875rem;
margin-left: 0.5rem;
}
.cpc--progress-bar--segments .cpc--progress-bar__section:not(:last-child) {
border-right: 0.125rem solid var(--cds-layer-02, #fff);
}
.cpc--progress-bar__section {
background-color: transparent;
flex: 0 0 0;
height: 100%;
overflow: hidden;
position: relative;
}
.cpc--progress-bar__section__fill {
background: none;
height: 100%;
position: absolute;
width: 100%;
}
.cpc--progress-bar__section[data-status=green] .cpc--progress-bar__section__fill {
background-color: var(--cds-support-success, #24a148);
}
.cpc--progress-bar__section[data-status=red] .cpc--progress-bar__section__fill {
background-color: var(--cds-support-error, #da1e28);
}
.cpc--progress-bar__section[data-status=yellow] .cpc--progress-bar__section__fill {
background-color: var(--cds-support-warning, #f1c21b);
}
.cpc--progress-bar__section[data-status=blue] .cpc--progress-bar__section__fill {
background-color: var(--cds-support-info, #0043ce);
}
.cpc--progress-bar__section[data-status=gray] .cpc--progress-bar__section__fill {
background-color: var(--cds-button-secondary, #393939);
}
.cpc--progress-bar__section[data-status^=indeterminate] .cpc--progress-bar__section__fill {
animation: animate-stripes 3s linear infinite;
background-image: linear-gradient(135deg, var(--cds-support-success, #24a148) 25%, #6fdc8c 25%, #6fdc8c 50%, var(--cds-support-success, #24a148) 50%, var(--cds-support-success, #24a148) 75%, #6fdc8c 75%, #6fdc8c);
background-size: 15px 15px;
}
.cpc--progress-bar__section[data-status=indeterminate-yellow] .cpc--progress-bar__section__fill {
background-image: linear-gradient(135deg, var(--cds-support-warning, #f1c21b) 25%, #fddc69 25%, #fddc69 50%, var(--cds-support-warning, #f1c21b) 50%, var(--cds-support-warning, #f1c21b) 75%, #fddc69 75%, #fddc69);
}
.cpc--progress-bar__section[data-status=indeterminate-red] .cpc--progress-bar__section__fill {
background-image: linear-gradient(135deg, var(--cds-support-error, #da1e28) 25%, #ff8389 25%, #ff8389 50%, var(--cds-support-error, #da1e28) 50%, var(--cds-support-error, #da1e28) 75%, #ff8389 75%, #ff8389);
}
.cpc--progress-bar__section[data-status=indeterminate-blue] .cpc--progress-bar__section__fill {
background-image: linear-gradient(135deg, var(--cds-support-info, #0043ce) 25%, #78a9ff 25%, #78a9ff 50%, var(--cds-support-info, #0043ce) 50%, var(--cds-support-info, #0043ce) 75%, #78a9ff 75%, #78a9ff);
}
.cpc--progress-bar__section[data-status=indeterminate-gray] .cpc--progress-bar__section__fill {
background-image: linear-gradient(135deg, var(--cds-button-secondary, #393939) 25%, #a8a8a8 25%, #a8a8a8 50%, var(--cds-button-secondary, #393939) 50%, var(--cds-button-secondary, #393939) 75%, #a8a8a8 75%, #a8a8a8);
}
.cpc--progress-bar--skeleton {
align-items: center;
display: flex;
}
.cpc--progress-bar--skeleton .cds--skeleton__text {
margin-bottom: 0;
}
.cpc--progress-bar--skeleton__progress {
border-radius: 2rem;
height: 0.75rem;
overflow: hidden;
}
.cpc--progress-bar--skeleton__label {
height: 0.875rem;
margin-left: 0.5rem;
}
.cpc--progress-container, .cpc--progress-container .cds--progress, .cpc--progress-container .cds--progress-line {
width: 100%;
}
.cpc--progress-container .cds--progress-label {
max-width: unset;
}
.cpc--progress-container .cds--progress-step {
flex-grow: 1;
width: unset;
}
.cpc--progress-container .cpc--progress-container__tab-content {
margin-bottom: 3rem;
margin-top: 2rem;
}
.cpc--progress-container .cpc--progress-container__nav-buttons .cds--btn {
margin-right: 0.5rem;
}
body.cpc--push-panel-open {
padding-right: 20rem;
}
.cpc--push-panel__help .cpc--side-panel__content {
padding-left: 0;
padding-right: 0;
}
.cpc--push-panel__help .cpc--side-panel__content .cpc--side-panel__heading {
padding-left: 2rem;
width: calc(100% - 5rem);
}
.cpc--push-panel__help .cpc--side-panel__content .cds--accordion__content {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
.cpc--resource-level-nav.cpc--side-nav {
background-color: var(--cds-layer-01, #f4f4f4);
}
.cpc--resource-level-nav.cpc--side-nav .cpc--side-nav__items {
padding: 1rem 0;
}
@media (max-width: 41.98rem) {
.cpc--resource-level-nav.cpc--side-nav .cpc--side-nav__items {
padding: 0;
}
}
.cpc--resource-level-nav:after {
background-color: var(--cds-border-subtle-01, #c6c6c6);
content: "";
height: 100%;
position: absolute;
right: 0;
top: 0;
width: 1px;
}
@media screen and (max-width: 671px) {
:not(.cpc-docs--renderer__component) > .cpc--side-nav.cpc--resource-level-nav {
bottom: 0;
height: auto;
left: 0;
max-height: calc(100% - 3.125rem);
min-width: 100%;
overflow-y: auto;
position: fixed;
z-index: 999;
}
.cpc--side-nav.cpc--resource-level-nav.cpc--resource-level-nav--skeleton {
display: none;
}
}
.cpc--resource-level-nav--skeleton .cpc--side-nav__item:not(.cpc--side-nav__item--with-menu), .cpc--resource-level-nav--skeleton .cpc--side-nav__menu-button {
background-color: var(--cds-layer-01, #f4f4f4);
cursor: default;
}
.cpc--resource-level-nav--skeleton .cds--skeleton__text {
margin-bottom: 0;
}
.cpc--satellite-location-status {
display: flex;
}
.cpc--satellite-location-status .cds--toggletip-button .cpc--status__icon--red-failure {
fill: var(--cds-support-error, #da1e28);
}
.cpc--satellite-location-status .cds--toggletip-button .cpc--status__icon--green-checkmark {
fill: var(--cds-support-success, #24a148);
}
.cpc--satellite-location-status .cds--toggletip-button .cpc--status__icon--warning {
fill: var(--cds-support-warning, #f1c21b);
}
.cpc--satellite-location-status .cds--toggletip-button .cpc--status__icon--warning [data-icon-path=inner-path] {
fill: var(--cds-icon-primary, #161616);
opacity: 1;
}
.cpc--satellite-location-status .cds--toggletip-button .cpc--status__icon--inprogress {
fill: var(--cds-support-info, #0043ce);
}
.cpc--satellite-location-status .cds--toggletip-button .cpc--status__icon--incomplete {
fill: var(--cds-icon-secondary, #525252);
}
.cpc--satellite-location-status .cpc--tooltip-trigger {
background-color: unset;
border: 0;
margin: 0;
padding: 0;
}
.cpc--section-heading__title {
font-size: var(--cds-heading-03-font-size, 1.25rem);
font-weight: var(--cds-heading-03-font-weight, 400);
letter-spacing: var(--cds-heading-03-letter-spacing, 0);
line-height: var(--cds-heading-03-line-height, 1.4);
}
.cpc--section-heading__description {
max-width: 42rem;
}
.cpc--side-nav--inverse, .cpc--side-nav--inverse .cpc--side-nav__item:not(.cpc--side-nav__item--with-menu), .cpc--side-nav--inverse .cpc--side-nav__menu, .cpc--side-nav--inverse .cpc--side-nav__menu-button {
background-color: var(--cds-layer-01, #f4f4f4);
}
.cpc--side-nav--inverse .cpc--side-nav__link, .cpc--side-nav--inverse .cpc--side-nav__menu-button {
color: var(--cds-text-secondary, #525252);
}
.cpc--side-nav--inverse .cpc--side-nav__collapse-button {
background-color: var(--cds-layer-01, #f4f4f4);
}
.cpc--side-nav--inverse.cpc--side-nav--collapsed .cpc--side-nav__collapse-button {
animation-name: side-nav-collapse-button-fade;
}
.cpc--side-nav--inverse .cpc--side-nav__item--active .cpc--side-nav__menu-button, .cpc--side-nav--inverse .cpc--side-nav__link[aria-current=page] {
background-color: var(--cds-layer-selected-01, #e0e0e0);
}
.cpc--side-nav--inverse .cpc--side-nav__menu-icon, .cpc--side-nav--inverse > .cpc--side-nav__header .cpc--side-nav__link svg {
fill: var(--cds-text-secondary, #525252);
}
@keyframes side-nav-collapse-button-fade {
0% {
background-color: var(--cds-layer-01, #f4f4f4);
}
to {
background-color: var(--cds-layer-01, #f4f4f4);
}
}
.cpc--side-nav {
background-color: var(--cds-background, #fff);
flex-direction: column;
height: 100%;
opacity: 1;
position: relative;
transition: transform 0.24s cubic-bezier(0, 0, 0.38, 0.9);
width: 16rem;
z-index: 100;
}
@media (min-width: 42rem) {
.cpc--side-nav {
display: flex;
}
}
.cpc--side-nav--collapsed {
overflow: hidden;
transform: translateY(calc(100% - 3.125rem));
transition: transform 0.24s cubic-bezier(0.2, 0, 1, 0.9);
}
@media (min-width: 42rem) {
.cpc--side-nav--collapsed {
transform: translateY(0);
transition: all;
}
}
.cpc--side-nav--collapsed > :not(.cpc--side-nav__collapse-button) {
opacity: 0;
transition: all 0.24s cubic-bezier(0.2, 0, 1, 0.9);
visibility: hidden;
}
@media (min-width: 42rem) {
.cpc--side-nav--collapsed > :not(.cpc--side-nav__collapse-button) {
opacity: 1;
transition: all;
visibility: visible;
}
}
.cpc--side-nav__items {
display: flex;
flex-direction: column;
flex-grow: 1;
list-style: none;
overflow-x: visible;
padding: 0.5rem 0;
}
.cpc--side-nav__collapse-button, .cpc--side-nav__item:not(.cpc--side-nav__item--with-menu), .cpc--side-nav__menu-button {
background: linear-gradient(90deg, var(--cds-layer-hover-01, #e8e8e8) 0, transparent 50%, transparent 100%);
background-position: 100% 0;
background-size: 200% 100%;
border: none;
cursor: pointer;
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
outline: none;
padding: 0;
text-align: left;
transition: background-position 0.15s cubic-bezier(0.2, 0, 0.38, 0.9);
width: 100%;
}
.cpc--side-nav__link {
position: relative;
}
.cpc--side-nav__link:not(:has(.cpc--side-nav__item-icon)), .cpc--side-nav__menu-button:not(:has(.cpc--side-nav__item-icon)) {
padding-left: 2rem;
}
.cpc--side-nav__menu-button:not(:has(.cpc--side-nav__item-icon)) + .cpc--side-nav__menu .cpc--side-nav__link, .cpc--side-nav__menu-button:not(:has(.cpc--side-nav__item-icon)) + .cpc--side-nav__menu .cpc--side-nav__menu-button {
padding-left: 56px;
}
.cpc--side-nav__item-icon {
margin-right: 0.5rem;
}
.cpc--side-nav__menu-button__label {
align-items: center;
color: var(--cds-text-secondary, #525252);
display: flex;
justify-content: flex-start;
text-decoration: none;
}
.cpc--side-nav__menu-button {
justify-content: space-between;
}
.cpc--side-nav__link, .cpc--side-nav__menu-button {
align-items: center;
color: var(--cds-text-secondary, #525252);
display: flex;
outline: 2px solid transparent;
outline-offset: -2px;
padding: 0.5rem 1rem;
text-decoration: none;
}
@media (min-width: 99rem) {
.cpc--side-nav__link, .cpc--side-nav__menu-button {
padding: 0.5rem 0.75rem 0.5rem 2.5rem;
}
}
.cpc--side-nav__menu .cpc--side-nav__menu-button, .cpc--side-nav__menu .cpc--side-nav__menu-flyout {
padding: 0.5rem 1rem 0.5rem 2.5rem;
}
@media (min-width: 99rem) {
.cpc--side-nav__menu .cpc--side-nav__menu-button, .cpc--side-nav__menu .cpc--side-nav__menu-flyout {
padding: 0.5rem 1rem 0.5rem 3rem;
}
}
.cpc--side-nav__menu-flyout:focus-within .cpc--side-nav__flyout, .cpc--side-nav__menu-flyout:hover .cpc--side-nav__flyout {
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
display: block;
}
.cpc--side-nav__flyout-box {
background: transparent;
display: block;
height: 34px;
left: 235px;
position: absolute;
width: 21px;
}
.cpc--side-nav__flyout {
background-color: var(--cds-background, #fff);
display: none;
left: 16rem;
position: absolute;
width: 16rem;
}
.cpc--side-nav__menu {
opacity: 0;
visibility: hidden;
}
.cpc--side-nav__menu, .cpc--side-nav__menu .cpc--side-nav__item, .cpc--side-nav__menu .cpc--side-nav__link {
transition: all 0.24s cubic-bezier(0.2, 0, 0.38, 0.9);
transition-property: max-height, opacity, visibility, background-position;
}
.cpc--side-nav__menu-icon {
fill: var(--cds-icon-secondary, #525252);
right: 1rem;
transition: all 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
@media (min-width: 42rem) {
.cpc--side-nav__menu-icon {
fill: var(--cds-icon-secondary, #525252);
}
}
.cpc--side-nav__menu .cpc--side-nav__link {
padding: 0.5rem 1rem 0.5rem 2.5rem;
}
@media (min-width: 99rem) {
.cpc--side-nav__menu .cpc--side-nav__link {
padding-left: 3rem;
}
}
.cpc--side-nav__item--active .cpc--side-nav__menu-button, .cpc--side-nav__link[aria-current=page] {
background-color: var(--cds-layer-selected-01, #e0e0e0);
}
@media (min-width: 42rem) {
.cpc--side-nav__item--active .cpc--side-nav__menu-button, .cpc--side-nav__link[aria-current=page] {
color: var(--cds-text-primary, #161616);
}
}
.cpc--side-nav__collapse-button, .cpc--side-nav__link[aria-current=page] {
font-size: var(--cds-heading-01-font-size, 0.875rem);
font-weight: var(--cds-heading-01-font-weight, 600);
letter-spacing: var(--cds-heading-01-letter-spacing, 0.16px);
line-height: var(--cds-heading-01-line-height, 1.42857);
}
.cpc--side-nav__collapse-button {
border: none;
border-bottom: 1px solid var(--cds-border-subtle-00, #e0e0e0);
border-top: 1px solid var(--cds-border-subtle-00, #e0e0e0);
color: var(--cds-icon-primary, #161616);
cursor: pointer;
display: flex;
justify-content: space-between;
outline: 2px solid transparent;
outline-offset: -2px;
padding: 1rem 1rem 1rem 2rem;
position: relative;
text-align: start;
width: 100%;
}
.cpc--side-nav__collapse-button .cpc--side-nav__collapse-button__label {
display: flex;
flex-direction: column;
}
.cpc--side-nav__collapse-button .cpc--side-nav__collapse-button__label .cds--label {
margin-bottom: 0.25rem;
}
.cpc--side-nav__collapse-button .cpc--side-nav__collapse-button__label .cpc--side-nav__collapse-button__label-inactive {
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
}
@media (min-width: 42rem) {
.cpc--side-nav__collapse-button {
display: none;
}
}
.cpc--side-nav--collapsed .cpc--side-nav__collapse-button:active, .cpc--side-nav__collapse-button:active {
background: var(--cds-layer-selected-01, #e0e0e0);
}
.cpc--side-nav__collapse-button-icon {
fill: var(--cds-icon-secondary, #525252);
margin-left: auto;
transition: all 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
.cpc--side-nav--collapsed .cpc--side-nav__collapse-button {
animation-duration: 0.7s;
}
.cpc--side-nav--collapsed .cpc--side-nav__collapse-button--active:before {
background-color: var(--cds-button-primary, #0f62fe);
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 4px;
}
.cpc--side-nav--collapsed .cpc--side-nav__collapse-button-icon {
transform: rotate(180deg);
}
.cpc--side-nav__collapse-button:focus, .cpc--side-nav__link:focus, .cpc--side-nav__menu-button:focus {
outline: 2px solid var(--cds-button-primary, #0f62fe);
}
.cpc--side-nav__collapse-button:hover, .cpc--side-nav__item .cpc--side-nav__menu-button:hover, .cpc--side-nav__item:not(.cpc--side-nav__item--with-menu):hover, .cpc--side-nav__menu-flyout:hover {
background-color: transparent;
background-position: 0 0;
color: var(--cds-text-primary, #161616);
}
.cpc--side-nav__collapse-button:hover .cpc--side-nav__link, .cpc--side-nav__collapse-button:hover .cpc--side-nav__menu-button__label, .cpc--side-nav__item .cpc--side-nav__menu-button:hover .cpc--side-nav__link, .cpc--side-nav__item .cpc--side-nav__menu-button:hover .cpc--side-nav__menu-button__label, .cpc--side-nav__item:not(.cpc--side-nav__item--with-menu):hover .cpc--side-nav__link, .cpc--side-nav__item:not(.cpc--side-nav__item--with-menu):hover .cpc--side-nav__menu-button__label, .cpc--side-nav__menu-flyout:hover .cpc--side-nav__link, .cpc--side-nav__menu-flyout:hover .cpc--side-nav__menu-button__label {
color: var(--cds-text-primary, #161616);
}
@media (min-width: 42rem) {
.cpc--side-nav__collapse-button:hover, .cpc--side-nav__item .cpc--side-nav__menu-button:hover, .cpc--side-nav__item:not(.cpc--side-nav__item--with-menu):hover, .cpc--side-nav__menu-flyout:hover {
background-color: transparent;
}
.cpc--side-nav__collapse-button:hover .cpc--side-nav__link, .cpc--side-nav__collapse-button:hover .cpc--side-nav__menu-button, .cpc--side-nav__item .cpc--side-nav__menu-button:hover .cpc--side-nav__link, .cpc--side-nav__item .cpc--side-nav__menu-button:hover .cpc--side-nav__menu-button, .cpc--side-nav__item:not(.cpc--side-nav__item--with-menu):hover .cpc--side-nav__link, .cpc--side-nav__item:not(.cpc--side-nav__item--with-menu):hover .cpc--side-nav__menu-button, .cpc--side-nav__menu-flyout:hover .cpc--side-nav__link, .cpc--side-nav__menu-flyout:hover .cpc--side-nav__menu-button {
color: var(--cds-text-primary, #161616);
}
}
.cpc--side-nav__item .cpc--side-nav__menu-button:active, .cpc--side-nav__item:not(.cpc--side-nav__item--with-menu):active {
background: var(--cds-layer-selected-01, #e0e0e0);
color: var(--cds-text-primary, #161616);
}
.cpc--side-nav__item .cpc--side-nav__menu-button:active .cpc--side-nav__link, .cpc--side-nav__item .cpc--side-nav__menu-button:active .cpc--side-nav__menu-button__label, .cpc--side-nav__item:not(.cpc--side-nav__item--with-menu):active .cpc--side-nav__link, .cpc--side-nav__item:not(.cpc--side-nav__item--with-menu):active .cpc--side-nav__menu-button__label {
color: var(--cds-text-primary, #161616);
}
@media (min-width: 42rem) {
.cpc--side-nav__item .cpc--side-nav__menu-button:active, .cpc--side-nav__item:not(.cpc--side-nav__item--with-menu):active {
background: var(--cds-layer-selected-01, #e0e0e0);
}
.cpc--side-nav__item .cpc--side-nav__menu-button:active .cpc--side-nav__link, .cpc--side-nav__item .cpc--side-nav__menu-button:active .cpc--side-nav__menu-button, .cpc--side-nav__item:not(.cpc--side-nav__item--with-menu):active .cpc--side-nav__link, .cpc--side-nav__item:not(.cpc--side-nav__item--with-menu):active .cpc--side-nav__menu-button {
color: var(--cds-text-primary, #161616);
}
}
.cpc--side-nav__item--active + .cpc--side-nav__item:before {
display: none;
}
.cpc--side-nav__item--active .cpc--side-nav__menu-button:before, .cpc--side-nav__link[aria-current=page]:before {
background-color: var(--cds-button-primary, #0f62fe);
content: "";
height: 2.125rem;
left: 0;
position: absolute;
width: 4px;
}
.cpc--side-nav__header > .cpc--side-nav[aria-current=page]:before {
height: 100%;
top: 0;
}
.cpc--side-nav > .cpc--side-nav__header {
align-items: flex-start;
flex-direction: column;
padding: 1rem;
}
.cpc--side-nav > .cpc--side-nav__header:after {
background-color: var(--cds-border-subtle-00, #e0e0e0);
bottom: 0;
content: "";
height: 1px;
left: 0;
position: absolute;
width: 100%;
}
.cpc--side-nav__menu-button[aria-expanded=false] + .cpc--side-nav__menu .cpc--side-nav__link[aria-current=page]:before {
display: none;
}
.cpc--side-nav__menu-button[aria-expanded=true] + .cpc--side-nav__menu, .cpc--side-nav__menu-button[aria-expanded=true] + .cpc--side-nav__menu .cpc--side-nav__item, .cpc--side-nav__menu-button[aria-expanded=true] + .cpc--side-nav__menu .cpc--side-nav__link {
max-height: 36rem;
opacity: 1;
visibility: visible;
}
.cpc--side-nav__menu-button[aria-expanded=false] + .cpc--side-nav__menu, .cpc--side-nav__menu-button[aria-expanded=false] + .cpc--side-nav__menu .cpc--side-nav__item, .cpc--side-nav__menu-button[aria-expanded=false] + .cpc--side-nav__menu .cpc--side-nav__link {
max-height: 0;
opacity: 0;
visibility: hidden;
}
.cpc--side-nav__menu-button[aria-expanded=true] > .cpc--side-nav__menu-icon {
transform: rotate(180deg);
}
.cpc--side-nav__header {
color: var(--cds-text-primary, #161616);
font-size: var(--cds-heading-01-font-size, 0.875rem);
font-weight: var(--cds-heading-01-font-weight, 600);
letter-spacing: var(--cds-heading-01-letter-spacing, 0.16px);
line-height: var(--cds-heading-01-line-height, 1.42857);
padding: 1rem;
position: relative;
}
.cpc--side-nav__divider {
background-color: var(--cds-border-subtle-01, #c6c6c6);
border: 0;
height: 1px;
list-style-type: none;
margin: 0.5rem 2rem;
}
.cds--list-box__menu-item .cds--tag, .cpc--side-nav__link .cds--tag {
border: 0;
margin: 0 0 0 0.25rem;
}
body.cpc--no-scroll {
overflow: hidden;
}
.cpc--side-panel-container {
z-index: 5100;
}
.cpc--side-panel-container--open.cpc--side-panel-container--overlay:before {
background-color: var(--cds-overlay, hsla(0, 0%, 9%, 0.5));
bottom: 0;
content: "";
height: calc(100vh - 50px);
left: 0;
position: fixed;
width: 100vw;
z-index: 5100;
}
.cpc--side-panel-container__panels {
bottom: 0;
height: calc(100vh - 50px);
position: fixed;
right: 0;
transform: translateX(100%);
z-index: 5100;
}
@media (prefers-reduced-motion: no-preference) {
.cpc--side-panel-container__panels {
transition: transform 0.4s cubic-bezier(0.4, 0.14, 0.3, 1), visibility 0.4s;
}
}
.cpc--side-panel-container--open .cpc--side-panel-container__panels {
transform: translateX(0);
}
@media (prefers-reduced-motion: no-preference) {
.cpc--side-panel-container--open .cpc--side-panel-container__panels {
animation-duration: 0.4s;
animation-name: panel-slide-in;
animation-timing-function: cubic-bezier(0.4, 0.14, 0.3, 1);
}
}
.cpc--side-panel {
background: var(--cds-background, #fff);
height: 100%;
left: 0;
position: absolute;
top: 0;
visibility: hidden;
width: 448px;
z-index: 5100;
}
@media (prefers-reduced-motion: no-preference) {
.cpc--side-panel {
transition: transform 0.4s cubic-bezier(0.4, 0.14, 0.3, 1), visibility 0.4s;
}
}
.cpc--side-panel__multi-step__parent {
overflow: hidden;
}
.cpc--side-panel__multi-step-content {
left: 0;
opacity: 0;
position: absolute;
top: 0;
transition: transform 0.4s cubic-bezier(0.4, 0.14, 0.3, 1), opacity 0.4s cubic-bezier(0.4, 0.14, 0.3, 1);
width: 100%;
}
.cpc--side-panel__multi-step-content--open {
opacity: 1;
}
.cpc--side-panel__multi-step-content--next {
height: 100%;
opacity: 0;
transform: translateX(100%);
visibility: hidden;
z-index: -1;
}
.cpc--side-panel__multi-step-content--previous {
height: 100%;
opacity: 0;
transform: translateX(-100%);
visibility: hidden;
z-index: -1;
}
.cpc--side-panel__multi-step-content--hidden-in-place {
height: 100%;
visibility: hidden;
z-index: -1;
}
.cpc--side-panel__progress-indicator {
margin-bottom: 1rem;
}
.cpc--side-panel--open {
transform: translateX(-100%);
visibility: visible;
}
@media (prefers-reduced-motion: no-preference) {
.cpc--side-panel--open {
animation-duration: 0.4s;
animation-name: panel-slide-in;
animation-timing-function: cubic-bezier(0.4, 0.14, 0.3, 1);
}
}
.cpc--side-panel--small {
width: 320px;
}
.cpc--side-panel--xl {
max-width: 1200px;
width: 100vw;
}
@media (min-width: 42rem) {
.cpc--side-panel--xl {
width: 75vw;
}
}
.cpc--side-panel__content {
height: 100%;
overflow-y: auto;
padding: 2rem;
}
.cpc--side-panel--has-bottom-nav .cpc--side-panel__content {
height: calc(100% - 4rem);
}
.cpc--side-panel__content--scroll:after {
background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0), var(--cds-layer-01, #f4f4f4));
bottom: 0;
content: "";
height: 2rem;
position: absolute;
width: calc(100% - 4rem);
}
.cpc--side-panel--has-bottom-nav .cpc--side-panel__content--scroll:after {
bottom: 4rem;
}
.cpc--side-panel__breadcrumbs {
padding-bottom: 0.25rem;
}
.cpc--side-panel__breadcrumbs + .cpc--side-panel__content {
padding-top: 1rem;
}
.cpc--side-panel__button-close {
max-width: 3rem;
position: relative;
transform: translateY(-1rem) translateX(1rem);
}
.cpc--side-panel__button-close.cds--btn.cds--btn--icon-only.cds--tooltip__trigger .cds--assistive-text {
transform: translate(-100%, -50%);
}
.cpc--side-panel__button-close svg {
color: var(--cds-icon-primary, #161616);
}
.cpc--side-panel__button {
align-items: flex-start;
display: inline-flex;
padding: 16px;
}
.cpc--side-panel__controls {
height: 3rem;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.cpc--side-panel__btn-set.cds--btn-set {
align-items: flex-start;
background-color: var(--cds-layer-01, #f4f4f4);
bottom: 0;
justify-content: flex-end;
left: 0;
margin: 0;
position: absolute;
right: 0;
}
.cpc--side-panel__btn-set.cds--btn-set .cds--inline-loading {
padding: 1rem;
}
.cpc--side-panel__btn-set.cds--btn-set .cds--btn {
max-width: 50%;
min-height: 4rem;
min-width: 50%;
position: relative;
}
.cpc--side-panel__btn-set.cds--btn-set span.cds--btn {
cursor: default;
}
.cpc--side-panel__btn-set.cds--btn-set .cds--btn span svg {
stroke: #fff;
margin-top: -0.5rem;
position: absolute;
right: 1rem;
top: 50%;
}
.cpc--side-panel__heading--close-button {
display: flex;
}
.cpc--side-panel__heading {
display: inline-block;
font-size: var(--cds-heading-03-font-size, 1.25rem);
font-weight: var(--cds-heading-03-font-weight, 400);
letter-spacing: var(--cds-heading-03-letter-spacing, 0);
line-height: var(--cds-heading-03-line-height, 1.4);
padding-bottom: 2rem;
width: calc(100% - 3rem);
}
.cpc--side-panel__button-close:focus, .cpc--side-panel__button-close:hover {
transition: background-color 0.25s cubic-bezier(0.2, 0, 0.38, 0.9);
}
.cpc--side-panel--has-bottom-nav:after {
bottom: 3rem;
}
.cpc--side-panel .cds--breadcrumb {
display: flex;
flex-wrap: wrap;
margin: 1rem 0 0 2rem;
}
body:not(.cds--dark-theme) .cpc--side-panel-container--open:not(.cpc--side-panel-container--overlay) .cpc--side-panel {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
body.cds--dark-theme .cpc--side-panel-container--open:not(.cpc--side-panel-container--overlay) .cpc--side-panel {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
}
@keyframes panel-slide-in {
0% {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
.cpc--solution-tile {
display: block;
position: relative;
}
.cpc--solution-tile:hover .cpc--solution-tile__action-icon {
opacity: 1;
transform: translateX(4px);
transition: 124ms cubic-bezier(0, 0, 0.38, 0.9);
visibility: visible;
}
.cpc--solution-tile--skeleton:hover .cpc--solution-tile__action-icon {
display: none;
}
.cpc--solution-tile__content {
height: 100%;
padding-bottom: 4rem;
position: relative;
width: 100%;
}
.cpc--solution-tile__header {
display: block;
font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
font-weight: var(--cds-heading-compact-01-font-weight, 600);
letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-heading-compact-01-line-height, 1.28572);
position: relative;
}
.cpc--solution-tile__description {
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
color: var(--cds-text-secondary, #525252);
display: box;
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
margin-bottom: 1rem;
}
.cpc--solution-tile__details {
color: var(--cds-text-secondary, #525252);
font-size: var(--cds-label-01-font-size, 0.75rem);
font-weight: var(--cds-label-01-font-weight, 400);
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
line-height: var(--cds-label-01-line-height, 1.33333);
}
.cpc--solution-tile__details li:nth-of-type(1n+4) {
display: none;
}
.cpc--solution-tile__details--overflow:after {
content: "...";
}
.cpc--solution-tile__details-item {
align-items: center;
display: flex;
}
.cpc--solution-tile__detail-item svg {
margin-right: 0.25rem;
}
.cpc--solution-tile__content > :last-child {
padding-bottom: 0;
}
.cpc--solution-tile__action-icon {
bottom: 0;
color: var(--cds-interactive, #0f62fe);
height: 20px;
opacity: 0;
position: absolute;
right: 4px;
transition: 124ms cubic-bezier(0.2, 0, 0.38, 0.9);
visibility: hidden;
width: 20px;
}
.cpc--solution-tile__overflow-text {
display: inline;
position: relative;
z-index: 2;
}
.cpc--solution-tile .cds--tile {
height: 100%;
}
.cpc--solution-tile .cds--tag:first-child {
margin-left: 0;
}
.cpc--solution-tile__header__content-type {
color: var(--cds-text-secondary, #525252);
display: block;
font-size: var(--cds-label-01-font-size, 0.75rem);
font-weight: var(--cds-label-01-font-weight, 400);
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
line-height: var(--cds-label-01-line-height, 1.33333);
margin-bottom: 1rem;
}
.cpc--solution-tile__tags {
flex-wrap: wrap;
margin-top: 0.75rem;
}
.cpc--solution-tile__icon, .cpc--solution-tile__icon svg {
bottom: 0;
left: 0;
position: absolute;
}
.cpc--status {
align-items: center;
display: flex;
position: relative;
}
.cpc--status.cpc--status-inline {
display: inline-flex;
}
.cpc--status .cds--loading, .cpc--status > svg {
flex-shrink: 0;
}
.cpc--status__progress {
align-content: stretch;
background-color: var(--cds-layer-03, #f4f4f4);
border-radius: 2rem;
display: flex;
flex-flow: row nowrap;
height: 0.75rem;
overflow: hidden;
position: relative;
transition: width 0.4s cubic-bezier(0.4, 0.14, 0.3, 1);
transition-delay: 0.4s;
width: 100%;
}
.cpc--status__icon--red-failure {
fill: var(--cds-support-error, #da1e28);
}
.cpc--status__icon--green-checkmark {
fill: var(--cds-support-success, #24a148);
}
.cpc--status__icon--warning {
fill: var(--cds-support-warning, #f1c21b);
}
.cpc--status__icon--warning [data-icon-path=inner-path] {
fill: var(--cds-icon-primary, #161616);
opacity: 1;
}
.cpc--status__circle {
border-radius: 50%;
flex-shrink: 0;
height: 14px;
margin: 1px;
width: 14px;
}
.cpc--status__circle--inactive {
background-color: var(--cds-layer-active-03, #c6c6c6);
}
.cpc--status__circle--info {
background-color: var(--cds-interactive, #0f62fe);
}
.cpc--status__icon--inprogress {
fill: var(--cds-support-info, #0043ce);
}
.cpc--status__icon--incomplete {
fill: var(--cds-icon-secondary, #525252);
}
.cpc--status__unknown {
height: 14px;
margin: 0 0 0.125rem 0.125rem;
width: 14px;
}
.cpc--status__label {
color: var(--cds-text-secondary, #525252);
font-size: 0.875rem;
margin-left: 0.5rem;
}
.cpc--status--segments .cpc--status__section:not(:last-child) {
border-right: 0.125rem solid var(--cds-layer-02, #fff);
}
.cpc--status__section {
background-color: transparent;
flex: 0 0 0;
height: 100%;
overflow: hidden;
position: relative;
transition: flex-basis 0.4s cubic-bezier(0.4, 0.14, 0.3, 1);
}
.cpc--status__section__fill {
background: none;
height: 100%;
position: absolute;
transition: width 0.4s cubic-bezier(0.4, 0.14, 0.3, 1);
width: 100%;
}
.cpc--status .cpc--status__section[data-status=green] .cpc--status__section__fill {
background-color: var(--cds-support-success, #24a148);
}
.cpc--status .cpc--status__section[data-status=red] .cpc--status__section__fill {
background-color: var(--cds-support-error, #da1e28);
}
.cpc--status .cpc--status__section[data-status^=indeterminate] .cpc--status__section__fill {
animation: animate-stripes 3s linear infinite;
background-image: linear-gradient(135deg, var(--cds-support-success, #24a148) 25%, #6fdc8c 25%, #6fdc8c 50%, var(--cds-support-success, #24a148) 50%, var(--cds-support-success, #24a148) 75%, #6fdc8c 75%, #6fdc8c);
background-size: 15px 15px;
}
.cpc--status .cpc--status__section[data-status=indeterminate-red] .cpc--status__section__fill {
background-image: linear-gradient(135deg, var(--cds-support-error, #da1e28) 25%, #ff8389 25%, #ff8389 50%, var(--cds-support-error, #da1e28) 50%, var(--cds-support-error, #da1e28) 75%, #ff8389 75%, #ff8389);
}
.cpc--status .cpc-tooltip-trigger-button.cds--toggletip-button {
height: min-content;
margin-top: 2px;
width: min-content;
}
.cpc--status--skeleton {
align-items: center;
display: flex;
}
.cpc--status--skeleton .cds--skeleton__text {
margin-bottom: 0;
}
.cpc--status--skeleton__progress {
border-radius: 2rem;
height: 0.75rem;
overflow: hidden;
}
.cpc--status--skeleton__label {
height: 0.875rem;
margin-left: 0.5rem;
}
@keyframes animate-stripes {
0% {
background-position: 0 0;
}
to {
background-position: 60px 0;
}
}
.cpc--tag.cds--tag--red.cds--tag--filter > svg:hover {
fill: #ffd7d9;
background-color: rgba(162, 25, 31, 0.5);
box-shadow: none;
}
.cpc--tag.cds--tag--red.cds--tag--filter:hover {
box-shadow: 0 0 0 1px #a2191f;
}
.cpc--tag.cds--tag--red.cds--tag--filter:focus {
box-shadow: 0 0 0 2px #a2191f;
}
.cpc--tag.cds--tag--red.cds--tag--filter:focus svg {
box-shadow: inset 0 0 0 1px transparent;
}
.cpc--tag.cds--tag--red.cpc--tag--clickable:hover {
box-shadow: 0 0 0 1px #a2191f;
}
.cpc--tag.cds--tag--red.cpc--tag--clickable:focus {
box-shadow: 0 0 0 2px #a2191f;
}
.cpc--tag.cds--tag--red.cds--tag--filter {
background-color: #ffd7d9;
color: #a2191f;
}
.cpc--tag.cds--tag--red.cds--tag--filter.cds--tag--operational {
border: 1px solid #ffd7d9;
}
.cpc--tag.cds--tag--red.cds--tag--filter .cds--tag__close-icon:hover, .cpc--tag.cds--tag--red.cds--tag--filter.cds--tag--operational:hover {
background-color: #ffd7d9;
}
.cpc--tag.cds--tag--red.cds--tag--filter svg {
fill: #a2191f;
}
.cpc--tag.cds--tag--magenta.cds--tag--filter > svg:hover {
fill: #ffd6e8;
background-color: rgba(159, 24, 83, 0.5);
box-shadow: none;
}
.cpc--tag.cds--tag--magenta.cds--tag--filter:hover {
box-shadow: 0 0 0 1px #9f1853;
}
.cpc--tag.cds--tag--magenta.cds--tag--filter:focus {
box-shadow: 0 0 0 2px #9f1853;
}
.cpc--tag.cds--tag--magenta.cds--tag--filter:focus svg {
box-shadow: inset 0 0 0 1px transparent;
}
.cpc--tag.cds--tag--magenta.cpc--tag--clickable:hover {
box-shadow: 0 0 0 1px #9f1853;
}
.cpc--tag.cds--tag--magenta.cpc--tag--clickable:focus {
box-shadow: 0 0 0 2px #9f1853;
}
.cpc--tag.cds--tag--magenta.cds--tag--filter {
background-color: #ffd6e8;
color: #9f1853;
}
.cpc--tag.cds--tag--magenta.cds--tag--filter.cds--tag--operational {
border: 1px solid #ffd6e8;
}
.cpc--tag.cds--tag--magenta.cds--tag--filter .cds--tag__close-icon:hover, .cpc--tag.cds--tag--magenta.cds--tag--filter.cds--tag--operational:hover {
background-color: #ffd6e8;
}
.cpc--tag.cds--tag--magenta.cds--tag--filter svg {
fill: #9f1853;
}
.cpc--tag.cds--tag--purple.cds--tag--filter > svg:hover {
fill: #e8daff;
background-color: rgba(105, 41, 196, 0.5);
box-shadow: none;
}
.cpc--tag.cds--tag--purple.cds--tag--filter:hover {
box-shadow: 0 0 0 1px #6929c4;
}
.cpc--tag.cds--tag--purple.cds--tag--filter:focus {
box-shadow: 0 0 0 2px #6929c4;
}
.cpc--tag.cds--tag--purple.cds--tag--filter:focus svg {
box-shadow: inset 0 0 0 1px transparent;
}
.cpc--tag.cds--tag--purple.cpc--tag--clickable:hover {
box-shadow: 0 0 0 1px #6929c4;
}
.cpc--tag.cds--tag--purple.cpc--tag--clickable:focus {
box-shadow: 0 0 0 2px #6929c4;
}
.cpc--tag.cds--tag--purple.cds--tag--filter {
background-color: #e8daff;
color: #6929c4;
}
.cpc--tag.cds--tag--purple.cds--tag--filter.cds--tag--operational {
border: 1px solid #e8daff;
}
.cpc--tag.cds--tag--purple.cds--tag--filter .cds--tag__close-icon:hover, .cpc--tag.cds--tag--purple.cds--tag--filter.cds--tag--operational:hover {
background-color: #e8daff;
}
.cpc--tag.cds--tag--purple.cds--tag--filter svg {
fill: #6929c4;
}
.cpc--tag.cds--tag--blue.cds--tag--filter > svg:hover {
fill: #d0e2ff;
background-color: rgba(0, 67, 206, 0.5);
box-shadow: none;
}
.cpc--tag.cds--tag--blue.cds--tag--filter:hover {
box-shadow: 0 0 0 1px #0043ce;
}
.cpc--tag.cds--tag--blue.cds--tag--filter:focus {
box-shadow: 0 0 0 2px #0043ce;
}
.cpc--tag.cds--tag--blue.cds--tag--filter:focus svg {
box-shadow: inset 0 0 0 1px transparent;
}
.cpc--tag.cds--tag--blue.cpc--tag--clickable:hover {
box-shadow: 0 0 0 1px #0043ce;
}
.cpc--tag.cds--tag--blue.cpc--tag--clickable:focus {
box-shadow: 0 0 0 2px #0043ce;
}
.cpc--tag.cds--tag--blue.cds--tag--filter {
background-color: #d0e2ff;
color: #0043ce;
}
.cpc--tag.cds--tag--blue.cds--tag--filter.cds--tag--operational {
border: 1px solid #d0e2ff;
}
.cpc--tag.cds--tag--blue.cds--tag--filter .cds--tag__close-icon:hover, .cpc--tag.cds--tag--blue.cds--tag--filter.cds--tag--operational:hover {
background-color: #d0e2ff;
}
.cpc--tag.cds--tag--blue.cds--tag--filter svg {
fill: #0043ce;
}
.cpc--tag.cds--tag--cyan.cds--tag--filter > svg:hover {
fill: #bae6ff;
background-color: rgba(0, 83, 154, 0.5);
box-shadow: none;
}
.cpc--tag.cds--tag--cyan.cds--tag--filter:hover {
box-shadow: 0 0 0 1px #00539a;
}
.cpc--tag.cds--tag--cyan.cds--tag--filter:focus {
box-shadow: 0 0 0 2px #00539a;
}
.cpc--tag.cds--tag--cyan.cds--tag--filter:focus svg {
box-shadow: inset 0 0 0 1px transparent;
}
.cpc--tag.cds--tag--cyan.cpc--tag--clickable:hover {
box-shadow: 0 0 0 1px #00539a;
}
.cpc--tag.cds--tag--cyan.cpc--tag--clickable:focus {
box-shadow: 0 0 0 2px #00539a;
}
.cpc--tag.cds--tag--cyan.cds--tag--filter {
background-color: #bae6ff;
color: #00539a;
}
.cpc--tag.cds--tag--cyan.cds--tag--filter.cds--tag--operational {
border: 1px solid #bae6ff;
}
.cpc--tag.cds--tag--cyan.cds--tag--filter .cds--tag__close-icon:hover, .cpc--tag.cds--tag--cyan.cds--tag--filter.cds--tag--operational:hover {
background-color: #bae6ff;
}
.cpc--tag.cds--tag--cyan.cds--tag--filter svg {
fill: #00539a;
}
.cpc--tag.cds--tag--teal.cds--tag--filter > svg:hover {
fill: #9ef0f0;
background-color: rgba(0, 93, 93, 0.5);
box-shadow: none;
}
.cpc--tag.cds--tag--teal.cds--tag--filter:hover {
box-shadow: 0 0 0 1px #005d5d;
}
.cpc--tag.cds--tag--teal.cds--tag--filter:focus {
box-shadow: 0 0 0 2px #005d5d;
}
.cpc--tag.cds--tag--teal.cds--tag--filter:focus svg {
box-shadow: inset 0 0 0 1px transparent;
}
.cpc--tag.cds--tag--teal.cpc--tag--clickable:hover {
box-shadow: 0 0 0 1px #005d5d;
}
.cpc--tag.cds--tag--teal.cpc--tag--clickable:focus {
box-shadow: 0 0 0 2px #005d5d;
}
.cpc--tag.cds--tag--teal.cds--tag--filter {
background-color: #9ef0f0;
color: #005d5d;
}
.cpc--tag.cds--tag--teal.cds--tag--filter.cds--tag--operational {
border: 1px solid #9ef0f0;
}
.cpc--tag.cds--tag--teal.cds--tag--filter .cds--tag__close-icon:hover, .cpc--tag.cds--tag--teal.cds--tag--filter.cds--tag--operational:hover {
background-color: #9ef0f0;
}
.cpc--tag.cds--tag--teal.cds--tag--filter svg {
fill: #005d5d;
}
.cpc--tag.cds--tag--green.cds--tag--filter > svg:hover {
fill: #a7f0ba;
background-color: rgba(14, 96, 39, 0.5);
box-shadow: none;
}
.cpc--tag.cds--tag--green.cds--tag--filter:hover {
box-shadow: 0 0 0 1px #0e6027;
}
.cpc--tag.cds--tag--green.cds--tag--filter:focus {
box-shadow: 0 0 0 2px #0e6027;
}
.cpc--tag.cds--tag--green.cds--tag--filter:focus svg {
box-shadow: inset 0 0 0 1px transparent;
}
.cpc--tag.cds--tag--green.cpc--tag--clickable:hover {
box-shadow: 0 0 0 1px #0e6027;
}
.cpc--tag.cds--tag--green.cpc--tag--clickable:focus {
box-shadow: 0 0 0 2px #0e6027;
}
.cpc--tag.cds--tag--green.cds--tag--filter {
background-color: #a7f0ba;
color: #0e6027;
}
.cpc--tag.cds--tag--green.cds--tag--filter.cds--tag--operational {
border: 1px solid #a7f0ba;
}
.cpc--tag.cds--tag--green.cds--tag--filter .cds--tag__close-icon:hover, .cpc--tag.cds--tag--green.cds--tag--filter.cds--tag--operational:hover {
background-color: #a7f0ba;
}
.cpc--tag.cds--tag--green.cds--tag--filter svg {
fill: #0e6027;
}
.cpc--tag.cds--tag--gray.cds--tag--filter > svg:hover {
fill: #e0e0e0;
background-color: hsla(0, 0%, 9%, 0.5);
box-shadow: none;
}
.cpc--tag.cds--tag--gray.cds--tag--filter:hover {
box-shadow: 0 0 0 1px #161616;
}
.cpc--tag.cds--tag--gray.cds--tag--filter:focus {
box-shadow: 0 0 0 2px #161616;
}
.cpc--tag.cds--tag--gray.cds--tag--filter:focus svg {
box-shadow: inset 0 0 0 1px transparent;
}
.cpc--tag.cds--tag--gray.cpc--tag--clickable:hover {
box-shadow: 0 0 0 1px #161616;
}
.cpc--tag.cds--tag--gray.cpc--tag--clickable:focus {
box-shadow: 0 0 0 2px #161616;
}
.cpc--tag.cds--tag--gray.cds--tag--filter {
background-color: #e0e0e0;
color: #161616;
}
.cpc--tag.cds--tag--gray.cds--tag--filter.cds--tag--operational {
border: 1px solid #e0e0e0;
}
.cpc--tag.cds--tag--gray.cds--tag--filter .cds--tag__close-icon:hover, .cpc--tag.cds--tag--gray.cds--tag--filter.cds--tag--operational:hover {
background-color: #e0e0e0;
}
.cpc--tag.cds--tag--gray.cds--tag--filter svg {
fill: #161616;
}
.cpc--tag.cds--tag--cool-gray.cds--tag--filter > svg:hover {
fill: #dde1e6;
background-color: rgba(18, 22, 25, 0.5);
box-shadow: none;
}
.cpc--tag.cds--tag--cool-gray.cds--tag--filter:hover {
box-shadow: 0 0 0 1px #121619;
}
.cpc--tag.cds--tag--cool-gray.cds--tag--filter:focus {
box-shadow: 0 0 0 2px #121619;
}
.cpc--tag.cds--tag--cool-gray.cds--tag--filter:focus svg {
box-shadow: inset 0 0 0 1px transparent;
}
.cpc--tag.cds--tag--cool-gray.cpc--tag--clickable:hover {
box-shadow: 0 0 0 1px #121619;
}
.cpc--tag.cds--tag--cool-gray.cpc--tag--clickable:focus {
box-shadow: 0 0 0 2px #121619;
}
.cpc--tag.cds--tag--cool-gray.cds--tag--filter {
background-color: #dde1e6;
color: #121619;
}
.cpc--tag.cds--tag--cool-gray.cds--tag--filter.cds--tag--operational {
border: 1px solid #dde1e6;
}
.cpc--tag.cds--tag--cool-gray.cds--tag--filter .cds--tag__close-icon:hover, .cpc--tag.cds--tag--cool-gray.cds--tag--filter.cds--tag--operational:hover {
background-color: #dde1e6;
}
.cpc--tag.cds--tag--cool-gray.cds--tag--filter svg {
fill: #121619;
}
.cpc--tag.cds--tag--warm-gray.cds--tag--filter > svg:hover {
fill: #e5e0df;
background-color: hsla(0, 7%, 8%, 0.5);
box-shadow: none;
}
.cpc--tag.cds--tag--warm-gray.cds--tag--filter:hover {
box-shadow: 0 0 0 1px #171414;
}
.cpc--tag.cds--tag--warm-gray.cds--tag--filter:focus {
box-shadow: 0 0 0 2px #171414;
}
.cpc--tag.cds--tag--warm-gray.cds--tag--filter:focus svg {
box-shadow: inset 0 0 0 1px transparent;
}
.cpc--tag.cds--tag--warm-gray.cpc--tag--clickable:hover {
box-shadow: 0 0 0 1px #171414;
}
.cpc--tag.cds--tag--warm-gray.cpc--tag--clickable:focus {
box-shadow: 0 0 0 2px #171414;
}
.cpc--tag.cds--tag--warm-gray.cds--tag--filter {
background-color: #e5e0df;
color: #171414;
}
.cpc--tag.cds--tag--warm-gray.cds--tag--filter.cds--tag--operational {
border: 1px solid #e5e0df;
}
.cpc--tag.cds--tag--warm-gray.cds--tag--filter .cds--tag__close-icon:hover, .cpc--tag.cds--tag--warm-gray.cds--tag--filter.cds--tag--operational:hover {
background-color: #e5e0df;
}
.cpc--tag.cds--tag--warm-gray.cds--tag--filter svg {
fill: #171414;
}
.cpc--tag {
border: 0;
white-space: nowrap;
}
.cpc--tag > span {
display: inline-flex;
}
.cpc--tag-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
button.cpc--tag-close.cds--btn--ghost {
border: none;
margin-left: -8px;
margin-right: 8px;
min-height: 0;
min-width: 0;
outline: none;
padding: 0;
text-align: center;
width: 0;
}
button.cpc--tag-close.cds--btn--ghost:focus {
border: none;
outline: none;
}
button.cpc--tag-close.cds--btn--ghost:hover {
outline: none;
}
.cpc--tag-wrap {
display: inline-flex;
}
.cds--tag.cpc--tag__removed {
display: none;
}
.cpc--tag-area {
box-sizing: border-box;
display: flex;
flex-flow: column nowrap;
margin-bottom: 2rem;
max-height: 8.5625rem;
position: relative;
width: 100%;
}
.cpc--tag-area .cds--tag {
margin: 0.25rem 0.1875rem;
order: 1;
}
.cpc--tag-area__warning-icon {
fill: var(--cds-support-error, #da1e28);
position: absolute;
right: 1rem;
top: 42%;
}
.cpc--tag-area .cpc--tag-area__content {
background-color: var(--cds-field-01, #f4f4f4);
border-bottom: 1px solid var(--cds-toggle-off, #8d8d8d);
box-shadow: none !important;
cursor: text;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
margin-bottom: 0;
margin-top: 1.625em;
max-height: 5rem;
min-width: 100%;
overflow-y: auto;
padding: 0.25rem 0.8125rem;
width: 100%;
}
.cpc--tag-area .cpc--tag-area__content.cpc--tag-area__content-focused {
outline: 2px solid var(--cds-focus, #0f62fe);
outline-offset: -2px;
}
.cpc--tag-area .cpc--tag-area__content .cds--form-item {
display: inline-block;
flex-direction: row;
margin: 0;
min-width: 9.375rem;
width: 100%;
}
.cpc--tag-area .cpc--tag-area__content .cpc--tag-area__tag-input-wrap {
flex-grow: 1;
order: 2;
}
.cpc--tag-area .cpc--tag-area__content .cpc--tag-area__tag-input-wrap .cds--label {
left: 0;
position: absolute;
top: 0;
}
.cpc--tag-area .cpc--tag-area__content .cds--text-input {
background: none;
border: none;
height: 2rem;
min-width: 15rem;
padding: 0;
}
.cpc--tag-area .cpc--tag-area__content .cds--text-input:active, .cpc--tag-area .cpc--tag-area__content .cds--text-input:focus {
outline: none;
outline-offset: 0;
}
.cpc--tag-area .cpc--tag-area__content-error, .cpc--tag-area .cpc--tag-area__content-invalid {
outline: 2px solid var(--cds-support-error, #da1e28);
outline-offset: -2px;
}
.cpc--tag-area .cpc--tag-area__invalid-text {
color: var(--cds-support-error, #da1e28);
display: inline-block;
font-size: 0.6875rem;
font-weight: 400;
height: 1.5625rem;
line-height: 0.875rem;
margin: 0.25rem 0 0;
max-height: 1.5625rem;
order: 3;
}
.cpc--tag-area .cds--form-requirement + .cpc--tag-area__content {
box-shadow: 0 2px 0 0 var(--cds-support-error, #da1e28);
}
.cpc--tag-area .cds--form-requirement + .cpc--tag-area__content.cpc--tag-area__content-focused .cds--label {
color: var(--cds-background-brand, #0f62fe);
}
.cpc--tag-area--light .cpc--tag-area__content {
background-color: var(--cds-field-02, #fff);
}
.cpc--tag-area--skeleton .cds--skeleton__text {
height: 2.25rem;
margin-bottom: 0;
}
.cpc--tag-list {
align-items: center;
display: flex;
}
.cds--tag.cpc--tag-list--tag {
margin-right: 0.5rem;
}
.cds--tag.cpc--tag-list--tag:last-of-type {
margin-right: 0;
}
.cds--tag.cpc--tag-list--tag:focus {
outline: 1px solid transparent;
}
.cpc-tag-list--shared-counter {
margin-left: 0.5rem;
}
.cpc--cell--tooltip > .cpc--tag {
margin: 0;
}
.cpc--cell--tooltip:focus {
border-radius: 20%;
box-shadow: 0 0 0 2px var(--cds-support-info, #0043ce);
}
.cpc--tag-list--tag-tooltip {
font-size: 0.75rem;
padding: 2px;
}
.cpc--tag-list--tag-tooltip:focus {
box-shadow: 0 0 0 2px var(--cds-support-info, #0043ce);
}
.cpc--tag-list--tag-counter {
margin-left: 0;
margin-right: 0.25rem;
min-width: 0;
padding: 0 0.25rem;
}
.cpc--tag-list--tag-counter:hover {
box-shadow: 0 0 0 1px var(--cds-support-info, #0043ce);
cursor: pointer;
}
.cpc--tag-list--tag-counter:focus {
box-shadow: 0 0 0 2px var(--cds-support-info, #0043ce);
outline: none;
}
.cpc--tag-list--tag-counter--icon {
fill: var(--cds-layer-selected-inverse, #161616);
background-color: none;
height: 0.375rem;
margin: 0 0.125rem 0 0;
width: 0.375rem;
}
.cds--btn.cds--btn--icon-only.cpc--tag-list--edit--button {
border-radius: 0.375rem;
color: var(--cds-text-primary, #161616);
margin-left: 0.25rem;
min-height: 0;
padding: 0.25rem;
}
.cds--btn.cds--btn--icon-only.cpc--tag-list--edit--button.never-editable, .cds--btn.cds--btn--icon-only.cpc--tag-list--edit--button.on-hover-editable {
display: none;
}
.cpc--tag-list--editable:hover .cds--btn.cds--btn--icon-only.cpc--tag-list--edit--button {
display: inline-flex;
}
.cpc--tag-list--label-empty {
padding: 0 0.25rem 0 1rem;
}
.cpc--tag-list--wrap {
flex-wrap: wrap;
}
.cds--tag__close-icon > svg:focus:disabled {
box-shadow: none;
}
.cds--tag__close-icon > svg {
box-shadow: none;
outline: none;
}
.cpc--page-header__surfaced-details .cpc--tag-list {
display: none;
}
@media (min-width: 42rem) {
.cpc--page-header__surfaced-details .cpc--tag-list {
display: flex;
}
}
.cpc--tag-modal .cds--modal-content {
margin-bottom: 1rem;
}
.cpc--tag-modal .cpc--tag-modal__message {
margin-bottom: 1.5rem;
}
.cpc--template-tile {
display: flex;
flex-direction: column;
height: 100%;
max-width: 22rem;
padding: 0;
}
.cpc--template-tile .cds--tile {
font: unset;
height: 100%;
text-align: unset;
width: 100%;
}
.cpc--template-tile .cds--tile:not(.cds--tile--selectable) {
border: none;
}
.cpc--template-tile a.cds--tile {
text-decoration: none;
}
.cpc--template-tile .cds--tile--clickable {
padding: 0;
}
.cpc--template-tile-footer, .cpc--template-tile-subtitle, .cpc--template-tile-title {
padding: 0 1rem;
}
.cpc--template-tile:hover .icon-block {
background-color: var(--cds-background-hover, hsla(0, 0%, 55%, 0.12));
}
.cpc--template-tile-title {
font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
font-weight: var(--cds-heading-compact-01-font-weight, 600);
letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-heading-compact-01-line-height, 1.28572);
margin-bottom: 0.5rem;
padding-top: 1rem;
text-align: left;
}
.cpc--template-tile-subtitle {
font-size: var(--cds-helper-text-01-font-size, 0.75rem);
letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
line-height: var(--cds-helper-text-01-line-height, 1.33333);
margin-bottom: 3rem;
text-align: left;
}
.cpc--template-tile-footer {
display: flex;
justify-content: space-between;
margin-top: auto;
padding-bottom: 1rem;
}
.cpc--template-tile-footer p {
font-size: var(--cds-helper-text-01-font-size, 0.75rem);
letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
line-height: var(--cds-helper-text-01-line-height, 1.33333);
}
.cpc--template-tile-arrow {
fill: var(--cds-link-primary, #0f62fe);
}
.cpc--template-tile .icon-block-gray {
background-color: var(--cds-layer-accent-01, #e0e0e0);
}
.cpc--template-tile .icon-block {
height: 9rem;
min-width: 12.5rem;
position: relative;
}
.cpc--template-tile .icon-block .icon-block-svg {
all: unset;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
.cpc--text-overflow {
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
}
.cpc--tile-grid .cds--grid {
padding-left: 0;
padding-right: 0;
}
.cpc--tile-grid .cds--grid .cpc--tile-grid__tile {
padding-bottom: 1rem;
padding-top: 1rem;
}
.cpc--tile-grid .cds--grid--narrow .cpc--tile-grid__tile {
padding-bottom: 0.5rem;
padding-top: 0.5rem;
}
.cpc--tile-grid .cds--tile {
color: var(--cds-text-primary, #161616);
}
.cpc--tile-grid .cds--tile:disabled, .cpc--tile-grid .cds--tile[disabled] {
color: var(--cds-border-disabled, #c6c6c6);
}
.cpc--tile-grid .cds--tile:disabled:focus, .cpc--tile-grid .cds--tile[disabled]:focus {
outline: none;
}
.cpc--tile-grid .cds--tile:disabled:hover, .cpc--tile-grid .cds--tile[disabled]:hover {
background-color: var(--cds-layer-01, #f4f4f4);
}
.cpc--tile-grid .cpc--tile-grid__label {
margin-bottom: 0;
}
.cpc--tile-grid .cpc--tile-grid__label--hidden {
height: 0;
overflow: hidden;
}
.cpc--tile-grid .cpc--tile-grid__tile .cds--tile {
font: unset;
height: 100%;
text-align: unset;
width: 100%;
}
.cpc--tile-grid .cpc--tile-grid__tile .cds--tile:not(.cds--tile--selectable) {
border: none;
}
.cpc--tile-grid .cpc--tile-grid__tile a.cds--tile {
text-decoration: none;
}
.cpc--tile-grid .cpc--tile-grid__tile--disabled .cds--tile--selectable:hover {
cursor: not-allowed;
}
.cpc--tile-grid .cpc--tile-grid__tile--disabled .cds--tile--selectable:hover .cds--tile__checkmark {
opacity: 0;
}
.cpc--tile-grid .cpc--tile-grid__tile--disabled.cpc--tile-grid__tile--selected .cds--tile {
outline-color: var(--cds-border-disabled, #c6c6c6);
}
.cpc--tile-grid .cpc--tile-grid__tile--disabled.cpc--tile-grid__tile--selected .cds--tile .cds--tile__checkmark {
opacity: 0.5;
}
.cpc--translate .cds--link {
font-size: 100%;
}
.cpc--tutorial-card.cds--tile--clickable {
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-between;
}
.cpc--tutorial-card-title {
font-size: var(--cds-heading-compact-02-font-size, 1rem);
font-weight: var(--cds-heading-compact-02-font-weight, 600);
letter-spacing: var(--cds-heading-compact-02-letter-spacing, 0);
line-height: var(--cds-heading-compact-02-line-height, 1.375);
margin-bottom: 0.5rem;
}
.cpc--tutorial-card-description {
font-size: var(--cds-body-01-font-size, 0.875rem);
font-weight: var(--cds-body-01-font-weight, 400);
letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
line-height: var(--cds-body-01-line-height, 1.42857);
margin-bottom: 1rem;
}
.cpc--tutorial-card-footer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 2.5rem;
}
.cpc--tutorial-card-time {
width: 52%;
}
@media (max-width: 21rem) {
.cpc--tutorial-card-time {
width: 100%;
}
}
.cpc--tutorial-card-date, .cpc--tutorial-card-time {
align-items: center;
display: flex;
margin-top: 0.5rem;
}
.cpc--tutorial-card-date svg, .cpc--tutorial-card-time svg {
flex-shrink: 0;
margin-right: 0.25rem;
}
.cpc--world-level-nav.cpc--side-nav {
height: calc(100% - 50px);
top: 50px;
}
.cpc--world-level-nav.cpc--side-nav, .cpc--world-level-nav.cpc--side-nav .cpc--side-nav__flyout {
background-color: var(--cds-layer-01, #f4f4f4);
}
.cpc--world-level-nav.cpc--side-nav:after {
background-color: var(--cds-border-subtle-01, #c6c6c6);
content: "";
height: 100%;
position: absolute;
right: 0;
width: 1px;
}
.cpc--world-level-nav.cpc--side-nav .cpc--side-nav__link, .cpc--world-level-nav.cpc--side-nav .cpc--side-nav__menu-button, .cpc--world-level-nav.cpc--side-nav .cpc--side-nav__menu-button.cpc--side-nav__menu-flyout {
padding-left: 1rem;
}
.cpc--world-level-nav.cpc--side-nav .cpc--side-nav__menu .cpc--side-nav__link, .cpc--world-level-nav.cpc--side-nav .cpc--side-nav__menu .cpc--side-nav__menu-button {
padding-left: 2.5rem;
}
.cpc--world-level-nav.cpc--side-nav .cpc--side-nav__item--active .cpc--side-nav__menu-button, .cpc--world-level-nav.cpc--side-nav .cpc--side-nav__link[aria-current=page] {
color: var(--cds-text-primary, #161616);
}
.cpc--world-level-nav.cpc--side-nav .cpc--side-nav__item:before {
display: none;
}
.cpc--world-level-nav.cpc--side-nav .cpc--side-nav__items {
overflow-x: auto;
}
.cpc--world-level-nav.cpc--side-nav .cpc--side-nav__item svg {
height: 16px;
width: 16px;
}
.cpc--world-level-nav.cpc--side-nav .cpc--side-nav__item-icon {
margin-right: 0.5rem;
}
.cpc--world-level-nav--mobile.cpc--side-nav {
display: flex;
height: auto;
max-height: 100%;
min-width: 16rem;
position: relative;
top: 50px;
transform: none;
transition: max-height 0.24s cubic-bezier(0.2, 0, 1, 0.9);
width: 100%;
}
.cpc--world-level-nav--mobile.cpc--side-nav .cpc--side-nav__items {
border-bottom: 1px solid var(--cds-border-subtle);
max-height: calc(100vh - 123px);
overflow-x: auto;
}
.cpc--world-level-nav--mobile.cpc--side-nav .cpc--side-nav__header {
display: none;
}
.cpc--world-level-nav--mobile.cpc--side-nav--collapsed {
max-height: 73px;
transform: none;
transition: max-height 0.24s cubic-bezier(0.2, 0, 1, 0.9);
}
.cpc--world-level-nav--mobile.cpc--side-nav--collapsed .cpc--side-nav__items, .cpc--world-level-nav--mobile.cpc--side-nav:after {
display: none;
}
.cpc--world-level-nav--mobile.cpc--side-nav .cpc--side-nav__collapse-button {
border-top: none;
color: var(--cds-text-primary, #161616);
padding-left: 1rem;
}
.cpc--world-level-nav--mobile.cpc--side-nav .cpc--side-nav__collapse-button___label-mobile {
height: inherit;
opacity: 1;
visibility: visible;
width: inherit;
}
.cpc--world-level-nav--non-mobile.cpc--side-nav {
display: flex;
}
.cpc--world-level-nav--non-mobile.cpc--side-nav--collapsed {
transform: translateX(-13.125rem);
transition: transform 0.24s cubic-bezier(0.2, 0, 1, 0.9);
}
.cpc--world-level-nav--non-mobile.cpc--side-nav--collapsed > :not(.cpc--side-nav__collapse-button) {
opacity: 0;
transition: all 0.24s cubic-bezier(0.2, 0, 1, 0.9);
visibility: hidden;
}
.cpc--world-level-nav--non-mobile.cpc--side-nav--collapsed .cpc--side-nav__menu-button[aria-expanded=true] + .cpc--side-nav__menu, .cpc--world-level-nav--non-mobile.cpc--side-nav--collapsed .cpc--side-nav__menu-button[aria-expanded=true] + .cpc--side-nav__menu .cpc--side-nav__item, .cpc--world-level-nav--non-mobile.cpc--side-nav--collapsed .cpc--side-nav__menu-button[aria-expanded=true] + .cpc--side-nav__menu .cpc--side-nav__link {
opacity: 0;
visibility: hidden;
}
.cpc--world-level-nav--non-mobile.cpc--side-nav--collapsed .cpc--side-nav__collapse-button.cds--btn--ghost {
align-items: center;
border-top: 1px solid var(--cds-border-subtle);
bottom: 0;
flex-direction: column;
height: 3rem;
justify-content: center;
padding: 0.75rem 1rem;
position: absolute;
right: 0;
width: 3rem;
}
.cpc--world-level-nav--non-mobile.cpc--side-nav .cpc--side-nav__collapse-button {
justify-content: flex-end;
padding: 1rem;
}
@media (min-width: 42rem) {
.cpc--world-level-nav--non-mobile.cpc--side-nav .cpc--side-nav__collapse-button {
display: flex;
}
.cpc--world-level-nav--non-mobile.cpc--side-nav .cpc--side-nav__collapse-button .cpc--side-nav__collapse-button__label-mobile {
height: 0;
opacity: 0;
visibility: hidden;
width: 0;
}
}
:not(.cpc-docs--renderer__component) > .cpc--world-level-nav {
position: fixed;
}
.cpc--world-level-page-header {
display: inline-flex;
justify-content: space-between;
padding: 1rem;
width: 100%;
}
.cpc--world-level-page-header .cpc--wlph-content-section {
margin: 3rem 1rem 2rem 0;
max-width: 640px;
min-height: 168px;
width: 50%;
}
@media (max-width: 65.98rem) {
.cpc--world-level-page-header .cpc--wlph-content-section {
width: 75%;
}
}
@media (max-width: 19.98rem) {
.cpc--world-level-page-header .cpc--wlph-content-section {
width: 75%;
}
}
.cpc--world-level-page-header .cpc--wlph-title {
text-wrap: balance;
font-size: var(--cds-heading-05-font-size, 2rem);
font-weight: var(--cds-heading-05-font-weight, 400);
letter-spacing: var(--cds-heading-05-letter-spacing, 0);
line-height: var(--cds-heading-05-line-height, 1.25);
}
@media (min-width: 66rem) {
.cpc--world-level-page-header .cpc--wlph-title {
font-size: var(--cds-heading-06-font-size, 2.625rem);
font-weight: var(--cds-heading-06-font-weight, 300);
letter-spacing: var(--cds-heading-06-letter-spacing, 0);
line-height: var(--cds-heading-06-line-height, 1.199);
}
}
.cpc--world-level-page-header .cpc--wlph-subtitle {
text-wrap: pretty;
font-size: var(--cds-heading-03-font-size, 1.25rem);
font-weight: var(--cds-heading-03-font-weight, 400);
letter-spacing: var(--cds-heading-03-letter-spacing, 0);
line-height: var(--cds-heading-03-line-height, 1.4);
margin-top: 0.75rem;
width: 90%;
}
.cpc--world-level-page-header .cpc--wlph-children {
margin-top: 2rem;
}
.cpc--world-level-page-header .cpc--wlph-illustration-section {
background-position: 100%;
background-repeat: no-repeat;
background-size: contain;
height: auto;
width: 50%;
}
@media (max-width: 65.98rem) {
.cpc--world-level-page-header .cpc--wlph-illustration-section {
display: none;
}
}
.cpc--account-information-card__header-info {
align-items: center;
display: flex;
}
.cpc--account-information-card__icon {
fill: var(--cds-background-brand, #0f62fe);
margin-left: 0.5rem;
position: relative;
}
.cpc--account-information-card__label {
font-size: 0.75rem;
letter-spacing: 0.02rem;
line-height: 1rem;
margin: 0.25rem 0;
}
.cpc--account-information-card__info {
flex: 1 0 50%;
flex-direction: column;
margin-bottom: 1rem;
}
.cpc--account-information-card__upgrade {
appearance: none;
background: none;
border: 0;
box-sizing: border-box;
color: var(--cds-background-brand, #0f62fe);
cursor: pointer;
display: inline-block;
font-family: inherit;
font-size: 100%;
inline-size: 100%;
margin: 0;
padding: 0;
text-align: start;
vertical-align: baseline;
}
.cpc--account-information-card__upgrade *, .cpc--account-information-card__upgrade :after, .cpc--account-information-card__upgrade :before {
box-sizing: inherit;
}
.cpc--account-information-card__upgrade::-moz-focus-inner {
border: 0;
}
.cpc--account-information-card__upgrade:hover {
color: var(--cds-interactive, #0f62fe);
text-decoration: underline;
}
.cpc--account-information-card__upgrade:focus {
border: 1px solid var(--cds-border-interactive, #0f62fe);
color: var(--cds-interactive, #0f62fe);
outline: none;
}
.cpc--account-information-card__skeleton {
padding: 1rem;
}
.cpc--account-information-card__error {
color: #525252;
width: 75%;
}
.cpc--account-information-card__error-bold {
font-weight: 600;
}
.cpc--account-information-card__body {
display: flex;
flex-wrap: wrap;
}
.cpc--context-assign-tags-skeleton {
margin-bottom: 0;
margin-top: 30px;
width: 100%;
}
.cpc--context-assign-tags__assigntags {
padding-bottom: 2rem;
width: 20rem;
}
.cpc--context-assign-tags__assigntags-wrapper {
margin-bottom: 1rem;
width: 40rem;
}
.cpc--context-assign-tags__assigntags-heading {
font-size: 1rem;
font-weight: 600;
letter-spacing: 0;
line-height: 1.375em;
margin-bottom: 1.375rem;
}
.cpc--context-assign-tags__assigntags-combobox-wrapper {
display: flex;
flex-direction: row;
margin: 0.875rem 0;
width: 25.875rem;
}
@media screen and (max-width: 671px) {
.cpc--context-assign-tags__assigntags-combobox-wrapper {
max-width: none;
}
}
.cpc--context-assign-tags__assigntags-combobox-wrapper .cds--list-box__wrapper {
margin-right: 0.875rem;
}
.cpc--context-assign-tags__assigntags-combobox-wrapper .cds--list-box__wrapper .cds--list-box {
width: 20rem;
}
.cpc--context-assign-tags__assigntags-selecteditems {
column-gap: 2rem;
display: grid;
grid-auto-flow: column;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto;
}
@media screen and (max-width: 671px) {
.cpc--context-assign-tags__assigntags-selecteditems {
column-gap: 0;
grid-template-columns: 1fr;
}
}
.cpc--context-assign-tags__assigntags-selecteditems > div:nth-child(-n+3):last-child, .cpc--context-assign-tags__assigntags-selecteditems > div:nth-child(6):last-child {
padding-bottom: 0;
}
.cpc--context-assign-tags__assigntags-selecteditem {
align-items: center;
border-bottom: 1px solid var(--cds-layer-02, #fff);
display: flex;
padding: 0.5rem 0;
}
@media screen and (max-width: 671px) {
.cpc--context-assign-tags__assigntags-selecteditem {
grid-column: 1;
}
}
.cpc--context-assign-tags__assigntags-selecteditem-name {
flex-grow: 1;
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
padding-right: 1rem;
}
.cpc--context-assign-tags__assigntags-selecteditem-tag {
flex-shrink: 0;
}
.cpc--context-assign-tags__assigntags-selecteditem-tag .cpc--tagmap__popup {
width: 28rem;
}
.cpc--context-assign-tags__assigntags-helper-text {
font-size: 0.75rem;
letter-spacing: 0;
line-height: 1.375em;
opacity: 0.7;
}
.cpc--context-assign-tags__assigntags-selecteditem-remove-btn.cds--tooltip--bottom .cds--assistive-text {
transform: translate(-50%, 100%) !important;
}
.cpc--context-assign-tags__assigntags-label {
color: var(--cds-border-inverse, #161616);
flex: 0 0 10rem;
font-size: 0.75rem;
padding-bottom: 10px;
padding-top: 10px;
word-break: break-word;
}
.cpc--context-assign-tags__assigntags-label .cds--link {
position: relative;
text-decoration: none;
}
.cpc--context-assign-tags__assigntags-label .cds--link > svg {
bottom: 1px;
left: 2px;
position: absolute;
}
.cpc--context-assign-tags__assigntags-display {
border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
flex: 0 0 10rem;
min-height: 2.5rem;
word-break: break-word;
}
.cpc--context-assign-tags__assigntags-display .icon--wrapper {
align-items: flex-start;
display: flex;
flex-direction: row;
float: left;
padding-right: 4rem;
padding-top: 0.3rem;
width: fit-content;
width: 40%;
}
.cpc--context-assign-tags__assigntags-display .icon--wrapper .cds--tag svg {
height: 1rem;
margin-right: 8px;
vertical-align: middle;
width: 25px;
}
.cpc--context-assign-tags__assigntags-display .icon--wrapper .cds--tag .tag-text-wrapper {
max-width: 11rem;
min-width: 2rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cpc--context-assign-tags__assigntags-display .icon-description--text {
-webkit-font-smoothing: antialiased;
align-items: flex-start;
display: flex;
flex-direction: row;
float: left;
font-size: 0.875rem;
line-height: 1;
min-width: 45%;
padding-top: 0.5rem;
width: fit-content;
}
.cpc--context-assign-tags__assigntags-display .button {
padding: 0 12px;
}
.cpc--context-assign-tags__assigntags-display .button-placeholder {
min-height: 2.5rem;
}
.cpc--context-assign-tags__assigntags-display .cds--tag svg {
height: 1rem;
margin-right: 8px;
vertical-align: middle;
width: 1rem;
}
.cpc--context-assign-tags .cpc--assign-tag-error__visible.cpc--assign-tag-error__visible {
box-shadow: 0 2px 0 0;
color: var(--cds-toggle-off, #8d8d8d);
}
.cpc--context-assign-tags .cpc--tagmap.cpc--tagmap--popup-open:after {
left: calc(15% + 24px);
}
.cpc--context-assign-tags .cpc--tagmap__tag {
background: transparent;
}
.cpc--context-assign-tags .cpc--tagmap__popup {
left: calc(30% + 24px);
min-height: 7rem;
}
.cpc--billing-period {
height: 242px;
}
.cpc--billing-period--error, .cpc--billing-period__body {
justify-content: space-between;
}
.cpc--billing-period__body {
display: flex;
}
.cpc--billing-period__info {
width: 100%;
}
.cpc--billing-period__info:first-child {
margin-right: 1rem;
}
@media (max-width: 400px) {
.cpc--billing-period__info:first-child {
display: none;
}
.cpc--billing-period__info:last-child {
margin-left: 1rem;
}
}
.cpc--billing-period__date {
color: var(--cds-text-secondary, #525252);
font-size: 1.5rem;
font-weight: 500;
margin-bottom: 1rem;
}
.cpc--billing-period__date-label {
color: var(--cds-text-helper, #6f6f6f);
font-size: 0.75rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.cpc--secret-input {
display: flex;
flex-direction: column;
}
.cpc--secret-input__multiline-password-container .cds--text-area {
width: 100%;
}
.cpc--secret-input__multiline-password-edit-button.cds--btn svg {
margin: 0;
}
.cpc--secret-input__hidden {
display: none;
}
.cpc--secret-input__toggle {
align-items: center;
display: flex;
flex-wrap: wrap;
margin-bottom: 0.25rem;
}
.cpc--secret-input__toggle .cds--label, .cpc--secret-input__toggle .cds--skeleton__text {
margin: 0 1rem 0.25rem 0;
}
.cpc--secret-input__toggle .cds--form-item, .cpc--secret-input__toggle .cds--toggle--skeleton {
margin-bottom: 0.25rem;
}
.cpc--secret-input__toggle .cds--toggle__label {
align-items: center;
display: flex;
flex-direction: row;
gap: 1rem;
}
.cpc--secret-input__toggle .cds--toggle__label-text, .cpc--secret-input__toggle .cds--toggle__switch {
margin: 0;
}
.cpc--secret-input__secrets {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
justify-content: flex-start;
}
.cpc--secret-input__clear {
color: var(--cds-text-secondary, #525252);
line-height: 1;
min-height: 2.5rem;
}
.cpc--secret-input__clear:hover {
color: var(--cds-text-primary, #161616);
}
.cpc--secret-input__wrapper {
align-items: center;
display: flex;
height: 2.5rem;
}
.cpc--secret-input__wrapper .cds--btn--ghost {
min-height: 2.5rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.cpc--secret-input__tooltip-container .cpc--secret-input__tooltip-content {
background-color: var(--cds-layer-01, #f4f4f4);
min-width: 15rem;
padding-bottom: 1.5rem;
}
@media (max-width: 400px) {
.cpc--secret-input__tooltip-container .cpc--secret-input__tooltip-content {
max-width: 12.5rem;
min-width: 12.5rem;
}
}
.cpc--secret-input__tooltip-container .cpc--secret-input__tooltip-content + .cds--popover-caret {
background-color: var(--cds-layer-01, #f4f4f4);
}
.cpc--secret-input__tooltip-container .cpc--secret-input__tooltip-content .cds--popover-container {
position: absolute;
right: 0;
top: 0;
}
.cpc--secret-input__tooltip-container .cpc--secret-input__tooltip-content .cds--skeleton {
margin-top: 0.25rem;
}
.cpc--secret-input__tooltip-container .cpc--secret-input__trigger {
min-height: 1.125rem;
}
.cpc--secret-input__tooltip-description {
color: var(--cds-text-primary, #161616);
margin-top: 0.5rem;
}
.cpc--secret-input__tooltip-description .cds--link, .cpc--secret-input__tooltip-description .cds--link:visited {
color: var(--cds-link-primary, #0f62fe);
}
.cpc--secret-input__tooltip-description .cds--link:focus {
outline-color: var(--cds-focus, #0f62fe);
}
.cpc--secret-input__tooltip-header:not(.cpc--secret-input__tooltip-no-resources) {
border-bottom: 1px solid var(--cds-border-subtle-02, #e0e0e0);
margin: 0 -1rem;
padding: 0 1rem 1rem;
}
.cpc--secret-input__tooltip-body {
margin-top: 1rem;
}
.cpc--secret-input__tooltip-body .cds--inline-notification {
margin-bottom: 1rem;
min-width: auto;
}
.cpc--secret-input__tooltip-body .cds--inline-notification__title {
font-weight: 600;
}
.cpc--secret-input__tooltip-item:not(:last-child) {
margin-bottom: 1.5rem;
}
.cpc--secret-input__tooltip-item .cds--link {
color: var(--cds-link-primary, #0f62fe);
display: block;
margin-top: 0.5rem;
}
.cpc--secret-input__tooltip-item .cds--link.cds--link--disabled {
color: var(--cds-text-disabled, hsla(0, 0%, 9%, 0.25));
}
.cpc--secret-input__tooltip-item .cds--link:visited {
color: var(--cds-link-primary, #0f62fe);
}
.cpc--secret-input__tooltip-item .cds--link:focus {
outline-color: var(--cds-focus, #0f62fe);
}
.cpc--secret-input__tooltip-launch-icon {
height: 0.875rem;
margin-left: 0.25rem;
vertical-align: middle;
width: 0.875rem;
}
.cpc--secret-input__success-icon {
fill: var(--cds-support-success, #24a148);
}
.cpc--secret-input__warning-icon {
fill: var(--cds-support-warning, #f1c21b);
}
.cpc--secret-input__warning-icon path[opacity="0"] {
fill: #000;
opacity: 1;
}
.cpc--secret-input__refresh {
fill: var(--cds-link-primary, #0f62fe) !important;
}
.cpc--secret-input__refresh:focus {
border-color: var(--cds-focus, #0f62fe);
}
.cpc--secret-input__error-guid {
font-size: 0.625rem;
line-height: 1;
}
.cpc--cluster-delete-modal .cds--modal-content .cds--form-item, .cpc--cluster-delete-modal .cds--modal-content .cpc--error-state {
margin-top: 1.5rem;
}
.cpc--cluster-namespaces-selector {
min-width: 12.5rem;
}
.cpc--cluster-namespaces-selector__create-description {
font-size: 0.875rem;
line-height: 1.125rem;
margin-bottom: 2rem;
}
.cpc--cluster-namespaces-selector__dropdown {
flex: 1 1 auto;
position: relative;
}
.cpc--cluster-namespaces-selector__dropdown-create {
display: flex;
}
.cpc--cluster-namespaces-selector__dropdown-create .cds--skeleton {
min-width: 12.1875rem;
}
.cpc--cluster-namespaces-selector__error-guid {
font-size: 0.625rem;
line-height: 1;
}
.cpc--cluster-namespaces-selector__fetch-error {
margin-top: 1.5rem;
}
.cpc--cluster-namespaces-selector__input {
width: 100%;
}
.cpc--cluster-namespaces-selector__invalid-icon {
fill: var(--cds-support-error, #da1e28);
position: absolute;
right: 2.5rem;
top: 0.75rem;
}
.cpc--cluster-namespaces-selector__namespaces-create {
margin-left: 1rem;
max-height: 2.5rem;
}
.cpc--cluster-namespaces-selector__radio-group + .cpc--cluster-namespaces-selector__dropdown-wrapper {
margin-top: 0.75rem;
}
.cpc--cluster-namespaces-selector .cds--radio-button__label-text {
align-items: center;
display: flex;
}
.cpc--cluster-namespaces-selector .cds--toggletip-label {
color: inherit;
font-size: inherit;
}
.cpc--cluster-namespaces-selector .cpc--nested-filterable-dropdown.invalid {
outline: 2px solid var(--cds-support-error, #da1e28);
outline-offset: -2px;
}
.cpc--cluster-namespaces-selector .cpc--nested-filterable-dropdown.invalid ~ .cds--form-requirement {
color: var(--cds-support-error, #da1e28);
display: block;
max-height: 12.5rem;
overflow: visible;
}
.cpc--cluster-namespaces-selector .cpc--nested-filterable-dropdown.invalid .cds--text-input ~ .cds--list-box__selection {
opacity: 0;
}
.cpc--cluster-namespaces-selector .cpc--side-panel-container .cds--form-item {
margin-bottom: 2rem;
}
.cpc--cluster-update-modal .cds--modal-content .cds--form-item, .cpc--cluster-update-modal .cpc--side-panel__content .cds--dropdown__wrapper {
margin-top: 1.5rem;
}
.cpc--cluster-update-modal .cds--inline-notification--info {
margin-top: 1rem;
}
.cpc--cluster-update-modal .body-description {
font-size: var(--cds-body-01-font-size, 0.875rem);
font-weight: var(--cds-body-01-font-weight, 400);
letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
line-height: var(--cds-body-01-line-height, 1.42857);
}
.cpc--clusters-table .cpc--clusters-table__version {
align-items: center;
display: flex;
}
.cpc--clusters-table .cpc--clusters-table__version svg {
flex-shrink: 0;
height: 1rem;
width: 1rem;
}
.cpc--clusters-table .cpc--clusters-table__version > div {
margin-left: 0.3rem;
}
.cpc--clusters-table__version-tooltip {
display: flex;
}
.cpc--clusters-table__icon-error svg {
fill: var(--cds-support-error, #da1e28);
margin-left: 0.5rem;
}
.cpc--clusters-table__icon-warning svg {
fill: var(--cds-support-warning, #f1c21b);
margin-left: 0.5rem;
}
.cpc--clusters-table__icon-info svg {
fill: var(--cds-support-info, #0043ce);
margin-left: 0.5rem;
}
.cpc--compliance-summary-card {
overflow: hidden;
}
.cpc--compliance-summary-card .cpc--card__body {
display: flex;
justify-content: space-between;
}
.cpc--compliance-summary-card .cpc--card__body .cds--row {
margin: 0;
}
.cpc--compliance-summary-card .cpc--card__body .cpc--data-table {
width: 100%;
}
.cpc--compliance-summary-card .cpc--card__body .meter-title {
display: none;
}
.cpc--compliance-summary-card .cds--list-box__wrapper {
max-width: 16rem;
}
.cpc--compliance-summary-card__result-chart {
min-width: 10rem;
width: 100%;
}
.cpc--compliance-summary-card__error-button, .cpc--compliance-summary-card__no-instances-button, .cpc--compliance-summary-card__no-scans-button {
display: block;
margin-top: 0.5rem;
}
.cpc--compliance-summary-card .cpc--card__footer {
justify-content: end;
}
.cpc--compliance-summary-card .cpc--card__footer .cpc--compliance-summary-card__viewall {
margin-bottom: 1rem;
}
.cpc--cost-estimate-breakdown {
font-size: 0.875rem;
}
.cpc--cost-estimate-breakdown__pricing-data {
float: right;
}
.cpc--cost-estimate-breakdown__cost-details {
border-bottom: 1px solid var(--cds-border-inverse, #161616);
margin-bottom: 1rem;
padding-bottom: 0.5rem;
}
.cpc--cost-estimate-breakdown__cost {
font-size: 0.875rem;
text-indent: 1rem;
}
.cpc--cost-estimate-breakdown__cost-line-item {
width: 40rem;
}
.cpc--cost-estimate-breakdown__details-info {
border-top: 1px solid var(--cds-border-subtle);
padding: 0.625rem 2rem 0.625rem 1rem;
}
.cpc--cost-estimate-breakdown__details-info span {
margin-right: 1rem;
}
.cpc--cost-estimate-breakdown__footer {
margin: 0 2.5rem 0 1rem;
}
.cpc--cost-estimate-breakdown__cost-breakdown {
margin: 1rem 0;
padding-left: 1.5rem;
}
.cpc--cost-estimate-breakdown .mb-1 {
line-height: 1.25rem;
margin-bottom: 1rem;
}
.cpc--cost-estimate-breakdown .mb-2 {
margin-bottom: 2rem;
}
.cpc--cost-estimate-breakdown .bold {
font-weight: 600;
}
.cpc--cost-estimate-breakdown .cds--accordion__heading {
justify-content: space-between;
padding-bottom: 0.625rem;
padding-top: 0.625rem;
}
.cpc--cost-estimate-breakdown .cds--accordion__title {
width: calc(100% - 4rem);
}
.cpc--cost-estimate-breakdown .cds--accordion__content {
padding-right: 10%;
}
.cpc--cost-estimate-breakdown .cds--accordion__content p {
padding-right: 0;
}
.cpc--cost-estimate-breakdown .cds--tree-node {
background-color: inherit;
}
.cpc--context-event-notification {
width: 100%;
}
.cpc--context-event-notification .heading-level-1 {
font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
font-weight: var(--cds-heading-compact-01-font-weight, 600);
letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-heading-compact-01-line-height, 1.28572);
}
.cpc--context-event-notification .label-01 {
color: var(--cds-text-secondary, #525252);
font-size: var(--cds-label-01-font-size, 0.75rem);
font-weight: var(--cds-label-01-font-weight, 400);
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
line-height: var(--cds-label-01-line-height, 1.33333);
}
.cpc--context-event-notification .label-02 {
font-size: var(--cds-label-02-font-size, 0.875rem);
font-weight: var(--cds-label-02-font-weight, 400);
letter-spacing: var(--cds-label-02-letter-spacing, 0.16px);
line-height: var(--cds-label-02-line-height, 1.28572);
}
.cpc--context-event-notification .body-compact-02 {
font-size: var(--cds-body-compact-02-font-size, 1rem);
font-weight: var(--cds-body-compact-02-font-weight, 400);
letter-spacing: var(--cds-body-compact-02-letter-spacing, 0);
line-height: var(--cds-body-compact-02-line-height, 1.375);
}
.disconnect-event-notification-confirm-modal .cds--modal-content .cds--modal-content__text:first-child {
margin-bottom: 15px;
}
.event-notification-dashlet {
background-color: var(--cds-layer-01, #f4f4f4);
padding: 16px;
}
.event-notification-dashlet-header {
margin-bottom: 16px;
}
@media (min-width: 42rem) {
.event-notification-dashlet .row-gutter-padding {
padding-left: 1rem !important;
}
}
.event-notification-dashlet-events .events-details-label {
color: var(--cds-text-secondary, #525252);
margin-top: 1rem;
}
.event-notification-dashlet-events .cpc--tag-list {
display: inline-block;
margin-left: -0.25rem;
}
.event-notification-dashlet-events .cpc--tag-list .cds--tag {
margin-left: 0.3rem;
}
.event-notification-dashlet__initial-connect-panel {
border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
}
.event-notification-dashlet__initial-connect-panel.cpc--grid-layout__row {
margin-top: 1rem;
padding-top: 1rem;
}
.event-notification-dashlet__initial-connect-panel .connect-details-section .section-heading {
margin-bottom: 1rem;
}
.event-notification-dashlet__initial-connect-panel .connect-details-section .connect-button {
margin-top: 1rem;
}
@media (min-width: 42rem) {
.event-notification-dashlet__initial-connect-panel .connect-details-section {
border-left: 1px solid var(--cds-border-subtle-01, #c6c6c6);
}
}
.event-notification-dashlet__loading-panel.cpc--grid-layout__row {
margin-top: 1rem;
}
.event-notification-dashlet__loading-panel .details-section > div {
margin-bottom: 1rem;
}
@media (min-width: 42rem) {
.event-notification-dashlet__loading-panel .details-section {
border-left: 1px solid var(--cds-border-subtle-01, #c6c6c6);
}
}
.event-notification-dashlet__overflow-menu {
float: right;
margin-top: -10px;
}
.event-notification-dashlet__notification-connected-panel .en-label {
margin-bottom: 0.1rem;
}
.event-notification-dashlet__notification-connected-panel .en-instance-value, .event-notification-dashlet__notification-connected-panel .test-btn {
margin-bottom: 0.5rem;
}
.event-notification-dashlet__notification-connected-panel .details-section-left > div {
margin-bottom: 1rem;
}
@media (min-width: 42rem) {
.event-notification-dashlet__notification-connected-panel .details-section {
border-left: 1px solid var(--cds-border-subtle-01, #c6c6c6);
}
}
.event-notification-dashlet__notification-connected-panel .details-section > div {
margin-bottom: 1rem;
}
.event-notification-dashlet__notification-connected-panel .details-section .review-notification, .event-notification-dashlet__notification-connected-panel .details-section > div:last-child {
margin-bottom: 0;
}
.cpc--context-event-notification-sidepanel .cpc--side-panel__body-content {
margin-bottom: 150px;
}
.cpc--context-event-notification-sidepanel .cds--inline-notification.form_notification {
bottom: 0;
left: 16px;
margin-right: 16px;
max-width: 38rem;
position: fixed;
transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
transition: 0.2s;
visibility: hidden;
width: calc(100% - 32px);
}
.cpc--context-event-notification-sidepanel .cds--inline-notification.form_notification.is-visible {
bottom: 65px;
margin: 0;
transform: translateY(0);
transition-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
visibility: visible;
z-index: 10;
}
.cpc--context-event-notification-sidepanel .sub-title {
margin-bottom: 24px;
word-break: break-word;
}
.cpc--context-event-notification-sidepanel .section-heading {
margin-bottom: 12px;
margin-top: 36px;
}
.cpc--context-event-notification-sidepanel .section-subheading {
margin-bottom: 12px;
}
.cpc--context-event-notification-sidepanel .cds--accordion .cds--accordion__item--active .cds--accordion__title {
font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
font-weight: var(--cds-heading-compact-01-font-weight, 600);
letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-heading-compact-01-line-height, 1.28572);
}
.cpc--context-event-notification-sidepanel .cds--accordion .cds--accordion__title {
margin-left: 0;
}
.cpc--context-event-notification-sidepanel .cds--accordion .cds--accordion__content {
padding-left: 0;
}
.cpc--context-event-notification-sidepanel .cds--accordion .steps {
list-style: disc;
}
.cpc--context-event-notification-sidepanel .cds--accordion .steps > li {
margin-left: 14px;
margin-top: 8px;
}
.cpc--context-event-notification-sidepanel .cds--accordion .steps a {
font-size: var(--cds-helper-text-01-font-size, 0.75rem);
letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
line-height: var(--cds-helper-text-01-line-height, 1.33333);
}
.cpc--context-event-notification-sidepanel .cds--text-area {
width: 100%;
}
.cpc--context-event-notification-sidepanel .s2s-tile-holder a {
font-size: var(--cds-helper-text-01-font-size, 0.75rem);
letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
line-height: var(--cds-helper-text-01-line-height, 1.33333);
}
.cpc--context-event-notification-sidepanel .s2s-tile-holder > div {
align-items: flex-start;
display: flex;
}
.cpc--context-event-notification-sidepanel .s2s-tile-holder .s2s-description, .cpc--context-event-notification-sidepanel .s2s-tile-holder .s2s-description > div {
margin-bottom: 12px;
}
.cpc--context-event-notification-sidepanel .s2s-tile-holder .cpc--message .cds--tile {
min-inline-size: 2rem;
padding: 0;
}
.cpc--context-event-notification-sidepanel .s2s-tile-holder .cpc--message .cpc--message__content {
display: none;
}
.cpc--context-event-notification-sidepanel .s2s-tile-holder .service-details-holder > div {
flex: 0 1 50%;
}
.cpc--context-event-notification-sidepanel .s2s-tile-holder .service-details-holder .service-details > div {
margin-bottom: 12px;
}
.cpc--context-event-notification-sidepanel .s2s-tile-holder .service-details-holder .service-details .role-count {
padding-top: 12px;
}
.cpc--context-event-notification-sidepanel__attribute-inputs {
margin-bottom: 1.5rem;
}
.cpc--context-event-notification-sidepanel__attribute-inputs .en-newinstance-link {
margin-top: 10px;
}
.cpc--context-assign-access__accessgroups {
padding-bottom: 2rem;
}
.cpc--context-assign-access__accessgroups-heading {
font-size: 1rem;
font-weight: 600;
letter-spacing: 0;
line-height: 1.375em;
margin-bottom: 1.375rem;
}
.cpc--context-assign-access__accessgroups-helptext, .cpc--context-assign-access__accessgroups-pubaccess-helptext {
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
}
.cpc--context-assign-access__accessgroups-helptext {
margin-top: 2rem;
}
.cpc--context-assign-access__accessgroups-combobox-wrapper {
align-items: flex-end;
display: flex;
flex-direction: row;
margin: 0.875rem 0;
max-width: calc(50% - 1rem);
min-width: 25.875rem;
}
@media screen and (max-width: 671px) {
.cpc--context-assign-access__accessgroups-combobox-wrapper {
max-width: none;
}
}
.cpc--context-assign-access__accessgroups-combobox-wrapper .cpc--context-assign-access__accessgroups-combobox {
flex-grow: 1;
margin-right: 0.875rem;
}
.cpc--context-assign-access__accessgroups-selecteditems {
column-gap: 2rem;
display: grid;
grid-auto-flow: column;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto;
}
@media screen and (max-width: 671px) {
.cpc--context-assign-access__accessgroups-selecteditems {
column-gap: 0;
grid-template-columns: 1fr;
}
}
.cpc--context-assign-access__accessgroups-selecteditems > div:last-child, .cpc--context-assign-access__accessgroups-selecteditems > div:nth-child(3) {
border-bottom: none;
}
.cpc--context-assign-access__accessgroups-selecteditems > div:nth-child(-n+3):last-child, .cpc--context-assign-access__accessgroups-selecteditems > div:nth-child(6):last-child {
padding-bottom: 0;
}
.cpc--context-assign-access__accessgroups-selecteditem {
align-items: center;
border-bottom: 1px solid var(--cds-layer-02, #fff);
display: flex;
padding: 0.5rem 0;
}
@media screen and (max-width: 671px) {
.cpc--context-assign-access__accessgroups-selecteditem {
grid-column: 1;
}
}
.cpc--context-assign-access__accessgroups-selecteditem-name {
flex-grow: 1;
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
padding-right: 1rem;
}
.cpc--context-assign-access__accessgroups-selecteditem-tag {
flex-shrink: 0;
}
.cpc--context-assign-access__accessgroups-selecteditem-tag .cpc--tagmap__popup {
width: 28rem;
}
.cpc--context-assign-access-confirmation-modal__accessgroups-label {
font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
font-weight: var(--cds-heading-compact-01-font-weight, 600);
letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-heading-compact-01-line-height, 1.28572);
margin: 1rem 0 0.5rem;
}
.cpc--context-assign-access-confirmation-modal__accessgroups-listitem {
margin-bottom: 0.25rem;
}
.cds--assistive-text, .cds--visually-hidden {
clip: rect(0, 0, 0, 0);
block-size: 1px;
border: 0;
inline-size: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
visibility: inherit;
white-space: nowrap;
}
.cpc--context-assign-auth__delegator-heading, .cpc--context-assign-auth__targetservice-heading {
font-size: 1rem;
font-weight: 600;
letter-spacing: 0;
line-height: 1.375em;
margin-bottom: 0.5rem;
}
.cpc--context-assign-auth__delegator-helptext, .cpc--context-assign-auth__targetservice-helptext {
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
}
.cpc--context-assign-auth__targetservice-section {
display: flex;
flex-direction: column;
margin: 1.5rem 0;
max-width: 22rem;
}
.cpc--context-assign-auth__targetservice-composite-child .cds--label {
margin-top: 1rem;
}
.cpc--context-assign-auth__delegator-section {
margin: 3rem 0 1rem;
}
.cpc--context-assign-auth__delegator-checkbox {
margin-top: 0.5rem;
}
.cpc--context-assign-auth__attributes {
padding-bottom: 1rem;
}
.cpc--context-assign-auth__attribute {
margin-bottom: 1rem;
}
.cpc--context-assign-auth__attribute:last-of-type {
margin-bottom: 0;
}
.cpc--context-assign-auth__attribute-inputs {
align-items: center;
display: flex;
flex-direction: row;
}
.cpc--context-assign-auth__attribute-inputs .cds--dropdown__wrapper, .cpc--context-assign-auth__attribute-inputs .cds--form-item, .cpc--context-assign-auth__attribute-inputs .cds--list-box__wrapper, .cpc--context-assign-auth__attribute-inputs .cds--text-input-wrapper {
flex-basis: 22rem;
flex-grow: 0;
margin-right: 1rem;
}
.cpc--context-assign-auth__attribute-input--comboboxvalue label, .cpc--context-assign-auth__attribute-input--textvalue label, .cpc--context-assign-auth__attribute-input--value--region label {
clip: rect(0, 0, 0, 0);
block-size: 1px;
border: 0;
inline-size: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
visibility: inherit;
white-space: nowrap;
}
.cpc--context-assign-auth-confirmation-modal__delegator-label, .cpc--context-assign-auth-confirmation-modal__targetservice-label {
font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
font-weight: var(--cds-heading-compact-01-font-weight, 600);
letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-heading-compact-01-line-height, 1.28572);
}
.cpc--context-assign-auth-confirmation-modal__targetservice-label {
margin: 1rem 0 0.5rem;
}
.cpc--context-assign-auth-confirmation-modal__delegator-label {
margin-top: 2rem;
}
.cpc--context-assign-auth-confirmation-modal__targetservice-attributes {
display: flex;
flex-direction: column;
}
.cpc--context-assign-auth-confirmation-modal__targetservice-attribute {
margin: 0.5rem 0 0;
}
.cpc--context-assign-auth-confirmation-modal__targetservice-attribute .cds--label {
margin: 0;
}
.cpc--context-assign-auth-confirmation-modal__targetservice-listitem {
margin-bottom: 0.25rem;
}
.cds--tooltip__content {
font-size: 0.875rem;
}
label.cpc--iam-assign-common__access-roleslist-label {
align-items: center;
display: flex;
gap: 0.5rem;
}
.cpc--iamcreate-tags .tagarea-container {
display: flex;
flex-direction: row;
}
.cpc--iamcreate-tags .tagarea-container .resourceTagAreaWrapper {
flex-grow: 1;
}
.cpc--iamcreate-tags .tagarea-container .cpc--resource-tag-area.cpc--resource-tag-area__invalid ~ .create-button {
margin-bottom: 1rem;
margin-top: 0;
}
.cpc--iamcreate-tags .tagarea-container .create-button {
align-self: center;
margin-top: 1rem;
}
.cpc--iamcreate-tags .tagarea-container .cpc--tag-area-skeleton {
width: 200px;
}
.cpc--iamcreate-tags p {
font-size: 0.875rem;
font-weight: 300;
}
.cpc--context-delete-access-modal__helptext {
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
}
.cpc--context-delete-access-modal__accessgroup-label, .cpc--context-delete-access-modal__roles-label {
font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
font-weight: var(--cds-heading-compact-01-font-weight, 600);
letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-heading-compact-01-line-height, 1.28572);
margin: 1rem 0 0.5rem;
}
.cpc--context-delete-access-modal__roles-label {
margin-top: 2rem;
}
.cpc--context-delete-access-modal__accessgroup-listitem {
margin-bottom: 0.25rem;
}
.cpc--context-delete-access-modal__role-type .cds--label {
margin: 0.5rem 0 0;
}
.cpc--context-delete-access-modal__role-type:first-of-type .cds--label {
margin: 0;
}
.cpc--context-edit-access__accessgroup {
padding-bottom: 2rem;
}
.cpc--context-edit-access__accessgroup-heading {
font-size: 1rem;
font-weight: 600;
letter-spacing: 0;
line-height: 1.375em;
margin-bottom: 0.375rem;
}
.cpc--context-edit-access__accessgroup-helptext, .cpc--context-edit-access__accessgroup-pubaccess-helptext {
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
}
.cpc--context-edit-access__accessgroup-helptext {
margin-bottom: 1rem;
}
.cpc--context-edit-access__accessgroup-label {
margin-bottom: 0;
}
.cpc--context-edit-access__accessgroup-selecteditem {
align-items: center;
display: flex;
max-width: 50%;
min-height: 2rem;
}
@media screen and (max-width: 671px) {
.cpc--context-edit-access__accessgroup-selecteditem {
max-width: 100%;
padding-right: 0;
}
}
.cpc--context-edit-access__accessgroup-selecteditem-name {
flex-grow: 1;
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
padding-right: 1rem;
}
.cpc--context-edit-access__accessgroup-selecteditem-tag {
flex-shrink: 0;
}
.cpc--context-edit-access__accessgroup-selecteditem-tag .cpc--tagmap__popup {
width: 28rem;
}
.cpc--context-edit-access-confirmation-modal__accessgroup-label {
font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
font-weight: var(--cds-heading-compact-01-font-weight, 600);
letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-heading-compact-01-line-height, 1.28572);
margin: 1rem 0 0.5rem;
}
.cpc--context-edit-access-confirmation-modal__accessgroup-listitem {
margin-bottom: 0.25rem;
}
.cpc--integrations-card {
overflow: hidden;
}
.cpc--integrations-card .cpc--card__body, .cpc--integrations-card__body-content {
display: flex;
justify-content: space-between;
}
.cpc--integrations-card__body-content {
flex-direction: column;
}
.cpc--integrations-card__description {
color: var(--cds-text-secondary, #525252);
flex-grow: 1;
font-size: var(--cds-label-01-font-size, 0.75rem);
font-weight: var(--cds-label-01-font-weight, 400);
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
line-height: var(--cds-label-01-line-height, 1.33333);
}
.cpc--integrations-container .cpc--data-table, .cpc--integrations-container .cpc--integrations-card {
margin-bottom: 1rem;
}
.cpc--integrations-container .cds--label {
margin-left: 1rem;
}
.cpc--integrations-container .cpc--icon-container {
display: flex;
}
.cpc--integrations-container .cpc--icon-container__icon {
flex-shrink: 0;
margin-right: 0.5rem;
}
.cpc--integrations-container .link-with-icon {
margin-left: 1rem;
margin-right: 0.3rem;
vertical-align: top;
}
.cpc--kpassociatekeycard-container .cpc--side-panel__progress-indicator {
margin-bottom: 1rem;
}
.cpc--kpassociatekeycard-container .cpc--kpassociatekeycard {
flex-direction: row;
}
.cpc--kpassociatekeycard-container .cpc--kpassociatekeycard .cpc--kpassociatekeycard-icon {
margin-left: 1rem;
margin-top: 1rem;
}
.cpc--kpassociatekeycard-container .cpc--kpassociatekeycard .cpc--kpassociatekeycard-body {
margin-top: 1rem;
}
.cpc--kpassociatekeycard-container .cpc--kpassociatekeycard .cpc--kpassociatekeycard-header-and-body {
width: 100%;
}
.cpc--kpassociatekeycard-container .cpc--kpassociatekeycard .cpc--kpassociatekeycard-header-and-body .cpc--card__body {
padding-top: 0;
}
.cpc--kpassociatekeycard-container .kp--keyencryption-servicetiles {
padding-bottom: 2rem;
}
.cpc--kpassociatekeycard-container .kp--keyencryption-servicetiles .kp--keyencryption-servicetile {
height: 100%;
}
.cpc--kpassociatekeycard-container .kp--keyencryption-servicetiles .kp--keyencryption-servicetile .cds--tile-content {
display: flex;
flex-direction: column;
margin-bottom: 1rem;
}
.cpc--kpassociatekeycard-container .kp--keyencryption-servicetiles .kp--keyencryption-servicetile .cds--tile-content .kp--tile-title {
font-weight: 600;
margin-bottom: 1rem;
}
.cpc--kpassociatekeycard-container .kp--keyencryption-servicetiles > div {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.cpc--kpassociatekeycard-container .kp--keyencryption-servicetiles > div > div {
width: 49%;
}
.cpc--kpassociatekeycard-container .kp-provisioning-noneditable-fields .cds--label {
margin-bottom: 0.5rem;
}
.cpc--kpassociatekeycard-container .kp-provisioning-noneditable-fields .cds--link {
margin-top: 0.25rem;
}
.cpc--kpassociatekeycard-container .kp-provisioning-noneditable-fields .kp-provisioning-noneditable-field {
display: flex;
flex-direction: column;
}
.cpc--kpassociatekeycard-container .kp-provisioning-noneditable-fields .kp-provisioning-noneditable-field span {
font-size: 14px;
}
.cpc--kpassociatekeycard-container .kp-provisioning-editable-fields {
display: flex;
flex-direction: column;
}
.cpc--kpassociatekeycard-container .kp-provisioning-editable-fields .kp-provisioning-editable-field-row {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.cpc--kpassociatekeycard-container .kp-provisioning-editable-fields .kp-provisioning-editable-field-row .kp-provisioning-editable-field {
width: calc(50% - 0.5rem);
}
.cpc--kpassociatekeycard-container .kp-provisioning-editable-fields .kp-provisioning-editable-field-row:first-child {
margin-top: 1rem;
}
.cpc--kpassociatekeycard-container .kp-provisioning-editable-fields .kp-provisioning-editable-field-row:nth-child(2) {
margin-top: 2rem;
}
.cpc--kpassociatekeycard-container .kp--kpinstancesection {
padding-bottom: 4rem;
}
.cpc--kpassociatekeycard-container .kp--kpinstancesection .kp--kpinstancesection-description {
font-size: 14px;
margin-bottom: 1.5rem;
}
.cpc--kpassociatekeycard-container .kp--kpinstancesection .kp--kpinstancesection-description > span {
font-size: 14px;
margin-right: 0.25rem;
}
.cpc--kpassociatekeycard-container .kp--kpinstancesection .kp--kpinstancesection-description .kp--kpinstancesection-createnew {
display: contents;
}
.cpc--kpassociatekeycard-container .kp--hpcsinstancesection {
padding-bottom: 4rem;
}
.cpc--kpassociatekeycard-container .kp--hpcsinstancesection .kp-hpcs-instance-desc {
display: block;
font-size: 14px;
margin-bottom: 1.5rem;
}
.cpc--kpassociatekeycard-container .kp--hpcsinstancesection .hpcs-noinstance-notification {
margin-bottom: 2rem;
}
.cpc--kpassociatekeycard-container .kp--hpcsinstancesection .kp--hpcsrefreshinstances-button {
display: contents;
}
.cpc--kpassociatekeycard-container .kp--hpcs-createkey-instructions, .cpc--kpassociatekeycard-container .kp--hpcs-provision-instructions {
display: block;
margin-left: 1.5rem;
margin-top: 0.25rem;
}
.cpc--kpassociatekeycard-container .kp--hpcs-createkey-instructions .cds--btn, .cpc--kpassociatekeycard-container .kp--hpcs-provision-instructions .cds--btn {
display: contents;
}
.cpc--kpassociatekeycard-container .kp--createkey-input-description {
line-height: 1.125rem;
margin-bottom: 1rem;
}
.cpc--kpassociatekeycard-container .kp--createkey-input-description span {
font-size: 14px;
}
.cpc--kpassociatekeycard-container .kp--copycell {
align-items: center;
display: flex;
}
.cpc--kpassociatekeycard-container .kp--copycell span {
float: left;
width: 3.875rem;
}
.cpc--kpassociatekeycard-container .kp--copycell .kp--copycell-copybutton {
float: right;
}
.cpc--kpassociatekeycard-container .kp--secondpane-content .kp--kpkeysection {
margin-top: 1rem;
}
.cpc--kpassociatekeycard-container .kp--secondpane-content .kp--kpkeysection .kp-findkey-contentswitcher {
margin-bottom: 1rem;
}
.cpc--kpassociatekeycard-container .kp--secondpane-content .kp--createkey-content {
margin-top: 1rem;
}
.cpc--kpassociatekeycard-container .kp--secondpane-content .kp--createkey-content .kp--createkey-contentswitcher {
margin-bottom: 1rem;
margin-top: 1rem;
}
.cpc--kpassociatekeycard-container .kp--secondpane-content .kp--createkey-content .kp--createkey-aliases-input, .cpc--kpassociatekeycard-container .kp--secondpane-content .kp--createkey-content .kp--createkey-desc-input, .cpc--kpassociatekeycard-container .kp--secondpane-content .kp--createkey-content .kp--createkey-keyring-dropdown, .cpc--kpassociatekeycard-container .kp--secondpane-content .kp--createkey-content .kp--createkey-name-input, .cpc--kpassociatekeycard-container .kp--secondpane-content .kp--createkey-content .kp--createkey-rotationpolicy-numberinput, .cpc--kpassociatekeycard-container .kp--secondpane-content .kp--createkey-content .kp--importkey-payload-textarea {
margin-bottom: 2rem;
}
.cpc--kpassociatekeycard-container .kp--secondpane-content .kp--createkey-content .kp--createkey-aliases-input .kp--createkey-input-title, .cpc--kpassociatekeycard-container .kp--secondpane-content .kp--createkey-content .kp--createkey-desc-input .kp--createkey-input-title, .cpc--kpassociatekeycard-container .kp--secondpane-content .kp--createkey-content .kp--createkey-keyring-dropdown .kp--createkey-input-title, .cpc--kpassociatekeycard-container .kp--secondpane-content .kp--createkey-content .kp--createkey-name-input .kp--createkey-input-title, .cpc--kpassociatekeycard-container .kp--secondpane-content .kp--createkey-content .kp--createkey-rotationpolicy-numberinput .kp--createkey-input-title, .cpc--kpassociatekeycard-container .kp--secondpane-content .kp--createkey-content .kp--importkey-payload-textarea .kp--createkey-input-title {
margin-bottom: 0.5rem;
}
.cpc--kpassociatekeycard-container .kp--secondpane-content .kp--createkey-content .kp--createkey-aliases-input .kp--createkey-input-desc, .cpc--kpassociatekeycard-container .kp--secondpane-content .kp--createkey-content .kp--createkey-desc-input .kp--createkey-input-desc, .cpc--kpassociatekeycard-container .kp--secondpane-content .kp--createkey-content .kp--createkey-keyring-dropdown .kp--createkey-input-desc, .cpc--kpassociatekeycard-container .kp--secondpane-content .kp--createkey-content .kp--createkey-name-input .kp--createkey-input-desc, .cpc--kpassociatekeycard-container .kp--secondpane-content .kp--createkey-content .kp--createkey-rotationpolicy-numberinput .kp--createkey-input-desc, .cpc--kpassociatekeycard-container .kp--secondpane-content .kp--createkey-content .kp--importkey-payload-textarea .kp--createkey-input-desc {
margin-bottom: 1rem;
}
.cpc--kpassociatekeycard-container .kp--secondpane-content .kp--createkey-content .addkeysidepanel--rotateinput, .cpc--kpassociatekeycard-container .kp--secondpane-content .kp--createkey-content .kp-rotationpolicy-warning {
margin-top: 1rem;
}
.cpc--kpassociatekeycard-container .kp--summary-tile {
background-color: var(--cds-layer-02, #fff);
margin-top: 1rem;
}
.cpc--kpassociatekeycard-container .kp--summary-tile-header {
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
}
.cpc--kpassociatekeycard-container .kp--summary-tile-header .kp--summary-tile-associated {
display: flex;
}
.cpc--kpassociatekeycard-container .kp--summary-tile-header .kp--summary-tile-associated svg {
color: var(--cds-support-success, #24a148);
margin-right: 0.5rem;
}
.cpc--kpassociatekeycard-container .kp-summary-body {
margin-bottom: 2rem;
}
.cpc--kpassociatekeycard-container .kp-summary-body .kp-summary-title {
display: block;
font-size: 14px;
font-weight: 600;
padding-bottom: 1rem;
}
.cpc--kpassociatekeycard-container .kp--instance-summary .kp--instance-summary-desc {
align-items: center;
display: flex;
flex-direction: row;
font-size: 14px;
justify-content: space-between;
}
.cpc--kpassociatekeycard-container .kp--instance-summary .kp--instance-details {
display: flex;
flex-direction: row;
margin-top: 1rem;
}
.cpc--kpassociatekeycard-container .kp--instance-summary .kp--instance-details .kp--instance-detail-item {
display: flex;
flex-direction: column;
width: 50%;
}
.cpc--kpassociatekeycard-container .kp--instance-summary .kp--instance-details .kp--instance-detail-item span {
font-size: 14px;
}
.cpc--kpassociatekeycard-container .kp--instance-summary .kp--instance-details .kp--detail-label {
margin-bottom: 0.25rem;
}
.cpc--kpassociatekeycard-container .kp--s2screation-card {
margin-bottom: 2rem;
}
.cpc--kpassociatekeycard-container .kp--s2screation-card .kp--s2s-description a {
margin-left: 0.25rem;
}
.cpc--kpassociatekeycard-container .kp--s2screation-card .kp--s2s-notification {
margin-bottom: 1rem;
margin-top: 1rem;
}
.cpc--kpassociatekeycard-container .kp--s2screation-card .kp--s2s-info-tile {
background-color: var(--cds-layer-02, #fff);
margin-bottom: 1rem;
margin-top: 1rem;
}
.cpc--kpassociatekeycard-container .kp--s2screation-card .kp--s2s-authorize-btn {
margin-top: 1rem;
}
.cpc--kpassociatekeycard-container .kp--s2screation-card .kp--s2screation-custom {
background-color: var(--cds-layer-02, #fff);
display: flex;
flex-direction: column;
padding: 1rem;
}
.cpc--kpassociatekeycard-container .kp--s2screation-card .kp--s2screation-custom .kp--s2screation-custom-btn {
margin-top: 1rem;
}
.cpc--location-readiness-card .stacked-row:not(:last-child) {
border-bottom: 1px solid var(--cds-border-subtle);
}
.cpc--location-readiness-card .cpc--card__header {
background-color: var(--cds-layer-accent-01, #e0e0e0);
padding-bottom: 1rem;
}
.cpc--location-readiness-card .provision-row-text {
flex-grow: 1;
}
.cpc--location-readiness-card .provision-row-action {
flex-grow: 0;
margin: auto auto auto 2rem;
}
.cpc--location-readiness-card .provision-row-action .cds--btn--sm {
padding-right: 0.75rem;
width: max-content;
}
.cpc--location-readiness-card .provision-row-title {
display: flex;
font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
font-weight: var(--cds-heading-compact-01-font-weight, 600);
letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-heading-compact-01-line-height, 1.28572);
}
.cpc--location-readiness-card .provision-row-subtitle {
display: inline;
}
.cpc--location-readiness-card .provision-row-icon-danger {
fill: var(--cds-support-error, #da1e28);
}
.cpc--location-readiness-card .provision-row-icon-success {
fill: var(--cds-support-success, #24a148);
}
.cpc--location-readiness-card .provision-row-icon-warning {
fill: var(--cds-support-warning, #f1c21b);
}
.cpc--location-readiness-card .provision-row-icon-info {
fill: var(--cds-support-info, #0043ce);
}
.cpc--logging-button__content {
align-items: center;
display: flex;
}
.cpc--logging-button__content .cds--btn + .cds--toggletip {
margin-left: 0.75rem;
}
.cpc--logging-card > .cpc--card__body {
display: flex;
justify-content: space-between;
}
.cpc--logging-card > .cpc--card__body > .cpc--card__body-content {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.cpc--logging-card > .cpc--card__body > .cpc--card__body-content > p {
color: var(--cds-text-secondary, #525252);
flex-grow: 1;
font-size: var(--cds-caption-01-font-size, 0.75rem);
font-weight: var(--cds-caption-01-font-weight, 400);
letter-spacing: var(--cds-caption-01-letter-spacing, 0.32px);
line-height: var(--cds-caption-01-line-height, 1.33333);
}
.cpc--logging-card .cpc--logging-button > .cds--skeleton {
width: 12rem;
}
.cpc--options-tile {
position: relative;
}
.cpc--options-tile > .cpc--card__body {
padding: 0;
}
.cpc--options-tile .cds--accordion__item {
border: none;
}
.cpc--options-tile .cds--accordion__item .cds--accordion__wrapper {
padding: 0;
}
.cpc--options-tile .cds--accordion__item .cds--accordion__title {
margin-inline-end: 3rem;
padding-right: 4rem;
}
.cpc--options-tile .cds--accordion__item .cds--accordion__content {
padding-inline-end: 1rem;
padding-bottom: 1rem;
}
.cpc--options-tile .cds--accordion__item .cds--accordion__content > div, .cpc--options-tile .cds--accordion__item .cds--accordion__content > p {
margin-top: 1rem;
}
.cpc--options-tile--static .cpc--card__body {
padding-left: 3rem;
}
.cpc--options-tile__header {
padding-bottom: 0.5rem;
padding-top: 0.5rem;
}
.cpc--options-tile__header p {
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
}
.cpc--options-tile__header-with-action {
align-items: center;
display: flex;
justify-content: space-between;
}
.cpc--options-tile__subtitle {
margin-top: 0.25rem;
}
.cpc--options-tile__subtitle .cds--skeleton__text {
margin-bottom: 0;
}
.cpc--options-tile__toggle {
position: absolute;
right: 1rem;
top: 1rem;
z-index: 3;
}
.cpc--options-tile__toggle .cds--toggle__appearance {
column-gap: 0;
}
.cpc--options-tile__footer {
padding-top: 0.5rem;
}
.cpc--options-tile__footer p {
font-size: var(--cds-helper-text-01-font-size, 0.75rem);
letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
line-height: var(--cds-helper-text-01-line-height, 1.33333);
}
.cpc--logging-provision .cds--grid {
max-inline-size: unset;
}
.cpc--logging-provision__instance-selector {
align-items: flex-end;
display: flex;
flex-wrap: wrap;
}
.cpc--logging-provision__instance-selector .cds--dropdown__wrapper {
flex-grow: 1;
}
.cpc--logging-provision__subtitle {
align-items: center;
display: flex;
}
.cpc--logging-provision__subtitle svg {
margin-right: 0.5rem;
}
.cpc--logging-provision__subtitle-success svg {
fill: var(--cds-support-success, #24a148);
}
.cpc--logging-provision__subtitle-error svg {
fill: var(--cds-support-error, #da1e28);
}
.cpc--logging-provision__subtitle-warning svg {
fill: var(--cds-support-warning, #f1c21b);
}
.cpc--logging-config-side-panel h6 {
margin-bottom: 0.75rem;
}
.cpc--logging-config-side-panel h6:not(:first-child) {
margin-top: 1.5rem;
}
.cpc--logging-config-side-panel p {
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
}
.cpc--logging-config-side-panel .cds--skeleton.cds--form-item {
margin-top: 1.5rem;
}
.cpc--logging-config-side-panel .cds--dropdown__wrapper, .cpc--logging-config-side-panel .cds--form-item, .cpc--logging-config-side-panel .cds--tile-group {
margin-bottom: 1rem;
}
.cpc--logging-config-side-panel .cpc--error-state {
margin-top: 1.5rem;
}
.cpc--logging-config-side-panel .cds--actionable-notification {
display: block;
}
.cpc--logging-config-side-panel .cds--actionable-notification .cds--actionable-notification__button-wrapper {
margin-left: 2rem;
}
.cpc--logging-config-side-panel .cds--tile-group > legend + div > div:not(:last-child) {
margin-bottom: 0.5rem;
}
.cpc--logging-target-side-panel p {
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
margin-bottom: 1.5rem;
}
.cpc--logging-target-side-panel .cpc--card {
margin-bottom: 1rem;
}
.cpc--logging-target-side-panel .cpc--card .cds--btn {
margin-top: 1rem;
}
.cpc--logging-target-side-panel__links {
border-top: 1px solid var(--cds-layer-01, #f4f4f4);
margin-top: 1rem;
padding-top: 0.5rem;
}
.cpc--logging-target-side-panel__links a {
margin-top: 0.5rem;
}
.cpc--observe-button .cpc--observe-button__flex {
display: flex;
}
.cpc--observe-button .cpc--observe-button__dropdown-text-overflow {
justify-content: left;
margin-right: 20px;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
.cpc--observe-button .cpc--observe-button__dropdown-right-region {
display: flex;
justify-content: right;
}
.cpc--observe-button .cpc--observe-button__flex-vertical-center {
align-items: center;
display: flex;
}
.cpc--observe-button .cpc--observe-button__padding-top-24 {
padding-top: 24px;
}
.cpc--observe-button .cpc--observe-button__flex-responsive {
align-items: center;
display: flex;
}
.cpc--observe-button .cpc--observe-button__flex-responsive > .cds--btn {
white-space: nowrap;
}
.cpc--observe-button .cpc--observe-button__flex-responsive .cpc--observe-error-text {
font-size: var(--cds-label-02-font-size, 0.875rem);
font-weight: var(--cds-label-02-font-weight, 400);
letter-spacing: var(--cds-label-02-letter-spacing, 0.16px);
line-height: var(--cds-label-02-line-height, 1.28572);
}
.cpc--observe-button .cds--toggletip-button {
margin-left: 0.5rem;
}
.cpc--observe-button .cpc--observe-button__flex-responsive .cds--assistive-text {
max-width: 250px;
z-index: 5000 !important;
}
.cpc--observe-overflow-menu-item__launch-icon {
display: flex;
margin-left: 1rem;
}
.cpc--observe-overflow-menu-item__launch-icon svg {
margin-bottom: auto;
margin-top: auto;
}
.cds--overflow-menu-options:has(.cpc--observe-overflow-menu-item) {
width: max-content;
}
.cds--overflow-menu-options:has(.cpc--observe-overflow-menu-item) .cds--overflow-menu-options__btn {
display: flex;
justify-content: space-between;
max-width: none;
}
.cpc--observe-supertenancy-modal .cpc--observe-supertenancy-modal__child {
min-height: 152px;
padding-bottom: 0 !important;
}
.cpc--observe-supertenancy-modal .cpc--observe-supertenancy-modal__notification {
opacity: 0;
transition-duration: 154ms;
transition-timing-function: cubic-bezier(0.2, 0, 1, 0.9);
width: 100%;
}
.cpc--observe-supertenancy-modal .cpc--observe-button__flex {
display: flex;
}
.cpc--observe-supertenancy-modal .cpc--observe-supertenancy-modal__notification > div {
margin-bottom: 0;
}
.cpc--observe-supertenancy-modal .cpc--observe-supertenancy-modal__confirmation, .cpc--observe-supertenancy-modal .cpc--observe-supertenancy-modal__dropdown-row {
padding-top: 24px;
}
@media (max-width: 1056px) {
.cpc--observe-supertenancy-modal .cpc--observe-supertenancy-modal__instance-dropdown {
padding-top: 24px;
}
}
.cpc--display-for-project-summary-heading-label-text {
color: var(--cds-text-secondary, #525252);
font-size: var(--cds-label-01-font-size, 0.75rem);
font-weight: var(--cds-label-01-font-weight, 400);
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
line-height: var(--cds-label-01-line-height, 1.33333);
padding-bottom: 4px;
}
.cpc--display-for-project-summary-container {
height: auto;
width: auto;
}
.cpc--display-for-project-summary-skeleton {
height: 2rem;
}
.cpc--display-for-project-summary-content {
color: var(--cds-text-primary, #161616);
}
.cpc--display-for-project-summary-content, .cpc--display-for-project-summary-link {
font-size: var(--cds-body-01-font-size, 0.875rem);
font-weight: var(--cds-body-01-font-weight, 400);
letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
line-height: var(--cds-body-01-line-height, 1.42857);
}
.cpc--display-for-project-summary-link {
text-decoration: none;
}
.cpc--display-for-project-summary-error-text {
font-size: var(--cds-body-01-font-size, 0.875rem);
font-weight: var(--cds-body-01-font-weight, 400);
letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
line-height: var(--cds-body-01-line-height, 1.42857);
opacity: 0.5;
}
.cpc--configurations-modal .configurations-modal-left-panel {
padding-top: 1rem;
}
.cpc--configurations-modal .cds--modal-container {
min-height: 80%;
}
@media (min-width: 82rem) {
.cpc--configurations-modal .cds--modal-container {
width: 90%;
}
}
.cpc--configurations-modal .cpc--catalog-tile .tile-image {
height: 1rem;
width: 1rem;
}
.cpc--configurations-modal .cds--progress-label {
max-inline-size: 15rem;
}
.cpc--configurations-modal .progress-indicator-with-content {
height: 100%;
}
.cpc--configurations-modal .cpc--left-panel-layout__main-content {
padding-left: 2rem;
padding-top: 2rem;
}
.cpc--configurations-modal .selection-content > p {
font-size: var(--cds-body-02-font-size, 1rem);
font-weight: var(--cds-body-02-font-weight, 400);
letter-spacing: var(--cds-body-02-letter-spacing, 0);
line-height: var(--cds-body-02-line-height, 1.5);
padding-bottom: 1.5rem;
}
.cpc--configurations-modal .config-dropdown, .cpc--configurations-modal .config-radio-group {
padding: 1.5rem 0;
}
.cpc--configurations-modal .cds--radio-button-group > .cds--label {
margin-bottom: 1rem !important;
}
.cpc--configurations-modal .cds--side-nav__navigation {
background-color: var(--cds-layer-01, #f4f4f4);
max-width: 13.9rem;
}
.cpc--configurations-modal .cds--radio-button-wrapper .cds--radio-button__label, .cpc--configurations-modal .cds--radio-button-wrapper .label-tooltip-container {
align-items: center;
display: flex;
}
.cpc--environments-dropdown .dropdown-loading {
max-width: 25rem;
width: 100%;
}
.cpc--projects-modal .cds--side-nav {
margin-top: 3.3rem;
max-height: 79.3%;
}
.cpc--projects-modal .cds--side-nav__icon > svg {
fill: #525252;
height: 1rem;
width: 1rem;
}
.cpc--projects-modal__modal .cds--modal-container {
min-height: 80%;
}
@media (min-width: 80rem) {
.cpc--projects-modal__modal .cds--modal-container {
width: 90%;
}
}
.cpc--projects-modal__modal .c4p--action-set .c4p--action-set__action-button .cds--inline-loading {
top: unset;
}
.cpc--projects-modal__modal .c4p--empty-state {
padding: 2rem;
}
.cpc--projects-modal__modal .c4p--empty-state .cds--link {
font-size: 0.75rem;
}
.cpc--projects-modal__modal .cds--side-nav__item .cds--side-nav__icon:not(.cds--side-nav__submenu-chevron) {
margin-right: 1.5rem;
}
.cpc--projects-modal__modal .cds--side-nav__item .cds--side-nav__icon {
align-items: center;
display: flex;
flex: 0 0 1rem;
justify-content: center;
}
.cpc--projects-modal__modal .cds--side-nav__item svg {
fill: var(--cds-icon-secondary, #525252);
}
.cpc--projects-modal__modal .cds--side-nav__item .cds--side-nav__link--current svg {
fill: var(--cds-icon-primary, #161616);
}
.cpc--projects-modal__modal .cpc--message {
padding-left: 1rem;
}
.cpc--projects-modal__modal .inline-text-with-loading {
align-items: center;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.cpc--projects-modal__modal .inline-text-with-loading .loading-text {
min-width: fit-content;
}
.cpc--projects-modal__modal-content .cds--form-item {
margin-bottom: 2rem;
max-width: 25rem;
}
.cpc--projects-modal__modal-content .cds--list-box__wrapper {
margin-bottom: 1.5rem;
max-width: 25rem;
}
.cpc--projects-modal__modal-content .cds--inline-notification {
margin: 0;
max-width: 100%;
}
.cpc--projects-modal__modal-div-options {
display: block;
padding-left: 2rem;
padding-top: 1rem;
}
@media (min-width: 80.5rem) {
.cpc--projects-modal__modal-div-options {
display: none;
}
}
.cpc--projects-modal__modal-options.cds--radio-button-group {
padding-top: 1rem;
}
.cpc--projects-modal__create-section h3 {
fill: var(--cds-text-primary, #161616);
color: var(--cds-text-primary, #161616);
padding: 1.5rem;
}
.cpc--projects-modal__form {
display: flex;
flex-direction: column;
min-height: 100%;
padding-left: 1.5rem;
}
@media (min-width: 80.5rem) {
.cpc--projects-modal__form {
flex-direction: row;
}
}
.cpc--projects-modal__form .cds--fieldset {
max-width: 35rem;
min-width: fit-content;
width: 100%;
}
.cpc--projects-modal__form legend {
display: none;
}
.cpc--projects-modal__form-group-one {
padding-right: 8rem;
}
.cpc--projects-modal__form-group-two {
padding-right: 1.5rem;
}
.cpc--projects-modal__project-tools-text {
fill: var(--cds-text-secondary, #525252);
color: var(--cds-text-secondary, #525252);
font-size: 0.75rem;
max-width: 25rem;
padding-bottom: 1.5rem;
}
.cpc--projects-modal__project-tools-text .cds--link {
font-size: 0.75rem;
}
.cpc--projects-modal__add-config-form {
padding: 0 1.5rem;
}
.cpc--projects-modal__add-config-form .cpc--projects-modal__project-select {
margin-top: 1rem;
}
.cpc--projects-modal__location-label-text {
display: flex;
justify-content: center;
}
.cpc--projects-modal__no-permission-list {
padding-bottom: 1rem;
padding-top: 1rem;
}
.cpc--projects-modal__authorizations-card {
background-color: var(--cds-layer-02, #fff);
padding-bottom: 1.5rem;
padding-top: 1.5rem;
}
.cpc--projects-modal__authorizations-card svg {
height: 4rem;
width: 4rem;
}
.cpc--projects-modal__authorizations-card p {
color: var(--cds-text-secondary, #525252);
font-size: var(--cds-body-01-font-size, 0.875rem);
font-weight: var(--cds-body-01-font-weight, 400);
letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
line-height: var(--cds-body-01-line-height, 1.42857);
padding-left: 1rem;
padding-right: 1rem;
}
.cpc--projects-modal__no-auth-button {
margin-bottom: 1.5rem;
margin-left: 1rem;
margin-top: 1.5rem;
width: fit-content;
}
.cpc--projects-modal__details-heading {
font-size: var(--cds-heading-03-font-size, 1.25rem);
font-weight: var(--cds-heading-03-font-weight, 400);
letter-spacing: var(--cds-heading-03-letter-spacing, 0);
line-height: var(--cds-heading-03-line-height, 1.4);
}
.cpc--projects-modal .edit-config-btn-post {
margin-bottom: 1rem;
margin-left: 1rem;
}
.cpc--projects-modal .cpc--projects-modal__modal-content .cds--dropdown, .cpc--projects-modal .cpc--projects-modal__modal-content .cds--dropdown-list, .cpc--projects-modal .cpc--projects-modal__modal-content .cds--list-box input[role=combobox], .cpc--projects-modal .cpc--projects-modal__modal-content .cds--multi-select, .cpc--projects-modal .cpc--projects-modal__modal-content .cds--select-input, .cpc--projects-modal .cpc--projects-modal__modal-content .cds--text-area, .cpc--projects-modal .cpc--projects-modal__modal-content .cds--text-input {
background-color: var(--cds-field-01, #f4f4f4) !important;
}
.cpc--projects-modal .progress-indicator-with-content .catalog-tile-list {
display: flex;
flex-flow: row wrap;
gap: 2rem;
}
.cpc--projects-modal .progress-indicator-with-content .catalog-tile-list .tile-image {
height: 1.375rem;
margin-right: 0.75rem;
padding: 3px;
width: 1.375rem;
}
.catalog-tile-list .tile-image .cds--dark-theme .cpc--projects-modal .progress-indicator-with-content {
background-color: #fff;
border: 1px solid var(--cds-border-subtle-01, #c6c6c6);
border-radius: 4px;
}
#project-create__location-select, #project-create__resourcegroup-select {
caret-color: transparent;
}
.cpc--configurations-modal .cds--modal-header__heading, .cpc--projects-modal .cds--modal-header__heading {
border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
font-size: var(--cds-heading-04-font-size, 1.75rem);
font-weight: var(--cds-heading-04-font-weight, 400);
letter-spacing: var(--cds-heading-04-letter-spacing, 0);
line-height: var(--cds-heading-04-line-height, 1.28572);
margin: 0;
padding: 1.5rem 2rem;
}
.cpc--configurations-modal .cds--modal-footer.cds--btn-set, .cpc--projects-modal .cds--modal-footer.cds--btn-set {
align-items: stretch;
background-color: var(--cds-layer-01, #f4f4f4);
border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
justify-content: flex-end;
}
.cpc--configurations-modal .cds--modal-footer.cds--btn-set button, .cpc--projects-modal .cds--modal-footer.cds--btn-set button {
flex: 0 1 25%;
max-width: 14.5rem;
}
.cpc--configurations-modal .cds--modal-header, .cpc--projects-modal .cds--modal-header {
margin-bottom: 0;
}
.cpc--configurations-modal .cpc--left-panel-layout, .cpc--projects-modal .cpc--left-panel-layout {
height: 100%;
padding: 0;
}
.cpc--configurations-modal .cpc--left-panel-layout .cds--row, .cpc--projects-modal .cpc--left-panel-layout .cds--row {
height: inherit;
}
.cpc--configurations-modal .cds--modal-content, .cpc--projects-modal .cds--modal-content {
background-color: var(--cds-background, #fff);
margin-bottom: 0;
padding-bottom: 0;
padding-top: 0;
}
.cpc--configurations-modal .cpc--left-panel-layout__left-panel, .cpc--projects-modal .cpc--left-panel-layout__left-panel {
background-color: var(--cds-layer-01, #f4f4f4);
}
@media (max-width: 80.5rem) {
.cpc--configurations-modal .cpc--left-panel-layout__left-panel, .cpc--projects-modal .cpc--left-panel-layout__left-panel {
display: none;
}
}
.cpc--configurations-modal .inline-text-with-loading, .cpc--projects-modal .inline-text-with-loading {
align-items: center;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.cpc--configurations-modal .inline-text-with-loading .loading-text, .cpc--projects-modal .inline-text-with-loading .loading-text {
min-width: fit-content;
}
.cpc--ref-resolver-picker .cds--css-grid {
padding-left: 0;
padding-right: 0;
}
.cpc--ref-resolver-picker .cds--css-grid .cds--css-grid-column > div {
padding-top: 1rem;
}
.cpc--ref-resolver-picker__description {
font-size: 0.875rem;
}
.cpc--ref-resolver-picker__filter_toggle {
padding-top: 1.15rem;
}
.cpc--ref-resolver-picker__hidden_row {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s cubic-bezier(0.4, 0.14, 0.3, 1);
}
.cpc--ref-resolver-picker__hidden_row.show {
max-height: 10rem;
overflow: visible;
}
.cpc--ref-resolver-picker .cpc--side-panel--xl {
max-width: 45rem;
}
.cpc--secret-input__multiline-password-container {
align-items: center;
display: flex;
}
.cpc--secret-input__multiline-password-overlay {
font-size: 0.875rem;
margin-bottom: 0;
min-width: 10rem;
}
.cpc--secret-input__multiline-password-edit-button.cds--btn {
align-items: center;
color: var(--cds-icon-secondary, #525252);
margin-left: 0.25rem;
padding-left: 0.4375rem;
padding-right: 0.4375rem;
}
.cpc--secret-input__tag-container {
align-items: center;
display: flex;
gap: 0.25rem;
}
.cpc--secret-input__tag-container .icon-div {
height: 1rem;
width: 1rem;
}
.cpc--secret-input__value-input {
display: flex;
position: relative;
}
.cpc--secret-input__ref-picker .cpc--secret-input__value-input .cds--password-input-wrapper .cds--text-input__invalid-icon {
right: 5rem;
}
.cpc--secret-input__ref-picker .cpc--secret-input__value-input .cds--password-input-wrapper .cds--text-input--password__visibility__toggle.cds--btn.cds--tooltip__trigger {
right: 2rem;
}
.cpc--secret-input__ref-picker .cpc--secret-input__value-input .cds--password-input-wrapper .cds--text-input--invalid {
padding-right: 7rem;
}
.cpc--secret-input__ref-picker .cpc--secret-input__value-input .cds--password-input-wrapper .cds--password-input {
padding-right: 4.5rem;
}
.cpc--secret-input__value-input .cds--text-input-wrapper + .cds--popover-container {
position: absolute;
right: 0;
}
.cpc--secret-input__value-input .cpc--secret-input__ref-button.cds--btn.cds--btn--icon-only {
align-items: center;
padding-block: 0;
}
.cpc--secret-input__value-input .cpc--secret-input__ref-button.cds--btn.cds--btn--icon-only:hover {
background-color: transparent;
}
.cpc--secret-input__value-input .cpc--secret-input__ref-button.cds--btn.cds--btn--icon-only svg {
fill: var(--cds-icon-secondary, #525252);
}
.cpc--secret-input__value-tag {
background-color: var(--cds-field);
display: flex;
height: 2.5rem;
padding: 0 3rem 0 0.5rem;
position: relative;
}
.cpc--secret-input__value-tag .cds--popover-container {
position: absolute;
right: 0;
}
.cpc--secret-input__value-tag .cds--tag.cds--tag--filter {
border-radius: 0.25rem;
}
.cpc--secret-input__value-tag .cpc--secret-input__ref-button.cds--btn.cds--btn--icon-only:hover {
background-color: transparent;
}
.cpc--secret-input__value-tag .cpc--secret-input__ref-button.cds--btn.cds--btn--icon-only svg {
fill: var(--cds-icon-secondary, #525252);
}
.cpc--resource-group-selector {
align-items: flex-start;
display: flex;
}
.cpc--resource-group-selector__inline-notification {
align-items: center;
display: flex;
}
.cpc--resource-group-selector .cds--dropdown__wrapper {
flex-grow: 1;
}
.cpc--resource-group-selector .cds--dropdown__wrapper + .cds--popover-container {
margin-top: calc(1.5rem + 1.5px);
}
.cpc--resource-tag-area {
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
margin-bottom: 0.5rem;
max-height: 7.188rem;
position: relative;
width: 100%;
}
.cpc--resource-tag-area .cds--toggletip-label {
font-size: var(--cds-label-01-font-size, 0.75rem);
font-weight: var(--cds-label-01-font-weight, 400);
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
line-height: var(--cds-label-01-line-height, 1.33333);
}
.cpc--resource-tag-area .cds--toggletip {
top: 0.125rem;
}
.cpc--resource-tag-area .cds--toggletip-content {
max-width: 20rem;
}
.cpc--resource-tag-area .cds--toggletip-content p {
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
}
.cpc--resource-tag-area__menu-wrap {
position: relative;
width: 100%;
z-index: 7000;
}
.cpc--resource-tag-area__menu-wrap .cds--tag svg {
margin-right: 8px;
vertical-align: middle;
}
.cpc--resource-tag-area > .cpc--resource-tag-area__content {
background-color: var(--cds-field-01, #f4f4f4);
box-shadow: 0 1px 0 0 var(--cds-border-strong-01, #8d8d8d);
cursor: text;
display: flex;
flex-flow: row wrap;
margin-bottom: 0;
margin-top: 0.5rem;
max-height: 5rem;
min-width: 100%;
overflow-y: auto;
padding: 0.5rem 0.8125rem;
width: 100%;
}
.cpc--resource-tag-area > .cpc--resource-tag-area__content.cpc--resource-tag-area__content-focused {
box-shadow: 0 0 0 2px var(--cds-focus, #0f62fe);
}
.cpc--resource-tag-area > .cpc--resource-tag-area__content.cpc--text-input--light {
background-color: var(--cds-field-02, #fff);
}
.cpc--resource-tag-area > .cpc--resource-tag-area__content .cds--form-item {
display: inline-block;
margin: 0;
min-width: 9.375rem;
width: 100%;
}
.cpc--resource-tag-area > .cpc--resource-tag-area__content .cpc--resource-tag-area__tag-input-wrap {
flex-grow: 1;
order: 2;
}
.cpc--resource-tag-area > .cpc--resource-tag-area__content .cpc--resource-tag-area__tag-input-wrap .cds--label {
left: 0;
position: absolute;
top: 0;
}
.cpc--resource-tag-area > .cpc--resource-tag-area__content .cds--text-input {
background-color: transparent;
border: none;
box-shadow: none;
font-size: 0.875rem;
height: 1.75rem;
min-height: 2rem;
min-width: 15rem;
outline: 0;
padding: 0.0625rem 0.1875rem 0 !important;
}
.cpc--resource-tag-area > .cpc--resource-tag-area__content .cds--text-input:-ms-input-placeholder {
color: var(--cds-toggle-off, #8d8d8d);
opacity: 1;
}
.cpc--resource-tag-area > .cpc--resource-tag-area__content .cds--text-input::placeholder {
color: var(--cds-toggle-off, #8d8d8d);
opacity: 1;
}
.cpc--resource-tag-area > .cpc--resource-tag-area__content .cds--text-input:focus {
border: none;
box-shadow: none;
outline: none;
}
.cpc--resource-tag-area > .cpc--resource-tag-area__content .cds--tag .cds--tag__label svg {
margin-right: 8px;
vertical-align: middle;
}
.cpc--resource-tag-area > .cpc--resource-tag-area__content .cpc--resource-tag-area__aria-description-hidden {
display: none;
}
.cpc--resource-tag-area .cpc--resource-tag-area__menu {
background-color: var(--cds-layer-02, #fff);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
left: 0;
margin-top: 2px;
max-height: 7.5rem;
overflow-y: auto;
position: absolute;
width: 100%;
}
.cpc--resource-tag-area .cpc--resource-tag-area__menu .cpc--resource-tag-area__menu-item {
align-items: center;
cursor: pointer;
display: flex;
padding: 0.5rem 1rem;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.cpc--resource-tag-area .cpc--resource-tag-area__menu .cpc--resource-tag-area__menu-item.cpc--resource-tag-area__menu-item--highlighted, .cpc--resource-tag-area .cpc--resource-tag-area__menu .cpc--resource-tag-area__menu-item:hover {
background-color: var(--cds-layer-accent-01, #e0e0e0);
}
.cpc--tag-tooltip-example {
color: var(--cds-text-inverse, #fff);
font-family: var(--cds-code-01-font-family, "IBM Plex Mono", system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", monospace);
font-family: IBM Plex Mono, monospace;
font-size: var(--cds-code-01-font-size, 0.75rem);
font-weight: var(--cds-code-01-font-weight, 400);
letter-spacing: var(--cds-code-01-letter-spacing, 0.32px);
line-height: var(--cds-code-01-line-height, 1.33333);
padding: 0.125rem;
}
.cpc--resource-tag-area .cpc--resource-tag-area-invalid {
color: var(--cds-support-error, #da1e28);
display: inline-block;
font-size: 0.6875rem;
font-weight: 400;
height: 1.563rem;
line-height: 0.875rem;
margin: 0.5rem 0 0;
max-height: 1.563rem;
}
.cpc--resource-tag-area .cds--form-requirement + .cpc--resource-tag-area__content {
box-shadow: 0 1px 0 0 var(--cds-support-error, #da1e28);
}
.cpc--resource-tag-area .cds--form-requirement + .cpc--resource-tag-area__content.cpc--resource-tag-area__content-focused .cds--label {
color: var(--cds-support-error, #da1e28);
}
.cpc--resource-tag-area.cpc--resource-tag-area__readonly {
background-color: transparent;
border: none;
}
.cpc--resource-tag-list .cds--skeleton__text {
min-width: 10rem;
}
.cpc--resource-tag-modal .cpc--resource-tag-area-skeleton {
margin-bottom: 0;
margin-top: 30px;
width: 100%;
}
.cpc--resource-tag-modal .cpc--resource-tag-area-skeleton p {
height: 70px;
}
.cpc--resource-tag-modal .cpc--tag-area-container {
margin-bottom: 6px;
order: 2;
}
.cpc--resource-tag-modal .cpc--tag-area-container .cpc--resource-tags {
margin-bottom: 6px;
}
.cpc--resource-tag-modal .cpc--tag-area-container .cpc--resource-tags .cpc--tag-area-skeleton {
margin-bottom: 20px;
}
.cpc--resource-tag-modal .cpc--tag-area-container .cpc--access-tags {
margin-bottom: 6px;
}
.cpc--resource-tag-modal .cpc--resource-tag-modal__subtitle {
font-size: 0.875rem !important;
margin-bottom: 1.5rem;
order: 1;
word-break: break-all;
}
.cpc--resource-tag-modal .cpc--resource-tag-modal__resourcename {
font-weight: 600;
}
.cpc--resource-tag-modal .cds--modal-container {
min-height: 358px;
width: 655px;
}
.cpc--resource-tag-modal .cds--modal-content {
display: flex;
flex-direction: column;
margin-bottom: 0.875rem;
overflow-y: visible;
position: relative;
}
.cpc--resource-tag-modal .cpc--resource-tag-modal-error {
color: var(--cds-support-error, #da1e28);
font-size: 0.688rem;
line-height: 0.875rem;
min-height: 1.75rem;
order: 3;
}
.cpc--resource-tag-modal .cpc--resource-tag-modal__restrict-content {
margin-top: 1rem;
max-width: 560px;
}
.cpc--resource-tag-modal .cpc--resource-tag-modal__restrict-content .cds--checkbox-wrapper {
margin-bottom: 0.3rem;
}
.cpc--tag-modal .cpc--tag-area__menu-wrap {
bottom: 0;
position: absolute;
}
.cpc--tag-modal .cds--modal__buttons-container {
display: flex;
justify-content: flex-end;
}
.cpc--tag-modal .cds--modal__buttons-container button {
min-width: 80px;
}
.cpc--resource-tag-modal .cpc--resource-tag-area > .cpc--resource-tag-area__content {
background-color: var(--cds-field-02, #fff);
}
.cpc--resource-tag-modal .cpc--resource-tag-modal-error__visible + .cpc--resource-tag-area .cpc--resource-tag-area__content {
box-shadow: 0 2px 0 0 var(--cds-support-error, #da1e28);
}
.cpc--resource-tag-modal .cpc--resource-tag-modal-error__visible + .cpc--resource-tag-area .cpc--resource-tag-area__content.cpc--resource-tag-area__content-focused .cds--label {
color: var(--cds-support-error, #da1e28);
}
@media (-ms-high-contrast: active), (-ms-high-contrast: none) {
.cds--tag-modal .cpc--resource-tag-area__menu {
transform: translate(-100%);
}
}
.cpc--tag-tooltip-popup {
z-index: 9100;
}
.cpc--sat-location-create-side-panel .storage-inline-notification {
align-items: center;
display: flex;
}
.cpc--sat-location-create-side-panel .sidepanel-description {
color: var(--cds-text-primary, #161616);
}
.cpc--sat-location-create-side-panel .zone-row {
margin-top: 0;
}
.cpc--sat-location-create-side-panel .zone-row .zone-column:not(:first-child) {
padding-inline-start: 0.5rem;
}
@media (max-width: 19.98rem) {
.cpc--sat-location-create-side-panel .zone-row .zone-column:not(:first-child) {
padding-top: 1rem;
}
}
.cpc--sat-location-create-side-panel .zone-row .zone-column:not(:last-child) {
padding-inline-end: 0;
}
.cpc--sat-location-create-side-panel .cpc--resource-group-selector__inline-notification {
justify-content: space-between;
}
.cpc--sat-location-create-side-panel .cpc--resource-group-selector__inline-notification .cds--actionable-notification {
max-width: unset;
}
.cpc--sat-location-create-side-panel .cpc--resource-group-selector__inline-notification .cds--btn {
margin-left: 0.5rem;
margin-right: 0;
}
.cpc--sat-location-create-side-panel .heading-compact-01 {
font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
font-weight: var(--cds-heading-compact-01-font-weight, 600);
letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-heading-compact-01-line-height, 1.28572);
}
.cpc--sat-location-create-side-panel .zones-info-row {
margin-top: 0.125rem;
}
.cpc--data-table.cpc--controllers-table .respect-newlines {
white-space: pre-line;
}
.cpc--data-table.cpc--controllers-table .cds--data-table .cds--toggletip-content .cds--link {
color: var(--cds-link-inverse, #78a9ff);
}
.cpc--data-table.cpc--controllers-table .cpc--satellite-location-status {
align-items: baseline;
}
.cpc--data-table.cpc--controllers-table .cpc--satellite-location-status .cpc--status > svg {
flex-shrink: 0;
}
.cpc--data-table.cpc--controllers-table .cpc--satellite-location-status .cds--toggletip {
top: 0;
}
.cpc--data-table.cpc--controllers-table .cpc--data-table__empty-state svg {
height: 80px;
}
.cpc--service-usage-breakdown__container {
background-color: var(--cds-layer-01);
max-width: 600px;
width: 100%;
}
.cpc--service-usage-breakdown__container--message {
height: 100%;
}
.cpc--service-usage-breakdown__container--message .cpc--message__content {
margin-bottom: 0;
}
.cpc--service-usage-breakdown__total-value-container {
align-items: flex-end;
display: flex;
flex-wrap: wrap;
}
.cpc--service-usage-breakdown__total-value-amount {
color: var(--cds-text-secondary);
font-size: var(--cds-heading-04-font-size, 1.75rem);
font-weight: var(--cds-heading-04-font-weight, 400);
letter-spacing: var(--cds-heading-04-letter-spacing, 0);
line-height: var(--cds-heading-04-line-height, 1.28572);
line-height: 1;
}
.cpc--service-usage-breakdown__total-value-amount--discount {
color: var(--cds-text-placeholder);
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
margin-left: 0.25rem;
text-decoration: line-through;
}
.cpc--service-usage-breakdown__total-text {
color: var(--cds-text-secondary);
font-size: var(--cds-label-01-font-size, 0.75rem);
font-weight: var(--cds-label-01-font-weight, 400);
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
line-height: var(--cds-label-01-line-height, 1.33333);
margin-top: 0.25rem;
}
.cpc--service-usage-breakdown__chart-container {
display: grid;
grid-template-columns: 200px 1fr;
}
@media screen and (max-width: 672px) {
.cpc--service-usage-breakdown__chart-container {
display: flex;
flex-direction: column;
}
}
.cpc--service-usage-breakdown__chart .cds--chart-holder {
background-color: transparent;
height: 150px;
}
.cpc--service-usage-breakdown__chart .cds--chart-holder .callouts {
display: none;
}
.cpc--service-usage-breakdown__chart .cds--chart-holder .cds--cc--tooltip {
z-index: 1;
}
@media screen and (min-width: 672px) {
.cpc--service-usage-breakdown__chart .cds--chart-holder {
height: 200px;
}
}
.cpc--service-usage-breakdown__legend-container {
display: grid;
grid-template-columns: 75% 25%;
margin: 0;
width: 100%;
}
@media screen and (min-width: 672px) {
.cpc--service-usage-breakdown__legend-container {
border-left: 1px solid var(--cds-border-subtle-01);
margin: 2rem 0 1rem;
padding: 1rem 0 1rem 1.5rem;
width: calc(100% - 3rem);
}
}
.cpc--service-usage-breakdown__legend-item {
align-items: center;
display: flex;
margin: 0.5rem 0;
}
.cpc--service-usage-breakdown__legend-item--cost {
justify-content: flex-end;
}
.cpc--service-usage-breakdown__legend-item-color {
margin-right: 0.5rem;
min-height: 0.875rem;
min-width: 0.875rem;
}
.cpc--service-usage-breakdown__legend-item-color--loading {
background-color: var(--cds-skeleton-element);
}
@media screen and (max-width: 672px) {
.cpc--service-usage-breakdown__legend-item-color {
min-height: 0.75rem;
min-width: 0.75rem;
}
}
.cpc--service-usage-breakdown__legend-cost, .cpc--service-usage-breakdown__legend-name {
color: var(--cds-text-secondary);
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
}
@media screen and (max-width: 672px) {
.cpc--service-usage-breakdown__legend-cost, .cpc--service-usage-breakdown__legend-name {
font-size: var(--cds-label-01-font-size, 0.75rem);
font-weight: var(--cds-label-01-font-weight, 400);
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
line-height: var(--cds-label-01-line-height, 1.33333);
}
}
.cpc--service-usage-breakdown__link {
color: var(--cds-text-secondary);
text-decoration: none;
}
.cpc--service-usage-breakdown__link:hover {
text-decoration: underline;
}
.cpc--spending-summary {
width: 100%;
}
.cpc--spending-summary .cds--chart-holder {
background: transparent;
}
.cpc--spending-summary .chart-grid-backdrop, .cpc--spending-summary svg rect.chart-grid-backdrop {
fill: transparent;
}
.cpc--spending-summary text {
color: var(--cds-text-secondary);
}
.cpc--spending-summary path.bar.fill-2-1-1:nth-last-child(2) {
fill: var(--cds-tag-color-purple) !important;
}
.cpc--spending-summary__overview {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
margin-bottom: 1.5rem;
overflow-x: auto;
overflow-y: hidden;
}
.cpc--spending-summary__data {
color: var(--cds-text-secondary);
margin-right: 0.5rem;
}
.cpc--spending-summary__data h4 {
font-size: var(--cds-label-01-font-size, 0.75rem);
font-weight: var(--cds-label-01-font-weight, 400);
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
line-height: var(--cds-label-01-line-height, 1.33333);
}
.cpc--spending-summary__data span {
font-size: var(--cds-heading-04-font-size, 1.75rem);
font-weight: var(--cds-heading-04-font-weight, 400);
letter-spacing: var(--cds-heading-04-letter-spacing, 0);
line-height: var(--cds-heading-04-line-height, 1.28572);
}
@media (max-width: 846px) {
.cpc--spending-summary__data {
display: none;
}
.cpc--spending-summary__data:last-of-type {
display: block;
}
}
.cpc--spending-summary__chart-loading {
margin: 2rem;
max-width: 600px;
width: 100%;
}
.cpc--spending-summary__chart-container {
position: relative;
}
.cpc--spending-summary__chart-container__message {
left: 5%;
max-width: 350px;
position: absolute;
top: 10%;
}
.cpc--spending-summary__chart-container__message__row {
display: flex;
}
.cpc--spending-summary__chart-container__message__text-container {
position: relative;
top: -2.5px;
}
.cpc--spending-summary__chart-container__message__title {
font-weight: 700;
}
.cpc--spending-summary__chart-container__message__icon {
fill: var(--cds-support-warning);
margin-right: 0.5rem;
}
.cpc--spending-summary__chart-container__message__icon > [data-icon-path=inner-path] {
fill: var(--cds-icon-primary);
opacity: 1;
}
.cpc--spending-summary__message .cpc--message__content {
margin-bottom: 0;
}
.cpc--submit-promo__container {
max-width: 500px;
}
.cpc--submit-promo__container #promo-input-error-msg {
display: none;
}
.cpc--submit-promo__row {
display: flex;
}
.cpc--submit-promo__row-inner {
position: relative;
}
.cpc--submit-promo__button-wrapper {
align-items: flex-end;
display: flex;
}
@media (max-width: 500px) {
.cpc--submit-promo__button-wrapper .cds--btn {
padding-right: 15px;
}
}
.cpc--submit-promo__loading-wrapper {
min-height: 225px;
}
.cpc--submit-promo__error-wrapper {
color: var(--cds-support-error, #da1e28);
}
.cpc--submit-promo__feedback-text {
display: flex;
flex-direction: row;
font-size: 0.75rem;
line-height: 1rem;
margin-top: 0.5rem;
}
.cpc--submit-promo__feedback-text--success {
color: var(--cds-text-secondary, #525252);
}
.cpc--submit-promo__feedback-text--error {
color: var(--cds-support-error, #da1e28);
}
.cpc--submit-promo__description {
margin-bottom: 0.5rem;
}
.cpc--submit-promo__description-list {
margin-left: 1rem;
}
.cpc--submit-promo__link {
margin-top: 1rem;
}
.cpc--lisa {
background: #ff1493;
color: #fff;
font-family: Comic Sans MS, Comic Sans, cursive !important;
transform: rotate(1turn);
transition: transform 1s;
}
.cpc--text-input--success .cds--text-input__field-wrapper {
box-shadow: none;
outline: solid 2px var(--cds-support-success, #24a148);
outline-offset: -2px;
}
.cpc--text-input__icon-wrapper {
align-items: center;
bottom: 0;
display: flex;
height: 2.5rem;
justify-content: flex-end;
position: absolute;
width: 100%;
}
.cpc--text-input__icon-wrapper.cpc--text-input__icon-wrapper--xl {
height: 3rem;
}
.cpc--text-input__icon-wrapper.cpc--text-input__icon-wrapper--sm {
height: 2rem;
}
.cpc--text-input__checkmark-icon {
fill: var(--cds-support-success, #24a148);
margin-right: 0.25rem;
z-index: 1000;
}
.cpc--submit-promo__description-table {
text-align: left;
}
.cpc--submit-promo__description-table table {
border-spacing: 1em;
}
.cpc--submit-promo__description-table thead th {
border-bottom: 0.5px solid var(--cds-border-strong-01, #8d8d8d);
color: var(--cds-text-primary, #161616);
font-size: small;
font-weight: 700;
padding: 1em;
width: 12em;
}
.cpc--submit-promo__description-table td {
border-bottom: 1px solid var(--cds-border-strong-01, #8d8d8d);
color: var(--cds-text-secondary, #525252);
font-size: small;
padding: 1em !important;
width: 12em;
}
.cpc--subscription-details {
height: 242px;
width: 100%;
}
.cpc--subscription-details__body {
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-evenly;
}
.cpc--subscription-details__message {
margin-top: auto;
}
.cpc--subscription-details__empty-text {
font-size: var(--cds-body-compact-02-font-size, 1rem);
font-weight: var(--cds-body-compact-02-font-weight, 400);
letter-spacing: var(--cds-body-compact-02-letter-spacing, 0);
line-height: var(--cds-body-compact-02-line-height, 1.375);
margin-bottom: 1rem;
}
.cpc--subscription-details__empty-caption {
font-size: var(--cds-label-01-font-size, 0.75rem);
font-weight: var(--cds-label-01-font-weight, 400);
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
line-height: var(--cds-label-01-line-height, 1.33333);
margin-bottom: 2rem;
}
.cpc--subscription-details__metadata-container {
display: flex;
}
.cpc--subscription-details__metadata {
margin-right: 2.5rem;
}
.cpc--subscription-details__metadata:last-of-type {
margin-right: 0;
}
.cpc--subscription-details__key {
margin-bottom: 0.5rem;
}
.cpc--subscription-details__key, .cpc--subscription-details__value {
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
}
.cpc--subscription-details__meter {
width: 100%;
}
.cpc--subscription-details__meter-heading {
align-items: baseline;
display: flex;
justify-content: space-between;
}
.cpc--subscription-details__emphasis {
font-size: var(--cds-heading-04-font-size, 1.75rem);
font-weight: var(--cds-heading-04-font-weight, 400);
letter-spacing: var(--cds-heading-04-letter-spacing, 0);
line-height: var(--cds-heading-04-line-height, 1.28572);
}
.cpc--subscription-details__progress-bar-container {
background-color: var(--cds-layer-accent-01);
height: 0.5rem;
margin-top: 0.5rem;
width: 100%;
}
.cpc--subscription-details__progress-bar {
background: #002d9c;
background: linear-gradient(90deg, #002d9c, #0f62fe 50%);
height: 0.5rem;
}
.cpc--subscription-details__helper-text-container {
align-items: center;
color: var(--cds-support-success-inverse);
display: flex;
margin-left: 0.25rem;
margin-top: 0.25rem;
}
.cpc--subscription-details__helper-icon {
margin-right: 0.25rem;
}
.cpc--subscription-details__helper-text {
font-size: var(--cds-helper-text-01-font-size, 0.75rem);
letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
line-height: var(--cds-helper-text-01-line-height, 1.33333);
}
.cpc--subscription-details__tooltip {
padding: 0.5rem;
}
.cpc--subscription-details__tooltip-group {
padding-bottom: 0.25rem;
}
.cpc--subscription-details__tooltip-label {
font-weight: 700;
}
: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;
}
.cds--md\:col-span-1 {
--cds-grid-columns:1;
display: block;
grid-column: span 1/span 1;
}
.cds--md\:col-span-2 {
--cds-grid-columns:2;
display: block;
grid-column: span 2/span 2;
}
.cds--md\:col-span-3 {
--cds-grid-columns:3;
display: block;
grid-column: span 3/span 3;
}
.cds--md\:col-span-4 {
--cds-grid-columns:4;
display: block;
grid-column: span 4/span 4;
}
.cds--md\:col-span-5 {
--cds-grid-columns:5;
display: block;
grid-column: span 5/span 5;
}
.cds--md\:col-span-6 {
--cds-grid-columns:6;
display: block;
grid-column: span 6/span 6;
}
.cds--md\:col-span-7 {
--cds-grid-columns:7;
display: block;
grid-column: span 7/span 7;
}
.cds--md\:col-span-8 {
--cds-grid-columns:8;
display: block;
grid-column: span 8/span 8;
}
.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;
}
.cds--lg\:col-span-1 {
--cds-grid-columns:1;
display: block;
grid-column: span 1/span 1;
}
.cds--lg\:col-span-2 {
--cds-grid-columns:2;
display: block;
grid-column: span 2/span 2;
}
.cds--lg\:col-span-3 {
--cds-grid-columns:3;
display: block;
grid-column: span 3/span 3;
}
.cds--lg\:col-span-4 {
--cds-grid-columns:4;
display: block;
grid-column: span 4/span 4;
}
.cds--lg\:col-span-5 {
--cds-grid-columns:5;
display: block;
grid-column: span 5/span 5;
}
.cds--lg\:col-span-6 {
--cds-grid-columns:6;
display: block;
grid-column: span 6/span 6;
}
.cds--lg\:col-span-7 {
--cds-grid-columns:7;
display: block;
grid-column: span 7/span 7;
}
.cds--lg\:col-span-8 {
--cds-grid-columns:8;
display: block;
grid-column: span 8/span 8;
}
.cds--lg\:col-span-9 {
--cds-grid-columns:9;
display: block;
grid-column: span 9/span 9;
}
.cds--lg\:col-span-10 {
--cds-grid-columns:10;
display: block;
grid-column: span 10/span 10;
}
.cds--lg\:col-span-11 {
--cds-grid-columns:11;
display: block;
grid-column: span 11/span 11;
}
.cds--lg\:col-span-12 {
--cds-grid-columns:12;
display: block;
grid-column: span 12/span 12;
}
.cds--lg\:col-span-13 {
--cds-grid-columns:13;
display: block;
grid-column: span 13/span 13;
}
.cds--lg\:col-span-14 {
--cds-grid-columns:14;
display: block;
grid-column: span 14/span 14;
}
.cds--lg\:col-span-15 {
--cds-grid-columns:15;
display: block;
grid-column: span 15/span 15;
}
.cds--lg\:col-span-16 {
--cds-grid-columns:16;
display: block;
grid-column: span 16/span 16;
}
.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;
}
.cds--xlg\:col-span-1 {
--cds-grid-columns:1;
display: block;
grid-column: span 1/span 1;
}
.cds--xlg\:col-span-2 {
--cds-grid-columns:2;
display: block;
grid-column: span 2/span 2;
}
.cds--xlg\:col-span-3 {
--cds-grid-columns:3;
display: block;
grid-column: span 3/span 3;
}
.cds--xlg\:col-span-4 {
--cds-grid-columns:4;
display: block;
grid-column: span 4/span 4;
}
.cds--xlg\:col-span-5 {
--cds-grid-columns:5;
display: block;
grid-column: span 5/span 5;
}
.cds--xlg\:col-span-6 {
--cds-grid-columns:6;
display: block;
grid-column: span 6/span 6;
}
.cds--xlg\:col-span-7 {
--cds-grid-columns:7;
display: block;
grid-column: span 7/span 7;
}
.cds--xlg\:col-span-8 {
--cds-grid-columns:8;
display: block;
grid-column: span 8/span 8;
}
.cds--xlg\:col-span-9 {
--cds-grid-columns:9;
display: block;
grid-column: span 9/span 9;
}
.cds--xlg\:col-span-10 {
--cds-grid-columns:10;
display: block;
grid-column: span 10/span 10;
}
.cds--xlg\:col-span-11 {
--cds-grid-columns:11;
display: block;
grid-column: span 11/span 11;
}
.cds--xlg\:col-span-12 {
--cds-grid-columns:12;
display: block;
grid-column: span 12/span 12;
}
.cds--xlg\:col-span-13 {
--cds-grid-columns:13;
display: block;
grid-column: span 13/span 13;
}
.cds--xlg\:col-span-14 {
--cds-grid-columns:14;
display: block;
grid-column: span 14/span 14;
}
.cds--xlg\:col-span-15 {
--cds-grid-columns:15;
display: block;
grid-column: span 15/span 15;
}
.cds--xlg\:col-span-16 {
--cds-grid-columns:16;
display: block;
grid-column: span 16/span 16;
}
.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;
}
.cds--max\:col-span-1 {
--cds-grid-columns:1;
display: block;
grid-column: span 1/span 1;
}
.cds--max\:col-span-2 {
--cds-grid-columns:2;
display: block;
grid-column: span 2/span 2;
}
.cds--max\:col-span-3 {
--cds-grid-columns:3;
display: block;
grid-column: span 3/span 3;
}
.cds--max\:col-span-4 {
--cds-grid-columns:4;
display: block;
grid-column: span 4/span 4;
}
.cds--max\:col-span-5 {
--cds-grid-columns:5;
display: block;
grid-column: span 5/span 5;
}
.cds--max\:col-span-6 {
--cds-grid-columns:6;
display: block;
grid-column: span 6/span 6;
}
.cds--max\:col-span-7 {
--cds-grid-columns:7;
display: block;
grid-column: span 7/span 7;
}
.cds--max\:col-span-8 {
--cds-grid-columns:8;
display: block;
grid-column: span 8/span 8;
}
.cds--max\:col-span-9 {
--cds-grid-columns:9;
display: block;
grid-column: span 9/span 9;
}
.cds--max\:col-span-10 {
--cds-grid-columns:10;
display: block;
grid-column: span 10/span 10;
}
.cds--max\:col-span-11 {
--cds-grid-columns:11;
display: block;
grid-column: span 11/span 11;
}
.cds--max\:col-span-12 {
--cds-grid-columns:12;
display: block;
grid-column: span 12/span 12;
}
.cds--max\:col-span-13 {
--cds-grid-columns:13;
display: block;
grid-column: span 13/span 13;
}
.cds--max\:col-span-14 {
--cds-grid-columns:14;
display: block;
grid-column: span 14/span 14;
}
.cds--max\:col-span-15 {
--cds-grid-columns:15;
display: block;
grid-column: span 15/span 15;
}
.cds--max\:col-span-16 {
--cds-grid-columns:16;
display: block;
grid-column: span 16/span 16;
}
.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;
}
}
.cpc--grid-layout--motion {
animation: fadein 0.3s cubic-bezier(0, 0, 0.38, 0.9) 0s 1;
}
@keyframes fadein {
0% {
opacity: 0;
transform: translateY(3rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.cpc--grid-layout--motion {
animation: none;
}
}
.cpc--motion-child-0 {
animation-delay: 0ms;
}
.cpc--motion-child-1 {
animation-delay: 30ms;
}
.cpc--motion-child-2 {
animation-delay: 60ms;
}
.cpc--motion-child-3 {
animation-delay: 90ms;
}
.cpc--motion-child-4 {
animation-delay: 0.12s;
}
.cpc--motion-child-5 {
animation-delay: 0.15s;
}
.cpc--motion-child-6 {
animation-delay: 0.18s;
}
.cpc--motion-child-7 {
animation-delay: 0.21s;
}
.cpc--motion-child-8 {
animation-delay: 0.24s;
}
.cpc--motion-child-9 {
animation-delay: 0.27s;
}
.cpc--motion-child-10 {
animation-delay: 0.3s;
}
.cpc--motion-child-11 {
animation-delay: 0.33s;
}
.cpc--motion-child-12 {
animation-delay: 0.36s;
}
.cpc--motion-child-13 {
animation-delay: 0.39s;
}
.cpc--motion-child-14 {
animation-delay: 0.42s;
}
.cpc--motion-child-15 {
animation-delay: 0.45s;
}
.cpc--left-panel-layout {
padding-top: 2rem;
}
.cpc--left-panel-layout__left-panel {
display: none;
}
@media (min-width: 42rem) {
.cpc--left-panel-layout__left-panel {
display: block;
}
}
.cpc--left-panel-layout__media {
margin-top: 2rem;
}
.cpc--left-panel-layout--provisioning-about h4 {
font-size: var(--cds-heading-03-font-size, 1.25rem);
font-weight: var(--cds-heading-03-font-weight, 400);
letter-spacing: var(--cds-heading-03-letter-spacing, 0);
line-height: var(--cds-heading-03-line-height, 1.4);
margin-bottom: 0.5rem;
}
.cpc--left-panel-layout--provisioning-about h4 + p {
font-size: var(--cds-body-02-font-size, 1rem);
font-weight: var(--cds-body-02-font-weight, 400);
letter-spacing: var(--cds-body-02-letter-spacing, 0);
line-height: var(--cds-body-02-line-height, 1.5);
margin-bottom: 4rem;
}
.cpc--left-panel-layout--provisioning-about h4 + h5:first-of-type {
margin-top: 1.5rem;
}
.cpc--left-panel-layout--provisioning-about h5 + p {
margin-bottom: 1rem;
}
.cpc--left-panel-layout--provisioning-about .cpc--left-panel-layout__left-panel h5 {
color: var(--cds-text-secondary, #525252);
font-size: var(--cds-label-01-font-size, 0.75rem);
font-weight: var(--cds-label-01-font-weight, 400);
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
line-height: var(--cds-label-01-line-height, 1.33333);
padding-bottom: 2px;
}
.cpc--left-panel-layout--provisioning-about .cpc--left-panel-layout__left-panel ul {
margin-bottom: 1.5rem;
}
.cpc--left-panel-layout--provisioning-about .cpc--left-panel-layout__left-panel li {
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
}
.cpc--layout.cpc--provision-page-layout {
padding-left: 0;
padding-right: 0;
}
@media (min-width: 66rem) {
.cpc--provision-page-layout .cds--tabs, .cpc--provision-page-layout .cpc--provision-page-layout__content {
margin-right: 22rem;
}
}
.cpc--provision-page-layout .cpc--page-header {
background-color: var(--cds-layer-01, #f4f4f4);
padding-bottom: 2rem;
padding-left: 2rem;
padding-right: 2rem;
}
@media (min-width: 66rem) {
.cpc--provision-page-layout .cpc--page-header {
padding-right: 24rem;
}
}
.cpc--provision-page-layout .cpc--page-header--with-icon {
padding-left: 1rem;
}
@media (min-width: 42rem) {
.cpc--provision-page-layout .cds--tab-content, .cpc--provision-page-layout .cds--tabs--scrollable, .cpc--provision-page-layout .cpc--page-header--with-icon {
padding-left: 2rem;
}
}
.cpc--provision-page-layout .cds--tabs.cpc--provision-page-tabs {
background-color: var(--cds-layer-01, #f4f4f4);
}
@media (min-width: 42rem) {
.cpc--provision-page-layout .cds--tabs.cpc--provision-page-tabs {
padding-left: 1rem;
}
}
.cpc--provision-page-layout .cds--tabs.cpc--provision-page-tabs .cds--tab--list > .cds--tabs__nav-item {
width: 158.5px;
}
.cpc--provision-page-layout .cds--tab-content {
padding-top: 2rem;
}
.cpc--provision-page-layout .cds--tab-content .cpc--provision-page-layout__content > .cpc--left-panel-layout--provisioning-about {
margin-left: 0;
padding-left: 0;
}
.cpc--resource-detail-page-layout {
display: flex;
flex-direction: column;
max-width: unset;
min-height: 100%;
padding: 0;
}
.cpc--resource-detail-page-layout_full-screen {
min-height: 100vh;
}
.cpc--resource-detail-page-layout_include-header {
min-height: calc(100vh - 50px);
}
.cpc--resource-detail-page-layout__children {
display: flex;
flex-direction: column;
flex-grow: 1;
height: 100%;
}
.cpc--resource-detail-page-layout__header {
padding-bottom: 0;
padding-top: 0;
width: 100%;
}
.cpc--resource-detail-page-layout__header .cpc--page-header {
padding-left: 2rem;
padding-right: 2rem;
}
.cpc--resource-detail-page-layout__content {
padding: 2rem 2rem 0;
width: 100%;
}
@media (min-width: 42rem) {
.cpc--resource-detail-page-layout__content {
width: calc(100% - 16rem);
}
}
@media (max-width: 41.98rem) {
.cpc--resource-detail-page-layout__content {
padding: 1rem;
}
.cpc--resource-detail-page-layout__navigation + .cpc--resource-detail-page-layout__content {
padding-bottom: 3.125rem;
}
}
.cpc--layout.cpc--resource-detail-page-layout {
padding-left: 0;
padding-right: 0;
}
.cpc--layout.cpc--resource-detail-page-layout .cpc--resource-detail-page-layout__children.cds--row {
margin: 0;
}
.cpc--titled-section-layout__page-description {
margin-bottom: 4rem;
}
.cpc--titled-section-layout__section {
margin-bottom: 3rem;
}
.cpc--titled-section-layout__section > * {
overflow-x: auto;
width: 100%;
}
.cpc--titled-section-layout__section-header {
margin-bottom: 1rem;
width: 100%;
}
.cpc--world-level-layout__main-content {
margin-left: 16rem;
position: relative;
transition: margin-left 0.3s ease-in-out;
z-index: auto;
}
.cpc--world-level-layout__main-content .cpc--world-level-nav.cpc--side-nav {
height: calc(100% - 50px);
position: fixed;
top: 50px;
}
.cpc--side-nav--collapsed ~ .cpc--world-level-layout__main-content {
margin-left: 3rem;
}
@media (max-width: 41.98rem) {
.cpc--world-level-layout__main-content {
margin-left: 0;
margin-top: 73px;
}
.cpc--side-nav--collapsed ~ .cpc--world-level-layout__main-content {
margin-left: 0;
}
}
.cpc--iam-assign-common__access {
padding-top: 2rem;
}
.cpc--iam-assign-common__access-heading {
font-size: 1rem;
font-weight: 600;
letter-spacing: 0;
line-height: 1.375em;
margin-bottom: 0.375rem;
}
.cpc--iam-assign-common__access-helptext {
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
}
.cpc--iam-assign-common__access-roles {
margin-top: 1rem;
}
.cpc--iam-assign-common__access-roles li {
align-items: center;
display: flex;
flex-direction: row;
}
.cpc--iam-assign-common__access-roles li .cds--checkbox-wrapper {
flex: 0 0 8.5rem;
}
.cpc--iam-assign-common__access-roleslist {
margin-bottom: 2rem;
}
.cpc--iam-assign-common__access-role-item {
border-bottom: 1px solid var(--cds-layer-02, #fff);
display: flex;
flex-direction: row;
min-height: 3.5rem;
padding: 0.25rem 0;
}
.cpc--iam-assign-common__access-role-item:last-of-type {
border-bottom: none;
}
.cpc--iam-assign-common__access-role-item-description {
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
margin: 8px 0;
padding-left: 2rem;
}
.cpc--iam-assign-common__notification-wrapper {
position: fixed;
right: 0;
top: 3.125rem;
z-index: 9000;
}
.cpc--iam-assign-common__notification-wrapper .cds--toast-notification {
animation: enter-from-right 159ms;
animation-timing-function: cubic-bezier(0, 0, 0.3, 1);
}
.cpc--iam-assign-common__notification-content {
align-items: flex-start;
display: flex;
flex-direction: column;
}
.cpc--iam-assign-common__notification-content .cds--btn--ghost {
color: #78a9ff;
margin-left: -13px;
}
.cpc--iam-assign-common__notification-content .cds--btn--ghost:hover {
color: #0f62fe;
}
.cpc--iam-assign-common-response-detail-modal__error-message {
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
}
.cpc--iam-assign-common-response-detail-modal__error-item {
margin-bottom: 1.5rem;
}
.cpc--iam-assign-common-response-detail-modal__error-item:last-of-type {
margin-bottom: 0;
}
.cpc--iam-assign-common-policy-confirmation-modal__helptext {
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
font-weight: var(--cds-body-compact-01-font-weight, 400);
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-body-compact-01-line-height, 1.28572);
}
.cpc--iam-assign-common-policy-confirmation-modal__roles-label {
font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
font-weight: var(--cds-heading-compact-01-font-weight, 600);
letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
line-height: var(--cds-heading-compact-01-line-height, 1.28572);
margin: 2rem 0 0.5rem;
}
.cpc--iam-assign-common-policy-confirmation-modal__role-type .cds--label {
margin: 0.5rem 0 0;
}
.cpc--iam-assign-common-policy-confirmation-modal__role-type:first-of-type .cds--label {
margin: 0;
}
.cpc--iam-assign-common__inline-notification--transaction-id {
font-size: 0.5rem;
font-weight: 400;
}
@keyframes enter-from-right {
0% {
opacity: 0;
transform: translateX(110%);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.cpc--tagmap {
position: relative;
}
.cpc--tagmap.cpc--tagmap--popup-open:after {
border-color: transparent var(--cds-background-inverse, #393939) transparent transparent;
border-style: solid;
border-width: 24px;
content: "";
height: 0;
pointer-events: none;
position: absolute;
right: -34px;
top: -8px;
width: 0;
z-index: 999;
}
.cpc--tagmap__tag {
color: var(--cds-link-primary, #0f62fe);
cursor: pointer;
}
.cpc--tagmap__tag-button-event-wrapper {
background: none;
border: none;
color: inherit;
cursor: pointer;
font: inherit;
padding: 0;
}
.cpc--tagmap__tag-button-event-wrapper:focus {
outline-color: var(--cds-focus, #0f62fe);
}
.cpc--tagmap__popup {
background: var(--cds-background-inverse, #393939);
border-radius: 0.2rem;
color: var(--cds-text-inverse, #fff);
left: calc(100% + 24px);
padding: 1rem 2rem 0;
position: absolute;
top: -48px;
width: 40rem;
z-index: 999;
}
.cpc--tagmap__popup-heading {
align-items: flex-start;
border-bottom: 1px solid #7d7d7d;
display: flex;
flex-direction: row;
}
.cpc--tagmap__popup-heading-text {
flex-grow: 1;
font-size: var(--cds-body-compact-02-font-size, 1rem);
font-weight: var(--cds-body-compact-02-font-weight, 400);
letter-spacing: var(--cds-body-compact-02-letter-spacing, 0);
line-height: var(--cds-body-compact-02-line-height, 1.375);
padding-bottom: 0.5rem;
}
.cpc--tagmap__popup-close-btn {
flex: 0 0 auto;
}
.cpc--tagmap__popup-close-btn.cds--btn svg {
fill: var(--cds-background, #fff);
}
.cpc--tagmap__popup-item-row {
border-bottom: 1px solid #7d7d7d;
display: flex;
flex-direction: row;
padding: 0.75rem 0;
}
.cpc--tagmap__popup-item-row:last-of-type {
border-bottom: 0;
padding-bottom: 2rem;
}
.cpc--tagmap__popup-item-description, .cpc--tagmap__popup-item-name {
flex: 1 0 50%;
font-size: 0.75rem;
}
.cpc--tagmap__popup-item-name {
padding-right: 0.5rem;
}
.cpc--tagmap__popup-item-description {
padding-left: 0.5rem;
}
.cpc--tagmap__popup-item-list {
max-height: 22rem;
overflow: auto;
}
:root {
--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-spacing-01: 0.125rem;
--cds-spacing-02: 0.25rem;
--cds-spacing-03: 0.5rem;
--cds-spacing-04: 0.75rem;
--cds-spacing-05: 1rem;
--cds-spacing-06: 1.5rem;
--cds-spacing-07: 2rem;
--cds-spacing-08: 2.5rem;
--cds-spacing-09: 3rem;
--cds-spacing-10: 4rem;
--cds-spacing-11: 5rem;
--cds-spacing-12: 6rem;
--cds-spacing-13: 10rem;
--cds-fluid-spacing-01: 0;
--cds-fluid-spacing-02: 2vw;
--cds-fluid-spacing-03: 5vw;
--cds-fluid-spacing-04: 10vw;
--cds-caption-01-font-size: 0.75rem;
--cds-caption-01-font-weight: 400;
--cds-caption-01-line-height: 1.33333;
--cds-caption-01-letter-spacing: 0.32px;
--cds-caption-02-font-size: 0.875rem;
--cds-caption-02-font-weight: 400;
--cds-caption-02-line-height: 1.28572;
--cds-caption-02-letter-spacing: 0.32px;
--cds-label-01-font-size: 0.75rem;
--cds-label-01-font-weight: 400;
--cds-label-01-line-height: 1.33333;
--cds-label-01-letter-spacing: 0.32px;
--cds-label-02-font-size: 0.875rem;
--cds-label-02-font-weight: 400;
--cds-label-02-line-height: 1.28572;
--cds-label-02-letter-spacing: 0.16px;
--cds-helper-text-01-font-size: 0.75rem;
--cds-helper-text-01-line-height: 1.33333;
--cds-helper-text-01-letter-spacing: 0.32px;
--cds-helper-text-02-font-size: 0.875rem;
--cds-helper-text-02-font-weight: 400;
--cds-helper-text-02-line-height: 1.28572;
--cds-helper-text-02-letter-spacing: 0.16px;
--cds-body-short-01-font-size: 0.875rem;
--cds-body-short-01-font-weight: 400;
--cds-body-short-01-line-height: 1.28572;
--cds-body-short-01-letter-spacing: 0.16px;
--cds-body-short-02-font-size: 1rem;
--cds-body-short-02-font-weight: 400;
--cds-body-short-02-line-height: 1.375;
--cds-body-short-02-letter-spacing: 0;
--cds-body-long-01-font-size: 0.875rem;
--cds-body-long-01-font-weight: 400;
--cds-body-long-01-line-height: 1.42857;
--cds-body-long-01-letter-spacing: 0.16px;
--cds-body-long-02-font-size: 1rem;
--cds-body-long-02-font-weight: 400;
--cds-body-long-02-line-height: 1.5;
--cds-body-long-02-letter-spacing: 0;
--cds-code-01-font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
--cds-code-01-font-size: 0.75rem;
--cds-code-01-font-weight: 400;
--cds-code-01-line-height: 1.33333;
--cds-code-01-letter-spacing: 0.32px;
--cds-code-02-font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
--cds-code-02-font-size: 0.875rem;
--cds-code-02-font-weight: 400;
--cds-code-02-line-height: 1.42857;
--cds-code-02-letter-spacing: 0.32px;
--cds-heading-01-font-size: 0.875rem;
--cds-heading-01-font-weight: 600;
--cds-heading-01-line-height: 1.42857;
--cds-heading-01-letter-spacing: 0.16px;
--cds-heading-02-font-size: 1rem;
--cds-heading-02-font-weight: 600;
--cds-heading-02-line-height: 1.5;
--cds-heading-02-letter-spacing: 0;
--cds-productive-heading-01-font-size: 0.875rem;
--cds-productive-heading-01-font-weight: 600;
--cds-productive-heading-01-line-height: 1.28572;
--cds-productive-heading-01-letter-spacing: 0.16px;
--cds-productive-heading-02-font-size: 1rem;
--cds-productive-heading-02-font-weight: 600;
--cds-productive-heading-02-line-height: 1.375;
--cds-productive-heading-02-letter-spacing: 0;
--cds-productive-heading-03-font-size: 1.25rem;
--cds-productive-heading-03-font-weight: 400;
--cds-productive-heading-03-line-height: 1.4;
--cds-productive-heading-03-letter-spacing: 0;
--cds-productive-heading-04-font-size: 1.75rem;
--cds-productive-heading-04-font-weight: 400;
--cds-productive-heading-04-line-height: 1.28572;
--cds-productive-heading-04-letter-spacing: 0;
--cds-productive-heading-05-font-size: 2rem;
--cds-productive-heading-05-font-weight: 400;
--cds-productive-heading-05-line-height: 1.25;
--cds-productive-heading-05-letter-spacing: 0;
--cds-productive-heading-06-font-size: 2.625rem;
--cds-productive-heading-06-font-weight: 300;
--cds-productive-heading-06-line-height: 1.199;
--cds-productive-heading-06-letter-spacing: 0;
--cds-productive-heading-07-font-size: 3.375rem;
--cds-productive-heading-07-font-weight: 300;
--cds-productive-heading-07-line-height: 1.19;
--cds-productive-heading-07-letter-spacing: 0;
--cds-expressive-paragraph-01-font-size: 1.5rem;
--cds-expressive-paragraph-01-font-weight: 300;
--cds-expressive-paragraph-01-line-height: 1.334;
--cds-expressive-paragraph-01-letter-spacing: 0;
--cds-expressive-heading-01-font-size: 0.875rem;
--cds-expressive-heading-01-font-weight: 600;
--cds-expressive-heading-01-line-height: 1.42857;
--cds-expressive-heading-01-letter-spacing: 0.16px;
--cds-expressive-heading-02-font-size: 1rem;
--cds-expressive-heading-02-font-weight: 600;
--cds-expressive-heading-02-line-height: 1.5;
--cds-expressive-heading-02-letter-spacing: 0;
--cds-expressive-heading-03-font-size: 1.25rem;
--cds-expressive-heading-03-font-weight: 400;
--cds-expressive-heading-03-line-height: 1.4;
--cds-expressive-heading-03-letter-spacing: 0;
--cds-expressive-heading-04-font-size: 1.75rem;
--cds-expressive-heading-04-font-weight: 400;
--cds-expressive-heading-04-line-height: 1.28572;
--cds-expressive-heading-04-letter-spacing: 0;
--cds-expressive-heading-05-font-size: 2rem;
--cds-expressive-heading-05-font-weight: 400;
--cds-expressive-heading-05-line-height: 1.25;
--cds-expressive-heading-05-letter-spacing: 0;
--cds-expressive-heading-06-font-size: 2rem;
--cds-expressive-heading-06-font-weight: 600;
--cds-expressive-heading-06-line-height: 1.25;
--cds-expressive-heading-06-letter-spacing: 0;
--cds-quotation-01-font-family: 'IBM Plex Serif', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', serif;
--cds-quotation-01-font-size: 1.25rem;
--cds-quotation-01-font-weight: 400;
--cds-quotation-01-line-height: 1.3;
--cds-quotation-01-letter-spacing: 0;
--cds-quotation-02-font-family: 'IBM Plex Serif', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', serif;
--cds-quotation-02-font-size: 2rem;
--cds-quotation-02-font-weight: 300;
--cds-quotation-02-line-height: 1.25;
--cds-quotation-02-letter-spacing: 0;
--cds-display-01-font-size: 2.625rem;
--cds-display-01-font-weight: 300;
--cds-display-01-line-height: 1.19;
--cds-display-01-letter-spacing: 0;
--cds-display-02-font-size: 2.625rem;
--cds-display-02-font-weight: 600;
--cds-display-02-line-height: 1.19;
--cds-display-02-letter-spacing: 0;
--cds-display-03-font-size: 2.625rem;
--cds-display-03-font-weight: 300;
--cds-display-03-line-height: 1.19;
--cds-display-03-letter-spacing: 0;
--cds-display-04-font-size: 2.625rem;
--cds-display-04-font-weight: 300;
--cds-display-04-line-height: 1.19;
--cds-display-04-letter-spacing: 0;
--cds-legal-01-font-size: 0.75rem;
--cds-legal-01-font-weight: 400;
--cds-legal-01-line-height: 1.33333;
--cds-legal-01-letter-spacing: 0.32px;
--cds-legal-02-font-size: 0.875rem;
--cds-legal-02-font-weight: 400;
--cds-legal-02-line-height: 1.28572;
--cds-legal-02-letter-spacing: 0.16px;
--cds-body-compact-01-font-size: 0.875rem;
--cds-body-compact-01-font-weight: 400;
--cds-body-compact-01-line-height: 1.28572;
--cds-body-compact-01-letter-spacing: 0.16px;
--cds-body-compact-02-font-size: 1rem;
--cds-body-compact-02-font-weight: 400;
--cds-body-compact-02-line-height: 1.375;
--cds-body-compact-02-letter-spacing: 0;
--cds-heading-compact-01-font-size: 0.875rem;
--cds-heading-compact-01-font-weight: 600;
--cds-heading-compact-01-line-height: 1.28572;
--cds-heading-compact-01-letter-spacing: 0.16px;
--cds-heading-compact-02-font-size: 1rem;
--cds-heading-compact-02-font-weight: 600;
--cds-heading-compact-02-line-height: 1.375;
--cds-heading-compact-02-letter-spacing: 0;
--cds-body-01-font-size: 0.875rem;
--cds-body-01-font-weight: 400;
--cds-body-01-line-height: 1.42857;
--cds-body-01-letter-spacing: 0.16px;
--cds-body-02-font-size: 1rem;
--cds-body-02-font-weight: 400;
--cds-body-02-line-height: 1.5;
--cds-body-02-letter-spacing: 0;
--cds-heading-03-font-size: 1.25rem;
--cds-heading-03-font-weight: 400;
--cds-heading-03-line-height: 1.4;
--cds-heading-03-letter-spacing: 0;
--cds-heading-04-font-size: 1.75rem;
--cds-heading-04-font-weight: 400;
--cds-heading-04-line-height: 1.28572;
--cds-heading-04-letter-spacing: 0;
--cds-heading-05-font-size: 2rem;
--cds-heading-05-font-weight: 400;
--cds-heading-05-line-height: 1.25;
--cds-heading-05-letter-spacing: 0;
--cds-heading-06-font-size: 2.625rem;
--cds-heading-06-font-weight: 300;
--cds-heading-06-line-height: 1.199;
--cds-heading-06-letter-spacing: 0;
--cds-heading-07-font-size: 3.375rem;
--cds-heading-07-font-weight: 300;
--cds-heading-07-line-height: 1.19;
--cds-heading-07-letter-spacing: 0;
--cds-fluid-heading-03-font-size: 1.25rem;
--cds-fluid-heading-03-font-weight: 400;
--cds-fluid-heading-03-line-height: 1.4;
--cds-fluid-heading-03-letter-spacing: 0;
--cds-fluid-heading-04-font-size: 1.75rem;
--cds-fluid-heading-04-font-weight: 400;
--cds-fluid-heading-04-line-height: 1.28572;
--cds-fluid-heading-04-letter-spacing: 0;
--cds-fluid-heading-05-font-size: 2rem;
--cds-fluid-heading-05-font-weight: 400;
--cds-fluid-heading-05-line-height: 1.25;
--cds-fluid-heading-05-letter-spacing: 0;
--cds-fluid-heading-06-font-size: 2rem;
--cds-fluid-heading-06-font-weight: 600;
--cds-fluid-heading-06-line-height: 1.25;
--cds-fluid-heading-06-letter-spacing: 0;
--cds-fluid-paragraph-01-font-size: 1.5rem;
--cds-fluid-paragraph-01-font-weight: 300;
--cds-fluid-paragraph-01-line-height: 1.334;
--cds-fluid-paragraph-01-letter-spacing: 0;
--cds-fluid-quotation-01-font-family: 'IBM Plex Serif', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', serif;
--cds-fluid-quotation-01-font-size: 1.25rem;
--cds-fluid-quotation-01-font-weight: 400;
--cds-fluid-quotation-01-line-height: 1.3;
--cds-fluid-quotation-01-letter-spacing: 0;
--cds-fluid-quotation-02-font-family: 'IBM Plex Serif', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', serif;
--cds-fluid-quotation-02-font-size: 2rem;
--cds-fluid-quotation-02-font-weight: 300;
--cds-fluid-quotation-02-line-height: 1.25;
--cds-fluid-quotation-02-letter-spacing: 0;
--cds-fluid-display-01-font-size: 2.625rem;
--cds-fluid-display-01-font-weight: 300;
--cds-fluid-display-01-line-height: 1.19;
--cds-fluid-display-01-letter-spacing: 0;
--cds-fluid-display-02-font-size: 2.625rem;
--cds-fluid-display-02-font-weight: 600;
--cds-fluid-display-02-line-height: 1.19;
--cds-fluid-display-02-letter-spacing: 0;
--cds-fluid-display-03-font-size: 2.625rem;
--cds-fluid-display-03-font-weight: 300;
--cds-fluid-display-03-line-height: 1.19;
--cds-fluid-display-03-letter-spacing: 0;
--cds-fluid-display-04-font-size: 2.625rem;
--cds-fluid-display-04-font-weight: 300;
--cds-fluid-display-04-line-height: 1.19;
--cds-fluid-display-04-letter-spacing: 0;
--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-tag-background-red: #ffd7d9;
--cds-tag-color-red: #a2191f;
--cds-tag-hover-red: #ffc2c5;
--cds-tag-background-magenta: #ffd6e8;
--cds-tag-color-magenta: #9f1853;
--cds-tag-hover-magenta: #ffbdda;
--cds-tag-background-purple: #e8daff;
--cds-tag-color-purple: #6929c4;
--cds-tag-hover-purple: #dcc7ff;
--cds-tag-background-blue: #d0e2ff;
--cds-tag-color-blue: #0043ce;
--cds-tag-hover-blue: #b8d3ff;
--cds-tag-background-cyan: #bae6ff;
--cds-tag-color-cyan: #00539a;
--cds-tag-hover-cyan: #99daff;
--cds-tag-background-teal: #9ef0f0;
--cds-tag-color-teal: #005d5d;
--cds-tag-hover-teal: #57e5e5;
--cds-tag-background-green: #a7f0ba;
--cds-tag-color-green: #0e6027;
--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-notification-background-error: #fff1f1;
--cds-notification-background-success: #defbe6;
--cds-notification-background-info: #edf5ff;
--cds-notification-background-warning: #fcf4d6;
--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-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);
}
body.cds--dark-theme {
--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: #001d6c;
--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-spacing-01: 0.125rem;
--cds-spacing-02: 0.25rem;
--cds-spacing-03: 0.5rem;
--cds-spacing-04: 0.75rem;
--cds-spacing-05: 1rem;
--cds-spacing-06: 1.5rem;
--cds-spacing-07: 2rem;
--cds-spacing-08: 2.5rem;
--cds-spacing-09: 3rem;
--cds-spacing-10: 4rem;
--cds-spacing-11: 5rem;
--cds-spacing-12: 6rem;
--cds-spacing-13: 10rem;
--cds-fluid-spacing-01: 0;
--cds-fluid-spacing-02: 2vw;
--cds-fluid-spacing-03: 5vw;
--cds-fluid-spacing-04: 10vw;
--cds-caption-01-font-size: 0.75rem;
--cds-caption-01-font-weight: 400;
--cds-caption-01-line-height: 1.33333;
--cds-caption-01-letter-spacing: 0.32px;
--cds-caption-02-font-size: 0.875rem;
--cds-caption-02-font-weight: 400;
--cds-caption-02-line-height: 1.28572;
--cds-caption-02-letter-spacing: 0.32px;
--cds-label-01-font-size: 0.75rem;
--cds-label-01-font-weight: 400;
--cds-label-01-line-height: 1.33333;
--cds-label-01-letter-spacing: 0.32px;
--cds-label-02-font-size: 0.875rem;
--cds-label-02-font-weight: 400;
--cds-label-02-line-height: 1.28572;
--cds-label-02-letter-spacing: 0.16px;
--cds-helper-text-01-font-size: 0.75rem;
--cds-helper-text-01-line-height: 1.33333;
--cds-helper-text-01-letter-spacing: 0.32px;
--cds-helper-text-02-font-size: 0.875rem;
--cds-helper-text-02-font-weight: 400;
--cds-helper-text-02-line-height: 1.28572;
--cds-helper-text-02-letter-spacing: 0.16px;
--cds-body-short-01-font-size: 0.875rem;
--cds-body-short-01-font-weight: 400;
--cds-body-short-01-line-height: 1.28572;
--cds-body-short-01-letter-spacing: 0.16px;
--cds-body-short-02-font-size: 1rem;
--cds-body-short-02-font-weight: 400;
--cds-body-short-02-line-height: 1.375;
--cds-body-short-02-letter-spacing: 0;
--cds-body-long-01-font-size: 0.875rem;
--cds-body-long-01-font-weight: 400;
--cds-body-long-01-line-height: 1.42857;
--cds-body-long-01-letter-spacing: 0.16px;
--cds-body-long-02-font-size: 1rem;
--cds-body-long-02-font-weight: 400;
--cds-body-long-02-line-height: 1.5;
--cds-body-long-02-letter-spacing: 0;
--cds-code-01-font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
--cds-code-01-font-size: 0.75rem;
--cds-code-01-font-weight: 400;
--cds-code-01-line-height: 1.33333;
--cds-code-01-letter-spacing: 0.32px;
--cds-code-02-font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
--cds-code-02-font-size: 0.875rem;
--cds-code-02-font-weight: 400;
--cds-code-02-line-height: 1.42857;
--cds-code-02-letter-spacing: 0.32px;
--cds-heading-01-font-size: 0.875rem;
--cds-heading-01-font-weight: 600;
--cds-heading-01-line-height: 1.42857;
--cds-heading-01-letter-spacing: 0.16px;
--cds-heading-02-font-size: 1rem;
--cds-heading-02-font-weight: 600;
--cds-heading-02-line-height: 1.5;
--cds-heading-02-letter-spacing: 0;
--cds-productive-heading-01-font-size: 0.875rem;
--cds-productive-heading-01-font-weight: 600;
--cds-productive-heading-01-line-height: 1.28572;
--cds-productive-heading-01-letter-spacing: 0.16px;
--cds-productive-heading-02-font-size: 1rem;
--cds-productive-heading-02-font-weight: 600;
--cds-productive-heading-02-line-height: 1.375;
--cds-productive-heading-02-letter-spacing: 0;
--cds-productive-heading-03-font-size: 1.25rem;
--cds-productive-heading-03-font-weight: 400;
--cds-productive-heading-03-line-height: 1.4;
--cds-productive-heading-03-letter-spacing: 0;
--cds-productive-heading-04-font-size: 1.75rem;
--cds-productive-heading-04-font-weight: 400;
--cds-productive-heading-04-line-height: 1.28572;
--cds-productive-heading-04-letter-spacing: 0;
--cds-productive-heading-05-font-size: 2rem;
--cds-productive-heading-05-font-weight: 400;
--cds-productive-heading-05-line-height: 1.25;
--cds-productive-heading-05-letter-spacing: 0;
--cds-productive-heading-06-font-size: 2.625rem;
--cds-productive-heading-06-font-weight: 300;
--cds-productive-heading-06-line-height: 1.199;
--cds-productive-heading-06-letter-spacing: 0;
--cds-productive-heading-07-font-size: 3.375rem;
--cds-productive-heading-07-font-weight: 300;
--cds-productive-heading-07-line-height: 1.19;
--cds-productive-heading-07-letter-spacing: 0;
--cds-expressive-paragraph-01-font-size: 1.5rem;
--cds-expressive-paragraph-01-font-weight: 300;
--cds-expressive-paragraph-01-line-height: 1.334;
--cds-expressive-paragraph-01-letter-spacing: 0;
--cds-expressive-heading-01-font-size: 0.875rem;
--cds-expressive-heading-01-font-weight: 600;
--cds-expressive-heading-01-line-height: 1.42857;
--cds-expressive-heading-01-letter-spacing: 0.16px;
--cds-expressive-heading-02-font-size: 1rem;
--cds-expressive-heading-02-font-weight: 600;
--cds-expressive-heading-02-line-height: 1.5;
--cds-expressive-heading-02-letter-spacing: 0;
--cds-expressive-heading-03-font-size: 1.25rem;
--cds-expressive-heading-03-font-weight: 400;
--cds-expressive-heading-03-line-height: 1.4;
--cds-expressive-heading-03-letter-spacing: 0;
--cds-expressive-heading-04-font-size: 1.75rem;
--cds-expressive-heading-04-font-weight: 400;
--cds-expressive-heading-04-line-height: 1.28572;
--cds-expressive-heading-04-letter-spacing: 0;
--cds-expressive-heading-05-font-size: 2rem;
--cds-expressive-heading-05-font-weight: 400;
--cds-expressive-heading-05-line-height: 1.25;
--cds-expressive-heading-05-letter-spacing: 0;
--cds-expressive-heading-06-font-size: 2rem;
--cds-expressive-heading-06-font-weight: 600;
--cds-expressive-heading-06-line-height: 1.25;
--cds-expressive-heading-06-letter-spacing: 0;
--cds-quotation-01-font-family: 'IBM Plex Serif', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', serif;
--cds-quotation-01-font-size: 1.25rem;
--cds-quotation-01-font-weight: 400;
--cds-quotation-01-line-height: 1.3;
--cds-quotation-01-letter-spacing: 0;
--cds-quotation-02-font-family: 'IBM Plex Serif', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', serif;
--cds-quotation-02-font-size: 2rem;
--cds-quotation-02-font-weight: 300;
--cds-quotation-02-line-height: 1.25;
--cds-quotation-02-letter-spacing: 0;
--cds-display-01-font-size: 2.625rem;
--cds-display-01-font-weight: 300;
--cds-display-01-line-height: 1.19;
--cds-display-01-letter-spacing: 0;
--cds-display-02-font-size: 2.625rem;
--cds-display-02-font-weight: 600;
--cds-display-02-line-height: 1.19;
--cds-display-02-letter-spacing: 0;
--cds-display-03-font-size: 2.625rem;
--cds-display-03-font-weight: 300;
--cds-display-03-line-height: 1.19;
--cds-display-03-letter-spacing: 0;
--cds-display-04-font-size: 2.625rem;
--cds-display-04-font-weight: 300;
--cds-display-04-line-height: 1.19;
--cds-display-04-letter-spacing: 0;
--cds-legal-01-font-size: 0.75rem;
--cds-legal-01-font-weight: 400;
--cds-legal-01-line-height: 1.33333;
--cds-legal-01-letter-spacing: 0.32px;
--cds-legal-02-font-size: 0.875rem;
--cds-legal-02-font-weight: 400;
--cds-legal-02-line-height: 1.28572;
--cds-legal-02-letter-spacing: 0.16px;
--cds-body-compact-01-font-size: 0.875rem;
--cds-body-compact-01-font-weight: 400;
--cds-body-compact-01-line-height: 1.28572;
--cds-body-compact-01-letter-spacing: 0.16px;
--cds-body-compact-02-font-size: 1rem;
--cds-body-compact-02-font-weight: 400;
--cds-body-compact-02-line-height: 1.375;
--cds-body-compact-02-letter-spacing: 0;
--cds-heading-compact-01-font-size: 0.875rem;
--cds-heading-compact-01-font-weight: 600;
--cds-heading-compact-01-line-height: 1.28572;
--cds-heading-compact-01-letter-spacing: 0.16px;
--cds-heading-compact-02-font-size: 1rem;
--cds-heading-compact-02-font-weight: 600;
--cds-heading-compact-02-line-height: 1.375;
--cds-heading-compact-02-letter-spacing: 0;
--cds-body-01-font-size: 0.875rem;
--cds-body-01-font-weight: 400;
--cds-body-01-line-height: 1.42857;
--cds-body-01-letter-spacing: 0.16px;
--cds-body-02-font-size: 1rem;
--cds-body-02-font-weight: 400;
--cds-body-02-line-height: 1.5;
--cds-body-02-letter-spacing: 0;
--cds-heading-03-font-size: 1.25rem;
--cds-heading-03-font-weight: 400;
--cds-heading-03-line-height: 1.4;
--cds-heading-03-letter-spacing: 0;
--cds-heading-04-font-size: 1.75rem;
--cds-heading-04-font-weight: 400;
--cds-heading-04-line-height: 1.28572;
--cds-heading-04-letter-spacing: 0;
--cds-heading-05-font-size: 2rem;
--cds-heading-05-font-weight: 400;
--cds-heading-05-line-height: 1.25;
--cds-heading-05-letter-spacing: 0;
--cds-heading-06-font-size: 2.625rem;
--cds-heading-06-font-weight: 300;
--cds-heading-06-line-height: 1.199;
--cds-heading-06-letter-spacing: 0;
--cds-heading-07-font-size: 3.375rem;
--cds-heading-07-font-weight: 300;
--cds-heading-07-line-height: 1.19;
--cds-heading-07-letter-spacing: 0;
--cds-fluid-heading-03-font-size: 1.25rem;
--cds-fluid-heading-03-font-weight: 400;
--cds-fluid-heading-03-line-height: 1.4;
--cds-fluid-heading-03-letter-spacing: 0;
--cds-fluid-heading-04-font-size: 1.75rem;
--cds-fluid-heading-04-font-weight: 400;
--cds-fluid-heading-04-line-height: 1.28572;
--cds-fluid-heading-04-letter-spacing: 0;
--cds-fluid-heading-05-font-size: 2rem;
--cds-fluid-heading-05-font-weight: 400;
--cds-fluid-heading-05-line-height: 1.25;
--cds-fluid-heading-05-letter-spacing: 0;
--cds-fluid-heading-06-font-size: 2rem;
--cds-fluid-heading-06-font-weight: 600;
--cds-fluid-heading-06-line-height: 1.25;
--cds-fluid-heading-06-letter-spacing: 0;
--cds-fluid-paragraph-01-font-size: 1.5rem;
--cds-fluid-paragraph-01-font-weight: 300;
--cds-fluid-paragraph-01-line-height: 1.334;
--cds-fluid-paragraph-01-letter-spacing: 0;
--cds-fluid-quotation-01-font-family: 'IBM Plex Serif', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', serif;
--cds-fluid-quotation-01-font-size: 1.25rem;
--cds-fluid-quotation-01-font-weight: 400;
--cds-fluid-quotation-01-line-height: 1.3;
--cds-fluid-quotation-01-letter-spacing: 0;
--cds-fluid-quotation-02-font-family: 'IBM Plex Serif', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', serif;
--cds-fluid-quotation-02-font-size: 2rem;
--cds-fluid-quotation-02-font-weight: 300;
--cds-fluid-quotation-02-line-height: 1.25;
--cds-fluid-quotation-02-letter-spacing: 0;
--cds-fluid-display-01-font-size: 2.625rem;
--cds-fluid-display-01-font-weight: 300;
--cds-fluid-display-01-line-height: 1.19;
--cds-fluid-display-01-letter-spacing: 0;
--cds-fluid-display-02-font-size: 2.625rem;
--cds-fluid-display-02-font-weight: 600;
--cds-fluid-display-02-line-height: 1.19;
--cds-fluid-display-02-letter-spacing: 0;
--cds-fluid-display-03-font-size: 2.625rem;
--cds-fluid-display-03-font-weight: 300;
--cds-fluid-display-03-line-height: 1.19;
--cds-fluid-display-03-letter-spacing: 0;
--cds-fluid-display-04-font-size: 2.625rem;
--cds-fluid-display-04-font-weight: 300;
--cds-fluid-display-04-line-height: 1.19;
--cds-fluid-display-04-letter-spacing: 0;
--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-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-notification-background-error: #262626;
--cds-notification-background-success: #262626;
--cds-notification-background-info: #262626;
--cds-notification-background-warning: #262626;
--cds-notification-action-hover: var(--cds-layer-hover);
--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-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--overflow-menu-options a {
text-decoration: none;
}