carbon-components
Version:
Carbon Components is a component library for IBM Cloud
2,368 lines (2,101 loc) • 266 kB
CSS
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;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
button,
input[type='button'],
input[type='submit'],
input[type='reset'],
input[type='file'] {
border-radius: 0;
}
input[type='text']::-ms-clear {
display: none;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
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: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
* {
box-sizing: border-box;
}
/**
* Generic `deprecate` mixin that is being used to indicate that a component is
* no longer going to be present in the next major release of Carbon.
*/
@keyframes skeleton {
0% {
width: 0%;
left: 0;
right: auto;
opacity: 0.3;
}
20% {
width: 100%;
left: 0;
right: auto;
opacity: 1;
}
28% {
width: 100%;
left: auto;
right: 0;
}
51% {
width: 0%;
left: auto;
right: 0;
}
58% {
width: 0%;
left: auto;
right: 0;
}
82% {
width: 100%;
left: auto;
right: 0;
}
83% {
width: 100%;
left: 0;
right: auto;
}
96% {
width: 0%;
left: 0;
right: auto;
}
100% {
width: 0%;
left: 0;
right: auto;
opacity: 0.3;
}
}
.bx--text-truncate--end {
width: 100%;
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.bx--text-truncate--front {
width: 100%;
display: inline-block;
direction: rtl;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
@font-face {
font-family: 'ibm-plex-mono';
font-style: normal;
font-weight: 300;
src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexMono-Light.woff") format("woff");
}
@font-face {
font-family: 'ibm-plex-mono';
font-style: normal;
font-weight: 300;
src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexMono-Light-Pi.woff2") format("woff2");
unicode-range: "U+03C0, U+0E3F, U+2070, U+2074-2079, U+2080-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, U+EBE3-EBE4, U+EBE6-EBE7, U+ECE0, U+EFCC";
}
@font-face {
font-family: 'ibm-plex-mono';
font-style: normal;
font-weight: 300;
src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexMono-Light-Latin3.woff2") format("woff2");
unicode-range: "U+0102-0103, U+1EA0-1EF9, U+20AB";
}
@font-face {
font-family: 'ibm-plex-mono';
font-style: normal;
font-weight: 300;
src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexMono-Light-Latin2.woff2") format("woff2");
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-family: 'ibm-plex-mono';
font-style: normal;
font-weight: 300;
src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexMono-Light-Latin1.woff2") format("woff2");
unicode-range: "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FB01-FB02";
}
@font-face {
font-family: 'ibm-plex-mono';
font-style: normal;
font-weight: 400;
src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexMono-Regular.woff") format("woff");
}
@font-face {
font-family: 'ibm-plex-mono';
font-style: normal;
font-weight: 400;
src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexMono-Regular-Pi.woff2") format("woff2");
unicode-range: "U+03C0, U+0E3F, U+2070, U+2074-2079, U+2080-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, U+EBE3-EBE4, U+EBE6-EBE7, U+ECE0, U+EFCC";
}
@font-face {
font-family: 'ibm-plex-mono';
font-style: normal;
font-weight: 400;
src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexMono-Regular-Latin3.woff2") format("woff2");
unicode-range: "U+0102-0103, U+1EA0-1EF9, U+20AB";
}
@font-face {
font-family: 'ibm-plex-mono';
font-style: normal;
font-weight: 400;
src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexMono-Regular-Latin2.woff2") format("woff2");
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-family: 'ibm-plex-mono';
font-style: normal;
font-weight: 400;
src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexMono-Regular-Latin1.woff2") format("woff2");
unicode-range: "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FB01-FB02";
}
@font-face {
font-family: 'ibm-plex-mono';
font-style: normal;
font-weight: 600;
src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexMono-SemiBold.woff") format("woff");
}
@font-face {
font-family: 'ibm-plex-mono';
font-style: normal;
font-weight: 600;
src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexMono-SemiBold-Pi.woff2") format("woff2");
unicode-range: "U+03C0, U+0E3F, U+2070, U+2074-2079, U+2080-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, U+EBE3-EBE4, U+EBE6-EBE7, U+ECE0, U+EFCC";
}
@font-face {
font-family: 'ibm-plex-mono';
font-style: normal;
font-weight: 600;
src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexMono-SemiBold-Latin3.woff2") format("woff2");
unicode-range: "U+0102-0103, U+1EA0-1EF9, U+20AB";
}
@font-face {
font-family: 'ibm-plex-mono';
font-style: normal;
font-weight: 600;
src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexMono-SemiBold-Latin2.woff2") format("woff2");
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-family: 'ibm-plex-mono';
font-style: normal;
font-weight: 600;
src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexMono-SemiBold-Latin1.woff2") format("woff2");
unicode-range: "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FB01-FB02";
}
@font-face {
font-family: 'ibm-plex-sans';
font-style: normal;
font-weight: 300;
src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexSans-Light.woff") format("woff");
}
@font-face {
font-family: 'ibm-plex-sans';
font-style: normal;
font-weight: 300;
src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexSans-Light-Pi.woff2") format("woff2");
unicode-range: "U+03C0, U+0E3F, U+2070, U+2074-2079, U+2080-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, U+EBE3-EBE4, U+EBE6-EBE7, U+ECE0, U+EFCC";
}
@font-face {
font-family: 'ibm-plex-sans';
font-style: normal;
font-weight: 300;
src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexSans-Light-Latin3.woff2") format("woff2");
unicode-range: "U+0102-0103, U+1EA0-1EF9, U+20AB";
}
@font-face {
font-family: 'ibm-plex-sans';
font-style: normal;
font-weight: 300;
src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexSans-Light-Latin2.woff2") format("woff2");
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-family: 'ibm-plex-sans';
font-style: normal;
font-weight: 300;
src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexSans-Light-Latin1.woff2") format("woff2");
unicode-range: "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FB01-FB02";
}
@font-face {
font-family: 'ibm-plex-sans';
font-style: normal;
font-weight: 400;
src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexSans-Regular.woff") format("woff");
}
@font-face {
font-family: 'ibm-plex-sans';
font-style: normal;
font-weight: 400;
src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexSans-Regular-Pi.woff2") format("woff2");
unicode-range: "U+03C0, U+0E3F, U+2070, U+2074-2079, U+2080-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, U+EBE3-EBE4, U+EBE6-EBE7, U+ECE0, U+EFCC";
}
@font-face {
font-family: 'ibm-plex-sans';
font-style: normal;
font-weight: 400;
src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexSans-Regular-Latin3.woff2") format("woff2");
unicode-range: "U+0102-0103, U+1EA0-1EF9, U+20AB";
}
@font-face {
font-family: 'ibm-plex-sans';
font-style: normal;
font-weight: 400;
src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexSans-Regular-Latin2.woff2") format("woff2");
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-family: 'ibm-plex-sans';
font-style: normal;
font-weight: 400;
src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexSans-Regular-Latin1.woff2") format("woff2");
unicode-range: "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FB01-FB02";
}
@font-face {
font-family: 'ibm-plex-sans';
font-style: normal;
font-weight: 600;
src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexSans-SemiBold.woff") format("woff");
}
@font-face {
font-family: 'ibm-plex-sans';
font-style: normal;
font-weight: 600;
src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexSans-SemiBold-Pi.woff2") format("woff2");
unicode-range: "U+03C0, U+0E3F, U+2070, U+2074-2079, U+2080-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, U+EBE3-EBE4, U+EBE6-EBE7, U+ECE0, U+EFCC";
}
@font-face {
font-family: 'ibm-plex-sans';
font-style: normal;
font-weight: 600;
src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexSans-SemiBold-Latin3.woff2") format("woff2");
unicode-range: "U+0102-0103, U+1EA0-1EF9, U+20AB";
}
@font-face {
font-family: 'ibm-plex-sans';
font-style: normal;
font-weight: 600;
src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexSans-SemiBold-Latin2.woff2") format("woff2");
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-family: 'ibm-plex-sans';
font-style: normal;
font-weight: 600;
src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2");
unicode-range: "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FB01-FB02";
}
.bx--visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
visibility: visible;
white-space: nowrap;
}
.bx--body {
font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
color: #152935;
background-color: #f4f7fb;
line-height: 1;
}
/**
* Generic `deprecate` mixin that is being used to indicate that a component is
* no longer going to be present in the next major release of Carbon.
*/
body {
font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
color: #152935;
background-color: #f4f7fb;
line-height: 1;
}
/**
* Generic `deprecate` mixin that is being used to indicate that a component is
* no longer going to be present in the next major release of Carbon.
*/
.bx--type-giga {
font-size: 4.75rem;
line-height: 1.25;
font-weight: 300;
}
.bx--type-mega {
font-size: 3.375rem;
line-height: 1.25;
font-weight: 300;
}
.bx--type-omega {
font-size: 0.75rem;
line-height: 1.25;
font-weight: 600;
}
.bx--type-caption {
font-size: 0.75rem;
line-height: 1.5;
font-weight: 400;
}
.bx--type-legal {
font-size: 0.6875rem;
line-height: 1.5;
font-weight: 400;
}
.bx--type-caps {
text-transform: uppercase;
}
strong,
.bx--type-strong {
font-weight: 700;
}
p {
font-size: 1rem;
line-height: 1.5;
font-weight: 400;
}
em {
font-style: italic;
}
a {
color: #3d70b2;
}
h1,
.bx--type-alpha {
font-size: 2.25rem;
line-height: 1.25;
font-weight: 300;
}
h2,
.bx--type-beta {
font-size: 1.75rem;
line-height: 1.25;
font-weight: 300;
}
h3,
.bx--type-gamma {
font-size: 1.25rem;
line-height: 1.25;
font-weight: 300;
}
h4,
.bx--type-delta {
font-size: 1.125rem;
line-height: 1.25;
font-weight: 600;
}
h5,
.bx--type-epsilon {
font-size: 1rem;
line-height: 1.25;
font-weight: 600;
}
h6,
.bx--type-zeta {
font-size: 0.875rem;
line-height: 1.25;
font-weight: 600;
}
/**
* Generic `deprecate` mixin that is being used to indicate that a component is
* no longer going to be present in the next major release of Carbon.
*/
.bx--grid {
margin-left: 3%;
margin-right: 3%;
padding-left: 5px;
padding-right: 5px;
}
@media (min-width: 576px) {
.bx--grid {
margin-left: 5%;
margin-right: 5%;
padding-left: 10px;
padding-right: 10px;
}
}
@media (min-width: 1600px) {
.bx--grid {
margin: 0 auto;
}
}
.bx--grid.max {
max-width: 1600px;
}
.bx--row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 -5px;
}
@media (min-width: 576px) {
.bx--row {
margin: 0 -10px;
}
}
[class*='bx--col'] {
position: relative;
width: 100%;
min-height: 1px;
padding: 0 5px;
}
@media (min-width: 576px) {
[class*='bx--col'] {
padding: 0 10px;
}
}
.bx--col-xs-1 {
-ms-flex-preferred-size: 8.33333%;
flex-basis: 8.33333%;
}
.bx--offset-xs-1 {
margin-left: 8.33333%;
}
.bx--col-xs-2 {
-ms-flex-preferred-size: 16.66667%;
flex-basis: 16.66667%;
}
.bx--offset-xs-2 {
margin-left: 16.66667%;
}
.bx--col-xs-3 {
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
}
.bx--offset-xs-3 {
margin-left: 25%;
}
.bx--col-xs-4 {
-ms-flex-preferred-size: 33.33333%;
flex-basis: 33.33333%;
}
.bx--offset-xs-4 {
margin-left: 33.33333%;
}
.bx--col-xs-5 {
-ms-flex-preferred-size: 41.66667%;
flex-basis: 41.66667%;
}
.bx--offset-xs-5 {
margin-left: 41.66667%;
}
.bx--col-xs-6 {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
}
.bx--offset-xs-6 {
margin-left: 50%;
}
.bx--col-xs-7 {
-ms-flex-preferred-size: 58.33333%;
flex-basis: 58.33333%;
}
.bx--offset-xs-7 {
margin-left: 58.33333%;
}
.bx--col-xs-8 {
-ms-flex-preferred-size: 66.66667%;
flex-basis: 66.66667%;
}
.bx--offset-xs-8 {
margin-left: 66.66667%;
}
.bx--col-xs-9 {
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
}
.bx--offset-xs-9 {
margin-left: 75%;
}
.bx--col-xs-10 {
-ms-flex-preferred-size: 83.33333%;
flex-basis: 83.33333%;
}
.bx--offset-xs-10 {
margin-left: 83.33333%;
}
.bx--col-xs-11 {
-ms-flex-preferred-size: 91.66667%;
flex-basis: 91.66667%;
}
.bx--offset-xs-11 {
margin-left: 91.66667%;
}
.bx--col-xs-12 {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.bx--offset-xs-12 {
margin-left: 100%;
}
@media (min-width: 576px) {
.bx--col-sm-auto {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
}
.bx--col-sm-1 {
-ms-flex-preferred-size: 8.33333%;
flex-basis: 8.33333%;
}
.bx--offset-sm-1 {
margin-left: 8.33333%;
}
.bx--col-sm-2 {
-ms-flex-preferred-size: 16.66667%;
flex-basis: 16.66667%;
}
.bx--offset-sm-2 {
margin-left: 16.66667%;
}
.bx--col-sm-3 {
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
}
.bx--offset-sm-3 {
margin-left: 25%;
}
.bx--col-sm-4 {
-ms-flex-preferred-size: 33.33333%;
flex-basis: 33.33333%;
}
.bx--offset-sm-4 {
margin-left: 33.33333%;
}
.bx--col-sm-5 {
-ms-flex-preferred-size: 41.66667%;
flex-basis: 41.66667%;
}
.bx--offset-sm-5 {
margin-left: 41.66667%;
}
.bx--col-sm-6 {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
}
.bx--offset-sm-6 {
margin-left: 50%;
}
.bx--col-sm-7 {
-ms-flex-preferred-size: 58.33333%;
flex-basis: 58.33333%;
}
.bx--offset-sm-7 {
margin-left: 58.33333%;
}
.bx--col-sm-8 {
-ms-flex-preferred-size: 66.66667%;
flex-basis: 66.66667%;
}
.bx--offset-sm-8 {
margin-left: 66.66667%;
}
.bx--col-sm-9 {
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
}
.bx--offset-sm-9 {
margin-left: 75%;
}
.bx--col-sm-10 {
-ms-flex-preferred-size: 83.33333%;
flex-basis: 83.33333%;
}
.bx--offset-sm-10 {
margin-left: 83.33333%;
}
.bx--col-sm-11 {
-ms-flex-preferred-size: 91.66667%;
flex-basis: 91.66667%;
}
.bx--offset-sm-11 {
margin-left: 91.66667%;
}
.bx--col-sm-12 {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.bx--offset-sm-12 {
margin-left: 100%;
}
}
@media (min-width: 768px) {
.bx--col-md-auto {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
}
.bx--col-md-1 {
-ms-flex-preferred-size: 8.33333%;
flex-basis: 8.33333%;
}
.bx--offset-md-1 {
margin-left: 8.33333%;
}
.bx--col-md-2 {
-ms-flex-preferred-size: 16.66667%;
flex-basis: 16.66667%;
}
.bx--offset-md-2 {
margin-left: 16.66667%;
}
.bx--col-md-3 {
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
}
.bx--offset-md-3 {
margin-left: 25%;
}
.bx--col-md-4 {
-ms-flex-preferred-size: 33.33333%;
flex-basis: 33.33333%;
}
.bx--offset-md-4 {
margin-left: 33.33333%;
}
.bx--col-md-5 {
-ms-flex-preferred-size: 41.66667%;
flex-basis: 41.66667%;
}
.bx--offset-md-5 {
margin-left: 41.66667%;
}
.bx--col-md-6 {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
}
.bx--offset-md-6 {
margin-left: 50%;
}
.bx--col-md-7 {
-ms-flex-preferred-size: 58.33333%;
flex-basis: 58.33333%;
}
.bx--offset-md-7 {
margin-left: 58.33333%;
}
.bx--col-md-8 {
-ms-flex-preferred-size: 66.66667%;
flex-basis: 66.66667%;
}
.bx--offset-md-8 {
margin-left: 66.66667%;
}
.bx--col-md-9 {
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
}
.bx--offset-md-9 {
margin-left: 75%;
}
.bx--col-md-10 {
-ms-flex-preferred-size: 83.33333%;
flex-basis: 83.33333%;
}
.bx--offset-md-10 {
margin-left: 83.33333%;
}
.bx--col-md-11 {
-ms-flex-preferred-size: 91.66667%;
flex-basis: 91.66667%;
}
.bx--offset-md-11 {
margin-left: 91.66667%;
}
.bx--col-md-12 {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.bx--offset-md-12 {
margin-left: 100%;
}
}
@media (min-width: 992px) {
.bx--col-lg-auto {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
}
.bx--col-lg-1 {
-ms-flex-preferred-size: 8.33333%;
flex-basis: 8.33333%;
}
.bx--offset-lg-1 {
margin-left: 8.33333%;
}
.bx--col-lg-2 {
-ms-flex-preferred-size: 16.66667%;
flex-basis: 16.66667%;
}
.bx--offset-lg-2 {
margin-left: 16.66667%;
}
.bx--col-lg-3 {
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
}
.bx--offset-lg-3 {
margin-left: 25%;
}
.bx--col-lg-4 {
-ms-flex-preferred-size: 33.33333%;
flex-basis: 33.33333%;
}
.bx--offset-lg-4 {
margin-left: 33.33333%;
}
.bx--col-lg-5 {
-ms-flex-preferred-size: 41.66667%;
flex-basis: 41.66667%;
}
.bx--offset-lg-5 {
margin-left: 41.66667%;
}
.bx--col-lg-6 {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
}
.bx--offset-lg-6 {
margin-left: 50%;
}
.bx--col-lg-7 {
-ms-flex-preferred-size: 58.33333%;
flex-basis: 58.33333%;
}
.bx--offset-lg-7 {
margin-left: 58.33333%;
}
.bx--col-lg-8 {
-ms-flex-preferred-size: 66.66667%;
flex-basis: 66.66667%;
}
.bx--offset-lg-8 {
margin-left: 66.66667%;
}
.bx--col-lg-9 {
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
}
.bx--offset-lg-9 {
margin-left: 75%;
}
.bx--col-lg-10 {
-ms-flex-preferred-size: 83.33333%;
flex-basis: 83.33333%;
}
.bx--offset-lg-10 {
margin-left: 83.33333%;
}
.bx--col-lg-11 {
-ms-flex-preferred-size: 91.66667%;
flex-basis: 91.66667%;
}
.bx--offset-lg-11 {
margin-left: 91.66667%;
}
.bx--col-lg-12 {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.bx--offset-lg-12 {
margin-left: 100%;
}
}
@media (min-width: 1200px) {
.bx--col-xl-auto {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
}
.bx--col-xl-1 {
-ms-flex-preferred-size: 8.33333%;
flex-basis: 8.33333%;
}
.bx--offset-xl-1 {
margin-left: 8.33333%;
}
.bx--col-xl-2 {
-ms-flex-preferred-size: 16.66667%;
flex-basis: 16.66667%;
}
.bx--offset-xl-2 {
margin-left: 16.66667%;
}
.bx--col-xl-3 {
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
}
.bx--offset-xl-3 {
margin-left: 25%;
}
.bx--col-xl-4 {
-ms-flex-preferred-size: 33.33333%;
flex-basis: 33.33333%;
}
.bx--offset-xl-4 {
margin-left: 33.33333%;
}
.bx--col-xl-5 {
-ms-flex-preferred-size: 41.66667%;
flex-basis: 41.66667%;
}
.bx--offset-xl-5 {
margin-left: 41.66667%;
}
.bx--col-xl-6 {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
}
.bx--offset-xl-6 {
margin-left: 50%;
}
.bx--col-xl-7 {
-ms-flex-preferred-size: 58.33333%;
flex-basis: 58.33333%;
}
.bx--offset-xl-7 {
margin-left: 58.33333%;
}
.bx--col-xl-8 {
-ms-flex-preferred-size: 66.66667%;
flex-basis: 66.66667%;
}
.bx--offset-xl-8 {
margin-left: 66.66667%;
}
.bx--col-xl-9 {
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
}
.bx--offset-xl-9 {
margin-left: 75%;
}
.bx--col-xl-10 {
-ms-flex-preferred-size: 83.33333%;
flex-basis: 83.33333%;
}
.bx--offset-xl-10 {
margin-left: 83.33333%;
}
.bx--col-xl-11 {
-ms-flex-preferred-size: 91.66667%;
flex-basis: 91.66667%;
}
.bx--offset-xl-11 {
margin-left: 91.66667%;
}
.bx--col-xl-12 {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.bx--offset-xl-12 {
margin-left: 100%;
}
}
@media (min-width: 1600px) {
.bx--col-xxl-auto {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
}
.bx--col-xxl-1 {
-ms-flex-preferred-size: 8.33333%;
flex-basis: 8.33333%;
}
.bx--offset-xxl-1 {
margin-left: 8.33333%;
}
.bx--col-xxl-2 {
-ms-flex-preferred-size: 16.66667%;
flex-basis: 16.66667%;
}
.bx--offset-xxl-2 {
margin-left: 16.66667%;
}
.bx--col-xxl-3 {
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
}
.bx--offset-xxl-3 {
margin-left: 25%;
}
.bx--col-xxl-4 {
-ms-flex-preferred-size: 33.33333%;
flex-basis: 33.33333%;
}
.bx--offset-xxl-4 {
margin-left: 33.33333%;
}
.bx--col-xxl-5 {
-ms-flex-preferred-size: 41.66667%;
flex-basis: 41.66667%;
}
.bx--offset-xxl-5 {
margin-left: 41.66667%;
}
.bx--col-xxl-6 {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
}
.bx--offset-xxl-6 {
margin-left: 50%;
}
.bx--col-xxl-7 {
-ms-flex-preferred-size: 58.33333%;
flex-basis: 58.33333%;
}
.bx--offset-xxl-7 {
margin-left: 58.33333%;
}
.bx--col-xxl-8 {
-ms-flex-preferred-size: 66.66667%;
flex-basis: 66.66667%;
}
.bx--offset-xxl-8 {
margin-left: 66.66667%;
}
.bx--col-xxl-9 {
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
}
.bx--offset-xxl-9 {
margin-left: 75%;
}
.bx--col-xxl-10 {
-ms-flex-preferred-size: 83.33333%;
flex-basis: 83.33333%;
}
.bx--offset-xxl-10 {
margin-left: 83.33333%;
}
.bx--col-xxl-11 {
-ms-flex-preferred-size: 91.66667%;
flex-basis: 91.66667%;
}
.bx--offset-xxl-11 {
margin-left: 91.66667%;
}
.bx--col-xxl-12 {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.bx--offset-xxl-12 {
margin-left: 100%;
}
}
.bx--col-xs,
.bx--col-sm,
.bx--col-md,
.bx--col-lg {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex: 1;
flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
}
/**
* We flag this variable as true if someone uses the globals/scss/styles.scss
* entry-point. This allows us to collect all the messages and display them at
* the end of the file instead of bringing it up per-component.
*
* If a consumer instead gets the components by importing the partial directly,
* this variable _will not_ be set to true, so the deprecation message will be
* displayed after the @import.
*/
/**
* Generic `deprecate` mixin that is being used to indicate that a component is
* no longer going to be present in the next major release of Carbon.
*/
button.bx--btn {
display: inline-block;
}
button.bx--btn::-moz-focus-inner {
padding: 0;
border: 0;
}
button.bx--btn .bx--btn__icon {
position: relative;
vertical-align: middle;
top: -1px;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
button.bx--btn .bx--btn__icon {
top: 0;
}
}
.bx--btn {
font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: 0;
cursor: pointer;
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-negative: 0;
flex-shrink: 0;
font-size: 0.875rem;
font-weight: 600;
height: 2.5rem;
padding: 0 1rem;
border-radius: 0;
text-align: center;
text-decoration: none;
transition-duration: 250ms;
transition-timing-function: ease-in;
white-space: nowrap;
line-height: 16px;
}
.bx--btn:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.bx--btn .bx--btn__icon {
width: 1rem;
height: 1rem;
margin-left: 0.5rem;
transition-duration: 250ms;
transition-timing-function: ease-in;
}
.bx--btn--primary {
background-color: #3d70b2;
border-width: 2px;
border-style: solid;
border-color: transparent;
color: #fff;
}
.bx--btn--primary:focus, .bx--btn--primary:hover {
background-color: #30588c;
}
.bx--btn--primary:focus {
border: 2px solid #f4f7fb;
outline: 2px solid #30588c;
}
.bx--btn--primary:disabled:hover, .bx--btn--primary:disabled:focus {
background-color: #3d70b2;
}
.bx--btn--primary:active {
background-color: #234066;
}
.bx--btn--primary .bx--btn__icon {
fill: #fff;
}
.bx--btn--secondary {
background-color: transparent;
border-width: 2px;
border-style: solid;
border-color: #3d70b2;
color: #3d70b2;
}
.bx--btn--secondary:focus, .bx--btn--secondary:hover {
background-color: #3d70b2;
}
.bx--btn--secondary:focus {
border: 2px solid #f4f7fb;
outline: 2px solid #3d70b2;
}
.bx--btn--secondary:disabled:hover, .bx--btn--secondary:disabled:focus {
background-color: transparent;
}
.bx--btn--secondary:active {
background-color: transparent;
}
.bx--btn--secondary .bx--btn__icon {
fill: #3d70b2;
}
.bx--btn--secondary:hover, .bx--btn--secondary:focus {
color: #fff;
}
.bx--btn--secondary:active {
color: #3d70b2;
}
.bx--btn--secondary:hover > .bx--btn__icon,
.bx--btn--secondary:focus > .bx--btn__icon {
fill: #fff;
}
.bx--btn--secondary:hover:disabled, .bx--btn--secondary:focus:disabled {
color: #3d70b2;
}
.bx--btn--tertiary {
background-color: transparent;
border-width: 2px;
border-style: solid;
border-color: #5a6872;
color: #5a6872;
}
.bx--btn--tertiary:focus, .bx--btn--tertiary:hover {
background-color: #5a6872;
}
.bx--btn--tertiary:focus {
border: 2px solid #f4f7fb;
outline: 2px solid #5a6872;
}
.bx--btn--tertiary:disabled:hover, .bx--btn--tertiary:disabled:focus {
background-color: transparent;
}
.bx--btn--tertiary:active {
background-color: transparent;
}
.bx--btn--tertiary .bx--btn__icon {
fill: #5a6872;
}
.bx--btn--tertiary:hover, .bx--btn--tertiary:focus {
color: #fff;
}
.bx--btn--tertiary:active {
color: #5a6872;
}
.bx--btn--tertiary:hover:disabled, .bx--btn--tertiary:focus:disabled {
color: #5a6872;
}
.bx--btn--tertiary:hover > .bx--btn__icon,
.bx--btn--tertiary:focus > .bx--btn__icon {
fill: #fff;
}
.bx--btn--ghost {
background-color: transparent;
border-width: 2px;
border-style: solid;
border-color: transparent;
color: #3d70b2;
}
.bx--btn--ghost:focus, .bx--btn--ghost:hover {
background-color: #3d70b2;
}
.bx--btn--ghost:focus {
border: 2px solid #f4f7fb;
outline: 2px solid #3d70b2;
}
.bx--btn--ghost:disabled:hover, .bx--btn--ghost:disabled:focus {
background-color: transparent;
}
.bx--btn--ghost:active {
background-color: transparent;
}
.bx--btn--ghost .bx--btn__icon {
fill: #3d70b2;
}
.bx--btn--ghost:hover, .bx--btn--ghost:focus {
color: #fff;
}
.bx--btn--ghost:hover .bx--btn__icon, .bx--btn--ghost:focus .bx--btn__icon {
fill: #fff;
}
.bx--btn--ghost:active {
color: #5a6872;
}
.bx--btn--ghost .bx--btn__icon {
margin-left: 0.5rem;
}
.bx--btn--ghost:hover:disabled, .bx--btn--ghost:focus:disabled {
color: #3d70b2;
}
.bx--btn--ghost:hover:disabled .bx--btn__icon, .bx--btn--ghost:focus:disabled .bx--btn__icon {
fill: #3d70b2;
}
.bx--btn--danger {
background-color: transparent;
border-width: 2px;
border-style: solid;
border-color: #e0182d;
color: #e0182d;
}
.bx--btn--danger:focus, .bx--btn--danger:hover {
background-color: #e0182d;
}
.bx--btn--danger:focus {
border: 2px solid #f4f7fb;
outline: 2px solid #e0182d;
}
.bx--btn--danger:disabled:hover, .bx--btn--danger:disabled:focus {
background-color: transparent;
}
.bx--btn--danger:active {
background-color: transparent;
}
.bx--btn--danger .bx--btn__icon {
fill: #e0182d;
}
.bx--btn--danger:hover {
color: #fff;
border: 2px solid transparent;
}
.bx--btn--danger:focus {
color: #fff;
}
.bx--btn--danger:active {
color: #e0182d;
}
.bx--btn--danger:hover:disabled, .bx--btn--danger:focus:disabled {
color: #e0182d;
border: 2px solid #e0182d;
}
.bx--btn--danger:hover > .bx--btn__icon,
.bx--btn--danger:focus > .bx--btn__icon {
fill: #fff;
}
.bx--btn--danger--primary {
background-color: #e0182d;
border-width: 2px;
border-style: solid;
border-color: transparent;
color: #fff;
}
.bx--btn--danger--primary:focus, .bx--btn--danger--primary:hover {
background-color: #b21324;
}
.bx--btn--danger--primary:focus {
border: 2px solid #f4f7fb;
outline: 2px solid #b21324;
}
.bx--btn--danger--primary:disabled:hover, .bx--btn--danger--primary:disabled:focus {
background-color: #e0182d;
}
.bx--btn--danger--primary:active {
background-color: #840e1a;
}
.bx--btn--danger--primary .bx--btn__icon {
fill: #fff;
}
.bx--btn--danger--primary:hover:disabled, .bx--btn--danger--primary:focus:disabled {
color: #fff;
border: 2px solid #e0182d;
}
.bx--btn--sm {
letter-spacing: 0;
height: 2rem;
padding: 0 0.5rem;
}
.bx--btn--secondary + .bx--btn--primary,
.bx--btn--tertiary + .bx--btn--danger--primary {
margin-left: 1rem;
}
.bx--btn.bx--skeleton {
position: relative;
border: none;
padding: 0;
box-shadow: none;
pointer-events: none;
background: rgba(61, 112, 178, 0.1);
width: 9.375rem;
}
.bx--btn.bx--skeleton:hover, .bx--btn.bx--skeleton:focus, .bx--btn.bx--skeleton:active {
border: none;
outline: none;
cursor: default;
}
.bx--btn.bx--skeleton:before {
content: '';
width: 0%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.3;
background: rgba(61, 112, 178, 0.1);
animation: 3000ms ease-in-out skeleton infinite;
}
/**
* Generic `deprecate` mixin that is being used to indicate that a component is
* no longer going to be present in the next major release of Carbon.
*/
/**
* Generic `deprecate` mixin that is being used to indicate that a component is
* no longer going to be present in the next major release of Carbon.
*/
.bx--btn--copy {
position: relative;
overflow: visible;
}
.bx--btn--copy .bx--btn__icon {
margin-left: 0.3125rem;
}
.bx--btn--copy__feedback {
position: absolute;
display: none;
top: 1.2rem;
left: 50%;
}
.bx--btn--copy__feedback:focus {
border: 2px solid red;
}
.bx--btn--copy__feedback:before {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
font-size: 0.75rem;
top: 1.1rem;
padding: 0.25rem;
color: #fff;
content: attr(data-feedback);
transform: translateX(-50%);
white-space: nowrap;
pointer-events: none;
border-radius: 4px;
font-weight: 400;
z-index: 2;
}
.bx--btn--copy__feedback:after {
top: 0.85rem;
width: 0.6rem;
height: 0.6rem;
left: -0.3rem;
border-right: 1px solid #272d33;
border-bottom: 1px solid #272d33;
content: '';
transform: rotate(-135deg);
z-index: 1;
}
.bx--btn--copy__feedback:before, .bx--btn--copy__feedback:after {
position: absolute;
display: block;
background: #272d33;
}
.bx--btn--copy__feedback--displayed {
display: -ms-inline-flexbox;
display: inline-flex;
}
/**
* Generic `deprecate` mixin that is being used to indicate that a component is
* no longer going to be present in the next major release of Carbon.
*/
/**
* Generic `deprecate` mixin that is being used to indicate that a component is
* no longer going to be present in the next major release of Carbon.
*/
/**
* Generic `deprecate` mixin that is being used to indicate that a component is
* no longer going to be present in the next major release of Carbon.
*/
/**
* Generic `deprecate` mixin that is being used to indicate that a component is
* no longer going to be present in the next major release of Carbon.
*/
.bx--fieldset {
margin-bottom: 2rem;
}
.bx--form-item {
font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex: 1;
flex: 1;
-ms-flex-align: start;
align-items: flex-start;
}
.bx--form-item--light input,
.bx--form-item--light input[type='number'] {
background: #fff !important;
}
.bx--label {
font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
font-size: 0.875rem;
color: #152935;
font-weight: 600;
display: inline-block;
vertical-align: baseline;
margin-bottom: 0.5rem;
}
.bx--label .bx--tooltip__trigger {
font-size: 0.875rem;
}
.bx--label--disabled {
opacity: 0.5;
}
.bx--label.bx--skeleton {
position: relative;
border: none;
padding: 0;
box-shadow: none;
pointer-events: none;
background: rgba(61, 112, 178, 0.1);
width: 4.6875rem;
height: 0.875rem;
}
.bx--label.bx--skeleton:hover, .bx--label.bx--skeleton:focus, .bx--label.bx--skeleton:active {
border: none;
outline: none;
cursor: default;
}
.bx--label.bx--skeleton:before {
content: '';
width: 0%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.3;
background: rgba(61, 112, 178, 0.1);
animation: 3000ms ease-in-out skeleton infinite;
}
input[data-invalid],
textarea[data-invalid],
select[data-invalid],
div[data-invalid] {
box-shadow: 0 2px 0px 0px #e0182d;
}
input[data-invalid] ~ .bx--form-requirement,
textarea[data-invalid] ~ .bx--form-requirement,
select[data-invalid] ~ .bx--form-requirement,
div[data-invalid] ~ .bx--form-requirement {
max-height: 12.5rem;
display: block;
}
input:not(output):not([data-invalid]):-moz-ui-invalid {
box-shadow: none;
}
.bx--form-requirement {
font-size: 0.75rem;
margin: 0.75rem 0 0;
max-height: 0;
overflow: hidden;
font-weight: 600;
line-height: 1.5;
display: none;
}
.bx--form-requirement::before {
content: '*';
display: inline-block;
color: #e0182d;
}
.bx--form__helper-text {
font-size: 0.75rem;
color: #5a6872;
-ms-flex-order: 1;
order: 1;
line-height: 1.5;
z-index: 0;
max-height: 3rem;
opacity: 1;
margin-bottom: 0.5rem;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes rotate-end-p1 {
100% {
transform: rotate(360deg);
}
}
@keyframes rotate-end-p2 {
100% {
transform: rotate(-360deg);
}
}
/* Stroke animations */
@keyframes init-stroke {
0% {
stroke-dashoffset: 240;
}
100% {
stroke-dashoffset: 40;
}
}
@keyframes stroke-end {
0% {
stroke-dashoffset: 40;
}
100% {
stroke-dashoffset: 240;
}
}
.bx--loading {
animation-name: rotate;
animation-duration: 500ms;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
width: 10.5rem;
height: 10.5rem;
}
.bx--loading svg circle {
animation-name: init-stroke;
animation-duration: 1000ms;
animation-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
}
.bx--loading__svg {
fill: transparent;
stroke: #6eedd8;
stroke-width: 7;
stroke-linecap: butt;
stroke-dasharray: 240;
stroke-dashoffset: 40;
}
.bx--loading--stop {
animation: rotate-end-p1 700ms cubic-bezier(0, 0, 0.25, 1) forwards, rotate-end-p2 700ms cubic-bezier(0, 0, 0.25, 1) 700ms forwards;
}
.bx--loading--stop svg circle {
animation-name: stroke-end;
animation-duration: 700ms;
animation-timing-function: cubic-bezier(0, 0, 0.25, 1);
animation-delay: 700ms;
animation-fill-mode: forwards;
}
.bx--loading--small {
width: 2rem;
height: 2rem;
}
.bx--loading--small .bx--loading__svg {
stroke: #5a6872;
}
.bx--loading-overlay {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(255, 255, 255, 0.6);
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
transition: background-color 2000ms cubic-bezier(0.5, 0, 0.1, 1);
z-index: 8000;
}
.bx--loading-overlay--stop {
display: none;
}
.bx--file {
width: 100%;
}
.bx--file-input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
visibility: visible;
white-space: nowrap;
}
.bx--file-btn {
display: -ms-inline-flexbox;
display: inline-flex;
margin: 0;
}
.bx--label-description {
font-size: 0.875rem;
line-height: 1.5;
color: #5a6872;
margin-bottom: 1.5rem;
}
.bx--file-container {
display: block;
width: 100%;
margin-top: 1.5rem;
}
.bx--file__selected-file {
display: block;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 300px;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
min-height: 1.875rem;
background-color: #fff;
border: 1px solid #dfe3e6;
padding: 0 1rem;
margin-bottom: 1rem;
}
.bx--file__selected-file:last-child {
margin-bottom: 0;
}
.bx--file-filename {
font-size: 0.75rem;
display: block;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-align: center;
align-items: center;
color: #152935;
margin-right: 1rem;
height: 1.875rem;
/*rtl:ignore*/
direction: ltr;
-ms-flex-pack: start;
justify-content: flex-start;
/*rtl:{flex-end}*/
}
.bx--file__state-container {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
}
.bx--file__state-container .bx--loading {
width: 1rem;
height: 1rem;
margin-right: 0.5rem;
}
.bx--file__state-container .bx--loading__svg {
stroke: #5a6872;
}
.bx--file__state-container .bx--file-close,
.bx--file__state-container .bx--file-complete {
width: 1rem;
height: 1rem;
fill: #152935;
cursor: pointer;
}
.bx--file__state-container .bx--file-close:focus,
.bx--file__state-container .bx--file-complete:focus {
outline: 1px solid #3d70b2;
}
.bx--file__state-container .bx--file-close {
fill: #5a6872;
}
.bx--file__state-container .bx--file-complete {
fill: #5aa700;
}
/**
* Generic `deprecate` mixin that is being used to indicate that a component is
* no longer going to be present in the next major release of Carbon.
*/
/**
* Generic `deprecate` mixin that is being used to indicate that a component is
* no longer going to be present in the next major release of Carbon.
*/
.bx--form-item.bx--checkbox-wrapper {
margin-bottom: 1rem;
}
.bx--form-item.bx--checkbox-wrapper:first-of-type {
margin-top: 0.5rem;
}
.bx--form-item.bx--checkbox-wrapper:last-of-type {
margin-bottom: 0;
}
.bx--checkbox {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
visibility: visible;
white-space: nowrap;
}
.bx--checkbox-label {
font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 0.875rem;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
position: relative;
padding-left: 1.5rem;
min-height: 1rem;
}
.bx--checkbox-label::before {
box-sizing: border-box;
content: '';
position: absolute;
left: 0;
top: calc(50% - 9px);
height: 1.125rem;
width: 1.125rem;
border: 2px solid #5a6872;
background-color: #fff;
}
.bx--checkbox-label::after {
content: '';
width: 7px;
height: 3px;
background: none;
/*rtl:ignore*/
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
/*rtl:ignore*/
transform: scale(0) rotate(-45deg);
position: absolute;
left: 0.3125rem;
top: 50%;
margin-top: -0.1875rem;
}
.bx--checkbox:checked + .bx--checkbox-label::before,
.bx--checkbox:indeterminate + .bx--checkbox-label::before,
.bx--checkbox-label[data-contained-checkbox-state='true']::before,
.bx--checkbox-label[data-contained-checkbox-state='mixed']::before {
background-color: #3d70b2;
border-color: #3d70b2;
}
.bx--checkbox:checked + .bx--checkbox-label::after,
.bx--checkbox-label[data-contained-checkbox-state='true']::after {
opacity: 1;
/*rtl:ignore*/
transform: scale(1) rotate(-45deg);
}
.bx--checkbox:not(:checked) + .bx--checkbox-label::after {
opacity: 0;
/*rtl:ignore*/
transform: scale(0) rotate(-45deg);
}
.bx--checkbox:focus + .bx--checkbox-label::before,
.bx--checkbox-label__focus::before {
box-shadow: 0 0 0 3px #7cc7ff;
outline: 1px solid transparent;
}
.bx--checkbox:indeterminate + .bx--checkbox-label::after,
.bx--checkbox-label[data-contained-checkbox-state='mixed']::after {
transform: scale(1) rotate(0deg);
/*rtl:ignore*/
border-left: 0 solid #fff;
border-bottom: 2px solid #fff;
opacity: 1;
width: 0.625rem;
margin-top: -0.25rem;
left: 0.25rem;
}
.bx--checkbox:disabled + .bx--checkbox-label,
.bx--checkbox:disabled ~ .bx--checkbox-label-text,
.bx--checkbox-label[data-contained-checkbox-disabled='true'] {
opacity: 0.5;
cursor: not-allowed;
}
.bx--checkbox-appearance {
position: absolute;
left: 0;
top: calc(50% - 9px);
display: inline-block;
height: 1.125rem;
width: 1.125rem;
margin-right: 0.5rem;
background-color: #fff;
border: 2px solid #5a6872;
min-width: 1.125rem;
}
.bx--checkbox:checked + .bx--checkbox-label .bx--checkbox-appearance {
top: -0.0625rem;
}
.bx--checkbox:checked + .bx--checkbox-appearance,
.bx--checkbox:checked + .bx--checkbox-label .bx--checkbox-appearance {
display: -ms-flexbox;
display: flex;
-ms-flex-align: baseline;
align-items: baseline;
background-color: #3d70b2;
border-color: #3d70b2;
}
.bx--checkbox:focus + .bx--checkbox-label .bx--checkbox-appearance,
.bx--checkbox:focus + .bx--checkbox-appearance {
box-shadow: 0 0 0 3px #7cc7ff;
outline: 1px solid transparent;
}
.bx--checkbox:disabled + .bx--checkbox-appearance {
opacity: 0.5;
cursor: not-allowed;
}
.bx--checkbox-checkmark {
display: none;
fill: #fff;
width: 100%;
height: 100%;
}
.bx--checkbox:checked + .bx--checkbox-appearance .bx--checkbox-checkmark,
.bx--checkbox:checked + .bx--checkbox-label .bx--checkbox-appearance .bx--checkbox-checkmark {
display: block;
}
@-moz-document url-prefix() {
.bx--checkbox:checked + .bx--checkbox-appearance .bx--checkbox-checkmark,
.bx--checkbox:checked + .bx--checkbox-label .bx--checkbox-appearance .bx--checkbox-checkmark {
stroke: #3d70b2;
}
}
.bx--checkbox-label.bx--skeleton {
position: relative;
border: none;
padding: 0;
box-shadow: none;
pointer-events: none;
background: rgba(61, 112, 178, 0.1);
width: 6.25rem;
height: 1.125rem;
}
.bx--checkbox-label.bx--skeleton:hover, .bx--checkbox-label.bx--skeleton:focus, .bx--checkbox-label.bx--skeleton:active {
border: none;
outline: none;
cursor: default;
}
.bx--checkbox-label.bx--skeleton:before {
content: '';
width: 0%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.3;
background: rgba(61, 112, 178, 0.1);
animation: 3000ms ease-in-out skeleton infinite;
}
.bx--checkbox-label.bx--skeleton:after, .bx--checkbox-label.bx--skeleton:before {
border: none;
}
.bx--text-truncate--end {
width: 100%;
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.bx--text-truncate--front {
width: 100%;
display: inline-block;
direction: rtl;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
/**
* Generic `deprecate` mixin that is being used to indicate that a component is
* no longer going to be present in the next major release of Carbon.
*/
.bx--text-truncate--end {
width: 100%;
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.bx--text-truncate--front {
width: 100%;
display: inline-block;
direction: rtl;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.bx--list-box {
position: relative;
width: 100%;
height: 2.5rem;
max-height: 2.5rem;
background-color: #f4f7fb;
border: none;
box-shadow: 0 1px 0 0 #5a6872;
-ms-flex-order: 1;
order: 1;
cursor: pointer;
color: #152935;
}
.bx--list-box[data-invalid],
.bx--list-box[data-invalid] .bx--list-box__field:focus {
box-shadow: 0 2px 0 0 #e0182d;
}
.bx--list-box[data-invalid] .bx--list-box__field:focus .bx--list-box__label {
color: #e0182d;
}
.bx--list-box ~ .bx--form-requirement {
-ms-flex-order: 3;
order: 3;
color: #e0182d;
font-weight: 400;
margin-top: 0.25rem;
}
.bx--list-box ~ .bx--form-requirement::before {
display: none;
}
.bx--list-box--light {
background-color: #fff;
}
.bx--list-box--disabled {
opacity: 0.5;
}
.bx--list-box--disabled,
.bx--list-box--disabled .bx--list-box__field,
.bx--list-box--disabled .bx--list-box__menu-icon {
cursor: not-allowed;
}
.bx--list-box--disabled .bx--list-box__menu-item:hover,
.bx--list-box--disabled .bx--list-box__menu-item--highlighted {
background-color: transparent;
text-decoration: none;
}
.bx--list-box.bx--list-box--inline {
background-color: inherit;
width: auto;
height: 2rem;
box-shadow: none;
}
.bx--list-box--inline .bx--list-box__label {
color: #3d70b2;
}
.bx--list-box--inline .bx--list-box__field {
padding: 0 0 0 0.625rem;
}
.bx--list-box--inline .bx--list-box__menu-icon {
position: static;
padding: 0 0.5rem;
}
.bx--list-box--inline > .bx--list-box__menu {
top: 2rem;
width: 18.75rem;
}
.bx--list-box--inline > .bx--list-box__field[aria-expanded='true'] ~ .bx--list-box__menu {
outline: 1px solid #3d70b2;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
}
.bx--list-box--inline > .bx--list-box__field[aria-expanded='true'],
.bx--list-box.bx--list-box--inline > .bx--list-box__field:focus {
outline: none;
box-shadow: none;
}
.bx--list-box__field {
font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
-webkit-font-smoothi