@carbon/ibm-cloud-cognitive-experimental/css/index.css

Carbon for Cloud & Cognitive UI components

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{
  margin:0;
  padding:0;
  font:inherit;
  font-size:100%;
  vertical-align:baseline;
  border:0; }

button,
select,
input,
textarea{
  font-family:inherit;
  border-radius:0; }

input[type='text']::-ms-clear{
  display:none; }
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section{
  display:block; }

body{
  line-height:1; }

sup{
  vertical-align:super; }

sub{
  vertical-align:sub; }

ol,
ul{
  list-style:none; }

blockquote,
q{
  quotes:none; }

blockquote::before,
blockquote::after,
q::before,
q::after{
  content:''; }

table{
  border-collapse:collapse;
  border-spacing:0; }

*{
  box-sizing:border-box; }

button{
  margin:0; }

html{
  font-size:100%; }

body{
  font-weight:400;
  font-family:'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale; }

code{
  font-family:'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; }

strong{
  font-weight:600; }

@media screen and (-ms-high-contrast: active){
  svg{
    fill:ButtonText; } }

h1{
  font-size:var(--cds-productive-heading-06-font-size, 2.625rem);
  font-weight:var(--cds-productive-heading-06-font-weight, 300);
  line-height:var(--cds-productive-heading-06-line-height, 1.199);
  letter-spacing:var(--cds-productive-heading-06-letter-spacing, 0); }

h2{
  font-size:var(--cds-productive-heading-05-font-size, 2rem);
  font-weight:var(--cds-productive-heading-05-font-weight, 400);
  line-height:var(--cds-productive-heading-05-line-height, 1.25);
  letter-spacing:var(--cds-productive-heading-05-letter-spacing, 0); }

h3{
  font-size:var(--cds-productive-heading-04-font-size, 1.75rem);
  font-weight:var(--cds-productive-heading-04-font-weight, 400);
  line-height:var(--cds-productive-heading-04-line-height, 1.29);
  letter-spacing:var(--cds-productive-heading-04-letter-spacing, 0); }

h4{
  font-size:var(--cds-productive-heading-03-font-size, 1.25rem);
  font-weight:var(--cds-productive-heading-03-font-weight, 400);
  line-height:var(--cds-productive-heading-03-line-height, 1.4);
  letter-spacing:var(--cds-productive-heading-03-letter-spacing, 0); }

h5{
  font-size:var(--cds-productive-heading-02-font-size, 1rem);
  font-weight:var(--cds-productive-heading-02-font-weight, 600);
  line-height:var(--cds-productive-heading-02-line-height, 1.375);
  letter-spacing:var(--cds-productive-heading-02-letter-spacing, 0); }

h6{
  font-size:var(--cds-productive-heading-01-font-size, 0.875rem);
  font-weight:var(--cds-productive-heading-01-font-weight, 600);
  line-height:var(--cds-productive-heading-01-line-height, 1.29);
  letter-spacing:var(--cds-productive-heading-01-letter-spacing, 0.16px); }

p{
  font-size:var(--cds-body-long-02-font-size, 1rem);
  font-weight:var(--cds-body-long-02-font-weight, 400);
  line-height:var(--cds-body-long-02-line-height, 1.5);
  letter-spacing:var(--cds-body-long-02-letter-spacing, 0); }

a{
  color:#0f62fe; }

em{
  font-style:italic; }

@-webkit-keyframes skeleton{
  0%{
    -webkit-transform:scaleX(0);
            transform:scaleX(0);
    -webkit-transform-origin:left;
            transform-origin:left;
    opacity:0.3; }
  20%{
    -webkit-transform:scaleX(1);
            transform:scaleX(1);
    -webkit-transform-origin:left;
            transform-origin:left;
    opacity:1; }
  28%{
    -webkit-transform:scaleX(1);
            transform:scaleX(1);
    -webkit-transform-origin:right;
            transform-origin:right; }
  51%{
    -webkit-transform:scaleX(0);
            transform:scaleX(0);
    -webkit-transform-origin:right;
            transform-origin:right; }
  58%{
    -webkit-transform:scaleX(0);
            transform:scaleX(0);
    -webkit-transform-origin:right;
            transform-origin:right; }
  82%{
    -webkit-transform:scaleX(1);
            transform:scaleX(1);
    -webkit-transform-origin:right;
            transform-origin:right; }
  83%{
    -webkit-transform:scaleX(1);
            transform:scaleX(1);
    -webkit-transform-origin:left;
            transform-origin:left; }
  96%{
    -webkit-transform:scaleX(0);
            transform:scaleX(0);
    -webkit-transform-origin:left;
            transform-origin:left; }
  100%{
    -webkit-transform:scaleX(0);
            transform:scaleX(0);
    -webkit-transform-origin:left;
            transform-origin:left;
    opacity:0.3; } }

@keyframes skeleton{
  0%{
    -webkit-transform:scaleX(0);
            transform:scaleX(0);
    -webkit-transform-origin:left;
            transform-origin:left;
    opacity:0.3; }
  20%{
    -webkit-transform:scaleX(1);
            transform:scaleX(1);
    -webkit-transform-origin:left;
            transform-origin:left;
    opacity:1; }
  28%{
    -webkit-transform:scaleX(1);
            transform:scaleX(1);
    -webkit-transform-origin:right;
            transform-origin:right; }
  51%{
    -webkit-transform:scaleX(0);
            transform:scaleX(0);
    -webkit-transform-origin:right;
            transform-origin:right; }
  58%{
    -webkit-transform:scaleX(0);
            transform:scaleX(0);
    -webkit-transform-origin:right;
            transform-origin:right; }
  82%{
    -webkit-transform:scaleX(1);
            transform:scaleX(1);
    -webkit-transform-origin:right;
            transform-origin:right; }
  83%{
    -webkit-transform:scaleX(1);
            transform:scaleX(1);
    -webkit-transform-origin:left;
            transform-origin:left; }
  96%{
    -webkit-transform:scaleX(0);
            transform:scaleX(0);
    -webkit-transform-origin:left;
            transform-origin:left; }
  100%{
    -webkit-transform:scaleX(0);
            transform:scaleX(0);
    -webkit-transform-origin:left;
            transform-origin:left;
    opacity:0.3; } }

.bx--assistive-text,
.bx--visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  white-space:nowrap;
  border:0;
  visibility:inherit;
  clip:rect(0, 0, 0, 0); }

.bx--body{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-size:100%;
  font-family:inherit;
  vertical-align:baseline;
  border:0;
  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.29);
  letter-spacing:var(--cds-body-short-01-letter-spacing, 0.16px);
  color:var(--cds-text-01, #161616);
  line-height:1;
  background-color:var(--cds-ui-background, #ffffff); }
  .bx--body *,
  .bx--body *::before,
  .bx--body *::after{
    box-sizing:inherit; }

.bx--text-truncate--end{
  display:inline-block;
  width:100%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis; }

.bx--text-truncate--front{
  display:inline-block;
  width:100%;
  overflow:hidden;
  direction:rtl;
  white-space:nowrap;
  text-overflow:ellipsis; }

@-webkit-keyframes hide-feedback{
  0%{
    visibility:inherit;
    opacity:1; }
  100%{
    visibility:hidden;
    opacity:0; } }

@keyframes hide-feedback{
  0%{
    visibility:inherit;
    opacity:1; }
  100%{
    visibility:hidden;
    opacity:0; } }

@-webkit-keyframes show-feedback{
  0%{
    visibility:hidden;
    opacity:0; }
  100%{
    visibility:inherit;
    opacity:1; } }

@keyframes show-feedback{
  0%{
    visibility:hidden;
    opacity:0; }
  100%{
    visibility:inherit;
    opacity:1; } }

.bx--snippet{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-size:100%;
  font-family:inherit;
  vertical-align:baseline;
  border:0; }
  .bx--snippet *,
  .bx--snippet *::before,
  .bx--snippet *::after{
    box-sizing:inherit; }

.bx--snippet--disabled,
.bx--snippet--disabled
.bx--btn.bx--snippet-btn--expand{
  color:var(--cds-disabled-02, #c6c6c6);
  background-color:var(--cds-disabled-01, #f4f4f4); }

.bx--snippet--disabled .bx--snippet-btn--expand:hover,
.bx--snippet--disabled .bx--copy-btn:hover{
  color:var(--cds-disabled-02, #c6c6c6);
  background-color:var(--cds-disabled-01, #f4f4f4);
  cursor:not-allowed; }

.bx--snippet--disabled .bx--snippet__icon,
.bx--snippet--disabled
.bx--snippet-btn--expand
.bx--icon-chevron--down{
  fill:var(--cds-disabled-02, #c6c6c6); }

.bx--snippet code{
  font-family:var(--cds-code-01-font-family, 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, 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.34);
  letter-spacing:var(--cds-code-01-letter-spacing, 0.32px); }

.bx--snippet--inline{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-size:100%;
  font-family:inherit;
  vertical-align:baseline;
  border:0;
  position:relative;
  display:inline;
  padding:0;
  color:var(--cds-text-01, #161616);
  background-color:var(--cds-field-01, #f4f4f4);
  border:2px solid transparent;
  border-radius:4px;
  cursor:pointer; }
  .bx--snippet--inline *,
  .bx--snippet--inline *::before,
  .bx--snippet--inline *::after{
    box-sizing:inherit; }
  .bx--snippet--inline:hover{
    background-color:var(--cds-ui-03, #e0e0e0); }
  .bx--snippet--inline:active{
    background-color:var(--cds-active-ui, #c6c6c6); }
  .bx--snippet--inline:focus{
    border:2px solid var(--cds-focus, #0f62fe);
    outline:none; }
    @media screen and (prefers-contrast){
      .bx--snippet--inline:focus{
        border-style:dotted; } }
  .bx--snippet--inline::before{
    position:absolute;
    z-index:6000;
    width:0;
    height:0;
    border-style:solid;
    content:'';
    display:none; }
  .bx--snippet--inline .bx--copy-btn__feedback{
    box-shadow:0 2px 6px rgba(0, 0, 0, 0.2);
    z-index:6000;
    width:-webkit-max-content;
    width:-moz-max-content;
    width:max-content;
    min-width:1.5rem;
    max-width:13rem;
    height:auto;
    padding:0.1875rem 1rem;
    color:var(--cds-inverse-01, #ffffff);
    font-weight:400;
    text-align:left;
    background-color:var(--cds-inverse-02, #393939);
    border-radius:0.125rem;
    -webkit-transform:translateX(-50%);
            transform:translateX(-50%);
    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.29);
    letter-spacing:var(--cds-body-short-01-letter-spacing, 0.16px);
    display:none;
    box-sizing:content-box;
    margin:auto;
    overflow:visible;
    clip:auto; }
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active){
      .bx--snippet--inline .bx--copy-btn__feedback{
        width:auto; } }
    @supports (-ms-accelerator: true){
      .bx--snippet--inline .bx--copy-btn__feedback{
        width:auto; } }
    @supports (-ms-ime-align: auto){
      .bx--snippet--inline .bx--copy-btn__feedback{
        width:auto; } }
    @media screen and (-ms-high-contrast: active), screen and (prefers-contrast){
      .bx--snippet--inline .bx--copy-btn__feedback{
        border:1px solid transparent; } }
  .bx--snippet--inline .bx--assistive-text::after{
    position:absolute;
    display:block;
    content:'';
    left:0;
    width:100%;
    height:0.75rem;
    top:-0.75rem; }
  .bx--snippet--inline::before, .bx--snippet--inline::after,
  .bx--snippet--inline .bx--assistive-text,
  .bx--snippet--inline + .bx--assistive-text{
    bottom:0;
    left:50%; }
  .bx--snippet--inline::before{
    bottom:-0.5rem;
    border-color:transparent transparent var(--cds-inverse-02, #393939) transparent;
    border-width:0 0.25rem 0.3125rem 0.25rem;
    -webkit-transform:translate(-50%, 100%);
            transform:translate(-50%, 100%); }
  .bx--snippet--inline::after,
  .bx--snippet--inline .bx--assistive-text,
  .bx--snippet--inline + .bx--assistive-text{
    bottom:-0.8125rem;
    -webkit-transform:translate(-50%, 100%);
            transform:translate(-50%, 100%); }

.bx--snippet--inline.bx--copy-btn--animating::before,
.bx--snippet--inline.bx--copy-btn--animating
.bx--copy-btn__feedback{
  display:block; }

.bx--snippet--inline.bx--copy-btn--animating.bx--copy-btn--fade-out::before,
.bx--snippet--inline.bx--copy-btn--animating.bx--copy-btn--fade-out
.bx--copy-btn__feedback{
  -webkit-animation:110ms cubic-bezier(0.2, 0, 0.38, 0.9) hide-feedback;
          animation:110ms cubic-bezier(0.2, 0, 0.38, 0.9) hide-feedback; }

.bx--snippet--inline.bx--copy-btn--animating.bx--copy-btn--fade-in::before,
.bx--snippet--inline.bx--copy-btn--animating.bx--copy-btn--fade-in
.bx--copy-btn__feedback{
  -webkit-animation:110ms cubic-bezier(0.2, 0, 0.38, 0.9) show-feedback;
          animation:110ms cubic-bezier(0.2, 0, 0.38, 0.9) show-feedback; }

.bx--snippet--inline code{
  padding:0 var(--cds-spacing-03, 0.5rem); }

.bx--snippet--inline.bx--snippet--no-copy{
  display:inline-block; }
  .bx--snippet--inline.bx--snippet--no-copy:hover{
    background-color:var(--cds-field-01, #f4f4f4);
    cursor:auto; }

.bx--snippet--light.bx--snippet--inline.bx--snippet--no-copy:hover{
  background-color:var(--cds-field-02, #ffffff);
  cursor:auto; }

.bx--snippet--single{
  font-family:var(--cds-code-01-font-family, 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, 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.34);
  letter-spacing:var(--cds-code-01-letter-spacing, 0.32px);
  position:relative;
  width:100%;
  max-width:48rem;
  background-color:var(--cds-field-01, #f4f4f4);
  display:flex;
  align-items:center;
  height:2.5rem;
  padding-right:2.5rem; }
  @media screen and (-ms-high-contrast: active), screen and (prefers-contrast){
    .bx--snippet--single{
      outline:2px solid transparent; } }

.bx--snippet--single.bx--snippet--no-copy{
  padding:0; }
  .bx--snippet--single.bx--snippet--no-copy::after{
    right:1rem; }

.bx--snippet--single .bx--snippet-container{
  position:relative;
  display:flex;
  align-items:center;
  height:100%;
  padding-left:1rem;
  overflow-x:auto; }
  .bx--snippet--single .bx--snippet-container:focus{
    outline:2px solid var(--cds-focus, #0f62fe);
    outline-offset:-2px; }
    @media screen and (prefers-contrast){
      .bx--snippet--single .bx--snippet-container:focus{
        outline-style:dotted; } }

.bx--snippet--single pre{
  font-family:var(--cds-code-01-font-family, 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, 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.34);
  letter-spacing:var(--cds-code-01-letter-spacing, 0.32px);
  padding-right:var(--cds-spacing-03, 0.5rem); }

.bx--snippet--single pre,
.bx--snippet--inline code{
  white-space:pre; }

.bx--snippet--multi{
  font-family:var(--cds-code-01-font-family, 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, 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.34);
  letter-spacing:var(--cds-code-01-letter-spacing, 0.32px);
  position:relative;
  width:100%;
  max-width:48rem;
  background-color:var(--cds-field-01, #f4f4f4);
  display:flex;
  padding:1rem; }
  @media screen and (-ms-high-contrast: active), screen and (prefers-contrast){
    .bx--snippet--multi{
      outline:2px solid transparent; } }

.bx--snippet--multi .bx--snippet-container{
  position:relative;
  order:1;
  min-height:3.5rem;
  max-height:100%;
  overflow-y:auto;
  transition:max-height 150ms cubic-bezier(0.2, 0, 0.38, 0.9); }

.bx--snippet--multi.bx--snippet--expand
.bx--snippet-container{
  padding-bottom:var(--cds-spacing-05, 1rem);
  transition:max-height 150ms cubic-bezier(0.2, 0, 0.38, 0.9); }

.bx--snippet--multi.bx--snippet--wraptext pre{
  white-space:pre-wrap;
  word-wrap:break-word; }

.bx--snippet--multi .bx--snippet-container pre{
  padding-right:2.5rem;
  padding-bottom:1.5rem;
  overflow-x:auto; }

.bx--snippet--multi.bx--snippet--no-copy
.bx--snippet-container
pre{
  padding-right:0; }

.bx--snippet--multi.bx--snippet--expand
.bx--snippet-container
pre{
  overflow-x:auto; }

.bx--snippet--multi .bx--snippet-container pre::after{
  position:absolute;
  top:0;
  right:0;
  width:1rem;
  height:100%;
  background-image:linear-gradient(to right, rgba(var(--cds-field-01, #f4f4f4), 0), var(--cds-field-01, #f4f4f4));
  content:''; }

.bx--snippet--multi .bx--snippet-container pre code{
  overflow:hidden; }

.bx--snippet__icon{
  width:1rem;
  height:1rem;
  transition:all 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
  fill:var(--cds-icon-01, #161616); }
  @media screen and (-ms-high-contrast: active), screen and (prefers-contrast){
    .bx--snippet__icon{
      fill:ButtonText; } }

.bx--snippet-button{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-size:100%;
  font-family:inherit;
  vertical-align:baseline;
  border:0;
  position:absolute;
  top:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:2.5rem;
  height:2.5rem;
  padding:0;
  overflow:visible;
  background-color:var(--cds-field-01, #f4f4f4);
  border:none;
  outline:none;
  cursor:pointer; }
  .bx--snippet-button *,
  .bx--snippet-button *::before,
  .bx--snippet-button *::after{
    box-sizing:inherit; }
  .bx--snippet-button:focus{
    outline:2px solid var(--cds-focus, #0f62fe);
    outline-offset:-2px;
    outline-color:var(--cds-focus, #0f62fe); }
    @media screen and (prefers-contrast){
      .bx--snippet-button:focus{
        outline-style:dotted; } }

.bx--snippet--multi .bx--snippet-button{
  top:var(--cds-spacing-03, 0.5rem);
  right:var(--cds-spacing-03, 0.5rem);
  width:2rem;
  height:2rem; }

.bx--snippet-button:hover{
  background:var(--cds-hover-ui, #e5e5e5); }

.bx--snippet-button:active{
  background-color:var(--cds-active-ui, #c6c6c6); }

.bx--btn--copy__feedback{
  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.29);
  letter-spacing:var(--cds-body-short-01-letter-spacing, 0.16px);
  font-family:'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  top:0.75rem;
  right:1.25rem;
  left:inherit;
  z-index:6000;
  font-weight:400; }

.bx--btn--copy__feedback::before,
.bx--btn--copy__feedback::after{
  background:var(--cds-inverse-02, #393939); }

.bx--btn--copy__feedback::after{
  border:none; }

.bx--snippet .bx--copy-btn{
  position:absolute;
  top:0;
  right:0;
  font-family:'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; }

.bx--snippet-btn--expand{
  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.29);
  letter-spacing:var(--cds-body-short-01-letter-spacing, 0.16px);
  font-family:'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  position:absolute;
  right:0;
  bottom:0;
  z-index:10;
  display:inline-flex;
  align-items:center;
  padding:var(--cds-spacing-03, 0.5rem) var(--cds-spacing-05, 1rem);
  color:var(--cds-text-01, #161616);
  background-color:var(--cds-field-01, #f4f4f4);
  border:0; }

.bx--snippet-btn--expand .bx--snippet-btn--text{
  position:relative;
  top:-0.0625rem; }

.bx--snippet-btn--expand--hide.bx--snippet-btn--expand{
  display:none; }

.bx--snippet-btn--expand .bx--icon-chevron--down{
  margin-left:var(--cds-spacing-03, 0.5rem);
  -webkit-transform:rotate(0deg);
          transform:rotate(0deg);
  transition:150ms cubic-bezier(0.2, 0, 0.38, 0.9);
  fill:var(--cds-text-01, #161616); }

.bx--snippet-btn--expand:hover{
  color:var(--cds-text-01, #161616);
  background:var(--cds-hover-ui, #e5e5e5); }

.bx--snippet-btn--expand:active{
  background-color:var(--cds-active-ui, #c6c6c6); }

.bx--snippet-btn--expand:focus{
  outline:2px solid var(--cds-focus, #0f62fe);
  outline-offset:-2px;
  border-color:transparent; }
  @media screen and (prefers-contrast){
    .bx--snippet-btn--expand:focus{
      outline-style:dotted; } }

.bx--snippet--expand
.bx--snippet-btn--expand
.bx--icon-chevron--down{
  -webkit-transform:rotate(180deg);
          transform:rotate(180deg);
  transition:-webkit-transform 240ms;
  transition:transform 240ms;
  transition:transform 240ms, -webkit-transform 240ms; }

.bx--snippet--light,
.bx--snippet--light .bx--snippet-button,
.bx--snippet--light .bx--btn.bx--snippet-btn--expand,
.bx--snippet--light .bx--copy-btn{
  background-color:var(--cds-field-02, #ffffff); }

.bx--snippet--light.bx--snippet--inline:hover,
.bx--snippet--light .bx--snippet-button:hover,
.bx--snippet--light
.bx--btn.bx--snippet-btn--expand:hover,
.bx--snippet--light .bx--copy-btn:hover{
  background-color:var(--cds-hover-light-ui, #e5e5e5); }

.bx--snippet--light.bx--snippet--inline:active,
.bx--snippet--light .bx--snippet-button:active,
.bx--snippet--light
.bx--btn.bx--snippet-btn--expand:active,
.bx--snippet--light .bx--copy-btn:active{
  background-color:var(--cds-active-light-ui, #c6c6c6); }

.bx--snippet--light.bx--snippet--single::after,
.bx--snippet--light.bx--snippet--multi
.bx--snippet-container
pre::after{
  background-image:linear-gradient(to right, rgba(var(--cds-field-02, #ffffff), 0), var(--cds-field-02, #ffffff)); }

.bx--snippet.bx--skeleton .bx--snippet-container{
  width:100%;
  height:100%; }

.bx--snippet-button .bx--btn--copy__feedback{
  top:3.175rem;
  right:auto;
  left:50%; }
  .bx--snippet-button .bx--btn--copy__feedback::before{
    top:0; }
  .bx--snippet-button .bx--btn--copy__feedback::after{
    top:-0.25rem; }

.bx--snippet--multi .bx--copy-btn{
  top:0.5rem;
  right:0.5rem;
  z-index:10;
  width:2rem;
  height:2rem; }

.bx--snippet--multi
.bx--snippet-button
.bx--btn--copy__feedback{
  top:2.675rem; }

.bx--snippet--inline .bx--btn--copy__feedback{
  top:calc(100% - 0.25rem);
  right:auto;
  left:50%; }

.bx--snippet__overflow-indicator--left,
.bx--snippet__overflow-indicator--right{
  z-index:1;
  flex:1 0 auto;
  width:1rem; }

.bx--snippet__overflow-indicator--left{
  order:0;
  margin-right:-1rem;
  background-image:linear-gradient(to left, transparent, var(--cds-field-01, #f4f4f4)); }

.bx--snippet__overflow-indicator--right{
  order:2;
  margin-left:-1rem;
  background-image:linear-gradient(to right, transparent, var(--cds-field-01, #f4f4f4)); }

.bx--snippet--single .bx--snippet__overflow-indicator--right,
.bx--snippet--single .bx--snippet__overflow-indicator--left{
  position:absolute;
  width:2rem;
  height:calc(100% - 0.25rem); }

.bx--snippet--single .bx--snippet__overflow-indicator--right{
  right:2.5rem; }

.bx--snippet--single
.bx--snippet-container:focus
~ .bx--snippet__overflow-indicator--right{
  right:calc(2.5rem + 0.125rem); }

.bx--snippet--single
.bx--snippet-container:focus
+ .bx--snippet__overflow-indicator--left{
  left:0.125rem; }

.bx--snippet--light .bx--snippet__overflow-indicator--left{
  background-image:linear-gradient(to left, transparent, var(--cds-field-02, #ffffff)); }

.bx--snippet--light .bx--snippet__overflow-indicator--right{
  background-image:linear-gradient(to right, transparent, var(--cds-field-02, #ffffff)); }

@media not all and (min-resolution: 0.001dpcm){
  @supports (-webkit-appearance: none) and (stroke-color: transparent){
    .bx--snippet__overflow-indicator--left{
      background-image:linear-gradient(to left, rgba(var(--cds-field-01, #f4f4f4), 0), var(--cds-field-01, #f4f4f4)); }
    .bx--snippet__overflow-indicator--right{
      background-image:linear-gradient(to right, rgba(var(--cds-field-01, #f4f4f4), 0), var(--cds-field-01, #f4f4f4)); } } }

.bx--snippet--multi.bx--skeleton{
  height:6.125rem; }

.bx--snippet--single.bx--skeleton{
  height:3.5rem; }

.bx--snippet.bx--skeleton span{
  position:relative;
  padding:0;
  background:var(--cds-skeleton-01, #e5e5e5);
  border:none;
  box-shadow:none;
  pointer-events:none;
  display:block;
  width:100%;
  height:1rem;
  margin-top:0.5rem; }
  .bx--snippet.bx--skeleton span:hover, .bx--snippet.bx--skeleton span:focus, .bx--snippet.bx--skeleton span:active{
    border:none;
    outline:none;
    cursor:default; }
  .bx--snippet.bx--skeleton span::before{
    position:absolute;
    width:100%;
    height:100%;
    background:var(--cds-skeleton-02, #c6c6c6);
    -webkit-animation:3000ms ease-in-out skeleton infinite;
            animation:3000ms ease-in-out skeleton infinite;
    content:'';
    will-change:transform-origin, transform, opacity; }
    @media (prefers-reduced-motion: reduce){
      .bx--snippet.bx--skeleton span::before{
        -webkit-animation:none;
                animation:none; } }
  .bx--snippet.bx--skeleton span:first-child{
    margin:0; }
  .bx--snippet.bx--skeleton span:nth-child(2){
    width:85%; }
  .bx--snippet.bx--skeleton span:nth-child(3){
    width:95%; }

.bx--snippet--single.bx--skeleton
.bx--snippet-container{
  padding-bottom:0; }

.bx--btn{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-size:100%;
  font-family:inherit;
  vertical-align:baseline;
  border:0;
  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.29);
  letter-spacing:var(--cds-body-short-01-letter-spacing, 0.16px);
  position:relative;
  display:inline-flex;
  flex-shrink:0;
  align-items:center;
  justify-content:space-between;
  max-width:20rem;
  min-height:3rem;
  margin:0;
  padding:calc(0.875rem - 3px) 63px calc(0.875rem - 3px) 15px;
  text-align:left;
  text-decoration:none;
  vertical-align:top;
  border-radius:0;
  outline:none;
  cursor:pointer;
  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); }
  .bx--btn *,
  .bx--btn *::before,
  .bx--btn *::after{
    box-sizing:inherit; }
  .bx--btn:disabled, .bx--btn:hover:disabled, .bx--btn:focus:disabled, .bx--btn.bx--btn--disabled, .bx--btn.bx--btn--disabled:hover, .bx--btn.bx--btn--disabled:focus{
    color:var(--cds-disabled-03, #8d8d8d);
    background:var(--cds-disabled-02, #c6c6c6);
    border-color:var(--cds-disabled-02, #c6c6c6);
    box-shadow:none;
    cursor:not-allowed; }
  .bx--btn .bx--btn__icon{
    position:absolute;
    right:1rem;
    flex-shrink:0;
    width:1rem;
    height:1rem; }

.bx--btn::-moz-focus-inner{
  padding:0;
  border:0; }

.bx--btn--primary{
  color:var(--cds-text-04, #ffffff);
  background-color:var(--cds-interactive-01, #0f62fe);
  border-color:transparent;
  border-style:solid;
  border-width:1px; }
  .bx--btn--primary:hover{
    background-color:var(--cds-hover-primary, #0353e9); }
  .bx--btn--primary: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-ui-background, #ffffff); }
    @media screen and (-ms-high-contrast: active), screen and (prefers-contrast){
      .bx--btn--primary:focus{
        outline:3px solid transparent;
        outline-offset:-3px; } }
  .bx--btn--primary:active{
    background-color:var(--cds-active-primary, #002d9c); }
  .bx--btn--primary .bx--btn__icon,
  .bx--btn--primary .bx--btn__icon path:not([data-icon-path]){
    fill:currentColor; }
  .bx--btn--primary:hover{
    color:var(--cds-text-04, #ffffff); }

.bx--btn--secondary{
  color:var(--cds-text-04, #ffffff);
  background-color:var(--cds-interactive-02, #393939);
  border-color:transparent;
  border-style:solid;
  border-width:1px; }
  .bx--btn--secondary:hover{
    background-color:var(--cds-hover-secondary, #4c4c4c); }
  .bx--btn--secondary: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-ui-background, #ffffff); }
    @media screen and (-ms-high-contrast: active), screen and (prefers-contrast){
      .bx--btn--secondary:focus{
        outline:3px solid transparent;
        outline-offset:-3px; } }
  .bx--btn--secondary:active{
    background-color:var(--cds-active-secondary, #6f6f6f); }
  .bx--btn--secondary .bx--btn__icon,
  .bx--btn--secondary .bx--btn__icon path:not([data-icon-path]){
    fill:currentColor; }
  .bx--btn--secondary:hover, .bx--btn--secondary:focus{
    color:var(--cds-text-04, #ffffff); }

.bx--btn--tertiary{
  color:var(--cds-interactive-03, #0f62fe);
  background-color:transparent;
  border-color:var(--cds-interactive-03, #0f62fe);
  border-style:solid;
  border-width:1px; }
  .bx--btn--tertiary:hover{
    background-color:var(--cds-hover-tertiary, #0353e9); }
  .bx--btn--tertiary: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-ui-background, #ffffff); }
    @media screen and (-ms-high-contrast: active), screen and (prefers-contrast){
      .bx--btn--tertiary:focus{
        outline:3px solid transparent;
        outline-offset:-3px; } }
  .bx--btn--tertiary:active{
    background-color:var(--cds-active-tertiary, #002d9c); }
  .bx--btn--tertiary .bx--btn__icon,
  .bx--btn--tertiary .bx--btn__icon path:not([data-icon-path]){
    fill:currentColor; }
  .bx--btn--tertiary:hover{
    color:var(--cds-inverse-01, #ffffff); }
  .bx--btn--tertiary:focus{
    color:var(--cds-inverse-01, #ffffff);
    background-color:var(--cds-interactive-03, #0f62fe); }
  .bx--btn--tertiary:active{
    color:var(--cds-inverse-01, #ffffff);
    background-color:var(--cds-active-tertiary, #002d9c);
    border-color:transparent; }
  .bx--btn--tertiary:disabled, .bx--btn--tertiary:hover:disabled, .bx--btn--tertiary:focus:disabled, .bx--btn--tertiary.bx--btn--disabled, .bx--btn--tertiary.bx--btn--disabled:hover, .bx--btn--tertiary.bx--btn--disabled:focus{
    color:var(--cds-disabled-03, #8d8d8d);
    background:transparent;
    outline:none; }

.bx--btn--ghost{
  color:var(--cds-link-01, #0f62fe);
  background-color:transparent;
  border-color:transparent;
  border-style:solid;
  border-width:1px;
  padding:calc(0.875rem - 3px) 16px; }
  .bx--btn--ghost:hover{
    background-color:var(--cds-hover-ui, #e5e5e5); }
  .bx--btn--ghost: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-ui-background, #ffffff); }
    @media screen and (-ms-high-contrast: active), screen and (prefers-contrast){
      .bx--btn--ghost:focus{
        outline:3px solid transparent;
        outline-offset:-3px; } }
  .bx--btn--ghost:active{
    background-color:var(--cds-active-ui, #c6c6c6); }
  .bx--btn--ghost .bx--btn__icon,
  .bx--btn--ghost .bx--btn__icon path:not([data-icon-path]){
    fill:currentColor; }
  .bx--btn--ghost .bx--btn__icon{
    position:static;
    margin-left:0.5rem; }
  .bx--btn--ghost:hover, .bx--btn--ghost:active{
    color:var(--cds-hover-primary-text, #0043ce); }
  .bx--btn--ghost:active{
    background-color:var(--cds-active-ui, #c6c6c6); }
  .bx--btn--ghost:disabled, .bx--btn--ghost:hover:disabled, .bx--btn--ghost:focus:disabled, .bx--btn--ghost.bx--btn--disabled, .bx--btn--ghost.bx--btn--disabled:hover, .bx--btn--ghost.bx--btn--disabled:focus{
    color:var(--cds-disabled-03, #8d8d8d);
    background:transparent;
    border-color:transparent;
    outline:none; }
  .bx--btn--ghost.bx--btn--sm{
    padding:calc(0.375rem - 3px) 16px; }
  .bx--btn--ghost.bx--btn--field{
    padding:calc(0.675rem - 3px) 16px; }

.bx--btn.bx--btn--icon-only.bx--tooltip__trigger{
  position:relative;
  display:inline-flex;
  align-items:center;
  overflow:visible;
  cursor:pointer; }
  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus{
    outline:1px solid var(--cds-focus, #0f62fe); }
    @media screen and (prefers-contrast){
      .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus{
        outline-style:dotted; } }
  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus{
    outline:1px solid transparent; }
    .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus svg{
      outline:1px solid var(--cds-focus, #0f62fe); }
      @media screen and (prefers-contrast){
        .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus svg{
          outline-style:dotted; } }
  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::before, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::after,
  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .bx--assistive-text,
  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger + .bx--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){
      .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::before, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::after,
      .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .bx--assistive-text,
      .bx--btn.bx--btn--icon-only.bx--tooltip__trigger + .bx--assistive-text{
        display:inline-block; } }
  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::before, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::after{
    transition:opacity 70ms cubic-bezier(0.2, 0, 0.38, 0.9); }
  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--a11y::before, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--a11y::after{
    transition:none; }
  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::before{
    width:0;
    height:0;
    border-style:solid;
    content:''; }
  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .bx--assistive-text,
  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger + .bx--assistive-text{
    box-sizing:content-box;
    color:inherit;
    white-space:normal;
    word-break:break-word;
    opacity:1; }
  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::after,
  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .bx--assistive-text,
  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger + .bx--assistive-text{
    box-shadow:0 2px 6px rgba(0, 0, 0, 0.2);
    z-index:6000;
    width:-webkit-max-content;
    width:-moz-max-content;
    width:max-content;
    min-width:1.5rem;
    max-width:13rem;
    height:auto;
    padding:0.1875rem 1rem;
    color:var(--cds-inverse-01, #ffffff);
    font-weight:400;
    text-align:left;
    background-color:var(--cds-inverse-02, #393939);
    border-radius:0.125rem;
    -webkit-transform:translateX(-50%);
            transform:translateX(-50%);
    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.29);
    letter-spacing:var(--cds-body-short-01-letter-spacing, 0.16px); }
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active){
      .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::after,
      .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .bx--assistive-text,
      .bx--btn.bx--btn--icon-only.bx--tooltip__trigger + .bx--assistive-text{
        width:auto; } }
    @supports (-ms-accelerator: true){
      .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::after,
      .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .bx--assistive-text,
      .bx--btn.bx--btn--icon-only.bx--tooltip__trigger + .bx--assistive-text{
        width:auto; } }
    @supports (-ms-ime-align: auto){
      .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::after,
      .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .bx--assistive-text,
      .bx--btn.bx--btn--icon-only.bx--tooltip__trigger + .bx--assistive-text{
        width:auto; } }
    @media screen and (-ms-high-contrast: active), screen and (prefers-contrast){
      .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::after,
      .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .bx--assistive-text,
      .bx--btn.bx--btn--icon-only.bx--tooltip__trigger + .bx--assistive-text{
        border:1px solid transparent; } }
  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::after{
    content:attr(aria-label); }
  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--a11y::after{
    content:none; }
  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--visible::before, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--visible::after, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:hover::before, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:hover::after, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus::before, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus::after{
    opacity:1; }

@-webkit-keyframes tooltip-fade{
  from{
    opacity:0; }
  to{
    opacity:1; } }

@keyframes tooltip-fade{
  from{
    opacity:0; }
  to{
    opacity:1; } }
  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--visible .bx--assistive-text,
  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--visible + .bx--assistive-text, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:hover .bx--assistive-text,
  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:hover + .bx--assistive-text, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus .bx--assistive-text,
  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus + .bx--assistive-text{
    margin:auto;
    overflow:visible;
    clip:auto; }
  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--visible .bx--assistive-text,
  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--visible + .bx--assistive-text, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--visible.bx--tooltip--a11y::before, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:hover .bx--assistive-text,
  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:hover + .bx--assistive-text, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:hover.bx--tooltip--a11y::before, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus .bx--assistive-text,
  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus + .bx--assistive-text, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus.bx--tooltip--a11y::before{
    -webkit-animation:tooltip-fade 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
            animation:tooltip-fade 70ms cubic-bezier(0.2, 0, 0.38, 0.9); }
  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--hidden .bx--assistive-text,
  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--hidden + .bx--assistive-text{
    margin:-1px;
    overflow:hidden;
    clip:rect(0, 0, 0, 0); }
  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--hidden.bx--tooltip--a11y::before{
    opacity:0;
    -webkit-animation:none;
            animation:none; }
  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger svg,
  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:hover svg,
  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus svg{
    fill:currentColor; }
  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--btn--disabled.bx--tooltip--a11y::before, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--btn--disabled.bx--tooltip--a11y::after,
  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--btn--disabled .bx--assistive-text{
    margin:-1px;
    overflow:hidden;
    opacity:0;
    clip:rect(0, 0, 0, 0); }

.bx--btn.bx--btn--icon-only:not(.bx--tooltip--hidden)
.bx--assistive-text{
  pointer-events:all; }

.bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus{
  border-color:var(--cds-focus, #0f62fe); }
  @media screen and (-ms-high-contrast: active), screen and (prefers-contrast){
    .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus{
      outline:3px solid transparent;
      outline-offset:-3px; } }

.bx--btn.bx--btn--icon-only.bx--tooltip__trigger:active:not([disabled]){
  border-color:transparent; }

.bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus
svg{
  outline-color:transparent; }

.bx--btn.bx--btn--icon-only.bx--tooltip__trigger[disabled]:hover,
.bx--btn.bx--btn--icon-only.bx--tooltip__trigger[disabled]:focus,
.bx--btn.bx--btn--icon-only.bx--tooltip__trigger[disabled]:active{
  cursor:not-allowed;
  fill:var(--cds-disabled-03, #8d8d8d); }

.bx--btn--icon-only--top{
  position:relative;
  display:inline-flex;
  align-items:center;
  overflow:visible;
  cursor:pointer; }
  .bx--btn--icon-only--top:focus{
    outline:1px solid var(--cds-focus, #0f62fe); }
    @media screen and (prefers-contrast){
      .bx--btn--icon-only--top:focus{
        outline-style:dotted; } }
  .bx--btn--icon-only--top:focus{
    outline:1px solid transparent; }
    .bx--btn--icon-only--top:focus svg{
      outline:1px solid var(--cds-focus, #0f62fe); }
      @media screen and (prefers-contrast){
        .bx--btn--icon-only--top:focus svg{
          outline-style:dotted; } }
  .bx--btn--icon-only--top::before, .bx--btn--icon-only--top::after,
  .bx--btn--icon-only--top .bx--assistive-text,
  .bx--btn--icon-only--top + .bx--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){
      .bx--btn--icon-only--top::before, .bx--btn--icon-only--top::after,
      .bx--btn--icon-only--top .bx--assistive-text,
      .bx--btn--icon-only--top + .bx--assistive-text{
        display:inline-block; } }
  .bx--btn--icon-only--top::before, .bx--btn--icon-only--top::after{
    transition:opacity 70ms cubic-bezier(0.2, 0, 0.38, 0.9); }
  .bx--btn--icon-only--top.bx--tooltip--a11y::before, .bx--btn--icon-only--top.bx--tooltip--a11y::after{
    transition:none; }
  .bx--btn--icon-only--top::before{
    width:0;
    height:0;
    border-style:solid;
    content:''; }
  .bx--btn--icon-only--top .bx--assistive-text,
  .bx--btn--icon-only--top + .bx--assistive-text{
    box-sizing:content-box;
    color:inherit;
    white-space:normal;
    word-break:break-word;
    opacity:1; }
  .bx--btn--icon-only--top::after,
  .bx--btn--icon-only--top .bx--assistive-text,
  .bx--btn--icon-only--top + .bx--assistive-text{
    box-shadow:0 2px 6px rgba(0, 0, 0, 0.2);
    z-index:6000;
    width:-webkit-max-content;
    width:-moz-max-content;
    width:max-content;
    min-width:1.5rem;
    max-width:13rem;
    height:auto;
    padding:0.1875rem 1rem;
    color:var(--cds-inverse-01, #ffffff);
    font-weight:400;
    text-align:left;
    background-color:var(--cds-inverse-02, #393939);
    border-radius:0.125rem;
    -webkit-transform:translateX(-50%);
            transform:translateX(-50%);
    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.29);
    letter-spacing:var(--cds-body-short-01-letter-spacing, 0.16px); }
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active){
      .bx--btn--icon-only--top::after,
      .bx--btn--icon-only--top .bx--assistive-text,
      .bx--btn--icon-only--top + .bx--assistive-text{
        width:auto; } }
    @supports (-ms-accelerator: true){
      .bx--btn--icon-only--top::after,
      .bx--btn--icon-only--top .bx--assistive-text,
      .bx--btn--icon-only--top + .bx--assistive-text{
        width:auto; } }
    @supports (-ms-ime-align: auto){
      .bx--btn--icon-only--top::after,
      .bx--btn--icon-only--top .bx--assistive-text,
      .bx--btn--icon-only--top + .bx--assistive-text{
        width:auto; } }
    @media screen and (-ms-high-contrast: active), screen and (prefers-contrast){
      .bx--btn--icon-only--top::after,
      .bx--btn--icon-only--top .bx--assistive-text,
      .bx--btn--icon-only--top + .bx--assistive-text{
        border:1px solid transparent; } }
  .bx--btn--icon-only--top::after{
    content:attr(aria-label); }
  .bx--btn--icon-only--top.bx--tooltip--a11y::after{
    content:none; }
  .bx--btn--icon-only--top.bx--tooltip--visible::before, .bx--btn--icon-only--top.bx--tooltip--visible::after, .bx--btn--icon-only--top:hover::before, .bx--btn--icon-only--top:hover::after, .bx--btn--icon-only--top:focus::before, .bx--btn--icon-only--top:focus::after{
    opacity:1; }

@keyframes tooltip-fade{
  from{
    opacity:0; }
  to{
    opacity:1; } }
  .bx--btn--icon-only--top.bx--tooltip--visible .bx--assistive-text,
  .bx--btn--icon-only--top.bx--tooltip--visible + .bx--assistive-text, .bx--btn--icon-only--top:hover .bx--assistive-text,
  .bx--btn--icon-only--top:hover + .bx--assistive-text, .bx--btn--icon-only--top:focus .bx--assistive-text,
  .bx--btn--icon-only--top:focus + .bx--assistive-text{
    margin:auto;
    overflow:visible;
    clip:auto; }
  .bx--btn--icon-only--top.bx--tooltip--visible .bx--assistive-text,
  .bx--btn--icon-only--top.bx--tooltip--visible + .bx--assistive-text, .bx--btn--icon-only--top.bx--tooltip--visible.bx--tooltip--a11y::before, .bx--btn--icon-only--top:hover .bx--assistive-text,
  .bx--btn--icon-only--top:hover + .bx--assistive-text, .bx--btn--icon-only--top:hover.bx--tooltip--a11y::before, .bx--btn--icon-only--top:focus .bx--assistive-text,
  .bx--btn--icon-only--top:focus + .bx--assistive-text, .bx--btn--icon-only--top:focus.bx--tooltip--a11y::before{
    -webkit-animation:tooltip-fade 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
            animation:tooltip-fade 70ms cubic-bezier(0.2, 0, 0.38, 0.9); }
  .bx--btn--icon-only--top.bx--tooltip--hidden .bx--assistive-text,
  .bx--btn--icon-only--top.bx--tooltip--hidden + .bx--assistive-text{
    margin:-1px;
    overflow:hidden;
    clip:rect(0, 0, 0, 0); }
  .bx--btn--icon-only--top.bx--tooltip--hidden.bx--tooltip--a11y::before{
    opacity:0;
    -webkit-animation:none;
            animation:none; }
  .bx--btn--icon-only--top .bx--assistive-text::after{
    position:absolute;
    display:block;
    content:'';
    left:0;
    width:100%;
    height:0.75rem;
    bottom:-0.75rem; }
  .bx--btn--icon-only--top::before, .bx--btn--icon-only--top::after,
  .bx--btn--icon-only--top .bx--assistive-text,
  .bx--btn--icon-only--top + .bx--assistive-text{
    top:0;
    left:50%; }
  .bx--btn--icon-only--top::before{
    top:-0.5rem;
    border-color:var(--cds-inverse-02, #393939) transparent transparent transparent;
    border-width:0.3125rem 0.25rem 0 0.25rem;
    -webkit-transform:translate(-50%, -100%);
            transform:translate(-50%, -100%); }
  .bx--btn--icon-only--top::after,
  .bx--btn--icon-only--top .bx--assistive-text,
  .bx--btn--icon-only--top + .bx--assistive-text{
    top:-0.8125rem;
    left:50%;
    -webkit-transform:translate(-50%, -100%);
            transform:translate(-50%, -100%); }

.bx--btn--icon-only--bottom .bx--assistive-text::after{
  position:absolute;
  display:block;
  content:'';
  left:0;
  width:100%;
  height:0.75rem;
  top:-0.75rem; }

.bx--btn--icon-only--bottom::before, .bx--btn--icon-only--bottom::after,
.bx--btn--icon-only--bottom .bx--assistive-text,
.bx--btn--icon-only--bottom + .bx--assistive-text{
  bottom:0;
  left:50%; }

.bx--btn--icon-only--bottom::before{
  bottom:-0.5rem;
  border-color:transparent transparent var(--cds-inverse-02, #393939) transparent;
  border-width:0 0.25rem 0.3125rem 0.25rem;
  -webkit-transform:translate(-50%, 100%);
          transform:translate(-50%, 100%); }

.bx--btn--icon-only--bottom::after,
.bx--btn--icon-only--bottom .bx--assistive-text,
.bx--btn--icon-only--bottom + .bx--assistive-text{
  bottom:-0.8125rem;
  -webkit-transform:translate(-50%, 100%);
          transform:translate(-50%, 100%); }

.bx--btn--icon-only{
  padding-right:0.9375rem;
  padding-left:0.9375rem; }
  .bx--btn--icon-only .bx--btn__icon{
    position:static; }
  .bx--btn--icon-only.bx--btn--ghost .bx--btn__icon,
  .bx--btn--icon-only.bx--btn--danger--ghost .bx--btn__icon{
    margin:0; }

.bx--btn--icon-only.bx--btn--selected{
  background:var(--cds-selected-ui, #e0e0e0); }

.bx--btn path[data-icon-path='inner-path']{
  fill:none; }

@media screen and (-ms-high-contrast: active), screen and (prefers-contrast){
  .bx--btn.bx--btn--icon-only.bx--btn--ghost
.bx--btn__icon path,
  .bx--btn.bx--btn--icon-only.bx--btn--ghost:hover
.bx--btn__icon path{
    fill:ButtonText; } }

.bx--btn--ghost.bx--btn--icon-only
.bx--btn__icon
path:not([data-icon-path]),
.bx--btn--ghost.bx--btn--icon-only .bx--btn__icon{
  fill:var(--cds-icon-01, #161616); }

.bx--btn--ghost.bx--btn--icon-only[disabled]
.bx--btn__icon
path,
.bx--btn--ghost.bx--btn--icon-only[disabled]
.bx--btn__icon,
.bx--btn.bx--btn--icon-only.bx--btn--ghost[disabled]:hover
.bx--btn__icon{
  fill:var(--cds-disabled-03, #8d8d8d); }
  @media screen and (-ms-high-contrast: active), screen and (prefers-contrast){
    .bx--btn--ghost.bx--btn--icon-only[disabled]
.bx--btn__icon
path path,
    .bx--btn--ghost.bx--btn--icon-only[disabled]
.bx--btn__icon path,
    .bx--btn.bx--btn--icon-only.bx--btn--ghost[disabled]:hover
.bx--btn__icon path{
      fill:GrayText; } }

.bx--btn--ghost.bx--btn--icon-only[disabled]{
  cursor:not-allowed; }

.bx--btn--field.bx--btn--icon-only{
  padding-right:0.6875rem;
  padding-left:0.6875rem; }

.bx--btn--sm.bx--btn--icon-only{
  padding-right:0.4375rem;
  padding-left:0.4375rem; }

.bx--btn--danger{
  color:var(--cds-text-04, #ffffff);
  background-color:var(--cds-danger-01, #da1e28);
  border-color:transparent;
  border-style:solid;
  border-width:1px; }
  .bx--btn--danger:hover{
    background-color:var(--cds-hover-danger, #b81921); }
  .bx--btn--danger:focus{
    border-color:var(--cds-focus, #0f62fe);
    box-shadow:inset 0 0 0 1px var(--cds-focus, #0f62fe), ins