UNPKG

251 kBCSSView Raw
1html,
2body,
3div,
4span,
5applet,
6object,
7iframe,
8h1,
9h2,
10h3,
11h4,
12h5,
13h6,
14p,
15blockquote,
16pre,
17a,
18abbr,
19acronym,
20address,
21big,
22cite,
23code,
24del,
25dfn,
26em,
27img,
28ins,
29kbd,
30q,
31s,
32samp,
33small,
34strike,
35strong,
36sub,
37sup,
38tt,
39var,
40b,
41u,
42i,
43center,
44dl,
45dt,
46dd,
47ol,
48ul,
49li,
50fieldset,
51form,
52label,
53legend,
54table,
55caption,
56tbody,
57tfoot,
58thead,
59tr,
60th,
61td,
62article,
63aside,
64canvas,
65details,
66embed,
67figure,
68figcaption,
69footer,
70header,
71hgroup,
72menu,
73nav,
74output,
75ruby,
76section,
77summary,
78time,
79mark,
80audio,
81video {
82 margin: 0;
83 padding: 0;
84 border: 0;
85 font-size: 100%;
86 font: inherit;
87 vertical-align: baseline;
88}
89
90button,
91input[type='button'],
92input[type='submit'],
93input[type='reset'],
94input[type='file'],
95input[type='text'],
96input[type='password'],
97textarea {
98 border-radius: 0;
99}
100
101input[type='text']::-ms-clear {
102 display: none;
103}
104
105/* HTML5 display-role reset for older browsers */
106article,
107aside,
108details,
109figcaption,
110figure,
111footer,
112header,
113hgroup,
114menu,
115nav,
116section {
117 display: block;
118}
119
120body {
121 line-height: 1;
122}
123
124sup {
125 vertical-align: super;
126}
127
128sub {
129 vertical-align: sub;
130}
131
132ol,
133ul {
134 list-style: none;
135}
136
137blockquote,
138q {
139 quotes: none;
140}
141
142blockquote:before,
143blockquote:after,
144q:before,
145q:after {
146 content: '';
147 content: none;
148}
149
150table {
151 border-collapse: collapse;
152 border-spacing: 0;
153}
154
155* {
156 box-sizing: border-box;
157}
158
159@keyframes skeleton {
160 0% {
161 width: 0%;
162 left: 0;
163 right: auto;
164 opacity: 0.3;
165 }
166 20% {
167 width: 100%;
168 left: 0;
169 right: auto;
170 opacity: 1;
171 }
172 28% {
173 width: 100%;
174 left: auto;
175 right: 0;
176 }
177 51% {
178 width: 0%;
179 left: auto;
180 right: 0;
181 }
182 58% {
183 width: 0%;
184 left: auto;
185 right: 0;
186 }
187 82% {
188 width: 100%;
189 left: auto;
190 right: 0;
191 }
192 83% {
193 width: 100%;
194 left: 0;
195 right: auto;
196 }
197 96% {
198 width: 0%;
199 left: 0;
200 right: auto;
201 }
202 100% {
203 width: 0%;
204 left: 0;
205 right: auto;
206 opacity: 0.3;
207 }
208}
209
210.bx--text-truncate--end {
211 width: 100%;
212 display: inline-block;
213 text-overflow: ellipsis;
214 white-space: nowrap;
215 overflow: hidden;
216}
217
218.bx--text-truncate--front {
219 width: 100%;
220 display: inline-block;
221 direction: rtl;
222 text-overflow: ellipsis;
223 white-space: nowrap;
224 overflow: hidden;
225}
226
227@font-face {
228 font-family: 'ibm-plex-mono';
229 font-style: normal;
230 font-weight: 300;
231 src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexMono-Light.woff") format("woff");
232}
233
234@font-face {
235 font-family: 'ibm-plex-mono';
236 font-style: normal;
237 font-weight: 300;
238 src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexMono-Light-Pi.woff2") format("woff2");
239 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";
240}
241
242@font-face {
243 font-family: 'ibm-plex-mono';
244 font-style: normal;
245 font-weight: 300;
246 src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexMono-Light-Latin3.woff2") format("woff2");
247 unicode-range: "U+0102-0103, U+1EA0-1EF9, U+20AB";
248}
249
250@font-face {
251 font-family: 'ibm-plex-mono';
252 font-style: normal;
253 font-weight: 300;
254 src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexMono-Light-Latin2.woff2") format("woff2");
255 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";
256}
257
258@font-face {
259 font-family: 'ibm-plex-mono';
260 font-style: normal;
261 font-weight: 300;
262 src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexMono-Light-Latin1.woff2") format("woff2");
263 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";
264}
265
266@font-face {
267 font-family: 'ibm-plex-mono';
268 font-style: normal;
269 font-weight: 400;
270 src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexMono-Regular.woff") format("woff");
271}
272
273@font-face {
274 font-family: 'ibm-plex-mono';
275 font-style: normal;
276 font-weight: 400;
277 src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexMono-Regular-Pi.woff2") format("woff2");
278 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";
279}
280
281@font-face {
282 font-family: 'ibm-plex-mono';
283 font-style: normal;
284 font-weight: 400;
285 src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexMono-Regular-Latin3.woff2") format("woff2");
286 unicode-range: "U+0102-0103, U+1EA0-1EF9, U+20AB";
287}
288
289@font-face {
290 font-family: 'ibm-plex-mono';
291 font-style: normal;
292 font-weight: 400;
293 src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexMono-Regular-Latin2.woff2") format("woff2");
294 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";
295}
296
297@font-face {
298 font-family: 'ibm-plex-mono';
299 font-style: normal;
300 font-weight: 400;
301 src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexMono-Regular-Latin1.woff2") format("woff2");
302 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";
303}
304
305@font-face {
306 font-family: 'ibm-plex-mono';
307 font-style: normal;
308 font-weight: 600;
309 src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexMono-SemiBold.woff") format("woff");
310}
311
312@font-face {
313 font-family: 'ibm-plex-mono';
314 font-style: normal;
315 font-weight: 600;
316 src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexMono-SemiBold-Pi.woff2") format("woff2");
317 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";
318}
319
320@font-face {
321 font-family: 'ibm-plex-mono';
322 font-style: normal;
323 font-weight: 600;
324 src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexMono-SemiBold-Latin3.woff2") format("woff2");
325 unicode-range: "U+0102-0103, U+1EA0-1EF9, U+20AB";
326}
327
328@font-face {
329 font-family: 'ibm-plex-mono';
330 font-style: normal;
331 font-weight: 600;
332 src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexMono-SemiBold-Latin2.woff2") format("woff2");
333 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";
334}
335
336@font-face {
337 font-family: 'ibm-plex-mono';
338 font-style: normal;
339 font-weight: 600;
340 src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexMono-SemiBold-Latin1.woff2") format("woff2");
341 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";
342}
343
344@font-face {
345 font-family: 'ibm-plex-sans';
346 font-style: normal;
347 font-weight: 300;
348 src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexSans-Light.woff") format("woff");
349}
350
351@font-face {
352 font-family: 'ibm-plex-sans';
353 font-style: normal;
354 font-weight: 300;
355 src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexSans-Light-Pi.woff2") format("woff2");
356 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";
357}
358
359@font-face {
360 font-family: 'ibm-plex-sans';
361 font-style: normal;
362 font-weight: 300;
363 src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexSans-Light-Latin3.woff2") format("woff2");
364 unicode-range: "U+0102-0103, U+1EA0-1EF9, U+20AB";
365}
366
367@font-face {
368 font-family: 'ibm-plex-sans';
369 font-style: normal;
370 font-weight: 300;
371 src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexSans-Light-Latin2.woff2") format("woff2");
372 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";
373}
374
375@font-face {
376 font-family: 'ibm-plex-sans';
377 font-style: normal;
378 font-weight: 300;
379 src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexSans-Light-Latin1.woff2") format("woff2");
380 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";
381}
382
383@font-face {
384 font-family: 'ibm-plex-sans';
385 font-style: normal;
386 font-weight: 400;
387 src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexSans-Regular.woff") format("woff");
388}
389
390@font-face {
391 font-family: 'ibm-plex-sans';
392 font-style: normal;
393 font-weight: 400;
394 src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexSans-Regular-Pi.woff2") format("woff2");
395 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";
396}
397
398@font-face {
399 font-family: 'ibm-plex-sans';
400 font-style: normal;
401 font-weight: 400;
402 src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexSans-Regular-Latin3.woff2") format("woff2");
403 unicode-range: "U+0102-0103, U+1EA0-1EF9, U+20AB";
404}
405
406@font-face {
407 font-family: 'ibm-plex-sans';
408 font-style: normal;
409 font-weight: 400;
410 src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexSans-Regular-Latin2.woff2") format("woff2");
411 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";
412}
413
414@font-face {
415 font-family: 'ibm-plex-sans';
416 font-style: normal;
417 font-weight: 400;
418 src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexSans-Regular-Latin1.woff2") format("woff2");
419 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";
420}
421
422@font-face {
423 font-family: 'ibm-plex-sans';
424 font-style: normal;
425 font-weight: 600;
426 src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexSans-SemiBold.woff") format("woff");
427}
428
429@font-face {
430 font-family: 'ibm-plex-sans';
431 font-style: normal;
432 font-weight: 600;
433 src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexSans-SemiBold-Pi.woff2") format("woff2");
434 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";
435}
436
437@font-face {
438 font-family: 'ibm-plex-sans';
439 font-style: normal;
440 font-weight: 600;
441 src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexSans-SemiBold-Latin3.woff2") format("woff2");
442 unicode-range: "U+0102-0103, U+1EA0-1EF9, U+20AB";
443}
444
445@font-face {
446 font-family: 'ibm-plex-sans';
447 font-style: normal;
448 font-weight: 600;
449 src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexSans-SemiBold-Latin2.woff2") format("woff2");
450 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";
451}
452
453@font-face {
454 font-family: 'ibm-plex-sans';
455 font-style: normal;
456 font-weight: 600;
457 src: url("https://unpkg.com/carbon-components@latest/src/globals/fonts/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2");
458 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";
459}
460
461.bx--assistive-text,
462.bx--visually-hidden {
463 position: absolute;
464 width: 1px;
465 height: 1px;
466 padding: 0;
467 margin: -1px;
468 overflow: hidden;
469 clip: rect(0, 0, 0, 0);
470 border: 0;
471 visibility: visible;
472 white-space: nowrap;
473}
474
475.bx--body {
476 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
477 color: #152935;
478 background-color: #f4f7fb;
479 line-height: 1;
480}
481
482body {
483 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
484 color: #152935;
485 background-color: #f4f7fb;
486 line-height: 1;
487}
488
489.bx--type-giga {
490 font-size: 4.75rem;
491 line-height: 1.25;
492 font-weight: 300;
493}
494
495.bx--type-mega {
496 font-size: 3.375rem;
497 line-height: 1.25;
498 font-weight: 300;
499}
500
501.bx--type-omega {
502 font-size: 0.75rem;
503 line-height: 1.25;
504 font-weight: 600;
505}
506
507.bx--type-caption {
508 font-size: 0.75rem;
509 line-height: 1.5;
510 font-weight: 400;
511}
512
513.bx--type-legal {
514 font-size: 0.6875rem;
515 line-height: 1.5;
516 font-weight: 400;
517}
518
519.bx--type-caps {
520 text-transform: uppercase;
521}
522
523strong,
524.bx--type-strong {
525 font-weight: 700;
526}
527
528p {
529 font-size: 1rem;
530 line-height: 1.5;
531 font-weight: 400;
532}
533
534em {
535 font-style: italic;
536}
537
538a {
539 color: #3d70b2;
540}
541
542h1,
543.bx--type-alpha {
544 font-size: 2.25rem;
545 line-height: 1.25;
546 font-weight: 300;
547}
548
549h2,
550.bx--type-beta {
551 font-size: 1.75rem;
552 line-height: 1.25;
553 font-weight: 300;
554}
555
556h3,
557.bx--type-gamma {
558 font-size: 1.25rem;
559 line-height: 1.25;
560 font-weight: 300;
561}
562
563h4,
564.bx--type-delta {
565 font-size: 1.125rem;
566 line-height: 1.25;
567 font-weight: 600;
568}
569
570h5,
571.bx--type-epsilon {
572 font-size: 1rem;
573 line-height: 1.25;
574 font-weight: 600;
575}
576
577h6,
578.bx--type-zeta {
579 font-size: 0.875rem;
580 line-height: 1.25;
581 font-weight: 600;
582}
583
584.bx--grid {
585 margin-left: 3%;
586 margin-right: 3%;
587 padding-left: 5px;
588 padding-right: 5px;
589}
590
591@media (min-width: 576px) {
592 .bx--grid {
593 margin-left: 5%;
594 margin-right: 5%;
595 padding-left: 10px;
596 padding-right: 10px;
597 }
598}
599
600@media (min-width: 1600px) {
601 .bx--grid {
602 margin: 0 auto;
603 }
604}
605
606.bx--grid.max {
607 max-width: 1600px;
608}
609
610.bx--row {
611 display: -ms-flexbox;
612 display: flex;
613 -ms-flex-wrap: wrap;
614 flex-wrap: wrap;
615 margin: 0 -5px;
616}
617
618@media (min-width: 576px) {
619 .bx--row {
620 margin: 0 -10px;
621 }
622}
623
624[class*='bx--col'] {
625 position: relative;
626 width: 100%;
627 padding: 0 5px;
628}
629
630@media (min-width: 576px) {
631 [class*='bx--col'] {
632 padding: 0 10px;
633 }
634}
635
636.bx--col-xs-1 {
637 -ms-flex: 0 0 8.33333%;
638 flex: 0 0 8.33333%;
639 max-width: 8.33333%;
640}
641
642.bx--offset-xs-1 {
643 margin-left: 8.33333%;
644}
645
646.bx--col-xs-2 {
647 -ms-flex: 0 0 16.66667%;
648 flex: 0 0 16.66667%;
649 max-width: 16.66667%;
650}
651
652.bx--offset-xs-2 {
653 margin-left: 16.66667%;
654}
655
656.bx--col-xs-3 {
657 -ms-flex: 0 0 25%;
658 flex: 0 0 25%;
659 max-width: 25%;
660}
661
662.bx--offset-xs-3 {
663 margin-left: 25%;
664}
665
666.bx--col-xs-4 {
667 -ms-flex: 0 0 33.33333%;
668 flex: 0 0 33.33333%;
669 max-width: 33.33333%;
670}
671
672.bx--offset-xs-4 {
673 margin-left: 33.33333%;
674}
675
676.bx--col-xs-5 {
677 -ms-flex: 0 0 41.66667%;
678 flex: 0 0 41.66667%;
679 max-width: 41.66667%;
680}
681
682.bx--offset-xs-5 {
683 margin-left: 41.66667%;
684}
685
686.bx--col-xs-6 {
687 -ms-flex: 0 0 50%;
688 flex: 0 0 50%;
689 max-width: 50%;
690}
691
692.bx--offset-xs-6 {
693 margin-left: 50%;
694}
695
696.bx--col-xs-7 {
697 -ms-flex: 0 0 58.33333%;
698 flex: 0 0 58.33333%;
699 max-width: 58.33333%;
700}
701
702.bx--offset-xs-7 {
703 margin-left: 58.33333%;
704}
705
706.bx--col-xs-8 {
707 -ms-flex: 0 0 66.66667%;
708 flex: 0 0 66.66667%;
709 max-width: 66.66667%;
710}
711
712.bx--offset-xs-8 {
713 margin-left: 66.66667%;
714}
715
716.bx--col-xs-9 {
717 -ms-flex: 0 0 75%;
718 flex: 0 0 75%;
719 max-width: 75%;
720}
721
722.bx--offset-xs-9 {
723 margin-left: 75%;
724}
725
726.bx--col-xs-10 {
727 -ms-flex: 0 0 83.33333%;
728 flex: 0 0 83.33333%;
729 max-width: 83.33333%;
730}
731
732.bx--offset-xs-10 {
733 margin-left: 83.33333%;
734}
735
736.bx--col-xs-11 {
737 -ms-flex: 0 0 91.66667%;
738 flex: 0 0 91.66667%;
739 max-width: 91.66667%;
740}
741
742.bx--offset-xs-11 {
743 margin-left: 91.66667%;
744}
745
746.bx--col-xs-12 {
747 -ms-flex: 0 0 100%;
748 flex: 0 0 100%;
749 max-width: 100%;
750}
751
752.bx--offset-xs-12 {
753 margin-left: 100%;
754}
755
756@media (min-width: 576px) {
757 .bx--col-sm-auto {
758 -ms-flex: 0 0 auto;
759 flex: 0 0 auto;
760 width: auto;
761 }
762 .bx--col-sm-1 {
763 -ms-flex: 0 0 8.33333%;
764 flex: 0 0 8.33333%;
765 max-width: 8.33333%;
766 }
767 .bx--offset-sm-1 {
768 margin-left: 8.33333%;
769 }
770 .bx--col-sm-2 {
771 -ms-flex: 0 0 16.66667%;
772 flex: 0 0 16.66667%;
773 max-width: 16.66667%;
774 }
775 .bx--offset-sm-2 {
776 margin-left: 16.66667%;
777 }
778 .bx--col-sm-3 {
779 -ms-flex: 0 0 25%;
780 flex: 0 0 25%;
781 max-width: 25%;
782 }
783 .bx--offset-sm-3 {
784 margin-left: 25%;
785 }
786 .bx--col-sm-4 {
787 -ms-flex: 0 0 33.33333%;
788 flex: 0 0 33.33333%;
789 max-width: 33.33333%;
790 }
791 .bx--offset-sm-4 {
792 margin-left: 33.33333%;
793 }
794 .bx--col-sm-5 {
795 -ms-flex: 0 0 41.66667%;
796 flex: 0 0 41.66667%;
797 max-width: 41.66667%;
798 }
799 .bx--offset-sm-5 {
800 margin-left: 41.66667%;
801 }
802 .bx--col-sm-6 {
803 -ms-flex: 0 0 50%;
804 flex: 0 0 50%;
805 max-width: 50%;
806 }
807 .bx--offset-sm-6 {
808 margin-left: 50%;
809 }
810 .bx--col-sm-7 {
811 -ms-flex: 0 0 58.33333%;
812 flex: 0 0 58.33333%;
813 max-width: 58.33333%;
814 }
815 .bx--offset-sm-7 {
816 margin-left: 58.33333%;
817 }
818 .bx--col-sm-8 {
819 -ms-flex: 0 0 66.66667%;
820 flex: 0 0 66.66667%;
821 max-width: 66.66667%;
822 }
823 .bx--offset-sm-8 {
824 margin-left: 66.66667%;
825 }
826 .bx--col-sm-9 {
827 -ms-flex: 0 0 75%;
828 flex: 0 0 75%;
829 max-width: 75%;
830 }
831 .bx--offset-sm-9 {
832 margin-left: 75%;
833 }
834 .bx--col-sm-10 {
835 -ms-flex: 0 0 83.33333%;
836 flex: 0 0 83.33333%;
837 max-width: 83.33333%;
838 }
839 .bx--offset-sm-10 {
840 margin-left: 83.33333%;
841 }
842 .bx--col-sm-11 {
843 -ms-flex: 0 0 91.66667%;
844 flex: 0 0 91.66667%;
845 max-width: 91.66667%;
846 }
847 .bx--offset-sm-11 {
848 margin-left: 91.66667%;
849 }
850 .bx--col-sm-12 {
851 -ms-flex: 0 0 100%;
852 flex: 0 0 100%;
853 max-width: 100%;
854 }
855 .bx--offset-sm-12 {
856 margin-left: 100%;
857 }
858}
859
860@media (min-width: 768px) {
861 .bx--col-md-auto {
862 -ms-flex: 0 0 auto;
863 flex: 0 0 auto;
864 width: auto;
865 }
866 .bx--col-md-1 {
867 -ms-flex: 0 0 8.33333%;
868 flex: 0 0 8.33333%;
869 max-width: 8.33333%;
870 }
871 .bx--offset-md-1 {
872 margin-left: 8.33333%;
873 }
874 .bx--col-md-2 {
875 -ms-flex: 0 0 16.66667%;
876 flex: 0 0 16.66667%;
877 max-width: 16.66667%;
878 }
879 .bx--offset-md-2 {
880 margin-left: 16.66667%;
881 }
882 .bx--col-md-3 {
883 -ms-flex: 0 0 25%;
884 flex: 0 0 25%;
885 max-width: 25%;
886 }
887 .bx--offset-md-3 {
888 margin-left: 25%;
889 }
890 .bx--col-md-4 {
891 -ms-flex: 0 0 33.33333%;
892 flex: 0 0 33.33333%;
893 max-width: 33.33333%;
894 }
895 .bx--offset-md-4 {
896 margin-left: 33.33333%;
897 }
898 .bx--col-md-5 {
899 -ms-flex: 0 0 41.66667%;
900 flex: 0 0 41.66667%;
901 max-width: 41.66667%;
902 }
903 .bx--offset-md-5 {
904 margin-left: 41.66667%;
905 }
906 .bx--col-md-6 {
907 -ms-flex: 0 0 50%;
908 flex: 0 0 50%;
909 max-width: 50%;
910 }
911 .bx--offset-md-6 {
912 margin-left: 50%;
913 }
914 .bx--col-md-7 {
915 -ms-flex: 0 0 58.33333%;
916 flex: 0 0 58.33333%;
917 max-width: 58.33333%;
918 }
919 .bx--offset-md-7 {
920 margin-left: 58.33333%;
921 }
922 .bx--col-md-8 {
923 -ms-flex: 0 0 66.66667%;
924 flex: 0 0 66.66667%;
925 max-width: 66.66667%;
926 }
927 .bx--offset-md-8 {
928 margin-left: 66.66667%;
929 }
930 .bx--col-md-9 {
931 -ms-flex: 0 0 75%;
932 flex: 0 0 75%;
933 max-width: 75%;
934 }
935 .bx--offset-md-9 {
936 margin-left: 75%;
937 }
938 .bx--col-md-10 {
939 -ms-flex: 0 0 83.33333%;
940 flex: 0 0 83.33333%;
941 max-width: 83.33333%;
942 }
943 .bx--offset-md-10 {
944 margin-left: 83.33333%;
945 }
946 .bx--col-md-11 {
947 -ms-flex: 0 0 91.66667%;
948 flex: 0 0 91.66667%;
949 max-width: 91.66667%;
950 }
951 .bx--offset-md-11 {
952 margin-left: 91.66667%;
953 }
954 .bx--col-md-12 {
955 -ms-flex: 0 0 100%;
956 flex: 0 0 100%;
957 max-width: 100%;
958 }
959 .bx--offset-md-12 {
960 margin-left: 100%;
961 }
962}
963
964@media (min-width: 992px) {
965 .bx--col-lg-auto {
966 -ms-flex: 0 0 auto;
967 flex: 0 0 auto;
968 width: auto;
969 }
970 .bx--col-lg-1 {
971 -ms-flex: 0 0 8.33333%;
972 flex: 0 0 8.33333%;
973 max-width: 8.33333%;
974 }
975 .bx--offset-lg-1 {
976 margin-left: 8.33333%;
977 }
978 .bx--col-lg-2 {
979 -ms-flex: 0 0 16.66667%;
980 flex: 0 0 16.66667%;
981 max-width: 16.66667%;
982 }
983 .bx--offset-lg-2 {
984 margin-left: 16.66667%;
985 }
986 .bx--col-lg-3 {
987 -ms-flex: 0 0 25%;
988 flex: 0 0 25%;
989 max-width: 25%;
990 }
991 .bx--offset-lg-3 {
992 margin-left: 25%;
993 }
994 .bx--col-lg-4 {
995 -ms-flex: 0 0 33.33333%;
996 flex: 0 0 33.33333%;
997 max-width: 33.33333%;
998 }
999 .bx--offset-lg-4 {
1000 margin-left: 33.33333%;
1001 }
1002 .bx--col-lg-5 {
1003 -ms-flex: 0 0 41.66667%;
1004 flex: 0 0 41.66667%;
1005 max-width: 41.66667%;
1006 }
1007 .bx--offset-lg-5 {
1008 margin-left: 41.66667%;
1009 }
1010 .bx--col-lg-6 {
1011 -ms-flex: 0 0 50%;
1012 flex: 0 0 50%;
1013 max-width: 50%;
1014 }
1015 .bx--offset-lg-6 {
1016 margin-left: 50%;
1017 }
1018 .bx--col-lg-7 {
1019 -ms-flex: 0 0 58.33333%;
1020 flex: 0 0 58.33333%;
1021 max-width: 58.33333%;
1022 }
1023 .bx--offset-lg-7 {
1024 margin-left: 58.33333%;
1025 }
1026 .bx--col-lg-8 {
1027 -ms-flex: 0 0 66.66667%;
1028 flex: 0 0 66.66667%;
1029 max-width: 66.66667%;
1030 }
1031 .bx--offset-lg-8 {
1032 margin-left: 66.66667%;
1033 }
1034 .bx--col-lg-9 {
1035 -ms-flex: 0 0 75%;
1036 flex: 0 0 75%;
1037 max-width: 75%;
1038 }
1039 .bx--offset-lg-9 {
1040 margin-left: 75%;
1041 }
1042 .bx--col-lg-10 {
1043 -ms-flex: 0 0 83.33333%;
1044 flex: 0 0 83.33333%;
1045 max-width: 83.33333%;
1046 }
1047 .bx--offset-lg-10 {
1048 margin-left: 83.33333%;
1049 }
1050 .bx--col-lg-11 {
1051 -ms-flex: 0 0 91.66667%;
1052 flex: 0 0 91.66667%;
1053 max-width: 91.66667%;
1054 }
1055 .bx--offset-lg-11 {
1056 margin-left: 91.66667%;
1057 }
1058 .bx--col-lg-12 {
1059 -ms-flex: 0 0 100%;
1060 flex: 0 0 100%;
1061 max-width: 100%;
1062 }
1063 .bx--offset-lg-12 {
1064 margin-left: 100%;
1065 }
1066}
1067
1068@media (min-width: 1200px) {
1069 .bx--col-xl-auto {
1070 -ms-flex: 0 0 auto;
1071 flex: 0 0 auto;
1072 width: auto;
1073 }
1074 .bx--col-xl-1 {
1075 -ms-flex: 0 0 8.33333%;
1076 flex: 0 0 8.33333%;
1077 max-width: 8.33333%;
1078 }
1079 .bx--offset-xl-1 {
1080 margin-left: 8.33333%;
1081 }
1082 .bx--col-xl-2 {
1083 -ms-flex: 0 0 16.66667%;
1084 flex: 0 0 16.66667%;
1085 max-width: 16.66667%;
1086 }
1087 .bx--offset-xl-2 {
1088 margin-left: 16.66667%;
1089 }
1090 .bx--col-xl-3 {
1091 -ms-flex: 0 0 25%;
1092 flex: 0 0 25%;
1093 max-width: 25%;
1094 }
1095 .bx--offset-xl-3 {
1096 margin-left: 25%;
1097 }
1098 .bx--col-xl-4 {
1099 -ms-flex: 0 0 33.33333%;
1100 flex: 0 0 33.33333%;
1101 max-width: 33.33333%;
1102 }
1103 .bx--offset-xl-4 {
1104 margin-left: 33.33333%;
1105 }
1106 .bx--col-xl-5 {
1107 -ms-flex: 0 0 41.66667%;
1108 flex: 0 0 41.66667%;
1109 max-width: 41.66667%;
1110 }
1111 .bx--offset-xl-5 {
1112 margin-left: 41.66667%;
1113 }
1114 .bx--col-xl-6 {
1115 -ms-flex: 0 0 50%;
1116 flex: 0 0 50%;
1117 max-width: 50%;
1118 }
1119 .bx--offset-xl-6 {
1120 margin-left: 50%;
1121 }
1122 .bx--col-xl-7 {
1123 -ms-flex: 0 0 58.33333%;
1124 flex: 0 0 58.33333%;
1125 max-width: 58.33333%;
1126 }
1127 .bx--offset-xl-7 {
1128 margin-left: 58.33333%;
1129 }
1130 .bx--col-xl-8 {
1131 -ms-flex: 0 0 66.66667%;
1132 flex: 0 0 66.66667%;
1133 max-width: 66.66667%;
1134 }
1135 .bx--offset-xl-8 {
1136 margin-left: 66.66667%;
1137 }
1138 .bx--col-xl-9 {
1139 -ms-flex: 0 0 75%;
1140 flex: 0 0 75%;
1141 max-width: 75%;
1142 }
1143 .bx--offset-xl-9 {
1144 margin-left: 75%;
1145 }
1146 .bx--col-xl-10 {
1147 -ms-flex: 0 0 83.33333%;
1148 flex: 0 0 83.33333%;
1149 max-width: 83.33333%;
1150 }
1151 .bx--offset-xl-10 {
1152 margin-left: 83.33333%;
1153 }
1154 .bx--col-xl-11 {
1155 -ms-flex: 0 0 91.66667%;
1156 flex: 0 0 91.66667%;
1157 max-width: 91.66667%;
1158 }
1159 .bx--offset-xl-11 {
1160 margin-left: 91.66667%;
1161 }
1162 .bx--col-xl-12 {
1163 -ms-flex: 0 0 100%;
1164 flex: 0 0 100%;
1165 max-width: 100%;
1166 }
1167 .bx--offset-xl-12 {
1168 margin-left: 100%;
1169 }
1170}
1171
1172@media (min-width: 1600px) {
1173 .bx--col-xxl-auto {
1174 -ms-flex: 0 0 auto;
1175 flex: 0 0 auto;
1176 width: auto;
1177 }
1178 .bx--col-xxl-1 {
1179 -ms-flex: 0 0 8.33333%;
1180 flex: 0 0 8.33333%;
1181 max-width: 8.33333%;
1182 }
1183 .bx--offset-xxl-1 {
1184 margin-left: 8.33333%;
1185 }
1186 .bx--col-xxl-2 {
1187 -ms-flex: 0 0 16.66667%;
1188 flex: 0 0 16.66667%;
1189 max-width: 16.66667%;
1190 }
1191 .bx--offset-xxl-2 {
1192 margin-left: 16.66667%;
1193 }
1194 .bx--col-xxl-3 {
1195 -ms-flex: 0 0 25%;
1196 flex: 0 0 25%;
1197 max-width: 25%;
1198 }
1199 .bx--offset-xxl-3 {
1200 margin-left: 25%;
1201 }
1202 .bx--col-xxl-4 {
1203 -ms-flex: 0 0 33.33333%;
1204 flex: 0 0 33.33333%;
1205 max-width: 33.33333%;
1206 }
1207 .bx--offset-xxl-4 {
1208 margin-left: 33.33333%;
1209 }
1210 .bx--col-xxl-5 {
1211 -ms-flex: 0 0 41.66667%;
1212 flex: 0 0 41.66667%;
1213 max-width: 41.66667%;
1214 }
1215 .bx--offset-xxl-5 {
1216 margin-left: 41.66667%;
1217 }
1218 .bx--col-xxl-6 {
1219 -ms-flex: 0 0 50%;
1220 flex: 0 0 50%;
1221 max-width: 50%;
1222 }
1223 .bx--offset-xxl-6 {
1224 margin-left: 50%;
1225 }
1226 .bx--col-xxl-7 {
1227 -ms-flex: 0 0 58.33333%;
1228 flex: 0 0 58.33333%;
1229 max-width: 58.33333%;
1230 }
1231 .bx--offset-xxl-7 {
1232 margin-left: 58.33333%;
1233 }
1234 .bx--col-xxl-8 {
1235 -ms-flex: 0 0 66.66667%;
1236 flex: 0 0 66.66667%;
1237 max-width: 66.66667%;
1238 }
1239 .bx--offset-xxl-8 {
1240 margin-left: 66.66667%;
1241 }
1242 .bx--col-xxl-9 {
1243 -ms-flex: 0 0 75%;
1244 flex: 0 0 75%;
1245 max-width: 75%;
1246 }
1247 .bx--offset-xxl-9 {
1248 margin-left: 75%;
1249 }
1250 .bx--col-xxl-10 {
1251 -ms-flex: 0 0 83.33333%;
1252 flex: 0 0 83.33333%;
1253 max-width: 83.33333%;
1254 }
1255 .bx--offset-xxl-10 {
1256 margin-left: 83.33333%;
1257 }
1258 .bx--col-xxl-11 {
1259 -ms-flex: 0 0 91.66667%;
1260 flex: 0 0 91.66667%;
1261 max-width: 91.66667%;
1262 }
1263 .bx--offset-xxl-11 {
1264 margin-left: 91.66667%;
1265 }
1266 .bx--col-xxl-12 {
1267 -ms-flex: 0 0 100%;
1268 flex: 0 0 100%;
1269 max-width: 100%;
1270 }
1271 .bx--offset-xxl-12 {
1272 margin-left: 100%;
1273 }
1274}
1275
1276.bx--col-xs,
1277.bx--col-sm,
1278.bx--col-md,
1279.bx--col-lg {
1280 -ms-flex-preferred-size: 0;
1281 flex-basis: 0;
1282 -ms-flex: 1;
1283 flex: 1;
1284 -ms-flex-positive: 1;
1285 flex-grow: 1;
1286 max-width: 100%;
1287}
1288
1289/**
1290 * We flag this variable as true if someone uses the globals/scss/styles.scss
1291 * entry-point. This allows us to collect all the messages and display them at
1292 * the end of the file instead of bringing it up per-component.
1293 *
1294 * If a consumer instead gets the components by importing the partial directly,
1295 * this variable _will not_ be set to true, so the deprecation message will be
1296 * displayed after the @import.
1297 */
1298button.bx--btn {
1299 display: inline-block;
1300}
1301
1302button.bx--btn::-moz-focus-inner {
1303 padding: 0;
1304 border: 0;
1305}
1306
1307button.bx--btn .bx--btn__icon {
1308 position: relative;
1309 vertical-align: middle;
1310 top: -1px;
1311}
1312
1313@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
1314 button.bx--btn .bx--btn__icon {
1315 top: 0;
1316 }
1317}
1318
1319.bx--btn {
1320 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
1321 -webkit-font-smoothing: antialiased;
1322 -moz-osx-font-smoothing: grayscale;
1323 letter-spacing: 0;
1324 cursor: pointer;
1325 display: -ms-inline-flexbox;
1326 display: inline-flex;
1327 -ms-flex-align: center;
1328 align-items: center;
1329 -ms-flex-pack: center;
1330 justify-content: center;
1331 -ms-flex-negative: 0;
1332 flex-shrink: 0;
1333 font-size: 0.875rem;
1334 font-weight: 600;
1335 min-height: 2.5rem;
1336 padding: 0 1rem;
1337 border-radius: 0;
1338 text-align: center;
1339 text-decoration: none;
1340 transition-duration: 250ms;
1341 transition-timing-function: ease-in;
1342 white-space: nowrap;
1343 line-height: 16px;
1344}
1345
1346.bx--btn:disabled {
1347 cursor: not-allowed;
1348 opacity: 0.5;
1349}
1350
1351.bx--btn .bx--btn__icon {
1352 width: 1rem;
1353 height: 1rem;
1354 margin-left: 0.5rem;
1355 transition-duration: 250ms;
1356 transition-timing-function: ease-in;
1357}
1358
1359.bx--btn--primary {
1360 background-color: #3d70b2;
1361 border-width: 2px;
1362 border-style: solid;
1363 border-color: transparent;
1364 color: #fff;
1365}
1366
1367.bx--btn--primary:focus, .bx--btn--primary:hover {
1368 background-color: #30588c;
1369}
1370
1371.bx--btn--primary:focus {
1372 border: 2px solid #f4f7fb;
1373 outline: 2px solid #30588c;
1374}
1375
1376.bx--btn--primary:disabled:hover, .bx--btn--primary:disabled:focus {
1377 background-color: #3d70b2;
1378}
1379
1380.bx--btn--primary:active {
1381 background-color: #234066;
1382}
1383
1384.bx--btn--primary .bx--btn__icon {
1385 fill: #fff;
1386}
1387
1388.bx--btn--secondary {
1389 background-color: transparent;
1390 border-width: 2px;
1391 border-style: solid;
1392 border-color: #3d70b2;
1393 color: #3d70b2;
1394}
1395
1396.bx--btn--secondary:focus, .bx--btn--secondary:hover {
1397 background-color: #3d70b2;
1398}
1399
1400.bx--btn--secondary:focus {
1401 border: 2px solid #f4f7fb;
1402 outline: 2px solid #3d70b2;
1403}
1404
1405.bx--btn--secondary:disabled:hover, .bx--btn--secondary:disabled:focus {
1406 background-color: transparent;
1407}
1408
1409.bx--btn--secondary:active {
1410 background-color: transparent;
1411}
1412
1413.bx--btn--secondary .bx--btn__icon {
1414 fill: #3d70b2;
1415}
1416
1417.bx--btn--secondary:hover, .bx--btn--secondary:focus {
1418 color: #fff;
1419}
1420
1421.bx--btn--secondary:active {
1422 color: #3d70b2;
1423}
1424
1425.bx--btn--secondary:hover > .bx--btn__icon,
1426.bx--btn--secondary:focus > .bx--btn__icon {
1427 fill: #fff;
1428}
1429
1430.bx--btn--secondary:hover:disabled, .bx--btn--secondary:focus:disabled {
1431 color: #3d70b2;
1432}
1433
1434.bx--btn--tertiary {
1435 background-color: transparent;
1436 border-width: 2px;
1437 border-style: solid;
1438 border-color: #5a6872;
1439 color: #5a6872;
1440}
1441
1442.bx--btn--tertiary:focus, .bx--btn--tertiary:hover {
1443 background-color: #5a6872;
1444}
1445
1446.bx--btn--tertiary:focus {
1447 border: 2px solid #f4f7fb;
1448 outline: 2px solid #5a6872;
1449}
1450
1451.bx--btn--tertiary:disabled:hover, .bx--btn--tertiary:disabled:focus {
1452 background-color: transparent;
1453}
1454
1455.bx--btn--tertiary:active {
1456 background-color: transparent;
1457}
1458
1459.bx--btn--tertiary .bx--btn__icon {
1460 fill: #5a6872;
1461}
1462
1463.bx--btn--tertiary:hover, .bx--btn--tertiary:focus {
1464 color: #fff;
1465}
1466
1467.bx--btn--tertiary:active {
1468 color: #5a6872;
1469}
1470
1471.bx--btn--tertiary:hover:disabled, .bx--btn--tertiary:focus:disabled {
1472 color: #5a6872;
1473}
1474
1475.bx--btn--tertiary:hover > .bx--btn__icon,
1476.bx--btn--tertiary:focus > .bx--btn__icon {
1477 fill: #fff;
1478}
1479
1480.bx--btn--ghost {
1481 background-color: transparent;
1482 border-width: 2px;
1483 border-style: solid;
1484 border-color: transparent;
1485 color: #3d70b2;
1486}
1487
1488.bx--btn--ghost:focus, .bx--btn--ghost:hover {
1489 background-color: #3d70b2;
1490}
1491
1492.bx--btn--ghost:focus {
1493 border: 2px solid #f4f7fb;
1494 outline: 2px solid #3d70b2;
1495}
1496
1497.bx--btn--ghost:disabled:hover, .bx--btn--ghost:disabled:focus {
1498 background-color: transparent;
1499}
1500
1501.bx--btn--ghost:active {
1502 background-color: transparent;
1503}
1504
1505.bx--btn--ghost .bx--btn__icon {
1506 fill: #3d70b2;
1507}
1508
1509.bx--btn--ghost:hover, .bx--btn--ghost:focus {
1510 color: #fff;
1511}
1512
1513.bx--btn--ghost:hover .bx--btn__icon, .bx--btn--ghost:focus .bx--btn__icon {
1514 fill: #fff;
1515}
1516
1517.bx--btn--ghost:active {
1518 color: #5a6872;
1519}
1520
1521.bx--btn--ghost .bx--btn__icon {
1522 margin-left: 0.5rem;
1523}
1524
1525.bx--btn--ghost:hover:disabled, .bx--btn--ghost:focus:disabled {
1526 color: #3d70b2;
1527}
1528
1529.bx--btn--ghost:hover:disabled .bx--btn__icon, .bx--btn--ghost:focus:disabled .bx--btn__icon {
1530 fill: #3d70b2;
1531}
1532
1533.bx--btn--danger {
1534 background-color: transparent;
1535 border-width: 2px;
1536 border-style: solid;
1537 border-color: #e0182d;
1538 color: #e0182d;
1539}
1540
1541.bx--btn--danger:focus, .bx--btn--danger:hover {
1542 background-color: #e0182d;
1543}
1544
1545.bx--btn--danger:focus {
1546 border: 2px solid #f4f7fb;
1547 outline: 2px solid #e0182d;
1548}
1549
1550.bx--btn--danger:disabled:hover, .bx--btn--danger:disabled:focus {
1551 background-color: transparent;
1552}
1553
1554.bx--btn--danger:active {
1555 background-color: transparent;
1556}
1557
1558.bx--btn--danger .bx--btn__icon {
1559 fill: #e0182d;
1560}
1561
1562.bx--btn--danger:hover {
1563 color: #fff;
1564 border: 2px solid transparent;
1565}
1566
1567.bx--btn--danger:focus {
1568 color: #fff;
1569}
1570
1571.bx--btn--danger:active {
1572 color: #e0182d;
1573}
1574
1575.bx--btn--danger:hover:disabled, .bx--btn--danger:focus:disabled {
1576 color: #e0182d;
1577 border: 2px solid #e0182d;
1578}
1579
1580.bx--btn--danger:hover > .bx--btn__icon,
1581.bx--btn--danger:focus > .bx--btn__icon {
1582 fill: #fff;
1583}
1584
1585.bx--btn--danger--primary {
1586 background-color: #e0182d;
1587 border-width: 2px;
1588 border-style: solid;
1589 border-color: transparent;
1590 color: #fff;
1591}
1592
1593.bx--btn--danger--primary:focus, .bx--btn--danger--primary:hover {
1594 background-color: #b21324;
1595}
1596
1597.bx--btn--danger--primary:focus {
1598 border: 2px solid #f4f7fb;
1599 outline: 2px solid #b21324;
1600}
1601
1602.bx--btn--danger--primary:disabled:hover, .bx--btn--danger--primary:disabled:focus {
1603 background-color: #e0182d;
1604}
1605
1606.bx--btn--danger--primary:active {
1607 background-color: #840e1a;
1608}
1609
1610.bx--btn--danger--primary .bx--btn__icon {
1611 fill: #fff;
1612}
1613
1614.bx--btn--danger--primary:hover:disabled, .bx--btn--danger--primary:focus:disabled {
1615 color: #fff;
1616 border: 2px solid #e0182d;
1617}
1618
1619.bx--btn--sm {
1620 letter-spacing: 0;
1621 height: 2rem;
1622 padding: 0 0.5rem;
1623}
1624
1625.bx--btn--secondary + .bx--btn--primary,
1626.bx--btn--tertiary + .bx--btn--danger--primary {
1627 margin-left: 1rem;
1628}
1629
1630.bx--btn.bx--skeleton {
1631 position: relative;
1632 border: none;
1633 padding: 0;
1634 box-shadow: none;
1635 pointer-events: none;
1636 background: rgba(61, 112, 178, 0.1);
1637 width: 9.375rem;
1638}
1639
1640.bx--btn.bx--skeleton:hover, .bx--btn.bx--skeleton:focus, .bx--btn.bx--skeleton:active {
1641 border: none;
1642 outline: none;
1643 cursor: default;
1644}
1645
1646.bx--btn.bx--skeleton:before {
1647 content: '';
1648 width: 0%;
1649 height: 100%;
1650 position: absolute;
1651 top: 0;
1652 left: 0;
1653 opacity: 0.3;
1654 background: rgba(61, 112, 178, 0.1);
1655 animation: 3000ms ease-in-out skeleton infinite;
1656}
1657
1658.bx--btn--copy {
1659 position: relative;
1660 overflow: visible;
1661}
1662
1663.bx--btn--copy .bx--btn__icon {
1664 margin-left: 0.3125rem;
1665}
1666
1667.bx--btn--copy__feedback {
1668 position: absolute;
1669 display: none;
1670 top: 1.2rem;
1671 left: 50%;
1672}
1673
1674.bx--btn--copy__feedback:focus {
1675 border: 2px solid red;
1676}
1677
1678.bx--btn--copy__feedback:before {
1679 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
1680 font-size: 0.75rem;
1681 top: 1.1rem;
1682 padding: 0.25rem;
1683 color: #fff;
1684 content: attr(data-feedback);
1685 transform: translateX(-50%);
1686 white-space: nowrap;
1687 pointer-events: none;
1688 border-radius: 4px;
1689 font-weight: 400;
1690 z-index: 2;
1691}
1692
1693.bx--btn--copy__feedback:after {
1694 top: 0.85rem;
1695 width: 0.6rem;
1696 height: 0.6rem;
1697 left: -0.3rem;
1698 border-right: 1px solid #272d33;
1699 border-bottom: 1px solid #272d33;
1700 content: '';
1701 transform: rotate(-135deg);
1702 z-index: 1;
1703}
1704
1705.bx--btn--copy__feedback:before, .bx--btn--copy__feedback:after {
1706 position: absolute;
1707 display: block;
1708 background: #272d33;
1709}
1710
1711.bx--btn--copy__feedback--displayed {
1712 display: -ms-inline-flexbox;
1713 display: inline-flex;
1714}
1715
1716.bx--fieldset {
1717 margin-bottom: 2rem;
1718}
1719
1720.bx--form-item {
1721 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
1722 display: -ms-flexbox;
1723 display: flex;
1724 -ms-flex-direction: column;
1725 flex-direction: column;
1726 -ms-flex: 1;
1727 flex: 1;
1728 -ms-flex-align: start;
1729 align-items: flex-start;
1730}
1731
1732.bx--form-item--light input,
1733.bx--form-item--light input[type='number'] {
1734 background: #fff !important;
1735}
1736
1737.bx--label {
1738 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
1739 font-size: 0.875rem;
1740 color: #152935;
1741 font-weight: 600;
1742 display: inline-block;
1743 vertical-align: baseline;
1744 margin-bottom: 0.5rem;
1745}
1746
1747.bx--label--with-helper {
1748 margin-bottom: 0;
1749}
1750
1751.bx--label .bx--tooltip__trigger {
1752 font-size: 0.875rem;
1753}
1754
1755.bx--label.bx--skeleton {
1756 position: relative;
1757 border: none;
1758 padding: 0;
1759 box-shadow: none;
1760 pointer-events: none;
1761 background: rgba(61, 112, 178, 0.1);
1762 width: 4.6875rem;
1763 height: 0.875rem;
1764}
1765
1766.bx--label.bx--skeleton:hover, .bx--label.bx--skeleton:focus, .bx--label.bx--skeleton:active {
1767 border: none;
1768 outline: none;
1769 cursor: default;
1770}
1771
1772.bx--label.bx--skeleton:before {
1773 content: '';
1774 width: 0%;
1775 height: 100%;
1776 position: absolute;
1777 top: 0;
1778 left: 0;
1779 opacity: 0.3;
1780 background: rgba(61, 112, 178, 0.1);
1781 animation: 3000ms ease-in-out skeleton infinite;
1782}
1783
1784input[data-invalid],
1785textarea[data-invalid],
1786select[data-invalid],
1787.bx--list-box[data-invalid] {
1788 box-shadow: 0 2px 0px 0px #e0182d;
1789}
1790
1791input[data-invalid] ~ .bx--form-requirement,
1792textarea[data-invalid] ~ .bx--form-requirement,
1793select[data-invalid] ~ .bx--form-requirement,
1794.bx--list-box[data-invalid] ~ .bx--form-requirement {
1795 max-height: 12.5rem;
1796 display: block;
1797}
1798
1799input:not(output):not([data-invalid]):-moz-ui-invalid {
1800 box-shadow: none;
1801}
1802
1803.bx--form-requirement {
1804 font-size: 0.75rem;
1805 margin: 0.75rem 0 0;
1806 max-height: 0;
1807 overflow: hidden;
1808 font-weight: 600;
1809 line-height: 1.5;
1810 display: none;
1811}
1812
1813.bx--form-requirement::before {
1814 content: '*';
1815 display: inline-block;
1816 color: #e0182d;
1817}
1818
1819.bx--form__helper-text {
1820 font-size: 0.75rem;
1821 color: #5a6872;
1822 -ms-flex-order: 1;
1823 order: 1;
1824 line-height: 1.5;
1825 z-index: 0;
1826 max-height: 3rem;
1827 opacity: 1;
1828 margin-bottom: 0.5rem;
1829}
1830
1831.bx--label--disabled,
1832.bx--form__helper-text--disabled {
1833 opacity: 0.5;
1834}
1835
1836@keyframes rotate {
1837 0% {
1838 transform: rotate(0deg);
1839 }
1840 100% {
1841 transform: rotate(360deg);
1842 }
1843}
1844
1845@keyframes rotate-end-p1 {
1846 100% {
1847 transform: rotate(360deg);
1848 }
1849}
1850
1851@keyframes rotate-end-p2 {
1852 100% {
1853 transform: rotate(-360deg);
1854 }
1855}
1856
1857/* Stroke animations */
1858@keyframes init-stroke {
1859 0% {
1860 stroke-dashoffset: 240;
1861 }
1862 100% {
1863 stroke-dashoffset: 40;
1864 }
1865}
1866
1867@keyframes stroke-end {
1868 0% {
1869 stroke-dashoffset: 40;
1870 }
1871 100% {
1872 stroke-dashoffset: 240;
1873 }
1874}
1875
1876.bx--loading {
1877 animation-name: rotate;
1878 animation-duration: 690ms;
1879 animation-timing-function: linear;
1880 animation-fill-mode: forwards;
1881 animation-iteration-count: infinite;
1882 width: 10.5rem;
1883 height: 10.5rem;
1884}
1885
1886.bx--loading svg circle {
1887 animation-name: init-stroke;
1888 animation-duration: 10ms;
1889 animation-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
1890}
1891
1892.bx--loading__svg {
1893 fill: transparent;
1894 stroke: #6eedd8;
1895 stroke-width: 7;
1896 stroke-linecap: butt;
1897 stroke-dasharray: 240;
1898 stroke-dashoffset: 40;
1899}
1900
1901.bx--loading--stop {
1902 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;
1903}
1904
1905.bx--loading--stop svg circle {
1906 animation-name: stroke-end;
1907 animation-duration: 700ms;
1908 animation-timing-function: cubic-bezier(0, 0, 0.25, 1);
1909 animation-delay: 700ms;
1910 animation-fill-mode: forwards;
1911}
1912
1913.bx--loading--small {
1914 width: 2rem;
1915 height: 2rem;
1916}
1917
1918.bx--loading--small .bx--loading__svg {
1919 stroke: #5a6872;
1920}
1921
1922.bx--loading-overlay {
1923 position: fixed;
1924 top: 0;
1925 left: 0;
1926 height: 100%;
1927 width: 100%;
1928 background-color: rgba(255, 255, 255, 0.6);
1929 display: -ms-flexbox;
1930 display: flex;
1931 -ms-flex-pack: center;
1932 justify-content: center;
1933 -ms-flex-align: center;
1934 align-items: center;
1935 transition: background-color 2000ms cubic-bezier(0.5, 0, 0.1, 1);
1936 z-index: 8000;
1937}
1938
1939.bx--loading-overlay--stop {
1940 display: none;
1941}
1942
1943.bx--file {
1944 width: 100%;
1945}
1946
1947.bx--file-input {
1948 position: absolute;
1949 width: 1px;
1950 height: 1px;
1951 padding: 0;
1952 margin: -1px;
1953 overflow: hidden;
1954 clip: rect(0, 0, 0, 0);
1955 border: 0;
1956 visibility: visible;
1957 white-space: nowrap;
1958}
1959
1960.bx--file-btn {
1961 display: -ms-inline-flexbox;
1962 display: inline-flex;
1963 margin: 0;
1964}
1965
1966.bx--label-description {
1967 font-size: 0.875rem;
1968 line-height: 1.5;
1969 color: #5a6872;
1970 margin-bottom: 1.5rem;
1971}
1972
1973.bx--file-container {
1974 display: block;
1975 width: 100%;
1976 margin-top: 1.5rem;
1977}
1978
1979.bx--file__selected-file {
1980 display: block;
1981 overflow-x: hidden;
1982 text-overflow: ellipsis;
1983 white-space: nowrap;
1984 width: 300px;
1985 display: -ms-flexbox;
1986 display: flex;
1987 -ms-flex-align: center;
1988 align-items: center;
1989 -ms-flex-pack: justify;
1990 justify-content: space-between;
1991 min-height: 1.875rem;
1992 background-color: #fff;
1993 border: 1px solid #dfe3e6;
1994 padding: 0 1rem;
1995 margin-bottom: 1rem;
1996}
1997
1998.bx--file__selected-file:last-child {
1999 margin-bottom: 0;
2000}
2001
2002.bx--file-filename {
2003 font-size: 0.75rem;
2004 display: block;
2005 overflow-x: hidden;
2006 text-overflow: ellipsis;
2007 white-space: nowrap;
2008 width: 100%;
2009 display: -ms-inline-flexbox;
2010 display: inline-flex;
2011 -ms-flex-align: center;
2012 align-items: center;
2013 color: #152935;
2014 margin-right: 1rem;
2015 height: 1.875rem;
2016 /*rtl:ignore*/
2017 direction: ltr;
2018 -ms-flex-pack: start;
2019 justify-content: flex-start;
2020 /*rtl:{flex-end}*/
2021}
2022
2023.bx--file__state-container {
2024 display: -ms-flexbox;
2025 display: flex;
2026 -ms-flex-align: center;
2027 align-items: center;
2028}
2029
2030.bx--file__state-container .bx--loading {
2031 width: 1rem;
2032 height: 1rem;
2033 margin-right: 0.5rem;
2034}
2035
2036.bx--file__state-container .bx--loading__svg {
2037 stroke: #5a6872;
2038}
2039
2040.bx--file__state-container .bx--file-close,
2041.bx--file__state-container .bx--file-complete {
2042 width: 1rem;
2043 height: 1rem;
2044 fill: #152935;
2045 cursor: pointer;
2046}
2047
2048.bx--file__state-container .bx--file-close:focus,
2049.bx--file__state-container .bx--file-complete:focus {
2050 outline: 1px solid #3d70b2;
2051}
2052
2053.bx--file__state-container .bx--file-close {
2054 fill: #5a6872;
2055}
2056
2057.bx--file__state-container .bx--file-complete {
2058 fill: #5aa700;
2059}
2060
2061.bx--form-item.bx--checkbox-wrapper {
2062 margin-bottom: 1rem;
2063}
2064
2065.bx--form-item.bx--checkbox-wrapper:first-of-type {
2066 margin-top: 0.5rem;
2067}
2068
2069.bx--form-item.bx--checkbox-wrapper:last-of-type {
2070 margin-bottom: 0;
2071}
2072
2073.bx--checkbox {
2074 position: absolute;
2075 width: 1px;
2076 height: 1px;
2077 padding: 0;
2078 margin: -1px;
2079 overflow: hidden;
2080 clip: rect(0, 0, 0, 0);
2081 border: 0;
2082 visibility: visible;
2083 white-space: nowrap;
2084}
2085
2086.bx--checkbox-label {
2087 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
2088 -webkit-font-smoothing: antialiased;
2089 -moz-osx-font-smoothing: grayscale;
2090 font-size: 0.875rem;
2091 display: -ms-flexbox;
2092 display: flex;
2093 -ms-flex-align: center;
2094 align-items: center;
2095 cursor: pointer;
2096 position: relative;
2097 padding-left: 1.5rem;
2098 min-height: 1rem;
2099}
2100
2101.bx--checkbox-label::before {
2102 box-sizing: border-box;
2103 content: '';
2104 position: absolute;
2105 left: 0;
2106 top: calc(50% - 9px);
2107 height: 1.125rem;
2108 width: 1.125rem;
2109 border: 2px solid #5a6872;
2110 background-color: #fff;
2111}
2112
2113.bx--checkbox-label::after {
2114 box-sizing: border-box;
2115 content: '';
2116 width: 9px;
2117 height: 5px;
2118 background: none;
2119 /*rtl:ignore*/
2120 border-left: 1px solid #fff;
2121 border-bottom: 1px solid #fff;
2122 /*rtl:ignore*/
2123 transform: scale(0) rotate(-45deg);
2124 position: absolute;
2125 left: 0.3125rem;
2126 top: 50%;
2127 margin-top: -0.1875rem;
2128}
2129
2130.bx--checkbox:checked + .bx--checkbox-label::before,
2131.bx--checkbox:indeterminate + .bx--checkbox-label::before,
2132.bx--checkbox-label[data-contained-checkbox-state='true']::before,
2133.bx--checkbox-label[data-contained-checkbox-state='mixed']::before {
2134 background-color: #3d70b2;
2135 border-color: #3d70b2;
2136}
2137
2138.bx--checkbox:checked + .bx--checkbox-label::after,
2139.bx--checkbox-label[data-contained-checkbox-state='true']::after {
2140 opacity: 1;
2141 /*rtl:ignore*/
2142 transform: scale(1) rotate(-45deg);
2143}
2144
2145.bx--checkbox:not(:checked) + .bx--checkbox-label::after {
2146 opacity: 0;
2147 /*rtl:ignore*/
2148 transform: scale(0) rotate(-45deg);
2149}
2150
2151.bx--checkbox:focus + .bx--checkbox-label::before,
2152.bx--checkbox-label__focus::before {
2153 box-shadow: 0 0 0 3px #7cc7ff;
2154 outline: 1px solid transparent;
2155}
2156
2157.bx--checkbox:indeterminate + .bx--checkbox-label::after,
2158.bx--checkbox-label[data-contained-checkbox-state='mixed']::after {
2159 transform: scale(1) rotate(0deg);
2160 /*rtl:ignore*/
2161 border-left: 0 solid #fff;
2162 border-bottom: 2px solid #fff;
2163 opacity: 1;
2164 width: 0.625rem;
2165 margin-top: -0.25rem;
2166 left: 0.25rem;
2167}
2168
2169.bx--checkbox:disabled + .bx--checkbox-label,
2170.bx--checkbox:disabled ~ .bx--checkbox-label-text,
2171.bx--checkbox-label[data-contained-checkbox-disabled='true'] {
2172 opacity: 0.5;
2173 cursor: not-allowed;
2174}
2175
2176.bx--checkbox-appearance {
2177 position: absolute;
2178 left: 0;
2179 top: calc(50% - 9px);
2180 display: inline-block;
2181 height: 1.125rem;
2182 width: 1.125rem;
2183 margin-right: 0.5rem;
2184 background-color: #fff;
2185 border: 2px solid #5a6872;
2186 min-width: 1.125rem;
2187}
2188
2189.bx--checkbox:checked + .bx--checkbox-label .bx--checkbox-appearance {
2190 top: -0.0625rem;
2191}
2192
2193.bx--checkbox:checked + .bx--checkbox-appearance,
2194.bx--checkbox:checked + .bx--checkbox-label .bx--checkbox-appearance {
2195 display: -ms-flexbox;
2196 display: flex;
2197 -ms-flex-align: baseline;
2198 align-items: baseline;
2199 background-color: #3d70b2;
2200 border-color: #3d70b2;
2201}
2202
2203.bx--checkbox:focus + .bx--checkbox-label .bx--checkbox-appearance,
2204.bx--checkbox:focus + .bx--checkbox-appearance {
2205 box-shadow: 0 0 0 3px #7cc7ff;
2206 outline: 1px solid transparent;
2207}
2208
2209.bx--checkbox:disabled + .bx--checkbox-appearance {
2210 opacity: 0.5;
2211 cursor: not-allowed;
2212}
2213
2214.bx--checkbox-checkmark {
2215 display: none;
2216 fill: #fff;
2217 width: 100%;
2218 height: 100%;
2219}
2220
2221.bx--checkbox:checked + .bx--checkbox-appearance .bx--checkbox-checkmark,
2222.bx--checkbox:checked + .bx--checkbox-label .bx--checkbox-appearance .bx--checkbox-checkmark {
2223 display: block;
2224}
2225
2226@-moz-document url-prefix() {
2227 .bx--checkbox:checked + .bx--checkbox-appearance .bx--checkbox-checkmark,
2228 .bx--checkbox:checked + .bx--checkbox-label .bx--checkbox-appearance .bx--checkbox-checkmark {
2229 stroke: #3d70b2;
2230 }
2231}
2232
2233.bx--checkbox-label.bx--skeleton {
2234 position: relative;
2235 border: none;
2236 padding: 0;
2237 box-shadow: none;
2238 pointer-events: none;
2239 background: rgba(61, 112, 178, 0.1);
2240 width: 6.25rem;
2241 height: 1.125rem;
2242}
2243
2244.bx--checkbox-label.bx--skeleton:hover, .bx--checkbox-label.bx--skeleton:focus, .bx--checkbox-label.bx--skeleton:active {
2245 border: none;
2246 outline: none;
2247 cursor: default;
2248}
2249
2250.bx--checkbox-label.bx--skeleton:before {
2251 content: '';
2252 width: 0%;
2253 height: 100%;
2254 position: absolute;
2255 top: 0;
2256 left: 0;
2257 opacity: 0.3;
2258 background: rgba(61, 112, 178, 0.1);
2259 animation: 3000ms ease-in-out skeleton infinite;
2260}
2261
2262.bx--checkbox-label.bx--skeleton:after, .bx--checkbox-label.bx--skeleton:before {
2263 border: none;
2264}
2265
2266.bx--list-box {
2267 position: relative;
2268 width: 100%;
2269 height: 2.5rem;
2270 max-height: 2.5rem;
2271 background-color: #f4f7fb;
2272 border: none;
2273 box-shadow: 0 1px 0 0 #5a6872;
2274 cursor: pointer;
2275 color: #152935;
2276}
2277
2278.bx--list-box[data-invalid],
2279.bx--list-box[data-invalid] .bx--list-box__field:focus {
2280 box-shadow: 0 2px 0 0 #e0182d;
2281}
2282
2283.bx--list-box[data-invalid] .bx--list-box__field:focus .bx--list-box__label {
2284 color: #e0182d;
2285}
2286
2287.bx--list-box ~ .bx--form-requirement {
2288 -ms-flex-order: 3;
2289 order: 3;
2290 color: #e0182d;
2291 font-weight: 400;
2292 margin-top: 0.25rem;
2293}
2294
2295.bx--list-box ~ .bx--form-requirement::before {
2296 display: none;
2297}
2298
2299.bx--list-box--light {
2300 background-color: #fff;
2301}
2302
2303.bx--list-box--disabled {
2304 opacity: 0.5;
2305}
2306
2307.bx--list-box--disabled,
2308.bx--list-box--disabled .bx--list-box__field,
2309.bx--list-box--disabled .bx--list-box__menu-icon {
2310 cursor: not-allowed;
2311}
2312
2313.bx--list-box--disabled .bx--list-box__menu-item:hover,
2314.bx--list-box--disabled .bx--list-box__menu-item--highlighted {
2315 background-color: transparent;
2316 text-decoration: none;
2317}
2318
2319.bx--list-box.bx--list-box--inline {
2320 background-color: inherit;
2321 width: auto;
2322 height: 2rem;
2323 box-shadow: none;
2324}
2325
2326.bx--list-box--inline .bx--list-box__label {
2327 color: #3d70b2;
2328}
2329
2330.bx--list-box--inline .bx--list-box__field {
2331 padding: 0 0 0 0.625rem;
2332}
2333
2334.bx--list-box--inline .bx--list-box__menu-icon {
2335 position: static;
2336 padding: 0 0.5rem;
2337}
2338
2339.bx--list-box--inline > .bx--list-box__menu {
2340 top: 2rem;
2341 width: 18.75rem;
2342}
2343
2344.bx--list-box--inline > .bx--list-box__field[aria-expanded='true'] ~ .bx--list-box__menu {
2345 outline: 1px solid #3d70b2;
2346 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
2347}
2348
2349.bx--list-box--inline > .bx--list-box__field[aria-expanded='true'],
2350.bx--list-box.bx--list-box--inline > .bx--list-box__field:focus {
2351 outline: none;
2352 box-shadow: none;
2353}
2354
2355.bx--list-box__field {
2356 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
2357 -webkit-font-smoothing: antialiased;
2358 -moz-osx-font-smoothing: grayscale;
2359 letter-spacing: 0;
2360 display: inline-block;
2361 background: none;
2362 -webkit-appearance: none;
2363 -moz-appearance: none;
2364 appearance: none;
2365 border: 0;
2366 padding: 0;
2367 cursor: pointer;
2368 width: 100%;
2369 position: relative;
2370 display: -ms-inline-flexbox;
2371 display: inline-flex;
2372 -ms-flex-align: center;
2373 align-items: center;
2374 height: 100%;
2375 padding: 0 2rem 0 1rem;
2376 cursor: pointer;
2377}
2378
2379.bx--list-box__field::-moz-focus-inner {
2380 border: 0;
2381}
2382
2383.bx--list-box__field:focus,
2384.bx--list-box__field[aria-expanded='true'] {
2385 outline: none;
2386 box-shadow: 0 2px 0 0 #3d70b2;
2387}
2388
2389.bx--list-box__field[disabled] {
2390 outline: none;
2391 opacity: 0.5;
2392}
2393
2394.bx--list-box__label {
2395 font-size: 0.875rem;
2396 color: #152935;
2397 font-weight: 600;
2398 -webkit-user-select: none;
2399 -moz-user-select: none;
2400 -ms-user-select: none;
2401 user-select: none;
2402}
2403
2404.bx--list-box__menu-icon {
2405 display: inline-block;
2406 position: absolute;
2407 top: 0;
2408 right: 0;
2409 bottom: 0;
2410 height: 100%;
2411 padding: 0 1rem;
2412 transition: transform 200ms cubic-bezier(0.5, 0, 0.1, 1);
2413 cursor: pointer;
2414}
2415
2416.bx--list-box__menu-icon > svg {
2417 fill: #3d70b2;
2418 height: 100%;
2419}
2420
2421.bx--list-box__menu-icon--open {
2422 transform: rotate(180deg);
2423}
2424
2425.bx--list-box__selection {
2426 display: inline-block;
2427 position: absolute;
2428 top: 0;
2429 right: 1.625rem;
2430 bottom: 0;
2431 height: 2.5rem;
2432 padding: 0 1rem;
2433 cursor: pointer;
2434 -webkit-user-select: none;
2435 -moz-user-select: none;
2436 -ms-user-select: none;
2437 user-select: none;
2438 transition: background-color 200ms cubic-bezier(0.5, 0, 0.1, 1);
2439}
2440
2441.bx--list-box__selection > svg {
2442 fill: #5a6872;
2443 height: 100%;
2444}
2445
2446.bx--list-box__selection:focus {
2447 outline: 1px solid #3d70b2;
2448}
2449
2450.bx--list-box__selection--multi {
2451 font-size: 0.75rem;
2452 position: static;
2453 display: -ms-flexbox;
2454 display: flex;
2455 -ms-flex-align: center;
2456 align-items: center;
2457 -ms-flex-pack: center;
2458 justify-content: center;
2459 padding: 0;
2460 background-color: #3d70b2;
2461 height: 1.125rem;
2462 color: white;
2463 line-height: 0;
2464 padding: 0.3125rem;
2465 margin-right: 0.625rem;
2466 border-radius: 0.8125rem;
2467}
2468
2469.bx--list-box__selection--multi > svg {
2470 fill: white;
2471 width: 0.5rem;
2472 height: 0.5rem;
2473 margin-left: 0.3125rem;
2474}
2475
2476.bx--list-box__selection--multi:focus,
2477.bx--list-box__selection--multi:hover {
2478 background-color: #30588c;
2479 outline: none;
2480}
2481
2482.bx--list-box__menu {
2483 box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.1);
2484 position: absolute;
2485 left: 0;
2486 right: 0;
2487 top: 2.5rem;
2488 width: 100%;
2489 background-color: #fff;
2490 max-height: 7.5rem;
2491 overflow-y: auto;
2492 z-index: 7000;
2493}
2494
2495.bx--list-box__menu-item {
2496 font-size: 0.875rem;
2497 display: -ms-flexbox;
2498 display: flex;
2499 -ms-flex-align: center;
2500 align-items: center;
2501 height: 2.5rem;
2502 padding: 0 1rem;
2503 cursor: pointer;
2504 -webkit-user-select: none;
2505 -moz-user-select: none;
2506 -ms-user-select: none;
2507 user-select: none;
2508}
2509
2510.bx--list-box__menu-item:hover,
2511.bx--list-box__menu-item--highlighted {
2512 background-color: rgba(85, 150, 230, 0.1);
2513 outline: 1px solid transparent;
2514 text-decoration: underline;
2515 color: #152935;
2516}
2517
2518.bx--list-box__menu-item .bx--checkbox-label {
2519 width: 100%;
2520}
2521
2522.bx--list-box__menu-item .bx--checkbox-label-text {
2523 white-space: nowrap;
2524 text-overflow: ellipsis;
2525 overflow: hidden;
2526}
2527
2528.bx--list-box__menu-item > .bx--form-item.bx--checkbox-wrapper {
2529 margin: 0;
2530 width: 100%;
2531}
2532
2533.bx--list-box input[role='combobox'] {
2534 background-color: inherit;
2535 font-weight: 600;
2536 outline-offset: 0;
2537 min-width: 0;
2538}
2539
2540.bx--list-box input[role='combobox']:-ms-input-placeholder {
2541 color: #cdd1d4;
2542 font-weight: 400;
2543}
2544
2545.bx--list-box input[role='combobox']::placeholder {
2546 color: #cdd1d4;
2547 font-weight: 400;
2548}
2549
2550.bx--list-box--disabled input[role='combobox'] {
2551 opacity: 1;
2552}
2553
2554.bx--combo-box > .bx--list-box__field {
2555 padding: 0;
2556}
2557
2558.bx--radio-button-group {
2559 display: -ms-flexbox;
2560 display: flex;
2561 -ms-flex-align: center;
2562 align-items: center;
2563 margin-top: 0.5rem;
2564}
2565
2566.bx--radio-button {
2567 position: absolute;
2568 width: 1px;
2569 height: 1px;
2570 padding: 0;
2571 margin: -1px;
2572 overflow: hidden;
2573 clip: rect(0, 0, 0, 0);
2574 border: 0;
2575 visibility: visible;
2576 white-space: nowrap;
2577 visibility: unset;
2578}
2579
2580.bx--radio-button__label {
2581 font-size: 0.875rem;
2582 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
2583 display: -ms-flexbox;
2584 display: flex;
2585 -ms-flex-align: center;
2586 align-items: center;
2587 cursor: pointer;
2588 margin-right: 1rem;
2589}
2590
2591.bx--radio-button__appearance {
2592 background-color: #fff;
2593 border-radius: 50%;
2594 border: 2px solid #5a6872;
2595 -ms-flex-negative: 0;
2596 flex-shrink: 0;
2597 height: 1.125rem;
2598 width: 1.125rem;
2599 margin-right: 0.5rem;
2600}
2601
2602.bx--radio-button:checked + .bx--radio-button__label .bx--radio-button__appearance {
2603 display: -ms-flexbox;
2604 display: flex;
2605 -ms-flex-align: center;
2606 align-items: center;
2607 -ms-flex-pack: center;
2608 justify-content: center;
2609 border-color: #3d70b2;
2610}
2611
2612.bx--radio-button:checked + .bx--radio-button__label .bx--radio-button__appearance:before {
2613 content: '';
2614 display: inline-block;
2615 position: relative;
2616 width: 0.5rem;
2617 height: 0.5rem;
2618 border-radius: 50%;
2619 background-color: #3d70b2;
2620}
2621
2622.bx--radio-button:disabled + .bx--radio-button__label {
2623 opacity: 0.5;
2624 cursor: not-allowed;
2625}
2626
2627.bx--radio-button:focus + .bx--radio-button__label .bx--radio-button__appearance {
2628 box-shadow: 0 0 0 3px #7cc7ff;
2629 outline: 1px solid transparent;
2630}
2631
2632.bx--radio-button__label.bx--skeleton {
2633 position: relative;
2634 border: none;
2635 padding: 0;
2636 box-shadow: none;
2637 pointer-events: none;
2638 background: rgba(61, 112, 178, 0.1);
2639 width: 6.25rem;
2640 height: 1.125rem;
2641}
2642
2643.bx--radio-button__label.bx--skeleton:hover, .bx--radio-button__label.bx--skeleton:focus, .bx--radio-button__label.bx--skeleton:active {
2644 border: none;
2645 outline: none;
2646 cursor: default;
2647}
2648
2649.bx--radio-button__label.bx--skeleton:before {
2650 content: '';
2651 width: 0%;
2652 height: 100%;
2653 position: absolute;
2654 top: 0;
2655 left: 0;
2656 opacity: 0.3;
2657 background: rgba(61, 112, 178, 0.1);
2658 animation: 3000ms ease-in-out skeleton infinite;
2659}
2660
2661.bx--radio-button__label.bx--skeleton .bx--radio-button__appearance {
2662 display: none;
2663}
2664
2665.bx--radio-button-wrapper .bx--radio-button__label {
2666 display: -ms-flexbox;
2667 display: flex;
2668 -ms-flex-align: center;
2669 align-items: center;
2670 -ms-flex-pack: center;
2671 justify-content: center;
2672 margin: 0px;
2673}
2674
2675.bx--radio-button-wrapper:not(:last-of-type) {
2676 margin-right: 1rem;
2677}
2678
2679.bx--radio-button-wrapper.bx--radio-button-wrapper--label-right .bx--radio-button__label {
2680 -ms-flex-direction: row;
2681 flex-direction: row;
2682}
2683
2684.bx--radio-button-wrapper.bx--radio-button-wrapper--label-left .bx--radio-button__label {
2685 -ms-flex-direction: row-reverse;
2686 flex-direction: row-reverse;
2687}
2688
2689.bx--radio-button-wrapper.bx--radio-button-wrapper--label-left .bx--radio-button__appearance {
2690 margin-right: 0;
2691 margin-left: 0.5rem;
2692}
2693
2694.bx--radio-button-wrapper.bx--radio-button-wrapper--label-top .bx--radio-button__label {
2695 -ms-flex-direction: column-reverse;
2696 flex-direction: column-reverse;
2697 text-align: center;
2698}
2699
2700.bx--radio-button-wrapper.bx--radio-button-wrapper--label-top .bx--radio-button__appearance {
2701 margin-right: 0;
2702}
2703
2704.bx--radio-button-wrapper.bx--radio-button-wrapper--label-top .bx--radio-button__label-text {
2705 margin-bottom: 5px;
2706}
2707
2708.bx--radio-button-wrapper.bx--radio-button-wrapper--label-bottom .bx--radio-button__label {
2709 -ms-flex-direction: column;
2710 flex-direction: column;
2711 text-align: center;
2712}
2713
2714.bx--radio-button-wrapper.bx--radio-button-wrapper--label-bottom .bx--radio-button__label-text {
2715 margin-top: 5px;
2716}
2717
2718.bx--radio-button-wrapper.bx--radio-button-wrapper--label-bottom .bx--radio-button__appearance {
2719 margin-right: 0;
2720}
2721
2722.bx--toggle {
2723 position: absolute;
2724 width: 1px;
2725 height: 1px;
2726 padding: 0;
2727 margin: -1px;
2728 overflow: hidden;
2729 clip: rect(0, 0, 0, 0);
2730 border: 0;
2731 visibility: visible;
2732 white-space: nowrap;
2733}
2734
2735.bx--toggle__label {
2736 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
2737 position: relative;
2738 display: -ms-flexbox;
2739 display: flex;
2740 -ms-flex-align: center;
2741 align-items: center;
2742 transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
2743 cursor: pointer;
2744 margin: 1rem 0;
2745 color: #152935;
2746}
2747
2748.bx--toggle__appearance {
2749 position: relative;
2750 width: 3rem;
2751}
2752
2753.bx--toggle__appearance:before {
2754 position: absolute;
2755 display: block;
2756 content: '';
2757 width: 100%;
2758 height: 0.25rem;
2759 top: -2px;
2760 background-color: #8897a2;
2761 transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
2762 cursor: pointer;
2763}
2764
2765.bx--toggle__appearance:after {
2766 box-sizing: border-box;
2767 position: absolute;
2768 display: block;
2769 border: 2px solid #8897a2;
2770 cursor: pointer;
2771 top: -12px;
2772 width: 1.5rem;
2773 height: 1.5rem;
2774 background-color: #fff;
2775 border-radius: 50%;
2776 content: '';
2777 transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
2778}
2779
2780.bx--toggle--small + .bx--toggle__label {
2781 width: 2rem;
2782}
2783
2784.bx--toggle--small + .bx--toggle__label .bx--toggle__appearance {
2785 width: 2rem;
2786 height: 1rem;
2787}
2788
2789.bx--toggle--small + .bx--toggle__label .bx--toggle__appearance:before {
2790 box-sizing: border-box;
2791 height: 1rem;
2792 width: 2rem;
2793 border-radius: 0.9375rem;
2794 background-color: transparent;
2795 border: 2px solid #8897a2;
2796 top: 0;
2797}
2798
2799.bx--toggle--small + .bx--toggle__label .bx--toggle__appearance:after {
2800 width: 0.625rem;
2801 height: 0.625rem;
2802 background-color: #8897a2;
2803 border: none;
2804 top: 3px;
2805 left: 3px;
2806}
2807
2808.bx--toggle__check {
2809 fill: #8897a2;
2810 position: absolute;
2811 left: 6px;
2812 top: 6px;
2813 z-index: 1;
2814 transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
2815 transform: scale(0.2);
2816}
2817
2818.bx--toggle--small:checked + .bx--toggle__label .bx--toggle__check {
2819 fill: #3d70b2;
2820 transform: scale(1) translateX(16px);
2821}
2822
2823.bx--toggle__text--left,
2824.bx--toggle__text--right {
2825 font-size: 0.875rem;
2826 position: relative;
2827 color: #152935;
2828}
2829
2830.bx--toggle__text--left {
2831 margin-right: 0.5rem;
2832}
2833
2834.bx--toggle__text--right {
2835 margin-left: 0.5rem;
2836}
2837
2838.bx--toggle:checked + .bx--toggle__label .bx--toggle__appearance:before {
2839 background-color: #3d70b2;
2840}
2841
2842.bx--toggle:checked + .bx--toggle__label .bx--toggle__appearance:after {
2843 transform: translateX(24px);
2844 background-color: #3d70b2;
2845 box-shadow: none;
2846 border-color: #3d70b2;
2847}
2848
2849.bx--toggle--small:checked + .bx--toggle__label .bx--toggle__appearance:before {
2850 background-color: #3d70b2;
2851 border-color: #3d70b2;
2852}
2853
2854.bx--toggle--small:checked + .bx--toggle__label .bx--toggle__appearance:after {
2855 background-color: #fff;
2856 border-color: #fff;
2857 margin-left: 0px;
2858 transform: translateX(17px);
2859}
2860
2861.bx--toggle:focus + .bx--toggle__label .bx--toggle__appearance:before {
2862 outline: 1px solid transparent;
2863}
2864
2865.bx--toggle:focus + .bx--toggle__label .bx--toggle__appearance:after {
2866 box-shadow: 0 0 0 3px #7cc7ff;
2867 outline: 1px solid transparent;
2868}
2869
2870.bx--toggle--small:focus + .bx--toggle__label .bx--toggle__appearance:before {
2871 box-shadow: 0 0 0 3px #7cc7ff;
2872 outline: 1px solid transparent;
2873}
2874
2875.bx--toggle--small:focus + .bx--toggle__label .bx--toggle__appearance:after {
2876 outline: none;
2877 box-shadow: none;
2878}
2879
2880.bx--toggle:disabled + .bx--toggle__label {
2881 cursor: not-allowed;
2882 opacity: 0.5;
2883}
2884
2885.bx--toggle:disabled + .bx--toggle__label .bx--toggle__appearance:before, .bx--toggle:disabled + .bx--toggle__label .bx--toggle__appearance:after {
2886 cursor: not-allowed;
2887 transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
2888}
2889
2890.bx--toggle.bx--toggle--small + .bx--toggle__label > .bx--toggle__text--left,
2891.bx--toggle.bx--toggle--small + .bx--toggle__label > .bx--toggle__text--right {
2892 position: absolute;
2893 width: 1px;
2894 height: 1px;
2895 padding: 0;
2896 margin: -1px;
2897 overflow: hidden;
2898 clip: rect(0, 0, 0, 0);
2899 border: 0;
2900 visibility: visible;
2901 white-space: nowrap;
2902}
2903
2904.bx--toggle.bx--skeleton + .bx--toggle__label {
2905 cursor: default;
2906}
2907
2908.bx--toggle.bx--skeleton + .bx--toggle__label > .bx--toggle__appearance:before, .bx--toggle.bx--skeleton + .bx--toggle__label > .bx--toggle__appearance:after {
2909 background-color: #3d70b2;
2910 border-color: #3d70b2;
2911 cursor: default;
2912}
2913
2914.bx--toggle.bx--skeleton + .bx--toggle__label > .bx--toggle__text--left,
2915.bx--toggle.bx--skeleton + .bx--toggle__label > .bx--toggle__text--right {
2916 position: relative;
2917 border: none;
2918 padding: 0;
2919 box-shadow: none;
2920 pointer-events: none;
2921 background: rgba(61, 112, 178, 0.1);
2922 width: 1.25rem;
2923 height: 0.75rem;
2924}
2925
2926.bx--toggle.bx--skeleton + .bx--toggle__label > .bx--toggle__text--left:hover, .bx--toggle.bx--skeleton + .bx--toggle__label > .bx--toggle__text--left:focus, .bx--toggle.bx--skeleton + .bx--toggle__label > .bx--toggle__text--left:active,
2927.bx--toggle.bx--skeleton + .bx--toggle__label > .bx--toggle__text--right:hover,
2928.bx--toggle.bx--skeleton + .bx--toggle__label > .bx--toggle__text--right:focus,
2929.bx--toggle.bx--skeleton + .bx--toggle__label > .bx--toggle__text--right:active {
2930 border: none;
2931 outline: none;
2932 cursor: default;
2933}
2934
2935.bx--toggle.bx--skeleton + .bx--toggle__label > .bx--toggle__text--left:before,
2936.bx--toggle.bx--skeleton + .bx--toggle__label > .bx--toggle__text--right:before {
2937 content: '';
2938 width: 0%;
2939 height: 100%;
2940 position: absolute;
2941 top: 0;
2942 left: 0;
2943 opacity: 0.3;
2944 background: rgba(61, 112, 178, 0.1);
2945 animation: 3000ms ease-in-out skeleton infinite;
2946}
2947
2948.bx--toggle.bx--skeleton + .bx--toggle__label > .bx--toggle__appearance:before {
2949 background: transparent;
2950 border-color: #5a6872;
2951}
2952
2953.bx--toggle.bx--skeleton + .bx--toggle__label > .bx--toggle__appearance:after {
2954 background-color: #5a6872;
2955 border: none;
2956}
2957
2958.bx--search {
2959 display: -ms-flexbox;
2960 display: flex;
2961 position: relative;
2962 width: 100%;
2963}
2964
2965.bx--search .bx--label {
2966 position: absolute;
2967 width: 1px;
2968 height: 1px;
2969 padding: 0;
2970 margin: -1px;
2971 overflow: hidden;
2972 clip: rect(0, 0, 0, 0);
2973 border: 0;
2974 visibility: visible;
2975 white-space: nowrap;
2976}
2977
2978.bx--search-input {
2979 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
2980 -webkit-appearance: none;
2981 -moz-appearance: none;
2982 appearance: none;
2983 border: none;
2984 background-color: #f4f7fb;
2985 color: #152935;
2986 font-weight: 600;
2987 padding: 0 2.5rem;
2988 text-overflow: ellipsis;
2989 width: 100%;
2990 -ms-flex-order: 1;
2991 order: 1;
2992}
2993
2994.bx--search-input:focus {
2995 outline: none;
2996}
2997
2998.bx--search-input:focus ~ .bx--search-magnifier {
2999 fill: #3d70b2;
3000}
3001
3002.bx--search-input:-ms-input-placeholder {
3003 color: #5a6872;
3004 font-weight: 400;
3005}
3006
3007.bx--search-input::placeholder {
3008 color: #5a6872;
3009 font-weight: 400;
3010}
3011
3012.bx--search-input::-ms-clear {
3013 display: none;
3014}
3015
3016.bx--search--light .bx--search-input {
3017 background: #fff;
3018}
3019
3020.bx--search--sm .bx--search-input {
3021 font-size: 0.875rem;
3022 height: 2rem;
3023}
3024
3025.bx--search--lg .bx--search-input {
3026 font-size: 0.875rem;
3027 height: 2.5rem;
3028}
3029
3030.bx--search-magnifier,
3031.bx--search-close {
3032 position: absolute;
3033 height: 1rem;
3034 width: 1rem;
3035 top: calc(50% - 0.5rem);
3036 z-index: 1;
3037}
3038
3039.bx--search-magnifier {
3040 left: 0.75rem;
3041 fill: #5a6872;
3042 z-index: 2;
3043}
3044
3045.bx--search-close {
3046 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
3047 -webkit-font-smoothing: antialiased;
3048 -moz-osx-font-smoothing: grayscale;
3049 letter-spacing: 0;
3050 display: inline-block;
3051 background: none;
3052 -webkit-appearance: none;
3053 -moz-appearance: none;
3054 appearance: none;
3055 border: 0;
3056 padding: 0;
3057 cursor: pointer;
3058 transition: opacity 250ms;
3059 fill: #5a6872;
3060 cursor: pointer;
3061 visibility: visible;
3062 opacity: 1;
3063}
3064
3065.bx--search-close::-moz-focus-inner {
3066 border: 0;
3067}
3068
3069.bx--search-close:focus {
3070 outline: 1px solid #3d70b2;
3071 outline-offset: 2px;
3072}
3073
3074.bx--search-close {
3075 right: 0.75rem;
3076}
3077
3078.bx--search--lg .bx--search-close {
3079 right: 0.75rem;
3080}
3081
3082.bx--search-button {
3083 border: 0;
3084 transition: 250ms;
3085 height: 2.5rem;
3086 width: 2.5rem;
3087 min-width: 2.5rem;
3088 margin-left: 0.25rem;
3089 background-color: #fff;
3090 position: relative;
3091 padding: 0;
3092 outline: 1px solid transparent;
3093 -ms-flex-order: 2;
3094 order: 2;
3095}
3096
3097.bx--search-button svg {
3098 position: relative;
3099 top: -1px;
3100 box-sizing: border-box;
3101 vertical-align: middle;
3102 transition: 250ms;
3103 fill: #30588c;
3104 height: 1rem;
3105 width: 1rem;
3106}
3107
3108.bx--search-button:hover,
3109.bx--search-button:focus {
3110 cursor: pointer;
3111 background-color: #3d70b2;
3112 outline: 1px solid transparent;
3113}
3114
3115.bx--search-button:hover svg,
3116.bx--search-button:focus svg {
3117 fill: #fff;
3118}
3119
3120.bx--search-close--hidden {
3121 visibility: hidden;
3122 opacity: 0;
3123}
3124
3125.bx--search-view--hidden {
3126 display: none;
3127}
3128
3129.bx--search--lg.bx--skeleton .bx--search-input,
3130.bx--search--sm.bx--skeleton .bx--search-input {
3131 position: relative;
3132 border: none;
3133 padding: 0;
3134 box-shadow: none;
3135 pointer-events: none;
3136 background: rgba(61, 112, 178, 0.1);
3137 width: 100%;
3138}
3139
3140.bx--search--lg.bx--skeleton .bx--search-input:hover, .bx--search--lg.bx--skeleton .bx--search-input:focus, .bx--search--lg.bx--skeleton .bx--search-input:active,
3141.bx--search--sm.bx--skeleton .bx--search-input:hover,
3142.bx--search--sm.bx--skeleton .bx--search-input:focus,
3143.bx--search--sm.bx--skeleton .bx--search-input:active {
3144 border: none;
3145 outline: none;
3146 cursor: default;
3147}
3148
3149.bx--search--lg.bx--skeleton .bx--search-input:before,
3150.bx--search--sm.bx--skeleton .bx--search-input:before {
3151 content: '';
3152 width: 0%;
3153 height: 100%;
3154 position: absolute;
3155 top: 0;
3156 left: 0;
3157 opacity: 0.3;
3158 background: rgba(61, 112, 178, 0.1);
3159 animation: 3000ms ease-in-out skeleton infinite;
3160}
3161
3162.bx--search--lg.bx--skeleton .bx--search-input:-ms-input-placeholder,
3163.bx--search--sm.bx--skeleton .bx--search-input:-ms-input-placeholder {
3164 color: transparent;
3165}
3166
3167.bx--search--lg.bx--skeleton .bx--search-input::placeholder,
3168.bx--search--sm.bx--skeleton .bx--search-input::placeholder {
3169 color: transparent;
3170}
3171
3172.bx--select {
3173 position: relative;
3174 display: -ms-flexbox;
3175 display: flex;
3176 -ms-flex-direction: column;
3177 flex-direction: column;
3178}
3179
3180.bx--form__helper-text {
3181 -ms-flex-order: 0;
3182 order: 0;
3183}
3184
3185.bx--select-input {
3186 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
3187 font-size: 0.875rem;
3188 height: 2.5rem;
3189 -webkit-appearance: none;
3190 -moz-appearance: none;
3191 appearance: none;
3192 display: block;
3193 width: 100%;
3194 padding: 0 2.5rem 0 1rem;
3195 color: #152935;
3196 background-color: #f4f7fb;
3197 border: none;
3198 box-shadow: 0 1px 0 0 #5a6872;
3199 border-radius: 0;
3200 cursor: pointer;
3201 border-bottom: 1px solid transparent;
3202}
3203
3204.bx--select-input::-ms-expand {
3205 display: none;
3206}
3207
3208.bx--select-input:focus {
3209 outline: none;
3210 box-shadow: 0 2px 0 0 #3d70b2;
3211}
3212
3213.bx--select-input[data-invalid], .bx--select-input[data-invalid]:focus {
3214 box-shadow: 0 2px 0 0 #e0182d;
3215}
3216
3217.bx--select-input:focus ~ .bx--label {
3218 color: #3d70b2;
3219}
3220
3221.bx--select-input[data-invalid]:focus ~ .bx--label {
3222 color: #e0182d;
3223}
3224
3225.bx--select-input:disabled {
3226 opacity: 0.5;
3227 cursor: not-allowed;
3228}
3229
3230.bx--select-input ~ .bx--form-requirement {
3231 color: #e0182d;
3232 font-weight: 400;
3233 margin-top: 0.25rem;
3234}
3235
3236.bx--select-input ~ .bx--form-requirement::before {
3237 display: none;
3238}
3239
3240.bx--select--light .bx--select-input {
3241 background: #fff;
3242}
3243
3244.bx--select__arrow {
3245 fill: #3d70b2;
3246 position: absolute;
3247 right: 1rem;
3248 bottom: 1rem;
3249 width: 0.625rem;
3250 height: 0.3125rem;
3251 pointer-events: none;
3252}
3253
3254[data-invalid] ~ .bx--select__arrow {
3255 bottom: 2.25rem;
3256}
3257
3258.bx--select-optgroup,
3259.bx--select-option {
3260 color: #152935;
3261}
3262
3263.bx--select-option[disabled] {
3264 opacity: 0.5;
3265 cursor: not-allowed;
3266}
3267
3268@-moz-document url-prefix() {
3269 .bx--select-option {
3270 background-color: #fff;
3271 color: #152935;
3272 }
3273 .bx--select-optgroup {
3274 color: #152935;
3275 }
3276}
3277
3278.bx--select--inline {
3279 display: -ms-grid;
3280 display: grid;
3281 -ms-grid-columns: auto auto auto;
3282 grid-template-columns: auto auto auto;
3283}
3284
3285@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
3286 .bx--select--inline {
3287 display: -ms-flexbox;
3288 display: flex;
3289 -ms-flex-direction: row;
3290 flex-direction: row;
3291 -ms-flex-align: center;
3292 align-items: center;
3293 }
3294}
3295
3296.bx--select--inline .bx--label,
3297.bx--select--inline .bx--form__helper-text,
3298.bx--select--inline .bx--select-input {
3299 -ms-grid-row: 2;
3300 grid-row-start: 2;
3301}
3302
3303.bx--select--inline .bx--label {
3304 white-space: nowrap;
3305 margin: 0 0.5rem 0 0;
3306 font-weight: 400;
3307 -ms-flex-item-align: center;
3308 -ms-grid-row-align: center;
3309 align-self: center;
3310}
3311
3312.bx--select--inline .bx--form__helper-text {
3313 -ms-grid-column: 3;
3314 grid-column-start: 3;
3315 -ms-flex-item-align: center;
3316 -ms-grid-row-align: center;
3317 align-self: center;
3318 margin-bottom: 0;
3319}
3320
3321.bx--select--inline .bx--select-input {
3322 background-color: transparent;
3323 color: #3d70b2;
3324 font-weight: 600;
3325 box-shadow: none;
3326}
3327
3328.bx--select--inline .bx--select-input:hover {
3329 background-color: #fff;
3330}
3331
3332.bx--select--inline .bx--select-input:focus {
3333 outline: 1px solid #3d70b2;
3334}
3335
3336.bx--select--inline .bx--select-input ~ .bx--select__arrow,
3337.bx--select--inline .bx--select-input ~ .bx--form-requirement {
3338 -ms-grid-column: 2;
3339 grid-column-start: 2;
3340}
3341
3342.bx--select--inline .bx--select-input ~ .bx--select__arrow {
3343 position: relative;
3344 top: calc(100% + 1rem);
3345 -ms-grid-row: 1;
3346 grid-row-start: 1;
3347 justify-self: end;
3348}
3349
3350.bx--select--inline .bx--select-input[data-invalid] {
3351 color: #152935;
3352 outline-offset: 2px;
3353}
3354
3355.bx--select--inline .bx--select-input[data-invalid]:focus {
3356 outline: 1px solid #e0182d;
3357 box-shadow: none;
3358}
3359
3360.bx--select--inline .bx--select-input:disabled ~ * {
3361 opacity: 0.5;
3362 cursor: not-allowed;
3363}
3364
3365.bx--select--inline .bx--select-input ~ .bx--form-requirement {
3366 -ms-grid-row: 3;
3367 grid-row-start: 3;
3368}
3369
3370@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
3371 .bx--select--inline .bx--select-input ~ .bx--form-requirement {
3372 position: absolute;
3373 bottom: -1.5rem;
3374 }
3375}
3376
3377.bx--select.bx--skeleton {
3378 position: relative;
3379 border: none;
3380 padding: 0;
3381 box-shadow: none;
3382 pointer-events: none;
3383 background: rgba(61, 112, 178, 0.1);
3384 width: 100%;
3385 height: 2.5rem;
3386}
3387
3388.bx--select.bx--skeleton:hover, .bx--select.bx--skeleton:focus, .bx--select.bx--skeleton:active {
3389 border: none;
3390 outline: none;
3391 cursor: default;
3392}
3393
3394.bx--select.bx--skeleton:before {
3395 content: '';
3396 width: 0%;
3397 height: 100%;
3398 position: absolute;
3399 top: 0;
3400 left: 0;
3401 opacity: 0.3;
3402 background: rgba(61, 112, 178, 0.1);
3403 animation: 3000ms ease-in-out skeleton infinite;
3404}
3405
3406.bx--select.bx--skeleton .bx--select-input {
3407 display: none;
3408}
3409
3410.bx--text-input {
3411 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
3412 font-size: 0.875rem;
3413 display: block;
3414 width: 100%;
3415 height: 2.5rem;
3416 min-width: 18.75rem;
3417 padding: 0 1rem;
3418 color: #152935;
3419 background-color: #f4f7fb;
3420 border: none;
3421 box-shadow: 0 1px 0 0 #5a6872;
3422 -ms-flex-order: 2;
3423 order: 2;
3424 border-bottom: 1px solid transparent;
3425}
3426
3427.bx--text-input ~ .bx--label {
3428 -ms-flex-order: 1;
3429 order: 1;
3430}
3431
3432.bx--text-input:-ms-input-placeholder {
3433 color: #cdd1d4;
3434 opacity: 1;
3435}
3436
3437.bx--text-input::placeholder {
3438 color: #cdd1d4;
3439 opacity: 1;
3440}
3441
3442.bx--text-input:focus {
3443 outline: none;
3444 box-shadow: 0 2px 0 0 #3d70b2;
3445}
3446
3447.bx--text-input[data-invalid], .bx--text-input[data-invalid]:focus {
3448 box-shadow: 0 2px 0 0 #e0182d;
3449}
3450
3451.bx--text-input:focus ~ .bx--label {
3452 color: #3d70b2;
3453}
3454
3455.bx--text-input[data-invalid]:focus + .bx--label {
3456 color: #e0182d;
3457}
3458
3459.bx--text-input:disabled {
3460 opacity: 0.5;
3461 cursor: not-allowed;
3462}
3463
3464.bx--text-input:disabled:hover {
3465 border: none;
3466}
3467
3468.bx--text-input ~ .bx--form-requirement {
3469 -ms-flex-order: 3;
3470 order: 3;
3471 color: #e0182d;
3472 font-weight: 400;
3473 margin-top: 0.25rem;
3474}
3475
3476.bx--text-input ~ .bx--form-requirement::before {
3477 display: none;
3478}
3479
3480.bx--text-input-wrapper svg[hidden] {
3481 display: none;
3482}
3483
3484.bx--text-input[data-toggle-password-visibility] + .bx--text-input--password__visibility {
3485 top: -1.75rem;
3486 right: 0.75rem;
3487 display: -ms-flexbox;
3488 display: flex;
3489 -ms-flex-pack: center;
3490 justify-content: center;
3491 -ms-flex-item-align: end;
3492 align-self: flex-end;
3493 -ms-flex-align: center;
3494 align-items: center;
3495 -ms-flex-order: 3;
3496 order: 3;
3497 height: 1rem;
3498 width: 1rem;
3499 padding: 0;
3500 margin-bottom: -1rem;
3501 border: 0;
3502 background: none;
3503 cursor: pointer;
3504 outline: inherit;
3505}
3506
3507.bx--text-input[data-toggle-password-visibility] + .bx--text-input--password__visibility svg {
3508 fill: #3d70b2;
3509}
3510
3511.bx--text-input[data-toggle-password-visibility] + .bx--text-input--password__visibility svg:hover {
3512 fill: #30588c;
3513}
3514
3515.bx--text-input--light {
3516 background-color: #fff;
3517}
3518
3519.bx--text-input.bx--skeleton {
3520 position: relative;
3521 border: none;
3522 padding: 0;
3523 box-shadow: none;
3524 pointer-events: none;
3525 background: rgba(61, 112, 178, 0.1);
3526 width: 100%;
3527}
3528
3529.bx--text-input.bx--skeleton:hover, .bx--text-input.bx--skeleton:focus, .bx--text-input.bx--skeleton:active {
3530 border: none;
3531 outline: none;
3532 cursor: default;
3533}
3534
3535.bx--text-input.bx--skeleton:before {
3536 content: '';
3537 width: 0%;
3538 height: 100%;
3539 position: absolute;
3540 top: 0;
3541 left: 0;
3542 opacity: 0.3;
3543 background: rgba(61, 112, 178, 0.1);
3544 animation: 3000ms ease-in-out skeleton infinite;
3545}
3546
3547.bx--text-input.bx--skeleton::-webkit-input-placeholder {
3548 color: transparent;
3549}
3550
3551.bx--text-area {
3552 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
3553 font-size: 0.875rem;
3554 width: 100%;
3555 min-width: 10rem;
3556 padding: 1rem;
3557 color: #152935;
3558 background-color: #f4f7fb;
3559 border: none;
3560 box-shadow: 0 1px 0 0 #5a6872;
3561 -ms-flex-order: 2;
3562 order: 2;
3563 resize: vertical;
3564 border-bottom: 1px solid transparent;
3565}
3566
3567.bx--text-area ~ .bx--label {
3568 -ms-flex-order: 1;
3569 order: 1;
3570}
3571
3572.bx--text-area:focus {
3573 outline: none;
3574 box-shadow: 0 2px 0 0 #3d70b2;
3575}
3576
3577.bx--text-area:-ms-input-placeholder {
3578 color: #cdd1d4;
3579 opacity: 1;
3580}
3581
3582.bx--text-area::placeholder {
3583 color: #cdd1d4;
3584 opacity: 1;
3585}
3586
3587.bx--text-area:disabled {
3588 opacity: 0.5;
3589 cursor: not-allowed;
3590}
3591
3592.bx--text-area:disabled:hover {
3593 border: 1px solid transparent;
3594}
3595
3596.bx--text-area[data-invalid], .bx--text-area[data-invalid]:focus {
3597 box-shadow: 0 2px 0 0 #e0182d;
3598}
3599
3600.bx--text-area:focus ~ .bx--label {
3601 color: #3d70b2;
3602}
3603
3604.bx--text-area[data-invalid]:focus + .bx--label {
3605 color: #e0182d;
3606}
3607
3608.bx--text-area ~ .bx--form-requirement {
3609 -ms-flex-order: 3;
3610 order: 3;
3611 color: #e0182d;
3612 font-weight: 400;
3613 margin-top: 0.25rem;
3614}
3615
3616.bx--text-area ~ .bx--form-requirement::before {
3617 display: none;
3618}
3619
3620.bx--text-area--light {
3621 background: #fff;
3622}
3623
3624bx--text-area.bx--skeleton {
3625 position: relative;
3626 border: none;
3627 padding: 0;
3628 box-shadow: none;
3629 pointer-events: none;
3630 background: rgba(61, 112, 178, 0.1);
3631 height: 6.25rem;
3632}
3633
3634bx--text-area.bx--skeleton:hover, bx--text-area.bx--skeleton:focus, bx--text-area.bx--skeleton:active {
3635 border: none;
3636 outline: none;
3637 cursor: default;
3638}
3639
3640bx--text-area.bx--skeleton:before {
3641 content: '';
3642 width: 0%;
3643 height: 100%;
3644 position: absolute;
3645 top: 0;
3646 left: 0;
3647 opacity: 0.3;
3648 background: rgba(61, 112, 178, 0.1);
3649 animation: 3000ms ease-in-out skeleton infinite;
3650}
3651
3652bx--text-area.bx--skeleton::-webkit-input-placeholder {
3653 color: transparent;
3654}
3655
3656.bx--number {
3657 display: -ms-flexbox;
3658 display: flex;
3659 -ms-flex-direction: column;
3660 flex-direction: column;
3661 position: relative;
3662}
3663
3664.bx--number input[type='number'] {
3665 font-size: 0.875rem;
3666 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
3667 box-sizing: border-box;
3668 display: -ms-inline-flexbox;
3669 display: inline-flex;
3670 width: 100%;
3671 min-width: 9.375rem;
3672 padding-left: 1rem;
3673 padding-right: 2rem;
3674 font-weight: 300;
3675 height: 2.5rem;
3676 color: #152935;
3677 background-color: #f4f7fb;
3678 border: none;
3679 box-shadow: 0 1px 0 0 #5a6872;
3680 -ms-flex-order: 2;
3681 order: 2;
3682 border-radius: 0;
3683 border-bottom: 1px solid transparent;
3684}
3685
3686.bx--number input[type='number'] ~ .bx--label {
3687 -ms-flex-order: 1;
3688 order: 1;
3689}
3690
3691.bx--number input[type='number']:focus {
3692 outline: none;
3693 box-shadow: 0 2px 0 0 #3d70b2;
3694}
3695
3696.bx--number input[type='number']:focus ~ .bx--label {
3697 color: #3d70b2;
3698}
3699
3700.bx--number input[type='number']:disabled {
3701 opacity: 0.5;
3702 cursor: not-allowed;
3703}
3704
3705.bx--number input[type='number']:disabled ~ .bx--number__controls {
3706 opacity: 0.5;
3707 cursor: not-allowed;
3708 pointer-events: none;
3709}
3710
3711.bx--number input[type='number'] ~ .bx--form-requirement {
3712 -ms-flex-order: 3;
3713 order: 3;
3714 color: #e0182d;
3715 font-weight: 400;
3716 margin-top: 0.25rem;
3717 overflow: visible;
3718}
3719
3720.bx--number input[type='number'] ~ .bx--form-requirement::before {
3721 display: none;
3722}
3723
3724.bx--number input[type='number'] {
3725 -webkit-appearance: textfield;
3726 -moz-appearance: textfield;
3727 appearance: textfield;
3728}
3729
3730.bx--number input[type='number']::-ms-clear {
3731 display: none;
3732}
3733
3734.bx--number input[type='number']::-webkit-inner-spin-button {
3735 -webkit-appearance: none;
3736 appearance: none;
3737}
3738
3739.bx--number__controls {
3740 position: absolute;
3741 left: auto;
3742 display: -ms-flexbox;
3743 display: flex;
3744 -ms-flex-direction: column;
3745 flex-direction: column;
3746 -ms-flex-pack: center;
3747 justify-content: center;
3748 -ms-flex-align: center;
3749 align-items: center;
3750 right: 0.5rem;
3751 top: 2rem;
3752}
3753
3754.bx--number__control-btn {
3755 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
3756 -webkit-font-smoothing: antialiased;
3757 -moz-osx-font-smoothing: grayscale;
3758 letter-spacing: 0;
3759 display: inline-block;
3760 background: none;
3761 -webkit-appearance: none;
3762 -moz-appearance: none;
3763 appearance: none;
3764 border: 0;
3765 padding: 0;
3766 cursor: pointer;
3767 width: 100%;
3768 display: -ms-inline-flexbox;
3769 display: inline-flex;
3770 -ms-flex-pack: center;
3771 justify-content: center;
3772 -ms-flex-align: center;
3773 align-items: center;
3774 position: relative;
3775 width: 1.25rem;
3776 height: 0.625rem;
3777}
3778
3779.bx--number__control-btn::-moz-focus-inner {
3780 border: 0;
3781}
3782
3783.bx--number__control-btn:focus {
3784 outline: 1px solid #3d70b2;
3785}
3786
3787.bx--number__control-btn:hover {
3788 cursor: pointer;
3789}
3790
3791.bx--number__control-btn:hover svg {
3792 fill: #30588c;
3793}
3794
3795.bx--number__controls svg {
3796 fill: #3d70b2;
3797}
3798
3799.bx--number__controls svg:hover {
3800 cursor: pointer;
3801 fill: #30588c;
3802}
3803
3804.bx--number[data-invalid] .bx--form-requirement {
3805 display: inline-block;
3806 max-height: 12.5rem;
3807}
3808
3809.bx--number[data-invalid] input[type='number'],
3810.bx--number[data-invalid] input[type='number']:focus {
3811 outline: none;
3812 box-shadow: 0 2px 0px 0px #e0182d;
3813}
3814
3815.bx--number[data-invalid] input[type='number']:focus ~ .bx--label {
3816 color: #e0182d;
3817}
3818
3819.bx--number--nolabel .bx--number__controls {
3820 top: 0.625rem;
3821}
3822
3823.bx--number--helpertext .bx--number__controls {
3824 top: 2.25rem;
3825}
3826
3827.bx--number--helpertext:not([data-invalid]) .bx--number__controls {
3828 top: auto;
3829 bottom: 0.625rem;
3830}
3831
3832.bx--number--helpertext[data-invalid] .bx--number__controls {
3833 top: auto;
3834 bottom: 2rem;
3835}
3836
3837.bx--number--light input[type='number'] {
3838 background: #fff;
3839}
3840
3841.bx--number.bx--skeleton {
3842 position: relative;
3843 border: none;
3844 padding: 0;
3845 box-shadow: none;
3846 pointer-events: none;
3847 background: rgba(61, 112, 178, 0.1);
3848 width: 100%;
3849 height: 2.5rem;
3850}
3851
3852.bx--number.bx--skeleton:hover, .bx--number.bx--skeleton:focus, .bx--number.bx--skeleton:active {
3853 border: none;
3854 outline: none;
3855 cursor: default;
3856}
3857
3858.bx--number.bx--skeleton:before {
3859 content: '';
3860 width: 0%;
3861 height: 100%;
3862 position: absolute;
3863 top: 0;
3864 left: 0;
3865 opacity: 0.3;
3866 background: rgba(61, 112, 178, 0.1);
3867 animation: 3000ms ease-in-out skeleton infinite;
3868}
3869
3870.bx--number.bx--skeleton input[type='number'] {
3871 display: none;
3872}
3873
3874.bx--link {
3875 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
3876 font-size: 0.875rem;
3877 -webkit-font-smoothing: antialiased;
3878 -moz-osx-font-smoothing: grayscale;
3879 font-weight: 600;
3880 color: #3d70b2;
3881 text-decoration: underline;
3882 transition: 250ms;
3883}
3884
3885.bx--link:visited {
3886 color: #3d70b2;
3887}
3888
3889.bx--link:active, .bx--link:hover, .bx--link:focus {
3890 color: #294c79;
3891}
3892
3893.bx--link:focus {
3894 outline: 1px solid #3d70b2;
3895}
3896
3897.bx--link[aria-disabled='true'] {
3898 opacity: 0.5;
3899 pointer-events: none;
3900}
3901
3902.bx--list--nested,
3903.bx--list--unordered,
3904.bx--list--ordered {
3905 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
3906 font-size: 0.875rem;
3907 -webkit-font-smoothing: antialiased;
3908 -moz-osx-font-smoothing: grayscale;
3909 margin-left: 2rem;
3910 line-height: 1.5;
3911}
3912
3913.bx--list--unordered,
3914.bx--list--ordered {
3915 padding: 1rem;
3916}
3917
3918.bx--list__item {
3919 font-weight: 600;
3920 padding-left: 0.25rem;
3921 color: #152935;
3922}
3923
3924.bx--list--unordered > .bx--list__item {
3925 list-style-type: disc;
3926}
3927
3928.bx--list--ordered > .bx--list__item {
3929 list-style-type: decimal;
3930}
3931
3932.bx--list--nested {
3933 margin-left: 0.5rem;
3934}
3935
3936.bx--list--nested > .bx--list__item {
3937 list-style-type: none;
3938 font-weight: 400;
3939}
3940
3941.bx--list--nested > .bx--list__item:before {
3942 content: '-';
3943 padding-right: 0.25rem;
3944}
3945
3946.bx--overflow-menu {
3947 position: relative;
3948 width: 1.25rem;
3949 height: 2.375rem;
3950 cursor: pointer;
3951}
3952
3953.bx--overflow-menu:focus {
3954 outline: 1px solid transparent;
3955 box-shadow: 0 0 0 1px #3d70b2;
3956}
3957
3958.bx--overflow-menu__icon {
3959 width: 100%;
3960 height: 100%;
3961 padding: 0.5rem;
3962 fill: #5a6872;
3963}
3964
3965.bx--overflow-menu__icon:hover, .bx--overflow-menu__icon:focus {
3966 fill: #3d70b2;
3967}
3968
3969.bx--overflow-menu-options {
3970 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
3971 display: none;
3972 -ms-flex-direction: column;
3973 flex-direction: column;
3974 -ms-flex-align: start;
3975 align-items: flex-start;
3976 position: absolute;
3977 z-index: 10000;
3978 background-color: #fff;
3979 border: 1px solid #dfe3e6;
3980 width: 11.25rem;
3981 list-style: none;
3982 margin-top: 0.25rem;
3983 padding: 0.25rem 0 0.5rem;
3984 left: -20px;
3985}
3986
3987.bx--overflow-menu-options--open {
3988 display: -ms-flexbox;
3989 display: flex;
3990}
3991
3992.bx--overflow-menu-options:before {
3993 content: '';
3994 position: absolute;
3995 display: block;
3996 width: 0.5rem;
3997 height: 0.5rem;
3998 z-index: -1;
3999 transform: rotate(45deg);
4000 background-color: #fff;
4001 border-top: 1px solid #dfe3e6;
4002 border-left: 1px solid #dfe3e6;
4003 top: -5px;
4004 left: 24px;
4005}
4006
4007.bx--overflow-menu-options[data-floating-menu-direction='top']:before {
4008 transform: rotate(225deg);
4009 top: auto;
4010 bottom: -5px;
4011}
4012
4013.bx--overflow-menu-options__option {
4014 display: -ms-flexbox;
4015 display: flex;
4016 background-color: transparent;
4017 -ms-flex-align: center;
4018 align-items: center;
4019 width: 100%;
4020 padding: 0;
4021}
4022
4023.bx--overflow-menu--divider {
4024 border-top: 1px solid #dfe3e6;
4025}
4026
4027.bx--overflow-menu-options__btn {
4028 font-size: 0.875rem;
4029 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
4030 font-weight: 400;
4031 width: 100%;
4032 height: 100%;
4033 border: none;
4034 display: inline-block;
4035 background-color: transparent;
4036 text-align: left;
4037 padding: 0.5rem 1rem;
4038 cursor: pointer;
4039 color: #152935;
4040 max-width: 11.25rem;
4041 white-space: nowrap;
4042 overflow: hidden;
4043 text-overflow: ellipsis;
4044}
4045
4046.bx--overflow-menu-options__btn:focus {
4047 outline: 1px solid transparent;
4048 text-decoration: underline;
4049 background-color: rgba(85, 150, 230, 0.1);
4050 text-decoration: underline;
4051}
4052
4053.bx--overflow-menu-options__option--danger .bx--overflow-menu-options__btn:focus {
4054 outline: 1px solid transparent;
4055 text-decoration: underline;
4056}
4057
4058.bx--overflow-menu-options__option:hover {
4059 background-color: rgba(85, 150, 230, 0.1);
4060}
4061
4062.bx--overflow-menu-options__option:hover .bx--overflow-menu-options__btn {
4063 text-decoration: none;
4064 background-color: rgba(85, 150, 230, 0.1);
4065 text-decoration: none;
4066}
4067
4068.bx--overflow-menu-options__option--danger {
4069 border-top: 1px solid #dfe3e6;
4070}
4071
4072.bx--overflow-menu-options__option--danger .bx--overflow-menu-options__btn:hover, .bx--overflow-menu-options__option--danger .bx--overflow-menu-options__btn:focus {
4073 color: #fff;
4074 background-color: #e0182d;
4075}
4076
4077.bx--overflow-menu-options__option--disabled:hover {
4078 background-color: #fff;
4079}
4080
4081.bx--overflow-menu-options__option--disabled .bx--overflow-menu-options__btn {
4082 color: #152935;
4083 cursor: not-allowed;
4084 opacity: 0.5;
4085}
4086
4087.bx--overflow-menu-options__option--disabled:hover .bx--overflow-menu-options__btn {
4088 color: #152935;
4089 opacity: 0.5;
4090 background-color: #fff;
4091}
4092
4093.bx--overflow-menu-options__option--disabled:hover .bx--overflow-menu-options__btn:active, .bx--overflow-menu-options__option--disabled:hover .bx--overflow-menu-options__btn:focus {
4094 background-color: #fff;
4095 pointer-events: none;
4096}
4097
4098.bx--overflow-menu--flip {
4099 left: -140px;
4100}
4101
4102.bx--overflow-menu--flip:before {
4103 left: 145px;
4104}
4105
4106.bx--responsive-table-container {
4107 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
4108 overflow-x: auto;
4109 overflow-y: hidden;
4110 width: 99.9%;
4111}
4112
4113.bx--responsive-table {
4114 background-color: #fff;
4115 width: 100%;
4116 min-width: 500px;
4117 border-collapse: collapse;
4118 border-spacing: 0;
4119 border: 2px solid #dfe3e6;
4120}
4121
4122.bx--responsive-table td {
4123 font-size: 0.875rem;
4124 padding: 0 0.375rem;
4125 vertical-align: middle;
4126 color: #152935;
4127}
4128
4129.bx--responsive-table td p {
4130 font-size: 0.875rem;
4131}
4132
4133.bx--responsive-table th {
4134 font-size: 0.75rem;
4135 padding: 0.5625rem 0.375rem;
4136 vertical-align: middle;
4137 font-weight: 600;
4138 color: #152935;
4139}
4140
4141.bx--responsive-table th:focus {
4142 outline: 1px solid transparent;
4143}
4144
4145.bx--responsive-table th:focus span {
4146 outline: 1px solid #3d70b2;
4147}
4148
4149.bx--responsive-table--tall td,
4150.bx--responsive-table--tall th {
4151 padding-top: 0.9375rem;
4152 padding-bottom: 0.9375rem;
4153}
4154
4155.bx--responsive-table--static-size {
4156 border-collapse: collapse;
4157 width: auto;
4158 border: 2px solid #dfe3e6;
4159}
4160
4161.bx--responsive-table--static-size tr td:first-child,
4162.bx--responsive-table--static-size tr th:first-child {
4163 padding-left: 1.5rem;
4164}
4165
4166.bx--responsive-table--tall td,
4167.bx--responsive-table--tall th {
4168 padding-top: 0.625rem;
4169 padding-bottom: 0.625rem;
4170}
4171
4172.bx--table-row {
4173 height: 2rem;
4174 padding-left: 1rem;
4175}
4176
4177.bx--table-head .bx--table-row {
4178 border-bottom: 1px solid #3d70b2;
4179 height: 2rem;
4180}
4181
4182.bx--table-header {
4183 font-size: 0.75rem;
4184 font-weight: 600;
4185 text-align: left;
4186 text-transform: uppercase;
4187 height: 2.5rem;
4188}
4189
4190.bx--table-body > .bx--parent-row,
4191.bx--table-body > .bx--parent-row {
4192 background-color: #fff;
4193}
4194
4195.bx--table-body > .bx--parent-row + .bx--expandable-row,
4196.bx--table-body > .bx--parent-row + .bx--expandable-row {
4197 background-color: #fff;
4198}
4199
4200.bx--table-body > .bx--parent-row--even,
4201.bx--table-body > .bx--parent-row--even {
4202 background-color: #f4f7fb;
4203}
4204
4205.bx--table-body > .bx--parent-row--even + .bx--expandable-row,
4206.bx--table-body > .bx--parent-row--even + .bx--expandable-row {
4207 background-color: #f4f7fb;
4208}
4209
4210.bx--table-body .bx--table-row {
4211 border: 1px solid transparent;
4212}
4213
4214.bx--table-body .bx--table-row:first-child:hover, .bx--table-body .bx--table-row:first-child:focus {
4215 border-left: 2px solid #5596e6;
4216 outline: 1px solid #5596e6;
4217}
4218
4219.bx--table-body .bx--table-row:not(:first-child):hover, .bx--table-body .bx--table-row:not(:first-child):focus {
4220 border-left: 2px solid #5596e6;
4221 outline: 1px solid #5596e6;
4222}
4223
4224.bx--expandable-row > td {
4225 border-left: 4px solid #3d70b2;
4226 padding: 2rem;
4227}
4228
4229.bx--expandable-row--hidden {
4230 visibility: hidden;
4231}
4232
4233.bx--table-expand {
4234 padding-left: 0.5rem;
4235 padding-right: 0.75rem;
4236 text-align: center;
4237 width: 1.25rem;
4238 cursor: pointer;
4239}
4240
4241.bx--table-expand:focus {
4242 outline: 1px solid transparent;
4243}
4244
4245.bx--table-expand:focus svg {
4246 outline: 1px solid #3d70b2;
4247}
4248
4249.bx--table-expand__svg {
4250 fill: #5a6872;
4251 transform: rotate(0deg);
4252 transition: transform 200ms cubic-bezier(0.5, 0, 0.1, 1);
4253 width: 12px;
4254 height: 12px;
4255 margin-left: 0.4375rem;
4256 margin-right: 0.125rem;
4257}
4258
4259@media all and (min--moz-device-pixel-ratio: 0) and (min-resolution: 3e1dpcm) {
4260 .bx--table-expand__svg {
4261 margin-top: 2px;
4262 }
4263}
4264
4265.bx--table-expand[data-previous-value='collapsed'] .bx--table-expand__svg {
4266 transform: rotate(90deg);
4267 transition: transform 200ms cubic-bezier(0.5, 0, 0.1, 1);
4268}
4269
4270[data-event='sort'] {
4271 cursor: pointer;
4272}
4273
4274.bx--table-sort__svg {
4275 fill: #5a6872;
4276 width: 8px;
4277 height: 8px;
4278 transform: rotate(0deg);
4279 transition: transform 200ms cubic-bezier(0.5, 0, 0.1, 1);
4280}
4281
4282.bx--table-sort--ascending .bx--table-sort__svg {
4283 transform: rotate(180deg);
4284 transition: transform 200ms cubic-bezier(0.5, 0, 0.1, 1);
4285}
4286
4287.bx--table-select {
4288 width: 1.875rem;
4289 text-align: center;
4290 padding-left: 0;
4291 padding-right: 0;
4292}
4293
4294.bx--table-select .bx--checkbox-label {
4295 display: -ms-inline-flexbox;
4296 display: inline-flex;
4297 margin: 0;
4298}
4299
4300@media all and (min--moz-device-pixel-ratio: 0) and (min-resolution: 3e1dpcm) {
4301 .bx--table-select .bx--checkbox-label {
4302 margin-top: 2px;
4303 }
4304}
4305
4306.bx--table-select .bx--checkbox-appearance {
4307 margin: 0;
4308}
4309
4310.bx--table-overflow {
4311 width: 2.5rem;
4312 text-align: center;
4313}
4314
4315.bx--table-overflow .bx--overflow-menu {
4316 padding: 0;
4317}
4318
4319.bx--table-toolbar {
4320 display: -ms-flexbox;
4321 display: flex;
4322 padding-top: 0.5rem;
4323 padding-bottom: 0.5rem;
4324 width: 100%;
4325 position: relative;
4326}
4327
4328.bx--table-toolbar .bx--search-input {
4329 position: relative;
4330}
4331
4332.bx--table-toolbar .bx--search-input:focus {
4333 box-shadow: inset 0px 0px 0px 1px #3d70b2;
4334 outline: 0;
4335}
4336
4337.bx--toolbar-content {
4338 display: -ms-flexbox;
4339 display: flex;
4340 margin-left: auto;
4341}
4342
4343.bx--toolbar-action {
4344 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
4345 -webkit-font-smoothing: antialiased;
4346 -moz-osx-font-smoothing: grayscale;
4347 letter-spacing: 0;
4348 display: inline-block;
4349 background: none;
4350 -webkit-appearance: none;
4351 -moz-appearance: none;
4352 appearance: none;
4353 border: 0;
4354 padding: 0;
4355 cursor: pointer;
4356 width: 100%;
4357 cursor: pointer;
4358 padding-left: 0.75rem;
4359 padding-right: 0.75rem;
4360}
4361
4362.bx--toolbar-action::-moz-focus-inner {
4363 border: 0;
4364}
4365
4366.bx--toolbar-action:hover > .bx--toolbar-action__icon {
4367 fill: #3d70b2;
4368}
4369
4370.bx--toolbar-action:focus {
4371 outline: 1px solid #3d70b2;
4372}
4373
4374.bx--toolbar-action:focus > .bx--toolbar-action__icon {
4375 fill: #3d70b2;
4376}
4377
4378.bx--toolbar-action:active > .bx--toolbar-action__icon {
4379 fill: #3d70b2;
4380}
4381
4382.bx--toolbar-action:last-of-type {
4383 padding-right: 0;
4384}
4385
4386.bx--toolbar-action ~ .bx--btn {
4387 margin-left: 0.75rem;
4388 margin-right: 0.75rem;
4389}
4390
4391.bx--toolbar-action__icon {
4392 height: 1rem;
4393 width: auto;
4394 max-width: 16px;
4395 fill: #5a6872;
4396 transition: 250ms;
4397}
4398
4399.bx--batch-actions {
4400 display: -ms-flexbox;
4401 display: flex;
4402 -ms-flex-align: center;
4403 align-items: center;
4404 position: absolute;
4405 opacity: 0;
4406 left: 0;
4407 top: 0;
4408 padding-left: 1.5rem;
4409 padding-right: 1.5rem;
4410 width: 100%;
4411 height: 100%;
4412 z-index: 6000;
4413 background-color: transparent;
4414 transition: opacity 200ms cubic-bezier(0.5, 0, 0.1, 1), background-color 200ms cubic-bezier(0.5, 0, 0.1, 1);
4415 pointer-events: none;
4416 visibility: hidden;
4417}
4418
4419.bx--batch-actions:focus {
4420 outline: 1px solid #3d70b2;
4421}
4422
4423.bx--batch-actions .bx--btn {
4424 color: #fff;
4425}
4426
4427.bx--batch-actions .bx--btn__icon {
4428 fill: #fff;
4429}
4430
4431.bx--batch-actions .bx--btn--ghost:hover, .bx--batch-actions .bx--btn--ghost:focus {
4432 background-color: #fff;
4433 color: #3d70b2;
4434}
4435
4436.bx--batch-actions .bx--btn--ghost:hover .bx--btn__icon, .bx--batch-actions .bx--btn--ghost:focus .bx--btn__icon {
4437 fill: #3d70b2;
4438}
4439
4440.bx--batch-actions .bx--btn--ghost:focus {
4441 border: 2px solid #3d70b2;
4442 outline: 2px solid #f4f7fb;
4443}
4444
4445.bx--batch-actions--active {
4446 visibility: visible;
4447 background-color: #3d70b2;
4448 pointer-events: all;
4449 transition: opacity 200ms cubic-bezier(0.5, 0, 0.1, 1), background-color 200ms cubic-bezier(0.5, 0, 0.1, 1);
4450 opacity: 1;
4451}
4452
4453.bx--action-list {
4454 margin-left: -0.5rem;
4455}
4456
4457.bx--action-icons {
4458 margin-left: auto;
4459}
4460
4461.bx--action-icons svg {
4462 padding: 0 0.75rem;
4463 fill: #fff;
4464 height: 1rem;
4465 width: auto;
4466}
4467
4468.bx--batch-summary {
4469 margin-left: auto;
4470 display: -ms-flexbox;
4471 display: flex;
4472 -ms-flex-align: center;
4473 align-items: center;
4474 color: #fff;
4475}
4476
4477.bx--batch-summary__para {
4478 font-size: 0.875rem;
4479 margin-right: 1.5rem;
4480}
4481
4482.bx--batch-summary__cancel {
4483 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
4484 -webkit-font-smoothing: antialiased;
4485 -moz-osx-font-smoothing: grayscale;
4486 letter-spacing: 0;
4487 display: inline-block;
4488 background: none;
4489 -webkit-appearance: none;
4490 -moz-appearance: none;
4491 appearance: none;
4492 border: 0;
4493 padding: 0;
4494 cursor: pointer;
4495 font-size: 0.875rem;
4496 color: #fff;
4497 border-bottom: 1px solid transparent;
4498 font-weight: 600;
4499 cursor: pointer;
4500 transition: border 250ms cubic-bezier(0.5, 0, 0.1, 1);
4501}
4502
4503.bx--batch-summary__cancel::-moz-focus-inner {
4504 border: 0;
4505}
4506
4507.bx--batch-summary__cancel:hover, .bx--batch-summary__cancel:focus {
4508 border-bottom: 1px solid #fff;
4509}
4510
4511.bx--batch-actions ~ .bx--toolbar-search-container,
4512.bx--batch-actions ~ .bx--toolbar-content {
4513 opacity: 1;
4514 transition: opacity 250ms;
4515}
4516
4517.bx--batch-actions--active ~ .bx--toolbar-search-container,
4518.bx--batch-actions--active ~ .bx--toolbar-content {
4519 opacity: 0;
4520}
4521
4522.bx--data-table-v2-container {
4523 width: 100%;
4524 min-width: 31.25rem;
4525 overflow-x: auto;
4526 padding-top: 0.125rem;
4527}
4528
4529.bx--data-table-v2 {
4530 border-collapse: collapse;
4531 border-spacing: 0;
4532 width: 100%;
4533 border-bottom: 1px solid #dfe3e6;
4534}
4535
4536.bx--data-table-v2 thead {
4537 font-size: 0.875rem;
4538 background-color: #f4f7fb;
4539 font-weight: 700;
4540 border-right: 1px solid #dfe3e6;
4541}
4542
4543.bx--data-table-v2 tbody {
4544 font-size: 0.875rem;
4545 background-color: #fff;
4546 border-right: 1px solid #dfe3e6;
4547}
4548
4549.bx--data-table-v2 tr {
4550 height: 3rem;
4551}
4552
4553.bx--data-table-v2 tr:hover td {
4554 background-color: rgba(85, 150, 230, 0.1);
4555 border-top: 1px solid #3d70b2;
4556 border-bottom: 1px solid #3d70b2;
4557}
4558
4559.bx--data-table-v2 tr:hover td:first-of-type {
4560 border-left: 1px solid #3d70b2;
4561}
4562
4563.bx--data-table-v2 tr:hover td:last-of-type {
4564 border-right: 1px solid #3d70b2;
4565}
4566
4567.bx--data-table-v2 tr:hover .bx--overflow-menu {
4568 opacity: 1;
4569}
4570
4571.bx--data-table-v2 th {
4572 border-top: 1px solid #dfe3e6;
4573}
4574
4575.bx--data-table-v2 th,
4576.bx--data-table-v2 td {
4577 font-size: 0.875rem;
4578 border-top: 1px solid #dfe3e6;
4579 padding-left: 0.75rem;
4580 vertical-align: middle;
4581 text-align: left;
4582 color: #152935;
4583}
4584
4585.bx--data-table-v2 th:first-of-type,
4586.bx--data-table-v2 td:first-of-type {
4587 padding-left: 1.5rem;
4588 border-left: 1px solid #dfe3e6;
4589}
4590
4591.bx--data-table-v2 th:last-of-type,
4592.bx--data-table-v2 td:last-of-type {
4593 padding-right: 1.5rem;
4594}
4595
4596.bx--data-table-v2 .bx--checkbox-label {
4597 padding-left: 1.75rem;
4598}
4599
4600.bx--data-table-v2 .bx--overflow-menu {
4601 opacity: 0;
4602}
4603
4604.bx--data-table-v2 .bx--overflow-menu:focus {
4605 outline: 0;
4606 opacity: 1;
4607 box-shadow: none;
4608}
4609
4610.bx--data-table-v2 .bx--overflow-menu:focus .bx--overflow-menu__icon {
4611 box-shadow: inset 0px 0px 0px 1px #3d70b2;
4612}
4613
4614.bx--data-table-v2 .bx--overflow-menu__icon {
4615 transform: rotate(90deg);
4616}
4617
4618.bx--data-table-v2-header {
4619 margin-bottom: 0.5rem;
4620 color: #152935;
4621}
4622
4623.bx--data-table-v2--zebra tbody tr:nth-child(even) {
4624 background-color: #f4f7fb;
4625}
4626
4627.bx--data-table-v2--no-border {
4628 border-bottom-color: transparent;
4629}
4630
4631.bx--data-table-v2--no-border thead,
4632.bx--data-table-v2--no-border tbody {
4633 border-right-color: transparent;
4634}
4635
4636.bx--data-table-v2--no-border th:first-of-type,
4637.bx--data-table-v2--no-border td:first-of-type {
4638 border-left-color: transparent;
4639}
4640
4641.bx--data-table-v2--compact tbody tr {
4642 height: 1.5rem;
4643}
4644
4645.bx--data-table-v2--short tbody tr {
4646 height: 2rem;
4647}
4648
4649.bx--data-table-v2--tall tbody tr {
4650 height: 4rem;
4651}
4652
4653.bx--data-table-v2--static {
4654 width: auto;
4655}
4656
4657.bx--data-table-v2--zebra tbody tr.bx--data-table-v2--selected,
4658tbody tr.bx--data-table-v2--selected {
4659 background-color: rgba(85, 150, 230, 0.1);
4660}
4661
4662tr.bx--expandable-row-v2.bx--expandable-row--hidden-v2 {
4663 display: none;
4664}
4665
4666tr.bx--expandable-row-v2 > td:first-of-type {
4667 position: relative;
4668}
4669
4670tr.bx--expandable-row-v2 > td:first-of-type:before {
4671 content: '';
4672 position: absolute;
4673 top: 0;
4674 left: 0;
4675 height: 100%;
4676 width: 2px;
4677 background-color: #3d70b2;
4678}
4679
4680tr.bx--expandable-row-v2 + tr[data-child-row] td {
4681 border-top: 0;
4682 padding-bottom: 0.5rem;
4683}
4684
4685tr.bx--expandable-row-v2:hover > td {
4686 background-color: rgba(85, 150, 230, 0.1);
4687}
4688
4689tr.bx--expandable-row-v2:hover > td:first-of-type {
4690 border-left: 1px solid transparent;
4691}
4692
4693tr.bx--expandable-row-v2:hover > td:last-of-type {
4694 border-right: 1px solid #3d70b2;
4695}
4696
4697tr.bx--expandable-row-v2:hover[data-parent-row] > td {
4698 border-bottom: 0;
4699}
4700
4701tr.bx--expandable-row-v2:hover + tr[data-child-row] > td {
4702 background-color: rgba(85, 150, 230, 0.1);
4703 border-bottom: 1px solid #3d70b2;
4704 border-right: 1px solid #3d70b2;
4705}
4706
4707tr.bx--expandable-row--hover-v2 > td {
4708 background-color: rgba(85, 150, 230, 0.1);
4709 border-top: 1px solid #3d70b2;
4710}
4711
4712tr.bx--expandable-row--hover-v2 > td:last-of-type {
4713 border-right: 1px solid #3d70b2;
4714}
4715
4716.bx--table-expand-v2 {
4717 width: 2.5rem;
4718}
4719
4720.bx--table-expand-v2[data-previous-value='collapsed'] .bx--table-expand-v2__svg {
4721 transform: rotate(90deg);
4722 transition: transform 200ms cubic-bezier(0.5, 0, 0.1, 1);
4723}
4724
4725.bx--table-expand-v2__button {
4726 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
4727 -webkit-font-smoothing: antialiased;
4728 -moz-osx-font-smoothing: grayscale;
4729 letter-spacing: 0;
4730 display: inline-block;
4731 background: none;
4732 -webkit-appearance: none;
4733 -moz-appearance: none;
4734 appearance: none;
4735 border: 0;
4736 padding: 0;
4737 cursor: pointer;
4738}
4739
4740.bx--table-expand-v2__button::-moz-focus-inner {
4741 border: 0;
4742}
4743
4744.bx--table-expand-v2__button:focus {
4745 outline: 1px solid transparent;
4746}
4747
4748.bx--table-expand-v2__button:focus svg {
4749 box-shadow: inset 0px 0px 0px 1px #3d70b2;
4750}
4751
4752.bx--table-expand-v2__svg {
4753 fill: #5a6872;
4754 transform: rotate(0deg);
4755 transition: transform 200ms cubic-bezier(0.5, 0, 0.1, 1);
4756 height: 16px;
4757 width: auto;
4758 max-width: 16px;
4759 padding: 0.125rem;
4760}
4761
4762.bx--table-sort-v2--ascending .bx--table-sort-v2__icon {
4763 transform: rotate(180deg);
4764 transition: transform 200ms cubic-bezier(0.5, 0, 0.1, 1);
4765}
4766
4767.bx--table-sort-v2--active .bx--table-sort-v2__icon {
4768 opacity: 1;
4769}
4770
4771.bx--data-table-v2 th:hover .bx--table-sort-v2__icon {
4772 opacity: 1;
4773}
4774
4775.bx--table-sort-v2 {
4776 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
4777 -webkit-font-smoothing: antialiased;
4778 -moz-osx-font-smoothing: grayscale;
4779 letter-spacing: 0;
4780 display: inline-block;
4781 background: none;
4782 -webkit-appearance: none;
4783 -moz-appearance: none;
4784 appearance: none;
4785 border: 0;
4786 padding: 0;
4787 cursor: pointer;
4788 position: relative;
4789 font: inherit;
4790 cursor: pointer;
4791 display: -ms-flexbox;
4792 display: flex;
4793 -ms-flex-align: center;
4794 align-items: center;
4795 width: 100%;
4796 color: #152935;
4797}
4798
4799.bx--table-sort-v2::-moz-focus-inner {
4800 border: 0;
4801}
4802
4803.bx--table-sort-v2:focus {
4804 outline: 0;
4805}
4806
4807.bx--table-sort-v2:focus svg {
4808 opacity: 1;
4809 outline: 1px solid #3d70b2;
4810 fill: #3d70b2;
4811 outline-offset: -0.5px;
4812}
4813
4814.bx--table-sort-v2__icon {
4815 position: relative;
4816 left: 2px;
4817 transition: transform 200ms cubic-bezier(0.5, 0, 0.1, 1);
4818 transform: rotate(0);
4819 opacity: 0;
4820 fill: #5a6872;
4821 height: 0.5625rem;
4822 padding: 0.125rem;
4823 width: auto;
4824 min-width: 14px;
4825}
4826
4827.bx--inline-edit-label {
4828 display: -ms-flexbox;
4829 display: flex;
4830 -ms-flex-pack: justify;
4831 justify-content: space-between;
4832 -ms-flex-align: center;
4833 align-items: center;
4834}
4835
4836.bx--inline-edit-label:hover .bx--inline-edit-label__icon {
4837 opacity: 1;
4838}
4839
4840.bx--inline-edit-label--inactive {
4841 display: none;
4842}
4843
4844.bx--inline-edit-label__action {
4845 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
4846 -webkit-font-smoothing: antialiased;
4847 -moz-osx-font-smoothing: grayscale;
4848 letter-spacing: 0;
4849 display: inline-block;
4850 background: none;
4851 -webkit-appearance: none;
4852 -moz-appearance: none;
4853 appearance: none;
4854 border: 0;
4855 padding: 0;
4856 cursor: pointer;
4857}
4858
4859.bx--inline-edit-label__action::-moz-focus-inner {
4860 border: 0;
4861}
4862
4863.bx--inline-edit-label__action:hover {
4864 cursor: pointer;
4865}
4866
4867.bx--inline-edit-label__action:focus {
4868 outline: 1px solid #3d70b2;
4869 padding: 0.125rem;
4870}
4871
4872.bx--inline-edit-label__action:focus .bx--inline-edit-label__icon {
4873 width: auto;
4874 opacity: 1;
4875}
4876
4877.bx--inline-edit-label__icon {
4878 fill: #5a6872;
4879 opacity: 0;
4880}
4881
4882.bx--inline-edit-input {
4883 display: none;
4884}
4885
4886.bx--inline-edit-input--active {
4887 display: block;
4888 margin-left: -0.75rem;
4889}
4890
4891.bx--inline-edit-input--active input {
4892 padding-left: 0.75rem;
4893}
4894
4895.bx--data-table-v2--short input {
4896 height: 2rem;
4897}
4898
4899.bx--data-table-v2--short select {
4900 padding: 0.45rem 2.75rem 0.45rem 1rem;
4901}
4902
4903.bx--data-table-v2--short .bx--select__arrow {
4904 top: 0.875rem;
4905}
4906
4907.bx--data-table-v2.bx--skeleton th {
4908 border-bottom: 1px solid #3d70b2;
4909}
4910
4911.bx--data-table-v2.bx--skeleton th:nth-child(3n + 1) {
4912 width: 10%;
4913}
4914
4915.bx--data-table-v2.bx--skeleton th:nth-child(3n + 2) {
4916 width: 30%;
4917}
4918
4919.bx--data-table-v2.bx--skeleton th:nth-child(3n + 3) {
4920 width: 15%;
4921}
4922
4923.bx--data-table-v2.bx--skeleton th span,
4924.bx--data-table-v2.bx--skeleton td span {
4925 position: relative;
4926 border: none;
4927 padding: 0;
4928 box-shadow: none;
4929 pointer-events: none;
4930 background: rgba(61, 112, 178, 0.1);
4931 width: 75%;
4932 height: 1rem;
4933 display: block;
4934}
4935
4936.bx--data-table-v2.bx--skeleton th span:hover, .bx--data-table-v2.bx--skeleton th span:focus, .bx--data-table-v2.bx--skeleton th span:active,
4937.bx--data-table-v2.bx--skeleton td span:hover,
4938.bx--data-table-v2.bx--skeleton td span:focus,
4939.bx--data-table-v2.bx--skeleton td span:active {
4940 border: none;
4941 outline: none;
4942 cursor: default;
4943}
4944
4945.bx--data-table-v2.bx--skeleton th span:before,
4946.bx--data-table-v2.bx--skeleton td span:before {
4947 content: '';
4948 width: 0%;
4949 height: 100%;
4950 position: absolute;
4951 top: 0;
4952 left: 0;
4953 opacity: 0.3;
4954 background: rgba(61, 112, 178, 0.1);
4955 animation: 3000ms ease-in-out skeleton infinite;
4956}
4957
4958.bx--data-table-v2.bx--skeleton tr:hover td {
4959 border-color: #dfe3e6;
4960 background: transparent;
4961}
4962
4963.bx--data-table-v2.bx--skeleton tr:hover td:first-of-type, .bx--data-table-v2.bx--skeleton tr:hover td:last-of-type {
4964 border-color: #dfe3e6;
4965}
4966
4967.bx--data-table-v2.bx--skeleton .bx--table-sort-v2 {
4968 pointer-events: none;
4969}
4970
4971.bx--structured-list--selection .bx--structured-list-td,
4972.bx--structured-list--selection .bx--structured-list-th {
4973 padding-left: 1rem;
4974 padding-right: 1rem;
4975}
4976
4977.bx--structured-list--selection .bx--structured-list-td:first-child,
4978.bx--structured-list--selection .bx--structured-list-th:first-child {
4979 padding-left: 1rem;
4980 padding-right: 0.5rem;
4981}
4982
4983.bx--structured-list--selection .bx--structured-list-td:last-child,
4984.bx--structured-list--selection .bx--structured-list-th:last-child {
4985 padding-right: 2rem;
4986}
4987
4988[data-structured-list] .bx--structured-list-td,
4989[data-structured-list] .bx--structured-list-th {
4990 padding-left: 1rem;
4991 padding-right: 1rem;
4992}
4993
4994[data-structured-list] .bx--structured-list-td:first-child,
4995[data-structured-list] .bx--structured-list-th:first-child {
4996 padding-left: 1rem;
4997 padding-right: 0.5rem;
4998}
4999
5000[data-structured-list] .bx--structured-list-td:last-child,
5001[data-structured-list] .bx--structured-list-th:last-child {
5002 padding-right: 2rem;
5003}
5004
5005.bx--structured-list-input {
5006 display: none;
5007}
5008
5009.bx--structured-list-input:checked + .bx--structured-list-row .bx--structured-list-svg,
5010.bx--structured-list-input:checked + .bx--structured-list-td .bx--structured-list-svg {
5011 fill: #5596e6;
5012}
5013
5014.bx--structured-list {
5015 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
5016 display: table;
5017 overflow-x: auto;
5018 overflow-y: hidden;
5019 width: 100%;
5020 min-width: 500px;
5021 border-collapse: collapse;
5022 border-spacing: 0;
5023 margin-bottom: 5rem;
5024 background-color: transparent;
5025}
5026
5027.bx--structured-list.bx--structured-list--border {
5028 border: 1px solid #dfe3e6;
5029 background-color: #fff;
5030}
5031
5032.bx--structured-list.bx--structured-list--condensed .bx--structured-list-td,
5033.bx--structured-list.bx--structured-list--condensed .bx--structured-list-th {
5034 padding: 0.5rem;
5035 padding-left: 0;
5036}
5037
5038.bx--structured-list-row {
5039 display: table-row;
5040 border-bottom: 1px solid #dfe3e6;
5041 transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
5042}
5043
5044[data-structured-list] .bx--structured-list-row:hover:not(.bx--structured-list-row--header-row) {
5045 background-color: rgba(85, 150, 230, 0.1);
5046 cursor: pointer;
5047}
5048
5049.bx--structured-list-row.bx--structured-list-row--selected {
5050 background-color: rgba(85, 150, 230, 0.1);
5051}
5052
5053.bx--structured-list-row.bx--structured-list-row--header-row {
5054 border-bottom: 2px solid #3d70b2;
5055 cursor: inherit;
5056}
5057
5058.bx--structured-list-row:focus:not(.bx--structured-list-row--header-row) {
5059 outline: 1px solid #3d70b2;
5060}
5061
5062.bx--structured-list-row:hover .bx--structured-list-svg {
5063 fill: rgba(85, 150, 230, 0.1);
5064}
5065
5066.bx--structured-list--selection .bx--structured-list-row:hover:not(.bx--structured-list-row--header-row) {
5067 background-color: rgba(85, 150, 230, 0.1);
5068 cursor: pointer;
5069}
5070
5071.bx--structured-list-thead {
5072 display: table-header-group;
5073 vertical-align: middle;
5074}
5075
5076.bx--structured-list-th {
5077 padding-left: 0;
5078 padding-right: 2rem;
5079 padding-top: 1rem;
5080 padding-bottom: 1rem;
5081 font-size: 0.75rem;
5082 display: table-cell;
5083 font-weight: 600;
5084 height: 2.5rem;
5085 text-align: left;
5086 text-transform: none;
5087 vertical-align: bottom;
5088}
5089
5090.bx--structured-list-th:last-child {
5091 padding-right: 0;
5092}
5093
5094.bx--structured-list-tbody {
5095 display: table-row-group;
5096 vertical-align: middle;
5097}
5098
5099.bx--structured-list-td {
5100 font-size: 0.875rem;
5101 line-height: 1.5;
5102 padding-left: 0;
5103 padding-right: 2rem;
5104 padding-top: 1rem;
5105 padding-bottom: 1rem;
5106 position: relative;
5107 display: table-cell;
5108}
5109
5110.bx--structured-list-td:last-child {
5111 padding-right: 2rem;
5112}
5113
5114.bx--structured-list-th,
5115.bx--structured-list-td {
5116 color: #152935;
5117}
5118
5119.bx--structured-list-content--nowrap {
5120 white-space: nowrap;
5121}
5122
5123.bx--structured-list-svg {
5124 display: inline-block;
5125 fill: transparent;
5126 vertical-align: middle;
5127 transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
5128}
5129
5130.bx--structured-list.bx--skeleton .bx--structured-list-th:first-child {
5131 width: 8%;
5132}
5133
5134.bx--structured-list.bx--skeleton .bx--structured-list-th:nth-child(3n + 2) {
5135 width: 30%;
5136}
5137
5138.bx--structured-list.bx--skeleton .bx--structured-list-th:nth-child(3n + 3) {
5139 width: 15%;
5140}
5141
5142.bx--structured-list.bx--skeleton .bx--structured-list-th span {
5143 position: relative;
5144 border: none;
5145 padding: 0;
5146 box-shadow: none;
5147 pointer-events: none;
5148 background: rgba(61, 112, 178, 0.1);
5149 width: 75%;
5150 height: 1rem;
5151 display: block;
5152}
5153
5154.bx--structured-list.bx--skeleton .bx--structured-list-th span:hover, .bx--structured-list.bx--skeleton .bx--structured-list-th span:focus, .bx--structured-list.bx--skeleton .bx--structured-list-th span:active {
5155 border: none;
5156 outline: none;
5157 cursor: default;
5158}
5159
5160.bx--structured-list.bx--skeleton .bx--structured-list-th span:before {
5161 content: '';
5162 width: 0%;
5163 height: 100%;
5164 position: absolute;
5165 top: 0;
5166 left: 0;
5167 opacity: 0.3;
5168 background: rgba(61, 112, 178, 0.1);
5169 animation: 3000ms ease-in-out skeleton infinite;
5170}
5171
5172.bx--structured-list.bx--structured-list--border.bx--skeleton .bx--structured-list-th:first-child {
5173 width: 5%;
5174}
5175
5176.bx--structured-list.bx--structured-list--border.bx--skeleton .bx--structured-list-th:first-child span {
5177 display: none;
5178}
5179
5180.bx--structured-list-content {
5181 font-size: 0.875rem;
5182}
5183
5184.bx--snippet code {
5185 font-family: "ibm-plex-mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", Courier, monospace;
5186}
5187
5188.bx--snippet--inline {
5189 position: relative;
5190 display: inline;
5191 padding: 0;
5192 background: transparent;
5193 font-size: inherit;
5194 border: 1px solid transparent;
5195 border-radius: 4px;
5196 background-color: #f4f7fb;
5197 color: #152935;
5198 font-size: 85%;
5199 cursor: pointer;
5200}
5201
5202.bx--snippet--inline:hover {
5203 background-color: #cfdced;
5204}
5205
5206.bx--snippet--inline:focus {
5207 outline: 1px solid #3d70b2;
5208 outline: none;
5209 border: 1px solid #3d70b2;
5210}
5211
5212.bx--snippet--inline code {
5213 padding: 0.0625rem 0.5rem;
5214}
5215
5216.bx--snippet--inline.bx--snippet--light {
5217 background-color: #fff;
5218}
5219
5220.bx--snippet--inline.bx--snippet--light:hover {
5221 background-color: rgba(85, 150, 230, 0.1);
5222}
5223
5224.bx--snippet--single {
5225 font-size: 0.75rem;
5226 line-height: 1.45;
5227 background: #fff;
5228 border: 1px solid #dfe3e6;
5229 font-family: "ibm-plex-mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", Courier, monospace;
5230 position: relative;
5231 max-width: 37.5rem;
5232 width: 100%;
5233 height: 3.5rem;
5234 padding: 0 2.5rem 0 1rem;
5235}
5236
5237.bx--snippet--single .bx--snippet-container {
5238 display: -ms-flexbox;
5239 display: flex;
5240 -ms-flex-align: center;
5241 align-items: center;
5242 height: 130%;
5243 overflow-x: scroll;
5244 position: relative;
5245 padding-bottom: 1rem;
5246}
5247
5248.bx--snippet--single pre {
5249 white-space: nowrap;
5250}
5251
5252.bx--snippet--multi {
5253 font-size: 0.75rem;
5254 line-height: 1.45;
5255 background: #fff;
5256 border: 1px solid #dfe3e6;
5257 font-family: "ibm-plex-mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", Courier, monospace;
5258 position: relative;
5259 max-width: 37.5rem;
5260 width: 100%;
5261 padding: 1rem 3rem 2rem 1.5rem;
5262}
5263
5264.bx--snippet--multi .bx--snippet-container {
5265 overflow: hidden;
5266 position: relative;
5267 max-height: 14.875rem;
5268 min-height: 3.5rem;
5269 transition: all 250ms cubic-bezier(0.5, 0, 0.1, 1);
5270}
5271
5272.bx--snippet--expand.bx--snippet--multi .bx--snippet-container {
5273 max-height: 93.75rem;
5274}
5275
5276.bx--snippet--multi .bx--snippet-container pre {
5277 white-space: pre-wrap;
5278}
5279
5280.bx--snippet__icon {
5281 fill: #3d70b2;
5282 height: 1.5rem;
5283 width: 1.125rem;
5284 transition: all 250ms cubic-bezier(0.5, 0, 0.1, 1);
5285}
5286
5287.bx--snippet__icon:hover {
5288 fill: #30588c;
5289}
5290
5291.bx--snippet-button {
5292 cursor: pointer;
5293 position: absolute;
5294 top: 0.675rem;
5295 right: 0.5rem;
5296 border: none;
5297 background-color: transparent;
5298 outline: none;
5299 padding: 0;
5300 height: 2rem;
5301 width: 2rem;
5302 overflow: visible;
5303}
5304
5305.bx--snippet-button:focus {
5306 outline: 1px solid #3d70b2;
5307}
5308
5309.bx--snippet .bx--btn--copy__feedback {
5310 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
5311 z-index: 8000;
5312 font-weight: 400;
5313 left: inherit;
5314 top: 0.75rem;
5315 right: 1.25rem;
5316}
5317
5318.bx--snippet--code.bx--skeleton {
5319 height: 6.125rem;
5320}
5321
5322.bx--snippet--terminal.bx--skeleton {
5323 height: 3.5rem;
5324}
5325
5326.bx--snippet.bx--skeleton .bx--snippet-container {
5327 height: 100%;
5328}
5329
5330.bx--snippet.bx--skeleton code {
5331 position: relative;
5332 border: none;
5333 padding: 0;
5334 box-shadow: none;
5335 pointer-events: none;
5336 background: rgba(61, 112, 178, 0.1);
5337 width: 100%;
5338 height: 1rem;
5339 display: block;
5340}
5341
5342.bx--snippet.bx--skeleton code:hover, .bx--snippet.bx--skeleton code:focus, .bx--snippet.bx--skeleton code:active {
5343 border: none;
5344 outline: none;
5345 cursor: default;
5346}
5347
5348.bx--snippet.bx--skeleton code:before {
5349 content: '';
5350 width: 0%;
5351 height: 100%;
5352 position: absolute;
5353 top: 0;
5354 left: 0;
5355 opacity: 0.3;
5356 background: rgba(61, 112, 178, 0.1);
5357 animation: 3000ms ease-in-out skeleton infinite;
5358}
5359
5360.bx--snippet-button .bx--btn--copy__feedback {
5361 top: 1.5625rem;
5362 left: 1rem;
5363 right: auto;
5364}
5365
5366.bx--snippet--inline .bx--btn--copy__feedback {
5367 right: auto;
5368 left: 50%;
5369}
5370
5371.bx--snippet-btn--expand {
5372 position: absolute;
5373 right: 0;
5374 bottom: 0;
5375}
5376
5377.bx--snippet-btn--expand--hide .bx--snippet-btn--expand {
5378 display: none;
5379}
5380
5381.bx--snippet-btn--expand .bx--icon-chevron--down {
5382 fill: #3d70b2;
5383 margin-left: 0.25rem;
5384 transform: rotate(0deg);
5385 transition: 250ms;
5386}
5387
5388.bx--snippet-btn--expand:hover .bx--icon-chevron--down,
5389.bx--snippet-btn--expand:focus .bx--icon-chevron--down {
5390 fill: #fff;
5391}
5392
5393.bx--snippet--expand .bx--snippet-btn--expand .bx--icon-chevron--down {
5394 transform: rotate(180deg);
5395}
5396
5397bx--snippet--multi.bx--skeleton {
5398 height: 6.125rem;
5399}
5400
5401.bx--snippet--single.bx--skeleton {
5402 height: 3.5rem;
5403}
5404
5405.bx--snippet.bx--skeleton .bx--snippet-container {
5406 height: 100%;
5407}
5408
5409.bx--snippet.bx--skeleton span {
5410 position: relative;
5411 border: none;
5412 padding: 0;
5413 box-shadow: none;
5414 pointer-events: none;
5415 background: rgba(61, 112, 178, 0.1);
5416 width: 100%;
5417 height: 1rem;
5418 display: block;
5419 margin-top: 0.5rem;
5420}
5421
5422.bx--snippet.bx--skeleton span:hover, .bx--snippet.bx--skeleton span:focus, .bx--snippet.bx--skeleton span:active {
5423 border: none;
5424 outline: none;
5425 cursor: default;
5426}
5427
5428.bx--snippet.bx--skeleton span:before {
5429 content: '';
5430 width: 0%;
5431 height: 100%;
5432 position: absolute;
5433 top: 0;
5434 left: 0;
5435 opacity: 0.3;
5436 background: rgba(61, 112, 178, 0.1);
5437 animation: 3000ms ease-in-out skeleton infinite;
5438}
5439
5440.bx--snippet.bx--skeleton span:first-child {
5441 margin: 0;
5442}
5443
5444.bx--snippet.bx--skeleton span:nth-child(2) {
5445 width: 85%;
5446}
5447
5448.bx--snippet.bx--skeleton span:nth-child(3) {
5449 width: 95%;
5450}
5451
5452.bx--snippet--single.bx--skeleton .bx--snippet-container {
5453 padding-bottom: 0;
5454}
5455
5456/*
5457 Deprecated class names will be removed in v10.x
5458 */
5459.bx--snippet--terminal {
5460 font-size: 0.75rem;
5461 line-height: 1.45;
5462 background: #fff;
5463 border: 1px solid #dfe3e6;
5464 font-family: "ibm-plex-mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", Courier, monospace;
5465 position: relative;
5466 max-width: 37.5rem;
5467 width: 100%;
5468 height: 3.5rem;
5469 padding: 0 2.5rem 0 1rem;
5470}
5471
5472.bx--snippet--terminal .bx--snippet-container {
5473 display: -ms-flexbox;
5474 display: flex;
5475 -ms-flex-align: center;
5476 align-items: center;
5477 height: 130%;
5478 white-space: nowrap;
5479 overflow-x: scroll;
5480 position: relative;
5481 padding-bottom: 1rem;
5482}
5483
5484.bx--snippet--code {
5485 font-size: 0.75rem;
5486 line-height: 1.45;
5487 background: #fff;
5488 border: 1px solid #dfe3e6;
5489 font-family: "ibm-plex-mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", Courier, monospace;
5490 position: relative;
5491 max-width: 37.5rem;
5492 width: 100%;
5493 padding: 1rem 3rem 1rem 1.5rem;
5494}
5495
5496.bx--snippet--code .bx--snippet-container {
5497 overflow: hidden;
5498 position: relative;
5499 max-height: 15.875rem;
5500 min-height: 3.5rem;
5501 transition: all 250ms cubic-bezier(0.5, 0, 0.1, 1);
5502}
5503
5504.bx--snippet--expand.bx--snippet--code .bx--snippet-container {
5505 max-height: 93.75rem;
5506}
5507
5508.bx--snippet--code .bx--snippet-container pre {
5509 white-space: pre-wrap;
5510}
5511
5512.bx--snippet--inline .bx--btn--copy__feedback {
5513 right: auto;
5514}
5515
5516.bx--snippet--code.bx--skeleton {
5517 height: 6.125rem;
5518}
5519
5520.bx--snippet--terminal.bx--skeleton {
5521 height: 3.5rem;
5522}
5523
5524.bx--snippet.bx--skeleton .bx--snippet-container {
5525 height: 100%;
5526}
5527
5528.bx--snippet.bx--skeleton code {
5529 position: relative;
5530 border: none;
5531 padding: 0;
5532 box-shadow: none;
5533 pointer-events: none;
5534 background: rgba(61, 112, 178, 0.1);
5535 width: 100%;
5536 height: 1rem;
5537 display: block;
5538}
5539
5540.bx--snippet.bx--skeleton code:hover, .bx--snippet.bx--skeleton code:focus, .bx--snippet.bx--skeleton code:active {
5541 border: none;
5542 outline: none;
5543 cursor: default;
5544}
5545
5546.bx--snippet.bx--skeleton code:before {
5547 content: '';
5548 width: 0%;
5549 height: 100%;
5550 position: absolute;
5551 top: 0;
5552 left: 0;
5553 opacity: 0.3;
5554 background: rgba(61, 112, 178, 0.1);
5555 animation: 3000ms ease-in-out skeleton infinite;
5556}
5557
5558.bx--content-switcher {
5559 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
5560 display: -ms-flexbox;
5561 display: flex;
5562 height: 2.5rem;
5563}
5564
5565.bx--content-switcher-btn {
5566 -webkit-font-smoothing: antialiased;
5567 -moz-osx-font-smoothing: grayscale;
5568 font-size: 0.875rem;
5569 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
5570 background-color: transparent;
5571 display: -ms-flexbox;
5572 display: flex;
5573 -ms-flex-align: center;
5574 align-items: center;
5575 padding: 0 2rem;
5576 margin: 0;
5577 text-decoration: none;
5578 border: 1px solid #3d70b2;
5579 color: #3d70b2;
5580}
5581
5582.bx--content-switcher-btn:focus {
5583 outline: 1px solid transparent;
5584 background-color: #30588c;
5585 z-index: 2;
5586 border-color: #30588c;
5587 text-decoration: underline;
5588 color: #fff;
5589}
5590
5591.bx--content-switcher-btn:hover {
5592 cursor: pointer;
5593}
5594
5595.bx--content-switcher-btn:hover, .bx--content-switcher-btn:active {
5596 background-color: #30588c;
5597 border-color: #30588c;
5598 color: #fff;
5599}
5600
5601.bx--content-switcher__icon {
5602 margin-right: 0.5rem;
5603 fill: currentColor;
5604}
5605
5606.bx--content-switcher__icon * {
5607 fill: currentColor;
5608}
5609
5610.bx--content-switcher-btn:not(:last-of-type) {
5611 border-right: none;
5612}
5613
5614.bx--content-switcher-btn:not(:first-of-type) {
5615 border-left: 1px solid #3d70b2;
5616}
5617
5618.bx--content-switcher-btn:not(:first-of-type):hover {
5619 border-left-color: #30588c;
5620}
5621
5622.bx--content-switcher-btn:first-of-type {
5623 border-bottom-left-radius: 8px;
5624 border-top-left-radius: 8px;
5625}
5626
5627.bx--content-switcher-btn:first-of-type:hover {
5628 border-color: #30588c;
5629}
5630
5631.bx--content-switcher-btn:first-of-type:focus {
5632 z-index: 0;
5633}
5634
5635.bx--content-switcher-btn:last-of-type {
5636 border-top-right-radius: 8px;
5637 border-bottom-right-radius: 8px;
5638}
5639
5640.bx--content-switcher-btn:last-of-type:hover {
5641 border-color: #30588c;
5642}
5643
5644.bx--content-switcher-btn:last-of-type:focus {
5645 z-index: 0;
5646}
5647
5648.bx--content-switcher-btn.bx--content-switcher--selected {
5649 background-color: #3d70b2;
5650 color: #fff;
5651 font-weight: 400;
5652 outline: 1px solid transparent;
5653}
5654
5655.bx--content-switcher-btn.bx--content-switcher--selected:hover, .bx--content-switcher-btn.bx--content-switcher--selected:focus {
5656 border-color: #30588c;
5657 background-color: #30588c;
5658}
5659
5660.flatpickr-calendar {
5661 background: transparent;
5662 overflow: hidden;
5663 max-height: 0;
5664 opacity: 0;
5665 visibility: hidden;
5666 text-align: center;
5667 padding: 0;
5668 animation: none;
5669 direction: ltr;
5670 border: 0;
5671 font-size: 14px;
5672 line-height: 24px;
5673 border-radius: 5px;
5674 position: absolute;
5675 width: 315px;
5676 box-sizing: border-box;
5677 -ms-touch-action: manipulation;
5678 touch-action: manipulation;
5679 background: #fff;
5680 box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08);
5681}
5682
5683.flatpickr-calendar.open,
5684.flatpickr-calendar.inline {
5685 opacity: 1;
5686 visibility: visible;
5687 overflow: visible;
5688 max-height: 640px;
5689}
5690
5691.flatpickr-calendar.open {
5692 display: inline-block;
5693 z-index: 99999;
5694}
5695
5696.flatpickr-calendar.animate.open {
5697 animation: fpFadeInDown 110ms cubic-bezier(0, 0, 0.38, 0.9);
5698}
5699
5700.flatpickr-calendar.inline {
5701 display: block;
5702 position: relative;
5703 top: 2px;
5704}
5705
5706.flatpickr-calendar.static {
5707 position: absolute;
5708 top: calc(100% + 2px);
5709}
5710
5711.flatpickr-calendar.static.open {
5712 z-index: 999;
5713 display: block;
5714}
5715
5716.flatpickr-calendar.hasWeeks {
5717 width: auto;
5718}
5719
5720.flatpickr-calendar .hasWeeks .dayContainer,
5721.flatpickr-calendar .hasTime .dayContainer {
5722 border-bottom: 0;
5723 border-bottom-right-radius: 0;
5724 border-bottom-left-radius: 0;
5725}
5726
5727.flatpickr-calendar .hasWeeks .dayContainer {
5728 border-left: 0;
5729}
5730
5731.flatpickr-calendar.showTimeInput.hasTime .flatpickr-time {
5732 height: 40px;
5733 border-top: 1px solid #e6e6e6;
5734}
5735
5736.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
5737 height: auto;
5738}
5739
5740.flatpickr-calendar:before,
5741.flatpickr-calendar:after {
5742 position: absolute;
5743 display: block;
5744 pointer-events: none;
5745 border: solid transparent;
5746 content: '';
5747 height: 0;
5748 width: 0;
5749 left: 22px;
5750}
5751
5752.flatpickr-calendar.rightMost:before,
5753.flatpickr-calendar.rightMost:after {
5754 left: auto;
5755 right: 22px;
5756}
5757
5758.flatpickr-calendar:before {
5759 border-width: 5px;
5760 margin: 0 -5px;
5761}
5762
5763.flatpickr-calendar:after {
5764 border-width: 4px;
5765 margin: 0 -4px;
5766}
5767
5768.flatpickr-calendar.arrowTop:before,
5769.flatpickr-calendar.arrowTop:after {
5770 bottom: 100%;
5771}
5772
5773.flatpickr-calendar.arrowTop:before {
5774 border-bottom-color: #e6e6e6;
5775}
5776
5777.flatpickr-calendar.arrowTop:after {
5778 border-bottom-color: #fff;
5779}
5780
5781.flatpickr-calendar.arrowBottom:before,
5782.flatpickr-calendar.arrowBottom:after {
5783 top: 100%;
5784}
5785
5786.flatpickr-calendar.arrowBottom:before {
5787 border-top-color: #e6e6e6;
5788}
5789
5790.flatpickr-calendar.arrowBottom:after {
5791 border-top-color: #fff;
5792}
5793
5794.flatpickr-calendar:focus {
5795 outline: 0;
5796}
5797
5798.flatpickr-wrapper {
5799 position: relative;
5800 display: inline-block;
5801}
5802
5803.flatpickr-month {
5804 background: transparent;
5805 color: rgba(0, 0, 0, 0.9);
5806 fill: rgba(0, 0, 0, 0.9);
5807 height: 28px;
5808 line-height: 1;
5809 text-align: center;
5810 position: relative;
5811 -webkit-user-select: none;
5812 -moz-user-select: none;
5813 -ms-user-select: none;
5814 user-select: none;
5815 overflow: hidden;
5816}
5817
5818.flatpickr-prev-month,
5819.flatpickr-next-month {
5820 text-decoration: none;
5821 cursor: pointer;
5822 position: absolute;
5823 top: 0px;
5824 line-height: 16px;
5825 height: 28px;
5826 padding: 10px calc(3.57% - 1.5px);
5827 z-index: 3;
5828}
5829
5830.flatpickr-prev-month i,
5831.flatpickr-next-month i {
5832 position: relative;
5833}
5834
5835.flatpickr-prev-month.flatpickr-prev-month,
5836.flatpickr-next-month.flatpickr-prev-month {
5837 /*
5838 /*rtl:begin:ignore*/
5839 /*
5840 */
5841 left: 0;
5842 /*
5843 /*rtl:end:ignore*/
5844 /*
5845 */
5846}
5847
5848/*
5849 /*rtl:begin:ignore*/
5850/*
5851 /*rtl:end:ignore*/
5852.flatpickr-prev-month.flatpickr-next-month,
5853.flatpickr-next-month.flatpickr-next-month {
5854 /*
5855 /*rtl:begin:ignore*/
5856 /*
5857 */
5858 right: 0;
5859 /*
5860 /*rtl:end:ignore*/
5861 /*
5862 */
5863}
5864
5865/*
5866 /*rtl:begin:ignore*/
5867/*
5868 /*rtl:end:ignore*/
5869.flatpickr-prev-month:hover,
5870.flatpickr-next-month:hover {
5871 color: #959ea9;
5872}
5873
5874.flatpickr-prev-month:hover svg,
5875.flatpickr-next-month:hover svg {
5876 fill: #f64747;
5877}
5878
5879.flatpickr-prev-month svg,
5880.flatpickr-next-month svg {
5881 width: 14px;
5882}
5883
5884.flatpickr-prev-month svg path,
5885.flatpickr-next-month svg path {
5886 transition: fill 0.1s;
5887 fill: inherit;
5888}
5889
5890.numInputWrapper {
5891 position: relative;
5892 height: auto;
5893}
5894
5895.numInputWrapper input,
5896.numInputWrapper span {
5897 display: inline-block;
5898}
5899
5900.numInputWrapper input {
5901 width: 100%;
5902}
5903
5904.numInputWrapper span {
5905 position: absolute;
5906 right: 0;
5907 width: 14px;
5908 padding: 0 4px 0 2px;
5909 height: 50%;
5910 line-height: 50%;
5911 opacity: 0;
5912 cursor: pointer;
5913 border: 1px solid rgba(57, 57, 57, 0.05);
5914 box-sizing: border-box;
5915}
5916
5917.numInputWrapper span:hover {
5918 background: rgba(0, 0, 0, 0.1);
5919}
5920
5921.numInputWrapper span:active {
5922 background: rgba(0, 0, 0, 0.2);
5923}
5924
5925.numInputWrapper span:after {
5926 display: block;
5927 content: '';
5928 position: absolute;
5929 top: 33%;
5930}
5931
5932.numInputWrapper span.arrowUp {
5933 top: 0;
5934 border-bottom: 0;
5935}
5936
5937.numInputWrapper span.arrowUp:after {
5938 border-left: 4px solid transparent;
5939 border-right: 4px solid transparent;
5940 border-bottom: 4px solid rgba(57, 57, 57, 0.6);
5941}
5942
5943.numInputWrapper span.arrowDown {
5944 top: 50%;
5945}
5946
5947.numInputWrapper span.arrowDown:after {
5948 border-left: 4px solid transparent;
5949 border-right: 4px solid transparent;
5950 border-top: 4px solid rgba(57, 57, 57, 0.6);
5951}
5952
5953.numInputWrapper span svg {
5954 width: inherit;
5955 height: auto;
5956}
5957
5958.numInputWrapper span svg path {
5959 fill: rgba(0, 0, 0, 0.5);
5960}
5961
5962.numInputWrapper:hover {
5963 background: rgba(0, 0, 0, 0.05);
5964}
5965
5966.numInputWrapper:hover span {
5967 opacity: 1;
5968}
5969
5970.flatpickr-current-month {
5971 font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
5972 font-size: 0.875rem;
5973 font-weight: 600;
5974 line-height: 1.125rem;
5975 letter-spacing: 0.16px;
5976 color: inherit;
5977 position: absolute;
5978 width: 75%;
5979 left: 12.5%;
5980 padding: 6.16px 0 0 0;
5981 height: 28px;
5982 display: inline-block;
5983 text-align: center;
5984 transform: translate3d(0px, 0px, 0px);
5985}
5986
5987.flatpickr-current-month.slideLeft {
5988 transform: translate3d(-100%, 0px, 0px);
5989 animation: fpFadeOut 400ms ease, fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
5990}
5991
5992.flatpickr-current-month.slideLeftNew {
5993 transform: translate3d(100%, 0px, 0px);
5994 animation: fpFadeIn 400ms ease, fpSlideLeftNew 400ms cubic-bezier(0.23, 1, 0.32, 1);
5995}
5996
5997.flatpickr-current-month.slideRight {
5998 transform: translate3d(100%, 0px, 0px);
5999 animation: fpFadeOut 400ms ease, fpSlideRight 400ms cubic-bezier(0.23, 1, 0.32, 1);
6000}
6001
6002.flatpickr-current-month.slideRightNew {
6003 transform: translate3d(0, 0, 0px);
6004 animation: fpFadeIn 400ms ease, fpSlideRightNew 400ms cubic-bezier(0.23, 1, 0.32, 1);
6005}
6006
6007.flatpickr-current-month span.cur-month {
6008 font-family: inherit;
6009 font-weight: 600;
6010 color: inherit;
6011 display: inline-block;
6012 margin-left: 0.5ch;
6013 padding: 0;
6014}
6015
6016.flatpickr-current-month span.cur-month:hover {
6017 background: rgba(0, 0, 0, 0.05);
6018}
6019
6020.flatpickr-current-month .numInputWrapper {
6021 width: 6ch;
6022 width: 7ch\0;
6023 display: inline-block;
6024}
6025
6026.flatpickr-current-month .numInputWrapper span.arrowUp:after {
6027 border-bottom-color: rgba(0, 0, 0, 0.9);
6028}
6029
6030.flatpickr-current-month .numInputWrapper span.arrowDown:after {
6031 border-top-color: rgba(0, 0, 0, 0.9);
6032}
6033
6034.flatpickr-current-month input.cur-year {
6035 background: transparent;
6036 box-sizing: border-box;
6037 color: inherit;
6038 cursor: default;
6039 padding: 0 0 0 0.5ch;
6040 margin: 0;
6041 display: inline-block;
6042 font-size: inherit;
6043 font-family: inherit;
6044 font-weight: 300;
6045 line-height: inherit;
6046 height: auto;
6047 border: 0;
6048 border-radius: 0;
6049 vertical-align: baseline;
6050}
6051
6052.flatpickr-current-month input.cur-year:focus {
6053 outline: 0;
6054}
6055
6056.flatpickr-current-month input.cur-year[disabled],
6057.flatpickr-current-month input.cur-year[disabled]:hover {
6058 font-size: 100%;
6059 color: rgba(0, 0, 0, 0.5);
6060 background: transparent;
6061 pointer-events: none;
6062}
6063
6064.flatpickr-weekdays {
6065 background: transparent;
6066 text-align: center;
6067 overflow: hidden;
6068 width: 315px;
6069 display: -ms-flexbox;
6070 display: flex;
6071 -ms-flex-align: center;
6072 align-items: center;
6073 height: 28px;
6074}
6075
6076span.flatpickr-weekday {
6077 font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
6078 font-size: 0.875rem;
6079 font-weight: 400;
6080 line-height: 1.125rem;
6081 letter-spacing: 0.16px;
6082 cursor: default;
6083 background: transparent;
6084 color: rgba(0, 0, 0, 0.54);
6085 margin: 0;
6086 text-align: center;
6087 display: block;
6088 -ms-flex: 1;
6089 flex: 1;
6090}
6091
6092.dayContainer,
6093.flatpickr-weeks {
6094 padding: 1px 0 0 0;
6095}
6096
6097.flatpickr-days {
6098 position: relative;
6099 overflow: hidden;
6100 display: -ms-flexbox;
6101 display: flex;
6102 width: 315px;
6103}
6104
6105.flatpickr-days:focus {
6106 outline: 0;
6107}
6108
6109.dayContainer {
6110 padding: 0;
6111 outline: 0;
6112 text-align: left;
6113 width: 315px;
6114 min-width: 315px;
6115 max-width: 315px;
6116 box-sizing: border-box;
6117 display: inline-block;
6118 display: -ms-flexbox;
6119 display: flex;
6120 flex-wrap: wrap;
6121 -ms-flex-wrap: wrap;
6122 -ms-flex-pack: justify;
6123 justify-content: space-around;
6124 transform: translate3d(0px, 0px, 0px);
6125 opacity: 1;
6126}
6127
6128.flatpickr-calendar.animate .dayContainer.slideLeft {
6129 animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
6130}
6131
6132.flatpickr-calendar.animate .dayContainer.slideLeft,
6133.flatpickr-calendar.animate .dayContainer.slideLeftNew {
6134 transform: translate3d(-100%, 0px, 0px);
6135}
6136
6137.flatpickr-calendar.animate .dayContainer.slideLeftNew {
6138 animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
6139}
6140
6141.flatpickr-calendar.animate .dayContainer.slideRight {
6142 animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideRight 400ms cubic-bezier(0.23, 1, 0.32, 1);
6143 transform: translate3d(100%, 0px, 0px);
6144}
6145
6146.flatpickr-calendar.animate .dayContainer.slideRightNew {
6147 animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideRightNew 400ms cubic-bezier(0.23, 1, 0.32, 1);
6148}
6149
6150.flatpickr-day {
6151 background: none;
6152 border: 1px solid transparent;
6153 border-radius: 150px;
6154 box-sizing: border-box;
6155 color: #393939;
6156 cursor: pointer;
6157 font-weight: 400;
6158 width: 14.2857143%;
6159 -ms-flex-preferred-size: 14.2857143%;
6160 flex-basis: 14.2857143%;
6161 max-width: 40px;
6162 height: 40px;
6163 line-height: 40px;
6164 margin: 0;
6165 display: inline-block;
6166 position: relative;
6167 -ms-flex-pack: center;
6168 justify-content: center;
6169 text-align: center;
6170}
6171
6172.flatpickr-day.week.selected {
6173 border-radius: 0;
6174 box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
6175}
6176
6177.flatpickr-weekwrapper {
6178 display: inline-block;
6179 float: left;
6180}
6181
6182.flatpickr-weekwrapper .flatpickr-weeks {
6183 padding: 0 12px;
6184 box-shadow: 1px 0 0 #e6e6e6;
6185}
6186
6187.flatpickr-weekwrapper .flatpickr-weekday {
6188 float: none;
6189 width: 100%;
6190 line-height: 28px;
6191}
6192
6193.flatpickr-weekwrapper span.flatpickr-day {
6194 display: block;
6195 width: 100%;
6196 max-width: none;
6197}
6198
6199.flatpickr-innerContainer {
6200 display: block;
6201 display: -ms-flexbox;
6202 display: flex;
6203 box-sizing: border-box;
6204 overflow: hidden;
6205}
6206
6207.flatpickr-rContainer {
6208 display: inline-block;
6209 padding: 0;
6210 box-sizing: border-box;
6211}
6212
6213.flatpickr-time {
6214 text-align: center;
6215 outline: 0;
6216 display: block;
6217 height: 0;
6218 line-height: 40px;
6219 max-height: 40px;
6220 box-sizing: border-box;
6221 overflow: hidden;
6222 display: -ms-flexbox;
6223 display: flex;
6224}
6225
6226.flatpickr-time:after {
6227 content: '';
6228 display: table;
6229 clear: both;
6230}
6231
6232.flatpickr-time .numInputWrapper {
6233 -ms-flex: 1;
6234 flex: 1;
6235 width: 40%;
6236 height: 40px;
6237 float: left;
6238}
6239
6240.flatpickr-time .numInputWrapper span.arrowUp:after {
6241 border-bottom-color: #393939;
6242}
6243
6244.flatpickr-time .numInputWrapper span.arrowDown:after {
6245 border-top-color: #393939;
6246}
6247
6248.flatpickr-time.hasSeconds .numInputWrapper {
6249 width: 26%;
6250}
6251
6252.flatpickr-time.time24hr .numInputWrapper {
6253 width: 49%;
6254}
6255
6256.flatpickr-time input {
6257 background: transparent;
6258 box-shadow: none;
6259 border: 0;
6260 border-radius: 0;
6261 text-align: center;
6262 margin: 0;
6263 padding: 0;
6264 height: inherit;
6265 line-height: inherit;
6266 cursor: pointer;
6267 color: #393939;
6268 font-size: 14px;
6269 position: relative;
6270 box-sizing: border-box;
6271}
6272
6273.flatpickr-time input.flatpickr-hour {
6274 font-weight: bold;
6275}
6276
6277.flatpickr-time input.flatpickr-minute,
6278.flatpickr-time input.flatpickr-second {
6279 font-weight: 400;
6280}
6281
6282.flatpickr-time input:focus {
6283 outline: 0;
6284 border: 0;
6285}
6286
6287.flatpickr-time .flatpickr-time-separator,
6288.flatpickr-time .flatpickr-am-pm {
6289 height: inherit;
6290 display: inline-block;
6291 float: left;
6292 line-height: inherit;
6293 color: #393939;
6294 font-weight: bold;
6295 width: 2%;
6296 -webkit-user-select: none;
6297 -moz-user-select: none;
6298 -ms-user-select: none;
6299 user-select: none;
6300 -ms-flex-item-align: center;
6301 -ms-grid-row-align: center;
6302 align-self: center;
6303}
6304
6305.flatpickr-time .flatpickr-am-pm {
6306 outline: 0;
6307 width: 18%;
6308 cursor: pointer;
6309 text-align: center;
6310 font-weight: 400;
6311}
6312
6313.flatpickr-time .flatpickr-am-pm:hover,
6314.flatpickr-time .flatpickr-am-pm:focus {
6315 background: #f0f0f0;
6316}
6317
6318.flatpickr-input[readonly] {
6319 cursor: pointer;
6320}
6321
6322@keyframes fpFadeInDown {
6323 from {
6324 opacity: 0;
6325 transform: translate3d(0, -20px, 0);
6326 }
6327 to {
6328 opacity: 1;
6329 transform: translate3d(0, 0, 0);
6330 }
6331}
6332
6333@keyframes fpSlideLeft {
6334 from {
6335 transform: translate3d(0px, 0px, 0px);
6336 }
6337 to {
6338 transform: translate3d(-100%, 0px, 0px);
6339 }
6340}
6341
6342@keyframes fpSlideLeftNew {
6343 from {
6344 transform: translate3d(100%, 0px, 0px);
6345 }
6346 to {
6347 transform: translate3d(0px, 0px, 0px);
6348 }
6349}
6350
6351@keyframes fpSlideRight {
6352 from {
6353 transform: translate3d(0, 0, 0px);
6354 }
6355 to {
6356 transform: translate3d(100%, 0px, 0px);
6357 }
6358}
6359
6360@keyframes fpSlideRightNew {
6361 from {
6362 transform: translate3d(-100%, 0, 0px);
6363 }
6364 to {
6365 transform: translate3d(0, 0, 0px);
6366 }
6367}
6368
6369@keyframes fpFadeOut {
6370 from {
6371 opacity: 1;
6372 }
6373 to {
6374 opacity: 0;
6375 }
6376}
6377
6378@keyframes fpFadeIn {
6379 from {
6380 opacity: 0;
6381 }
6382 to {
6383 opacity: 1;
6384 }
6385}
6386
6387.bx--date-picker {
6388 display: -ms-flexbox;
6389 display: flex;
6390}
6391
6392.bx--date-picker--light .bx--date-picker__input {
6393 background: #fff;
6394}
6395
6396.bx--date-picker ~ .bx--label {
6397 -ms-flex-order: 1;
6398 order: 1;
6399}
6400
6401.bx--date-picker-container {
6402 position: relative;
6403 display: -ms-flexbox;
6404 display: flex;
6405 -ms-flex-direction: column;
6406 flex-direction: column;
6407 -ms-flex-pack: justify;
6408 justify-content: space-between;
6409}
6410
6411.bx--date-picker.bx--date-picker--simple .bx--date-picker__input {
6412 width: 7.125rem;
6413}
6414
6415.bx--date-picker.bx--date-picker--simple.bx--date-picker--short .bx--date-picker__input {
6416 width: 5.7rem;
6417}
6418
6419.bx--date-picker.bx--date-picker--single .bx--date-picker__input {
6420 width: 9rem;
6421}
6422
6423.bx--date-picker__input {
6424 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
6425 font-size: 0.875rem;
6426 display: block;
6427 position: relative;
6428 height: 2.5rem;
6429 max-width: 9rem;
6430 padding: 0 1rem;
6431 background-color: #f4f7fb;
6432 border: none;
6433 box-shadow: 0 1px 0 0 #5a6872;
6434 -ms-flex-order: 2;
6435 order: 2;
6436 color: #152935;
6437 border-bottom: 1px solid transparent;
6438}
6439
6440.bx--date-picker__input:focus, .bx--date-picker__input.bx--focused {
6441 outline: none;
6442 box-shadow: 0 2px 0 0 #3d70b2;
6443}
6444
6445.bx--date-picker__input:focus ~ .bx--label {
6446 color: #3d70b2;
6447}
6448
6449.bx--date-picker__input[data-invalid], .bx--date-picker__input[data-invalid]:focus {
6450 box-shadow: 0 2px 0 0 #e0182d;
6451}
6452
6453.bx--date-picker__input[data-invalid]:focus + .bx--label {
6454 color: #e0182d;
6455}
6456
6457.bx--date-picker__input ~ .bx--form-requirement {
6458 -ms-flex-order: 3;
6459 order: 3;
6460 color: #e0182d;
6461 font-weight: 400;
6462 margin-top: 0.25rem;
6463 overflow: visible;
6464}
6465
6466.bx--date-picker__input ~ .bx--form-requirement::before {
6467 display: none;
6468}
6469
6470.bx--date-picker__input:disabled {
6471 opacity: 0.5;
6472 cursor: not-allowed;
6473}
6474
6475.bx--date-picker__input:disabled:hover {
6476 border: 1px solid transparent;
6477}
6478
6479.bx--date-picker__input:-ms-input-placeholder {
6480 color: #5a6872;
6481}
6482
6483.bx--date-picker__input::placeholder {
6484 color: #5a6872;
6485}
6486
6487.bx--date-picker__icon {
6488 position: absolute;
6489 top: 2.25rem;
6490 left: 1rem;
6491 fill: #3d70b2;
6492 cursor: pointer;
6493 z-index: 1;
6494}
6495
6496.bx--date-picker__icon:hover {
6497 fill: #30588c;
6498}
6499
6500.bx--date-picker--nolabel .bx--date-picker__icon {
6501 top: 0.875rem;
6502}
6503
6504.bx--date-picker__icon ~ .bx--date-picker__input {
6505 padding-left: 3rem;
6506}
6507
6508.bx--date-picker--range {
6509 display: -ms-flexbox;
6510 display: flex;
6511 position: relative;
6512}
6513
6514.bx--date-picker--range > .bx--date-picker-container:first-child {
6515 margin-right: 0.5rem;
6516}
6517
6518.bx--date-picker--range .bx--date-picker__icon {
6519 top: initial;
6520 right: -1.75rem;
6521 bottom: 0.6rem;
6522 left: auto;
6523}
6524
6525.bx--date-picker--range .bx--label,
6526.bx--date-picker--range .bx--date-picker__input {
6527 width: 7.075rem;
6528}
6529
6530.bx--date-picker__calendar.flatpickr-calendar.open {
6531 box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.1);
6532 background-color: #fff;
6533 display: -ms-flexbox;
6534 display: flex;
6535 -ms-flex-direction: column;
6536 flex-direction: column;
6537 -ms-flex-align: center;
6538 align-items: center;
6539 -ms-flex-pack: center;
6540 justify-content: center;
6541 padding: 1rem 1rem 0.25rem;
6542 width: 17.8125rem !important;
6543 height: 16.375rem;
6544 border-radius: 0;
6545 border: none;
6546 overflow: hidden;
6547 margin-top: 1px;
6548}
6549
6550.bx--date-picker__calendar.flatpickr-calendar.open:before, .bx--date-picker__calendar.flatpickr-calendar.open:after {
6551 display: none;
6552}
6553
6554.bx--date-picker__calendar.flatpickr-calendar.open:focus {
6555 outline: 1px solid #3d70b2;
6556}
6557
6558.bx--date-picker__month,
6559.flatpickr-month {
6560 width: 100%;
6561 margin-bottom: 0.25rem;
6562}
6563
6564.bx--date-picker__month .flatpickr-prev-month,
6565.bx--date-picker__month .flatpickr-next-month,
6566.flatpickr-month .flatpickr-prev-month,
6567.flatpickr-month .flatpickr-next-month {
6568 padding: 0;
6569 line-height: 1.25rem;
6570 fill: #152935;
6571}
6572
6573.bx--date-picker__month .flatpickr-prev-month:hover svg,
6574.bx--date-picker__month .flatpickr-next-month:hover svg,
6575.flatpickr-month .flatpickr-prev-month:hover svg,
6576.flatpickr-month .flatpickr-next-month:hover svg {
6577 fill: #3d70b2;
6578}
6579
6580.bx--date-picker__month .flatpickr-current-month,
6581.flatpickr-month .flatpickr-current-month {
6582 font-size: 0.75rem;
6583 text-transform: uppercase;
6584 padding: 0;
6585}
6586
6587.bx--date-picker__month .flatpickr-current-month svg,
6588.flatpickr-month .flatpickr-current-month svg {
6589 fill: #152935;
6590}
6591
6592.bx--date-picker__month .flatpickr-current-month .cur-month,
6593.flatpickr-month .flatpickr-current-month .cur-month {
6594 margin-right: 0.25rem;
6595 color: #152935;
6596}
6597
6598.numInputWrapper,
6599.flatpickr-current-month .numInputWrapper {
6600 min-width: 2.375rem;
6601 width: 2.375rem;
6602}
6603
6604.bx--date-picker__month .numInputWrapper .numInput,
6605.flatpickr-month .numInputWrapper .numInput {
6606 font-weight: 600;
6607 color: #152935;
6608 background-color: #f4f7fb;
6609 border: none;
6610 border-radius: 0;
6611 min-width: 2.375rem;
6612 width: 2.375rem;
6613 padding: 0.25rem;
6614 -moz-appearance: textfield;
6615 /* Firefox */
6616}
6617
6618.bx--date-picker__month .numInputWrapper .numInput:focus,
6619.flatpickr-month .numInputWrapper .numInput:focus {
6620 outline: 1px solid #3d70b2;
6621}
6622
6623.bx--date-picker__month .numInputWrapper .numInput::-webkit-outer-spin-button, .bx--date-picker__month .numInputWrapper .numInput::-webkit-inner-spin-button,
6624.flatpickr-month .numInputWrapper .numInput::-webkit-outer-spin-button,
6625.flatpickr-month .numInputWrapper .numInput::-webkit-inner-spin-button {
6626 -webkit-appearance: none;
6627 margin: 0;
6628 /* <-- Apparently some margin are still there even though it's hidden */
6629}
6630
6631.bx--date-picker__month .numInputWrapper span.arrowUp,
6632.bx--date-picker__month .numInputWrapper span.arrowDown,
6633.flatpickr-month .numInputWrapper span.arrowUp,
6634.flatpickr-month .numInputWrapper span.arrowDown {
6635 left: 2.6rem;
6636 border: none;
6637 width: 0.75rem;
6638}
6639
6640.bx--date-picker__month .numInputWrapper span.arrowUp:hover,
6641.bx--date-picker__month .numInputWrapper span.arrowDown:hover,
6642.flatpickr-month .numInputWrapper span.arrowUp:hover,
6643.flatpickr-month .numInputWrapper span.arrowDown:hover {
6644 background: none;
6645}
6646
6647.bx--date-picker__month .numInputWrapper span.arrowUp:hover:after,
6648.bx--date-picker__month .numInputWrapper span.arrowDown:hover:after,
6649.flatpickr-month .numInputWrapper span.arrowUp:hover:after,
6650.flatpickr-month .numInputWrapper span.arrowDown:hover:after {
6651 border-bottom-color: #5596e6;
6652 border-top-color: #5596e6;
6653}
6654
6655.bx--date-picker__month .numInputWrapper span.arrowUp:after,
6656.bx--date-picker__month .numInputWrapper span.arrowDown:after,
6657.flatpickr-month .numInputWrapper span.arrowUp:after,
6658.flatpickr-month .numInputWrapper span.arrowDown:after {
6659 border-bottom-color: #3d70b2;
6660 border-top-color: #3d70b2;
6661}
6662
6663.bx--date-picker__month .numInputWrapper span.arrowUp,
6664.flatpickr-month .numInputWrapper span.arrowUp {
6665 top: 1px;
6666}
6667
6668.bx--date-picker__month .numInputWrapper span.arrowDown,
6669.flatpickr-month .numInputWrapper span.arrowDown {
6670 top: 9px;
6671}
6672
6673span.bx--date-picker__weekday,
6674span.flatpickr-weekday {
6675 font-size: 0.75rem;
6676 font-weight: 600;
6677 color: #152935;
6678}
6679
6680.bx--date-picker__day,
6681.flatpickr-day {
6682 font-size: 0.75rem;
6683 height: 1.5625rem;
6684 width: 1.8rem;
6685 line-height: 1.5625rem;
6686 -ms-flex-preferred-size: 1.8rem;
6687 flex-basis: 1.8rem;
6688 max-width: 1.8rem;
6689 margin: 0.03125rem 0;
6690 display: -ms-flexbox;
6691 display: flex;
6692 -ms-flex-align: center;
6693 align-items: center;
6694 -ms-flex-pack: center;
6695 justify-content: center;
6696 color: #152935;
6697 border-radius: 0;
6698 border: 2px solid transparent;
6699}
6700
6701.bx--date-picker__day:hover,
6702.flatpickr-day:hover {
6703 background: rgba(85, 150, 230, 0.1);
6704}
6705
6706.bx--date-picker__day:focus,
6707.flatpickr-day:focus {
6708 outline: none;
6709 background: #dfe3e6;
6710}
6711
6712.bx--date-picker__days .nextMonthDay,
6713.bx--date-picker__days .prevMonthDay {
6714 opacity: 0.5;
6715 color: #5a6872;
6716}
6717
6718.bx--date-picker__day.today,
6719.flatpickr-day.today {
6720 position: relative;
6721}
6722
6723.bx--date-picker__day.today::after,
6724.flatpickr-day.today::after {
6725 content: '';
6726 position: absolute;
6727 display: block;
6728 top: 90%;
6729 left: 50%;
6730 transform: translateX(-50%);
6731 height: 3px;
6732 width: 3px;
6733 border-radius: 50%;
6734 background: #3d70b2;
6735}
6736
6737.bx--date-picker__day.today.no-border,
6738.flatpickr-day.today.no-border {
6739 border: none;
6740}
6741
6742.bx--date-picker__day.today.selected {
6743 border: 2px solid #3d70b2;
6744}
6745
6746.bx--date-picker__day.today.selected::after {
6747 display: none;
6748}
6749
6750.bx--date-picker__day.disabled,
6751.flatpickr-day.disabled {
6752 cursor: not-allowed;
6753 opacity: 0.5;
6754 color: #5a6872;
6755}
6756
6757.bx--date-picker__day.disabled:hover,
6758.flatpickr-day.disabled:hover {
6759 background: transparent;
6760}
6761
6762.bx--date-picker__day.inRange,
6763.flatpickr-day.inRange {
6764 background: #f4f7fb;
6765 box-shadow: -6px 0 0 #f4f7fb, 6px 0 0 #f4f7fb;
6766}
6767
6768.bx--date-picker__day.selected,
6769.flatpickr-day.selected {
6770 border: 2px solid #3d70b2;
6771 background: #fff;
6772}
6773
6774.bx--date-picker__day.startRange.selected,
6775.flatpickr-day.startRange.selected {
6776 box-shadow: none;
6777 z-index: 2;
6778}
6779
6780.bx--date-picker__day.endRange.inRange,
6781.flatpickr-day.endRange.inRange {
6782 background: #fff;
6783 color: #152935;
6784 border: 2px solid #3d70b2;
6785 z-index: 3;
6786 box-shadow: none;
6787}
6788
6789.bx--date-picker__day.endRange.inRange.selected,
6790.flatpickr-day.endRange.inRange.selected {
6791 box-shadow: none;
6792 border: 2px solid #3d70b2;
6793 background: #fff;
6794}
6795
6796.bx--date-picker__day.startRange.inRange:not(.selected),
6797.flatpickr-day.startRange.inRange:not(.selected) {
6798 box-shadow: none;
6799 background: #fff;
6800 border: 2px solid #3d70b2;
6801 z-index: 3;
6802}
6803
6804.bx--date-picker__days,
6805.dayContainer {
6806 width: 14.0625rem;
6807 min-width: 14.0625rem;
6808 max-width: 14.0625rem;
6809 height: 10.25rem;
6810}
6811
6812.flatpickr-innerContainer,
6813.flatpickr-rContainer {
6814 width: 14.0625rem;
6815 height: 12.5rem;
6816}
6817
6818.bx--date-picker__weekdays,
6819.flatpickr-weekdays,
6820.flatpickr-weekdaycontainer {
6821 width: 14.0625rem;
6822 margin-bottom: 0.25rem;
6823}
6824
6825.flatpickr-weekdaycontainer {
6826 display: -ms-flexbox;
6827 display: flex;
6828}
6829
6830.flatpickr-months {
6831 display: -ms-flexbox;
6832 display: flex;
6833 width: 100%;
6834 position: relative;
6835}
6836
6837.flatpickr-prev-month,
6838.flatpickr-next-month {
6839 padding-top: 5px;
6840}
6841
6842.flatpickr-prev-month:hover svg,
6843.flatpickr-next-month:hover svg {
6844 fill: #3d70b2;
6845}
6846
6847.flatpickr-next-month.disabled svg,
6848.flatpickr-prev-month.disabled svg {
6849 fill: #5a6872;
6850 opacity: 0.5;
6851 cursor: not-allowed;
6852}
6853
6854.flatpickr-next-month.disabled:hover svg,
6855.flatpickr-prev-month.disabled:hover svg {
6856 fill: #5a6872;
6857}
6858
6859.bx--date-picker.bx--skeleton input,
6860.bx--date-picker__input.bx--skeleton {
6861 position: relative;
6862 border: none;
6863 padding: 0;
6864 box-shadow: none;
6865 pointer-events: none;
6866 background: rgba(61, 112, 178, 0.1);
6867 width: 100%;
6868}
6869
6870.bx--date-picker.bx--skeleton input:hover, .bx--date-picker.bx--skeleton input:focus, .bx--date-picker.bx--skeleton input:active,
6871.bx--date-picker__input.bx--skeleton:hover,
6872.bx--date-picker__input.bx--skeleton:focus,
6873.bx--date-picker__input.bx--skeleton:active {
6874 border: none;
6875 outline: none;
6876 cursor: default;
6877}
6878
6879.bx--date-picker.bx--skeleton input:before,
6880.bx--date-picker__input.bx--skeleton:before {
6881 content: '';
6882 width: 0%;
6883 height: 100%;
6884 position: absolute;
6885 top: 0;
6886 left: 0;
6887 opacity: 0.3;
6888 background: rgba(61, 112, 178, 0.1);
6889 animation: 3000ms ease-in-out skeleton infinite;
6890}
6891
6892.bx--date-picker.bx--skeleton input::-webkit-input-placeholder,
6893.bx--date-picker__input.bx--skeleton::-webkit-input-placeholder {
6894 color: transparent;
6895}
6896
6897.bx--date-picker.bx--skeleton .bx--label {
6898 position: relative;
6899 border: none;
6900 padding: 0;
6901 box-shadow: none;
6902 pointer-events: none;
6903 background: rgba(61, 112, 178, 0.1);
6904 width: 4.6875rem;
6905 height: 0.875rem;
6906}
6907
6908.bx--date-picker.bx--skeleton .bx--label:hover, .bx--date-picker.bx--skeleton .bx--label:focus, .bx--date-picker.bx--skeleton .bx--label:active {
6909 border: none;
6910 outline: none;
6911 cursor: default;
6912}
6913
6914.bx--date-picker.bx--skeleton .bx--label:before {
6915 content: '';
6916 width: 0%;
6917 height: 100%;
6918 position: absolute;
6919 top: 0;
6920 left: 0;
6921 opacity: 0.3;
6922 background: rgba(61, 112, 178, 0.1);
6923 animation: 3000ms ease-in-out skeleton infinite;
6924}
6925
6926.bx--dropdown {
6927 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
6928 font-size: 0.875rem;
6929 position: relative;
6930 list-style: none;
6931 display: block;
6932 background-color: #f4f7fb;
6933 border: none;
6934 box-shadow: 0 1px 0 0 #5a6872;
6935 -ms-flex-order: 1;
6936 order: 1;
6937 width: 100%;
6938 height: 2.5rem;
6939 cursor: pointer;
6940 color: #152935;
6941}
6942
6943.bx--dropdown:focus {
6944 outline: none;
6945 box-shadow: 0 2px 0 0 #3d70b2;
6946}
6947
6948.bx--dropdown.bx--dropdown--open:focus {
6949 outline: 1px solid transparent;
6950 box-shadow: none;
6951}
6952
6953.bx--dropdown .bx--dropdown--open .bx--dropdown-list {
6954 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
6955}
6956
6957.bx--dropdown--light {
6958 background-color: #fff;
6959}
6960
6961.bx--dropdown--up .bx--dropdown-list {
6962 bottom: 2.5rem;
6963}
6964
6965.bx--dropdown__arrow {
6966 fill: #3d70b2;
6967 position: absolute;
6968 right: 1rem;
6969 top: 1.175rem;
6970 width: 0.625rem;
6971 height: 0.3125rem;
6972 pointer-events: none;
6973 transition: transform 300ms cubic-bezier(0.5, 0, 0.1, 1);
6974 transform-origin: 50% 45%;
6975}
6976
6977.bx--dropdown[data-value=''] .bx--dropdown-text {
6978 color: #152935;
6979}
6980
6981.bx--dropdown-text {
6982 height: 2.5rem;
6983 padding-top: 0.8125rem;
6984 padding-bottom: 0.8125rem;
6985 padding-left: 1rem;
6986 padding-right: 2.5rem;
6987 font-weight: 600;
6988 white-space: nowrap;
6989 overflow: hidden;
6990 text-overflow: ellipsis;
6991 border: 1px solid transparent;
6992}
6993
6994.bx--dropdown-list {
6995 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
6996 font-size: 0.875rem;
6997 background-color: #fff;
6998 display: -ms-flexbox;
6999 display: flex;
7000 -ms-flex-direction: column;
7001 flex-direction: column;
7002 width: 100%;
7003 list-style: none;
7004 position: absolute;
7005 z-index: 7000;
7006 max-height: 0;
7007 transition: max-height 300ms cubic-bezier(0, 0, 0.25, 1);
7008 overflow: hidden;
7009}
7010
7011.bx--dropdown-item {
7012 transition: opacity 300ms cubic-bezier(0, 0, 0.25, 1);
7013 opacity: 0;
7014}
7015
7016.bx--dropdown-link {
7017 display: block;
7018 color: currentColor;
7019 text-decoration: none;
7020 font-weight: normal;
7021 padding: 1rem 1.5rem 1rem 1rem;
7022 text-overflow: ellipsis;
7023 overflow: hidden;
7024}
7025
7026.bx--dropdown-link:hover, .bx--dropdown-link:focus {
7027 background-color: rgba(85, 150, 230, 0.1);
7028 outline: 1px solid transparent;
7029 text-decoration: underline;
7030 color: #152935;
7031}
7032
7033.bx--dropdown--selected {
7034 display: none;
7035}
7036
7037.bx--dropdown--open .bx--dropdown__arrow {
7038 transform: rotate(-180deg);
7039}
7040
7041.bx--dropdown--open .bx--dropdown-list {
7042 max-height: 15rem;
7043}
7044
7045.bx--dropdown--open .bx--dropdown-list:hover {
7046 overflow: auto;
7047}
7048
7049.bx--dropdown--open .bx--dropdown-item {
7050 opacity: 1;
7051}
7052
7053.bx--dropdown--disabled {
7054 opacity: 0.5;
7055 cursor: not-allowed;
7056}
7057
7058.bx--dropdown--disabled:focus {
7059 outline: none;
7060}
7061
7062.bx--dropdown--auto-width {
7063 width: auto;
7064 max-width: 25rem;
7065}
7066
7067.bx--dropdown--inline {
7068 background-color: transparent;
7069 box-shadow: none;
7070}
7071
7072.bx--dropdown--inline:focus {
7073 outline: none;
7074 box-shadow: none;
7075}
7076
7077.bx--dropdown--inline:focus .bx--dropdown-text {
7078 outline: 1px solid #3d70b2;
7079}
7080
7081.bx--dropdown--inline[data-value=''] .bx--dropdown-text {
7082 color: #3d70b2;
7083}
7084
7085.bx--dropdown--inline .bx--dropdown-text {
7086 display: inline-block;
7087 padding-right: 1.5rem;
7088 overflow: visible;
7089 color: #3d70b2;
7090}
7091
7092.bx--dropdown--inline .bx--dropdown-text:hover {
7093 background-color: #f4f7fb;
7094}
7095
7096.bx--dropdown--inline.bx--dropdown--open:focus {
7097 box-shadow: none;
7098}
7099
7100.bx--dropdown--inline.bx--dropdown--open:focus .bx--dropdown-list {
7101 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
7102}
7103
7104.bx--dropdown--inline.bx--dropdown--open:focus .bx--dropdown-text {
7105 outline: none;
7106}
7107
7108.bx--dropdown--inline .bx--dropdown__arrow {
7109 position: relative;
7110 top: -2px;
7111 left: 8px;
7112 right: 0;
7113 bottom: 0;
7114}
7115
7116.bx--dropdown--inline .bx--dropdown-link {
7117 font-weight: normal;
7118}
7119
7120.bx--dropdown--inline .bx--dropdown-link:hover {
7121 background-color: #f4f7fb;
7122 color: #152935;
7123}
7124
7125.bx--dropdown-v2.bx--skeleton,
7126.bx--dropdown.bx--skeleton {
7127 position: relative;
7128 border: none;
7129 padding: 0;
7130 box-shadow: none;
7131 pointer-events: none;
7132 background: rgba(61, 112, 178, 0.1);
7133}
7134
7135.bx--dropdown-v2.bx--skeleton:hover, .bx--dropdown-v2.bx--skeleton:focus, .bx--dropdown-v2.bx--skeleton:active,
7136.bx--dropdown.bx--skeleton:hover,
7137.bx--dropdown.bx--skeleton:focus,
7138.bx--dropdown.bx--skeleton:active {
7139 border: none;
7140 outline: none;
7141 cursor: default;
7142}
7143
7144.bx--dropdown-v2.bx--skeleton:before,
7145.bx--dropdown.bx--skeleton:before {
7146 content: '';
7147 width: 0%;
7148 height: 100%;
7149 position: absolute;
7150 top: 0;
7151 left: 0;
7152 opacity: 0.3;
7153 background: rgba(61, 112, 178, 0.1);
7154 animation: 3000ms ease-in-out skeleton infinite;
7155}
7156
7157@keyframes rotate {
7158 0% {
7159 transform: rotate(0deg);
7160 }
7161 100% {
7162 transform: rotate(360deg);
7163 }
7164}
7165
7166@keyframes rotate-end-p1 {
7167 100% {
7168 transform: rotate(360deg);
7169 }
7170}
7171
7172@keyframes rotate-end-p2 {
7173 100% {
7174 transform: rotate(-360deg);
7175 }
7176}
7177
7178/* Stroke animations */
7179@keyframes init-stroke {
7180 0% {
7181 stroke-dashoffset: 240;
7182 }
7183 100% {
7184 stroke-dashoffset: 40;
7185 }
7186}
7187
7188@keyframes stroke-end {
7189 0% {
7190 stroke-dashoffset: 40;
7191 }
7192 100% {
7193 stroke-dashoffset: 240;
7194 }
7195}
7196
7197.bx--modal {
7198 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
7199 position: fixed;
7200 top: 0;
7201 right: 0;
7202 bottom: 0;
7203 left: 0;
7204 z-index: -1;
7205 display: -ms-flexbox;
7206 display: flex;
7207 -ms-flex-align: center;
7208 align-items: center;
7209 -ms-flex-pack: center;
7210 justify-content: center;
7211 content: '';
7212 opacity: 0;
7213 background-color: rgba(223, 227, 230, 0.5);
7214 transition: opacity 200ms, z-index 0s 200ms, visibility 0s 200ms;
7215 visibility: hidden;
7216}
7217
7218.bx--modal.is-visible {
7219 z-index: 9000;
7220 opacity: 1;
7221 transition: opacity 200ms;
7222 visibility: visible;
7223}
7224
7225.bx--modal--danger .bx--modal-container {
7226 border-top-color: #e0182d;
7227}
7228
7229.bx--modal-container {
7230 box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.1);
7231 position: relative;
7232 display: -ms-flexbox;
7233 display: flex;
7234 -ms-flex-direction: column;
7235 flex-direction: column;
7236 background-color: #fff;
7237 border-top: #3d70b2 4px solid;
7238 min-width: 100%;
7239 max-height: 100%;
7240 height: 100%;
7241 padding: 2rem 3% 0rem 3%;
7242}
7243
7244@media (min-width: 600px) {
7245 .bx--modal-container {
7246 height: auto;
7247 min-width: 500px;
7248 max-width: 75%;
7249 max-height: 90%;
7250 padding: 2.5rem 3rem 0 3rem;
7251 }
7252}
7253
7254@media (min-width: 1024px) {
7255 .bx--modal-container {
7256 max-width: 50%;
7257 max-height: 80%;
7258 }
7259}
7260
7261.bx--modal-header {
7262 margin-bottom: 1.5rem;
7263}
7264
7265.bx--modal-header,
7266.bx--modal-footer {
7267 -ms-flex-negative: 0;
7268 flex-shrink: 0;
7269}
7270
7271.bx--modal-header__label {
7272 font-size: 0.75rem;
7273 letter-spacing: 0;
7274 color: #152935;
7275 font-weight: 600;
7276 text-transform: uppercase;
7277 margin-bottom: 0.5rem;
7278}
7279
7280.bx--modal-header__heading {
7281 font-size: 1.75rem;
7282 font-weight: 300;
7283 color: #5a6872;
7284}
7285
7286.bx--modal-content {
7287 overflow-y: auto;
7288 margin-bottom: 3rem;
7289 color: #152935;
7290 font-weight: 400;
7291}
7292
7293.bx--modal-footer {
7294 margin-top: auto;
7295 display: -ms-flexbox;
7296 display: flex;
7297 -ms-flex-pack: end;
7298 justify-content: flex-end;
7299 background-color: #f4f7fb;
7300 margin-left: -1.5rem;
7301 margin-right: -1.5rem;
7302 padding: 2rem 2rem;
7303}
7304
7305@media (min-width: 600px) {
7306 .bx--modal-footer {
7307 margin-left: -3rem;
7308 margin-right: -3rem;
7309 padding: 2rem 3rem;
7310 }
7311}
7312
7313.bx--modal-close {
7314 position: absolute;
7315 top: 1rem;
7316 right: 1rem;
7317 padding: 0;
7318 overflow: hidden;
7319 cursor: pointer;
7320 background-color: transparent;
7321 border: none;
7322 padding: 0.25rem 0.25rem 0.125rem;
7323}
7324
7325.bx--modal-close:focus {
7326 outline: 1px solid #3d70b2;
7327}
7328
7329.bx--modal-close__icon {
7330 fill: #5a6872;
7331}
7332
7333.bx--multi-select.bx--combo-box > .bx--list-box__field {
7334 padding: 0 1rem;
7335}
7336
7337.bx--multi-select.bx--combo-box input[role='combobox'] {
7338 padding: 0;
7339 outline: none;
7340}
7341
7342.bx--inline-notification {
7343 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
7344 -webkit-font-smoothing: antialiased;
7345 -moz-osx-font-smoothing: grayscale;
7346 font-size: 0.875rem;
7347 display: -ms-flexbox;
7348 display: flex;
7349 -ms-flex-pack: justify;
7350 justify-content: space-between;
7351 background-color: transparent;
7352 padding: 0.75rem 1rem;
7353 min-height: 2.5rem;
7354 color: #5a6872;
7355 margin-top: 1rem;
7356 margin-bottom: 1rem;
7357}
7358
7359.bx--inline-notification--error {
7360 border: 1px solid #e0182d;
7361 border-left: 6px solid #e0182d;
7362}
7363
7364.bx--inline-notification--error .bx--inline-notification__icon {
7365 fill: #e0182d;
7366}
7367
7368.bx--inline-notification--success {
7369 border: 1px solid #5aa700;
7370 border-left: 6px solid #5aa700;
7371}
7372
7373.bx--inline-notification--success .bx--inline-notification__icon {
7374 fill: #5aa700;
7375}
7376
7377.bx--inline-notification--info {
7378 border: 1px solid #5aaafa;
7379 border-left: 6px solid #5aaafa;
7380}
7381
7382.bx--inline-notification--info .bx--inline-notification__icon {
7383 fill: #5aaafa;
7384}
7385
7386.bx--inline-notification--warning {
7387 border: 1px solid #efc100;
7388 border-left: 6px solid #efc100;
7389}
7390
7391.bx--inline-notification--warning .bx--inline-notification__icon {
7392 fill: #efc100;
7393}
7394
7395.bx--inline-notification__details {
7396 display: -ms-flexbox;
7397 display: flex;
7398 -ms-flex-align: center;
7399 align-items: center;
7400}
7401
7402.bx--inline-notification__icon {
7403 height: 16px;
7404 width: 16px;
7405 min-width: 22px;
7406}
7407
7408.bx--inline-notification__text-wrapper {
7409 display: -ms-flexbox;
7410 display: flex;
7411 -ms-flex-wrap: wrap;
7412 flex-wrap: wrap;
7413 margin: 0 1rem;
7414}
7415
7416@media (max-width: 640px) {
7417 .bx--inline-notification__text-wrapper {
7418 -ms-flex-direction: column;
7419 flex-direction: column;
7420 width: 100%;
7421 }
7422}
7423
7424.bx--inline-notification__title {
7425 font-size: 0.875rem;
7426 color: #152935;
7427 font-weight: 600;
7428 margin: 0 0.25rem 0 0;
7429 line-height: 1.125;
7430}
7431
7432.bx--inline-notification__subtitle {
7433 font-size: 0.875rem;
7434 line-height: 1.125;
7435}
7436
7437.bx--inline-notification__close-button {
7438 background-color: transparent;
7439 border: none;
7440 cursor: pointer;
7441 padding: 0;
7442 height: 16px;
7443 width: 12px;
7444 position: relative;
7445}
7446
7447.bx--inline-notification__close-button:focus {
7448 outline: 1px solid #3d70b2;
7449}
7450
7451.bx--inline-notification__close-icon {
7452 height: 10px;
7453 width: 10px;
7454 fill: #5a6872;
7455 position: absolute;
7456 top: 3px;
7457 right: 1px;
7458}
7459
7460.bx--toast-notification {
7461 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
7462 -webkit-font-smoothing: antialiased;
7463 -moz-osx-font-smoothing: grayscale;
7464 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
7465 display: -ms-flexbox;
7466 display: flex;
7467 -ms-flex-pack: justify;
7468 justify-content: space-between;
7469 width: 16.875rem;
7470 padding: 1rem 1rem 0.5rem 1rem;
7471 background-color: #fff;
7472 color: #152935;
7473 margin-top: 0.5rem;
7474 margin-bottom: 0.5rem;
7475 margin-right: 1rem;
7476}
7477
7478.bx--toast-notification:first-child {
7479 margin-top: 1rem;
7480}
7481
7482.bx--toast-notification--error {
7483 border-left: 6px solid #e0182d;
7484}
7485
7486.bx--toast-notification--success {
7487 border-left: 6px solid #5aa700;
7488}
7489
7490.bx--toast-notification--info {
7491 border-left: 6px solid #5aaafa;
7492}
7493
7494.bx--toast-notification--warning {
7495 border-left: 6px solid #efc100;
7496}
7497
7498.bx--toast-notification__close-button {
7499 background-color: #fff;
7500 border: none;
7501 cursor: pointer;
7502 margin: 0;
7503 width: 12px;
7504 height: 12px;
7505 position: relative;
7506}
7507
7508.bx--toast-notification__close-button:focus {
7509 outline: 1px solid #3d70b2;
7510}
7511
7512.bx--toast-notification__close-icon,
7513.bx--toast-notification__icon {
7514 height: 1rem;
7515 width: 1rem;
7516 height: 10px;
7517 width: 10px;
7518 fill: #5a6872;
7519 position: absolute;
7520 top: 1px;
7521 right: 1px;
7522}
7523
7524.bx--toast-notification__title {
7525 font-size: 0.875rem;
7526 letter-spacing: 0;
7527 font-weight: 600;
7528 line-height: 1;
7529 padding-bottom: 0.125rem;
7530}
7531
7532.bx--toast-notification__subtitle {
7533 font-size: 0.75rem;
7534 color: #5a6872;
7535 margin-top: 0;
7536 margin-bottom: 1rem;
7537 line-height: 1.2;
7538}
7539
7540.bx--toast-notification__caption {
7541 font-size: 0.75rem;
7542 color: #5a6872;
7543 line-height: 1;
7544}
7545
7546.bx--tooltip--icon {
7547 display: -ms-flexbox;
7548 display: flex;
7549 -ms-flex-align: center;
7550 align-items: center;
7551}
7552
7553.bx--tooltip__label {
7554 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
7555 font-size: 1rem;
7556 display: -ms-inline-flexbox;
7557 display: inline-flex;
7558 -ms-flex-align: center;
7559 align-items: center;
7560 color: #152935;
7561 font-weight: normal;
7562}
7563
7564.bx--tooltip__label .bx--tooltip__trigger {
7565 margin-left: 0.5rem;
7566}
7567
7568.bx--tooltip__trigger {
7569 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
7570 -webkit-font-smoothing: antialiased;
7571 -moz-osx-font-smoothing: grayscale;
7572 letter-spacing: 0;
7573 display: inline-block;
7574 background: none;
7575 -webkit-appearance: none;
7576 -moz-appearance: none;
7577 appearance: none;
7578 border: 0;
7579 padding: 0;
7580 cursor: pointer;
7581 display: -ms-inline-flexbox;
7582 display: inline-flex;
7583 -ms-flex-align: center;
7584 align-items: center;
7585 cursor: pointer;
7586 font-size: 1rem;
7587}
7588
7589.bx--tooltip__trigger::-moz-focus-inner {
7590 border: 0;
7591}
7592
7593.bx--tooltip__trigger:focus {
7594 outline: 1px solid #3d70b2;
7595 fill: #30588c;
7596}
7597
7598.bx--tooltip__trigger path,
7599.bx--tooltip__trigger polygon,
7600.bx--tooltip__trigger circle {
7601 fill: #3d70b2;
7602}
7603
7604.bx--tooltip__trigger:hover, .bx--tooltip__trigger:focus {
7605 color: #152935;
7606}
7607
7608.bx--tooltip__trigger:hover path,
7609.bx--tooltip__trigger:hover polygon,
7610.bx--tooltip__trigger:hover circle, .bx--tooltip__trigger:focus path,
7611.bx--tooltip__trigger:focus polygon,
7612.bx--tooltip__trigger:focus circle {
7613 fill: #30588c;
7614}
7615
7616.bx--tooltip__label--bold {
7617 font-weight: 600;
7618}
7619
7620.bx--tooltip {
7621 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
7622 position: absolute;
7623 display: none;
7624 max-width: 15rem;
7625 background: #fff;
7626 margin-top: 0.25rem;
7627 padding: 1rem;
7628 border: 1px solid #dfe3e6;
7629 border-radius: 0.25rem;
7630 z-index: 10000;
7631 word-wrap: break-word;
7632 color: #152935;
7633}
7634
7635.bx--tooltip p {
7636 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
7637 font-size: 0.875rem;
7638}
7639
7640.bx--tooltip .bx--tooltip__footer {
7641 display: -ms-flexbox;
7642 display: flex;
7643 -ms-flex-pack: justify;
7644 justify-content: space-between;
7645 -ms-flex-align: end;
7646 align-items: flex-end;
7647 margin-top: 1rem;
7648}
7649
7650.bx--tooltip .bx--tooltip__caret {
7651 position: absolute;
7652 background: #fff;
7653 left: 0;
7654 top: -0.3125rem;
7655 right: 0;
7656 transform: rotate(-135deg);
7657 width: 0.6rem;
7658 height: 0.6rem;
7659 border-right: 1px solid #dfe3e6;
7660 border-bottom: 1px solid #dfe3e6;
7661 margin: 0 auto;
7662 content: '';
7663}
7664
7665.bx--tooltip[data-floating-menu-direction='left'] .bx--tooltip__caret {
7666 left: auto;
7667 top: 50%;
7668 right: -0.3125rem;
7669 transform: rotate(-45deg) translate(50%, -50%);
7670}
7671
7672.bx--tooltip[data-floating-menu-direction='top'] .bx--tooltip__caret {
7673 top: auto;
7674 bottom: -0.375rem;
7675 transform: rotate(45deg);
7676}
7677
7678.bx--tooltip[data-floating-menu-direction='right'] .bx--tooltip__caret {
7679 left: -0.3125rem;
7680 top: 50%;
7681 right: auto;
7682 transform: rotate(135deg) translate(-50%, 50%);
7683}
7684
7685.bx--tooltip--shown {
7686 display: block;
7687}
7688
7689.bx--tooltip--definition {
7690 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
7691 font-size: 1.125rem;
7692 position: relative;
7693}
7694
7695.bx--tooltip--definition .bx--tooltip__trigger {
7696 display: -ms-inline-flexbox;
7697 display: inline-flex;
7698 position: relative;
7699 border-bottom: 2px dotted #8897a2;
7700}
7701
7702.bx--tooltip--definition .bx--tooltip__trigger:hover {
7703 border-bottom: 2px dotted #30588c;
7704 cursor: pointer;
7705}
7706
7707.bx--tooltip--definition .bx--tooltip__trigger:hover + .bx--tooltip--definition__top,
7708.bx--tooltip--definition .bx--tooltip__trigger:hover + .bx--tooltip--definition__bottom {
7709 display: block;
7710}
7711
7712.bx--tooltip--definition .bx--tooltip__trigger:focus {
7713 outline: 1px solid #3d70b2;
7714}
7715
7716.bx--tooltip--definition .bx--tooltip__trigger:focus + .bx--tooltip--definition__top,
7717.bx--tooltip--definition .bx--tooltip__trigger:focus + .bx--tooltip--definition__bottom {
7718 display: block;
7719}
7720
7721.bx--tooltip--definition__bottom,
7722.bx--tooltip--definition__top {
7723 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
7724 position: absolute;
7725 z-index: 1;
7726 display: none;
7727 background: #272d33;
7728 max-width: 11rem;
7729 margin-top: 0.75rem;
7730 padding: 0.5rem;
7731 border-radius: 0.25rem;
7732 pointer-events: none;
7733 cursor: pointer;
7734}
7735
7736.bx--tooltip--definition__bottom p,
7737.bx--tooltip--definition__top p {
7738 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
7739 font-size: 0.75rem;
7740 color: #fff;
7741}
7742
7743.bx--tooltip--definition__bottom .bx--tooltip__caret,
7744.bx--tooltip--definition__top .bx--tooltip__caret {
7745 position: absolute;
7746 right: 0;
7747 left: 0;
7748 width: 0.6rem;
7749 height: 0.6rem;
7750 background: #272d33;
7751 margin-left: 1.5rem;
7752}
7753
7754.bx--tooltip--definition__bottom .bx--tooltip__caret {
7755 top: -0.2rem;
7756 transform: rotate(-135deg);
7757}
7758
7759.bx--tooltip--definition__top {
7760 transform: translateY(-100%);
7761 margin-top: -2rem;
7762}
7763
7764.bx--tooltip--definition__top .bx--tooltip__caret {
7765 bottom: -0.2rem;
7766 transform: rotate(45deg);
7767}
7768
7769.bx--tooltip--icon__top,
7770.bx--tooltip--icon__bottom {
7771 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
7772 position: relative;
7773 display: -ms-inline-flexbox;
7774 display: inline-flex;
7775 -ms-flex-align: center;
7776 align-items: center;
7777 cursor: pointer;
7778 overflow: visible;
7779}
7780
7781.bx--tooltip--icon__top path,
7782.bx--tooltip--icon__bottom path {
7783 fill: #3d70b2;
7784}
7785
7786.bx--tooltip--icon__top:before, .bx--tooltip--icon__top:after,
7787.bx--tooltip--icon__bottom:before,
7788.bx--tooltip--icon__bottom:after {
7789 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
7790 position: absolute;
7791 display: none;
7792 background-color: #272d33;
7793}
7794
7795.bx--tooltip--icon__top:before,
7796.bx--tooltip--icon__bottom:before {
7797 right: 0;
7798 left: 0;
7799 width: 0.6rem;
7800 height: 0.6rem;
7801 margin: 0 auto;
7802 content: '';
7803 margin-top: 1px;
7804 margin-left: 50%;
7805}
7806
7807.bx--tooltip--icon__top:after,
7808.bx--tooltip--icon__bottom:after {
7809 font-size: 0.75rem;
7810 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
7811 max-width: 11rem;
7812 margin-left: 50%;
7813 padding: 0.25rem;
7814 border-radius: 4px;
7815 color: #fff;
7816 font-weight: 400;
7817 content: attr(aria-label);
7818 transform: translateX(-50%);
7819 white-space: nowrap;
7820 pointer-events: none;
7821 margin-left: 50%;
7822}
7823
7824.bx--tooltip--icon__top:hover path, .bx--tooltip--icon__top:focus path,
7825.bx--tooltip--icon__bottom:hover path,
7826.bx--tooltip--icon__bottom:focus path {
7827 fill: #30588c;
7828}
7829
7830.bx--tooltip--icon__top:hover:before, .bx--tooltip--icon__top:hover:after, .bx--tooltip--icon__top:focus:before, .bx--tooltip--icon__top:focus:after,
7831.bx--tooltip--icon__bottom:hover:before,
7832.bx--tooltip--icon__bottom:hover:after,
7833.bx--tooltip--icon__bottom:focus:before,
7834.bx--tooltip--icon__bottom:focus:after {
7835 position: absolute;
7836 display: block;
7837}
7838
7839.bx--tooltip--icon__top:focus,
7840.bx--tooltip--icon__bottom:focus {
7841 outline: 1px solid transparent;
7842}
7843
7844.bx--tooltip--icon__top:focus svg,
7845.bx--tooltip--icon__bottom:focus svg {
7846 outline: 1px solid #3d70b2;
7847}
7848
7849.bx--tooltip--icon__top:before {
7850 top: 0;
7851 transform: translate(-50%, calc(-100% - 10px)) rotate(45deg);
7852}
7853
7854.bx--tooltip--icon__top:after {
7855 top: 0;
7856 transform: translate(-50%, calc(-100% - 10px));
7857}
7858
7859.bx--tooltip--icon__bottom:before {
7860 bottom: 0;
7861 transform: translate(-50%, calc(100% + 10px)) rotate(135deg);
7862}
7863
7864.bx--tooltip--icon__bottom:after {
7865 bottom: 0;
7866 transform: translate(-50%, calc(100% + 10px));
7867}
7868
7869.bx--tooltip--icon .bx--tooltip__trigger svg {
7870 margin-left: 0;
7871}
7872
7873.bx--tabs {
7874 font-size: 0.875rem;
7875 -webkit-font-smoothing: antialiased;
7876 -moz-osx-font-smoothing: grayscale;
7877 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
7878 color: #152935;
7879 font-weight: 600;
7880 height: auto;
7881 width: 100%;
7882 position: relative;
7883}
7884
7885@media screen and (min-width: 768px) {
7886 .bx--tabs {
7887 background: none;
7888 min-height: 3.0625rem;
7889 }
7890}
7891
7892.bx--tabs-trigger {
7893 display: -ms-flexbox;
7894 display: flex;
7895 -ms-flex-align: center;
7896 align-items: center;
7897 -ms-flex-pack: justify;
7898 justify-content: space-between;
7899 padding: 0 1rem;
7900 height: 2.5rem;
7901 cursor: pointer;
7902 background-color: #f4f7fb;
7903 box-shadow: 0 1px 0 0 #5a6872;
7904}
7905
7906.bx--tabs-trigger svg {
7907 width: 0.625rem;
7908 height: 0.3125rem;
7909 fill: #3d70b2;
7910}
7911
7912.bx--tabs-trigger:focus {
7913 outline: none;
7914 box-shadow: 0 2px 0 0 #3d70b2;
7915}
7916
7917@media screen and (min-width: 768px) {
7918 .bx--tabs-trigger {
7919 display: none;
7920 }
7921}
7922
7923.bx--tabs--light.bx--tabs-trigger {
7924 background-color: #fff;
7925}
7926
7927.bx--tabs-trigger-text {
7928 text-decoration: none;
7929 font-weight: 600;
7930 color: #152935;
7931}
7932
7933.bx--tabs-trigger-text:focus {
7934 outline: 1px solid #3d70b2;
7935}
7936
7937.bx--tabs__nav {
7938 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
7939 margin: 0;
7940 padding: 0;
7941 position: absolute;
7942 width: 100%;
7943 list-style: none;
7944 display: -ms-flexbox;
7945 display: flex;
7946 -ms-flex-direction: column;
7947 flex-direction: column;
7948 z-index: 7000;
7949 background: #fff;
7950}
7951
7952@media screen and (min-width: 768px) {
7953 .bx--tabs__nav {
7954 font-size: 1rem;
7955 -ms-flex-direction: row;
7956 flex-direction: row;
7957 margin-right: 1rem;
7958 margin-left: 1rem;
7959 background: none;
7960 box-shadow: none;
7961 z-index: auto;
7962 }
7963}
7964
7965@media screen and (min-width: 1200px) {
7966 .bx--tabs__nav {
7967 margin-left: 0;
7968 }
7969}
7970
7971.bx--tabs__nav--hidden {
7972 display: none;
7973}
7974
7975@media screen and (min-width: 768px) {
7976 .bx--tabs__nav--hidden {
7977 display: -ms-flexbox;
7978 display: flex;
7979 }
7980}
7981
7982.bx--tabs__nav-item {
7983 font-size: 0.875rem;
7984 background-color: #fff;
7985 padding: 0;
7986 cursor: pointer;
7987}
7988
7989.bx--tabs__nav-item:hover, .bx--tabs__nav-item:focus {
7990 background-color: rgba(85, 150, 230, 0.1);
7991}
7992
7993@media screen and (min-width: 768px) {
7994 .bx--tabs__nav-item:hover, .bx--tabs__nav-item:focus {
7995 outline: 1px solid transparent;
7996 background: transparent;
7997 }
7998}
7999
8000@media screen and (min-width: 768px) {
8001 .bx--tabs__nav-item {
8002 background: transparent;
8003 padding: 0.75rem 0 0.75rem;
8004 }
8005 .bx--tabs__nav-item + .bx--tabs__nav-item {
8006 margin-left: 3rem;
8007 }
8008}
8009
8010.bx--tabs__nav-item--selected {
8011 border: none;
8012}
8013
8014@media screen and (min-width: 768px) {
8015 .bx--tabs__nav-item--selected {
8016 border-bottom: 2px solid #3d70b2;
8017 }
8018 .bx--tabs__nav-item--selected .bx--tabs__nav-link {
8019 color: #3d70b2;
8020 }
8021 .bx--tabs__nav-item--selected .bx--tabs__nav-link:focus {
8022 color: #3d70b2;
8023 }
8024}
8025
8026.bx--tabs__nav-item:hover .bx--tabs__nav-link {
8027 color: #152935;
8028}
8029
8030@media screen and (min-width: 768px) {
8031 .bx--tabs__nav-item:hover .bx--tabs__nav-link {
8032 color: #3d70b2;
8033 }
8034}
8035
8036.bx--tabs__nav-link {
8037 display: inline-block;
8038 color: #152935;
8039 text-decoration: none;
8040 padding: 1rem;
8041 width: 100%;
8042 white-space: nowrap;
8043 text-overflow: ellipsis;
8044}
8045
8046.bx--tabs__nav-link:focus, .bx--tabs__nav-link:active {
8047 outline: 1px solid transparent;
8048 background-color: #3d70b2;
8049 color: #fff;
8050}
8051
8052@media screen and (min-width: 768px) {
8053 .bx--tabs__nav-link {
8054 padding: 0 0.125rem;
8055 width: auto;
8056 }
8057 .bx--tabs__nav-link:hover {
8058 color: #3d70b2;
8059 }
8060 .bx--tabs__nav-link:focus, .bx--tabs__nav-link:active {
8061 background-color: transparent;
8062 color: #152935;
8063 outline: 1px solid transparent;
8064 box-shadow: 0 0 0 1px #3d70b2;
8065 }
8066}
8067
8068.bx--tabs.bx--skeleton {
8069 pointer-events: none;
8070 cursor: default;
8071}
8072
8073.bx--tabs.bx--skeleton .bx--tabs__nav-link {
8074 position: relative;
8075 border: none;
8076 padding: 0;
8077 box-shadow: none;
8078 pointer-events: none;
8079 background: rgba(61, 112, 178, 0.1);
8080 width: 4.6875rem;
8081 height: 0.75rem;
8082}
8083
8084.bx--tabs.bx--skeleton .bx--tabs__nav-link:hover, .bx--tabs.bx--skeleton .bx--tabs__nav-link:focus, .bx--tabs.bx--skeleton .bx--tabs__nav-link:active {
8085 border: none;
8086 outline: none;
8087 cursor: default;
8088}
8089
8090.bx--tabs.bx--skeleton .bx--tabs__nav-link:before {
8091 content: '';
8092 width: 0%;
8093 height: 100%;
8094 position: absolute;
8095 top: 0;
8096 left: 0;
8097 opacity: 0.3;
8098 background: rgba(61, 112, 178, 0.1);
8099 animation: 3000ms ease-in-out skeleton infinite;
8100}
8101
8102.bx--tabs.bx--skeleton .bx--tabs-trigger {
8103 position: relative;
8104 border: none;
8105 padding: 0;
8106 box-shadow: none;
8107 pointer-events: none;
8108 background: rgba(61, 112, 178, 0.1);
8109 width: 6.25rem;
8110}
8111
8112.bx--tabs.bx--skeleton .bx--tabs-trigger:hover, .bx--tabs.bx--skeleton .bx--tabs-trigger:focus, .bx--tabs.bx--skeleton .bx--tabs-trigger:active {
8113 border: none;
8114 outline: none;
8115 cursor: default;
8116}
8117
8118.bx--tabs.bx--skeleton .bx--tabs-trigger:before {
8119 content: '';
8120 width: 0%;
8121 height: 100%;
8122 position: absolute;
8123 top: 0;
8124 left: 0;
8125 opacity: 0.3;
8126 background: rgba(61, 112, 178, 0.1);
8127 animation: 3000ms ease-in-out skeleton infinite;
8128}
8129
8130.bx--tabs.bx--skeleton .bx--tabs-trigger svg {
8131 position: absolute;
8132 width: 1px;
8133 height: 1px;
8134 padding: 0;
8135 margin: -1px;
8136 overflow: hidden;
8137 clip: rect(0, 0, 0, 0);
8138 border: 0;
8139 visibility: visible;
8140 white-space: nowrap;
8141}
8142
8143.bx--tag {
8144 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
8145 font-size: 0.75rem;
8146 display: -ms-inline-flexbox;
8147 display: inline-flex;
8148 -ms-flex-align: center;
8149 align-items: center;
8150 padding: 0 0.5rem;
8151 height: 1.25rem;
8152 margin: 0.125rem;
8153 border-radius: 0.9375rem;
8154}
8155
8156.bx--tag:not(:first-child) {
8157 margin-left: 0;
8158}
8159
8160.bx--tag--ibm {
8161 background-color: #c0e6ff;
8162 color: #325c80;
8163}
8164
8165.bx--tag--beta {
8166 background-color: #dfe3e6;
8167 color: #394b54;
8168}
8169
8170.bx--tag--third-party {
8171 background-color: #a7fae6;
8172 color: #006d5d;
8173}
8174
8175.bx--tag--local,
8176.bx--tag--dedicated,
8177.bx--tag--custom {
8178 background-color: #eed2ff;
8179 color: #734098;
8180}
8181
8182.bx--tag--experimental {
8183 background-color: #ffd4a0;
8184 color: #a53725;
8185}
8186
8187.bx--tag--community {
8188 background-color: #c8f08f;
8189 color: #2d660a;
8190}
8191
8192.bx--tag--private {
8193 background-color: #fde876;
8194 color: #735f00;
8195}
8196
8197.bx--tag--filter {
8198 background-color: #3d70b2;
8199 color: white;
8200 cursor: pointer;
8201}
8202
8203.bx--tag--filter > svg {
8204 fill: white;
8205 width: 0.5rem;
8206 height: 0.5rem;
8207 margin-left: 0.3125rem;
8208}
8209
8210.bx--tag--filter:focus,
8211.bx--tag--filter:hover {
8212 background-color: #30588c;
8213 outline: none;
8214}
8215
8216.bx--tag.bx--skeleton {
8217 background-color: #dfe3e6;
8218 color: #394b54;
8219 width: 3.75rem;
8220}
8221
8222.bx--tag.bx--skeleton:after {
8223 position: relative;
8224 border: none;
8225 padding: 0;
8226 box-shadow: none;
8227 pointer-events: none;
8228 background: rgba(61, 112, 178, 0.1);
8229 content: '';
8230 height: 0.375rem;
8231 width: 100%;
8232}
8233
8234.bx--tag.bx--skeleton:after:hover, .bx--tag.bx--skeleton:after:focus, .bx--tag.bx--skeleton:after:active {
8235 border: none;
8236 outline: none;
8237 cursor: default;
8238}
8239
8240.bx--tag.bx--skeleton:after:before {
8241 content: '';
8242 width: 0%;
8243 height: 100%;
8244 position: absolute;
8245 top: 0;
8246 left: 0;
8247 opacity: 0.3;
8248 background: rgba(61, 112, 178, 0.1);
8249 animation: 3000ms ease-in-out skeleton infinite;
8250}
8251
8252.bx--left-nav__trigger {
8253 width: 3.75rem;
8254 height: 3.125rem;
8255 position: relative;
8256 transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
8257 cursor: pointer;
8258 z-index: 9999;
8259}
8260
8261.bx--left-nav__trigger:focus {
8262 outline: 0;
8263}
8264
8265.bx--left-nav__trigger:hover, .bx--left-nav__trigger:focus {
8266 background-color: #5aaafa;
8267}
8268
8269.bx--left-nav__trigger:hover span,
8270.bx--left-nav__trigger:hover span:before,
8271.bx--left-nav__trigger:hover span:after, .bx--left-nav__trigger:focus span,
8272.bx--left-nav__trigger:focus span:before,
8273.bx--left-nav__trigger:focus span:after {
8274 background: #fff;
8275}
8276
8277.bx--left-nav__trigger--btn {
8278 position: absolute;
8279 top: 1.5rem;
8280 left: 1.25rem;
8281 width: 100%;
8282 transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
8283 display: -ms-flexbox;
8284 display: flex;
8285}
8286
8287.bx--left-nav__trigger--btn span,
8288.bx--left-nav__trigger--btn span:before,
8289.bx--left-nav__trigger--btn span:after {
8290 height: 0.125rem;
8291 width: 1.25rem;
8292 cursor: pointer;
8293 position: absolute;
8294 display: block;
8295 content: '';
8296 transition: all 250ms ease;
8297}
8298
8299.bx--left-nav__trigger--btn span:before {
8300 top: -0.375rem;
8301}
8302
8303.bx--left-nav__trigger--btn span:after {
8304 bottom: -0.375rem;
8305}
8306
8307.bx--left-nav__trigger--active .bx--left-nav__trigger--btn {
8308 left: 1.125rem;
8309}
8310
8311.bx--left-nav__trigger--active .bx--left-nav__trigger--btn span:before,
8312.bx--left-nav__trigger--active .bx--left-nav__trigger--btn span:after {
8313 top: 0;
8314 width: 1.59125rem;
8315}
8316
8317.bx--left-nav__trigger--active .bx--left-nav__trigger--btn span:before {
8318 transform: rotate(45deg);
8319}
8320
8321.bx--left-nav__trigger--active .bx--left-nav__trigger--btn span:after {
8322 transform: rotate(-45deg);
8323}
8324
8325.bx--left-nav__trigger--apps span,
8326.bx--left-nav__trigger--apps span:before,
8327.bx--left-nav__trigger--apps span:after {
8328 background: #00b4a0;
8329}
8330
8331.bx--left-nav__trigger--apps:focus {
8332 outline: 0;
8333}
8334
8335.bx--left-nav__trigger--apps:hover, .bx--left-nav__trigger--apps:focus {
8336 background-color: #008571;
8337}
8338
8339.bx--left-nav__trigger--apps:hover span,
8340.bx--left-nav__trigger--apps:hover span:before,
8341.bx--left-nav__trigger--apps:hover span:after, .bx--left-nav__trigger--apps:focus span,
8342.bx--left-nav__trigger--apps:focus span:before,
8343.bx--left-nav__trigger--apps:focus span:after {
8344 background: #fff;
8345}
8346
8347.bx--left-nav__trigger--apps.bx--left-nav__trigger--active span {
8348 background: transparent;
8349}
8350
8351.bx--left-nav__trigger--apps.bx--left-nav__trigger--active span:before,
8352.bx--left-nav__trigger--apps.bx--left-nav__trigger--active span:after {
8353 background: #008571;
8354}
8355
8356.bx--left-nav__trigger--apps.bx--left-nav__trigger--active:hover, .bx--left-nav__trigger--apps.bx--left-nav__trigger--active:focus {
8357 background-color: #008571;
8358}
8359
8360.bx--left-nav__trigger--apps.bx--left-nav__trigger--active:hover span:before,
8361.bx--left-nav__trigger--apps.bx--left-nav__trigger--active:hover span:after, .bx--left-nav__trigger--apps.bx--left-nav__trigger--active:focus span:before,
8362.bx--left-nav__trigger--apps.bx--left-nav__trigger--active:focus span:after {
8363 background: #fff;
8364}
8365
8366.bx--left-nav__trigger--services span,
8367.bx--left-nav__trigger--services span:before,
8368.bx--left-nav__trigger--services span:after {
8369 background: #ba8ff7;
8370}
8371
8372.bx--left-nav__trigger--services:focus {
8373 outline: 0;
8374}
8375
8376.bx--left-nav__trigger--services:hover, .bx--left-nav__trigger--services:focus {
8377 background-color: #734098;
8378}
8379
8380.bx--left-nav__trigger--services:hover span,
8381.bx--left-nav__trigger--services:hover span:before,
8382.bx--left-nav__trigger--services:hover span:after, .bx--left-nav__trigger--services:focus span,
8383.bx--left-nav__trigger--services:focus span:before,
8384.bx--left-nav__trigger--services:focus span:after {
8385 background: #fff;
8386}
8387
8388.bx--left-nav__trigger--services.bx--left-nav__trigger--active span {
8389 background: transparent;
8390}
8391
8392.bx--left-nav__trigger--services.bx--left-nav__trigger--active span:before,
8393.bx--left-nav__trigger--services.bx--left-nav__trigger--active span:after {
8394 background: #734098;
8395}
8396
8397.bx--left-nav__trigger--services.bx--left-nav__trigger--active:hover, .bx--left-nav__trigger--services.bx--left-nav__trigger--active:focus {
8398 background-color: #734098;
8399}
8400
8401.bx--left-nav__trigger--services.bx--left-nav__trigger--active:hover span:before,
8402.bx--left-nav__trigger--services.bx--left-nav__trigger--active:hover span:after, .bx--left-nav__trigger--services.bx--left-nav__trigger--active:focus span:before,
8403.bx--left-nav__trigger--services.bx--left-nav__trigger--active:focus span:after {
8404 background: #fff;
8405}
8406
8407.bx--left-nav__trigger--infrastructure span,
8408.bx--left-nav__trigger--infrastructure span:before,
8409.bx--left-nav__trigger--infrastructure span:after {
8410 background: #5aaafa;
8411}
8412
8413.bx--left-nav__trigger--infrastructure:focus {
8414 outline: 0;
8415}
8416
8417.bx--left-nav__trigger--infrastructure:hover, .bx--left-nav__trigger--infrastructure:focus {
8418 background-color: #3d70b2;
8419}
8420
8421.bx--left-nav__trigger--infrastructure:hover span,
8422.bx--left-nav__trigger--infrastructure:hover span:before,
8423.bx--left-nav__trigger--infrastructure:hover span:after, .bx--left-nav__trigger--infrastructure:focus span,
8424.bx--left-nav__trigger--infrastructure:focus span:before,
8425.bx--left-nav__trigger--infrastructure:focus span:after {
8426 background: #fff;
8427}
8428
8429.bx--left-nav__trigger--infrastructure.bx--left-nav__trigger--active span {
8430 background: transparent;
8431}
8432
8433.bx--left-nav__trigger--infrastructure.bx--left-nav__trigger--active span:before,
8434.bx--left-nav__trigger--infrastructure.bx--left-nav__trigger--active span:after {
8435 background: #3d70b2;
8436}
8437
8438.bx--left-nav__trigger--infrastructure.bx--left-nav__trigger--active:hover, .bx--left-nav__trigger--infrastructure.bx--left-nav__trigger--active:focus {
8439 background-color: #3d70b2;
8440}
8441
8442.bx--left-nav__trigger--infrastructure.bx--left-nav__trigger--active:hover span:before,
8443.bx--left-nav__trigger--infrastructure.bx--left-nav__trigger--active:hover span:after, .bx--left-nav__trigger--infrastructure.bx--left-nav__trigger--active:focus span:before,
8444.bx--left-nav__trigger--infrastructure.bx--left-nav__trigger--active:focus span:after {
8445 background: #fff;
8446}
8447
8448.bx--global-header {
8449 box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.1);
8450 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
8451 width: 100%;
8452 position: fixed;
8453 top: 2.25rem;
8454 left: 0;
8455 display: -ms-flexbox;
8456 display: flex;
8457 -ms-flex-pack: justify;
8458 justify-content: space-between;
8459 height: 3.125rem;
8460 line-height: 1.5;
8461 background-color: #152935;
8462 z-index: 9000;
8463}
8464
8465.bx--global-header__title {
8466 display: -ms-flexbox;
8467 display: flex;
8468 -ms-flex-align: center;
8469 align-items: center;
8470}
8471
8472.bx--global-header__title--logo {
8473 display: -ms-flexbox;
8474 display: flex;
8475 -ms-flex-align: center;
8476 align-items: center;
8477 padding: 0 0.5rem;
8478 text-decoration: none;
8479 color: #fff;
8480 position: relative;
8481}
8482
8483.bx--global-header__title--logo:hover .bx--logo__text, .bx--global-header__title--logo:focus .bx--logo__text {
8484 color: #7cc7ff;
8485}
8486
8487.bx--global-header__title--current-page {
8488 -webkit-font-smoothing: antialiased;
8489 -moz-osx-font-smoothing: grayscale;
8490 display: -ms-flexbox;
8491 display: flex;
8492 -ms-flex-align: center;
8493 align-items: center;
8494 font-weight: 400;
8495 font-size: 1.125rem;
8496 line-height: inherit;
8497 color: #5aaafa;
8498}
8499
8500.bx--unified-header--apps .bx--global-header__title--current-page {
8501 color: #00b4a0;
8502}
8503
8504.bx--unified-header--infrastructure .bx--global-header__title--current-page {
8505 color: #5aaafa;
8506}
8507
8508.bx--unified-header--services .bx--global-header__title--current-page {
8509 color: #ba8ff7;
8510}
8511
8512.bx--global-header .bx--logo__image {
8513 cursor: pointer;
8514 position: relative;
8515 margin-right: 1.125rem;
8516}
8517
8518.bx--global-header .bx--logo__text {
8519 font-size: 1.125rem;
8520 -webkit-font-smoothing: antialiased;
8521 -moz-osx-font-smoothing: grayscale;
8522 font-weight: 400;
8523 cursor: pointer;
8524 text-decoration: none;
8525 color: #fff;
8526}
8527
8528.bx--global-header .bx--logo__text--bold {
8529 font-weight: 600;
8530}
8531
8532.bx--global-header__left-container {
8533 display: -ms-flexbox;
8534 display: flex;
8535 -ms-flex-align: center;
8536 align-items: center;
8537}
8538
8539.bx--global-header__right-container {
8540 display: -ms-flexbox;
8541 display: flex;
8542 -ms-flex-align: center;
8543 align-items: center;
8544 padding-right: 1%;
8545 background-color: #152935;
8546}
8547
8548.bx--global-header__menu {
8549 list-style: none;
8550 width: 100%;
8551 display: -ms-flexbox;
8552 display: flex;
8553 -ms-flex-pack: end;
8554 justify-content: flex-end;
8555}
8556
8557.bx--global-header__menu__item {
8558 width: 100%;
8559 -ms-flex: 0 1 100px;
8560 flex: 0 1 100px;
8561}
8562
8563.bx--global-header__menu__item:focus {
8564 outline: 0;
8565 background-color: #2d3f49;
8566 color: #5aaafa;
8567}
8568
8569.bx--global-header__menu__item:last-child .bx--dropdown-list {
8570 right: 0;
8571}
8572
8573.bx--global-header__menu__item--link {
8574 -webkit-font-smoothing: antialiased;
8575 -moz-osx-font-smoothing: grayscale;
8576 font-size: 0.875rem;
8577 font-weight: 600;
8578 display: -ms-flexbox;
8579 display: flex;
8580 -ms-flex-pack: center;
8581 justify-content: center;
8582 -ms-flex-align: center;
8583 align-items: center;
8584 height: 3.125rem;
8585 text-decoration: none;
8586 background-color: #152935;
8587 color: #fff;
8588 padding: 0 1rem;
8589}
8590
8591.bx--global-header__menu__item--link:hover {
8592 color: #5aaafa;
8593}
8594
8595.bx--global-header__menu__item--link:focus {
8596 outline: 0;
8597 background-color: #2d3f49;
8598 color: #5aaafa;
8599}
8600
8601.bx--global-header__menu__item .bx--dropdown {
8602 height: 3.125rem;
8603 background-color: transparent;
8604}
8605
8606.bx--global-header__menu__item .bx--dropdown:focus {
8607 outline: 0;
8608 background-color: #2d3f49;
8609}
8610
8611.bx--global-header__menu__item .bx--dropdown:focus .bx--dropdown__menu-text {
8612 color: #5aaafa;
8613}
8614
8615.bx--global-header__menu__item .bx--dropdown:focus .bx--dropdown__menu-text,
8616.bx--global-header__menu__item .bx--dropdown:focus .bx--dropdown__list {
8617 outline: 0;
8618}
8619
8620.bx--global-header__menu .bx--dropdown-text {
8621 -webkit-font-smoothing: antialiased;
8622 -moz-osx-font-smoothing: grayscale;
8623 display: -ms-flexbox;
8624 display: flex;
8625 -ms-flex-pack: center;
8626 justify-content: center;
8627 padding-top: 0;
8628 padding-right: 1rem;
8629 padding-bottom: 0;
8630 -ms-flex-align: center;
8631 align-items: center;
8632 height: 100%;
8633 z-index: 1000;
8634 color: #fff;
8635}
8636
8637.bx--global-header__menu .bx--dropdown-text:hover {
8638 color: #5aaafa;
8639}
8640
8641.bx--global-header__menu .bx--dropdown-list {
8642 transition: 250ms all cubic-bezier(0.5, 0, 0.1, 1);
8643 transform: translateY(-150%);
8644 opacity: 0;
8645 visibility: hidden;
8646 display: -ms-flexbox;
8647 display: flex;
8648 -ms-flex-direction: column;
8649 flex-direction: column;
8650 position: absolute;
8651 top: 100%;
8652 width: auto;
8653 z-index: -1;
8654 padding-bottom: 0.5rem;
8655}
8656
8657.bx--global-header__menu .bx--dropdown-item {
8658 min-width: 200px;
8659 width: 100%;
8660}
8661
8662.bx--global-header__menu .bx--dropdown-link {
8663 padding: 0.5rem 0.75rem;
8664 color: #fff;
8665}
8666
8667.bx--global-header__menu .bx--dropdown-link:hover {
8668 color: #152935;
8669 background-color: #5aaafa;
8670}
8671
8672.bx--global-header__menu .bx--dropdown--open .bx--dropdown-text {
8673 background-color: #2d3f49;
8674 color: #5aaafa;
8675}
8676
8677.bx--global-header__menu .bx--dropdown--open .bx--dropdown-list {
8678 transform: translateY(0);
8679 opacity: 1;
8680 visibility: visible;
8681 background-color: #2d3f49;
8682}
8683
8684.bx--top-nav {
8685 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
8686 display: -ms-flexbox;
8687 display: flex;
8688 -ms-flex-pack: justify;
8689 justify-content: space-between;
8690 background-color: #0f212e;
8691 width: 100%;
8692 height: 2.25rem;
8693 padding: 0 1rem;
8694 position: fixed;
8695 top: 0;
8696 left: 0;
8697 z-index: 9500;
8698}
8699
8700.bx--top-nav__left-container,
8701.bx--top-nav__right-container {
8702 list-style: none;
8703 display: -ms-flexbox;
8704 display: flex;
8705 -ms-flex-align: center;
8706 align-items: center;
8707 min-width: 50%;
8708}
8709
8710.bx--top-nav__left-container .bx--dropdown,
8711.bx--top-nav__right-container .bx--dropdown {
8712 font-size: 0.75rem;
8713 list-style: none;
8714 background-color: #0f212e;
8715 color: #fff;
8716 height: 100%;
8717 display: -ms-flexbox;
8718 display: flex;
8719 -ms-flex-align: center;
8720 align-items: center;
8721}
8722
8723.bx--top-nav__left-container .bx--dropdown__arrow,
8724.bx--top-nav__right-container .bx--dropdown__arrow {
8725 fill: #fff;
8726 right: 0.75rem;
8727 width: 0.75rem;
8728 height: 1.5rem;
8729}
8730
8731.bx--top-nav__left-container .bx--dropdown-text,
8732.bx--top-nav__right-container .bx--dropdown-text {
8733 -webkit-font-smoothing: antialiased;
8734 -moz-osx-font-smoothing: grayscale;
8735 max-width: 12.5rem;
8736 white-space: nowrap;
8737 text-overflow: ellipsis;
8738 overflow: hidden;
8739 font-weight: 600;
8740}
8741
8742.bx--top-nav__left-container .bx--dropdown-list,
8743.bx--top-nav__right-container .bx--dropdown-list {
8744 width: auto;
8745 position: absolute;
8746 top: 100%;
8747 left: 0;
8748 background-color: #2d3f49;
8749 transition: 250ms all cubic-bezier(0.5, 0, 0.1, 1);
8750 display: -ms-flexbox;
8751 display: flex;
8752 -ms-flex-direction: column;
8753 flex-direction: column;
8754 opacity: 0;
8755 visibility: hidden;
8756 transform: translateY(-50%);
8757 z-index: -1;
8758}
8759
8760.bx--top-nav__left-container .bx--dropdown-item,
8761.bx--top-nav__right-container .bx--dropdown-item {
8762 min-width: 10.625rem;
8763 overflow: hidden;
8764 white-space: nowrap;
8765 text-overflow: ellipsis;
8766}
8767
8768.bx--top-nav__left-container .bx--dropdown-item:hover,
8769.bx--top-nav__right-container .bx--dropdown-item:hover {
8770 background-color: #5aaafa;
8771 color: #152935;
8772}
8773
8774.bx--top-nav__left-container .bx--dropdown-link,
8775.bx--top-nav__right-container .bx--dropdown-link {
8776 color: #fff;
8777}
8778
8779.bx--top-nav__left-container .bx--dropdown--open,
8780.bx--top-nav__right-container .bx--dropdown--open {
8781 background-color: #2d3f49;
8782}
8783
8784.bx--top-nav__left-container .bx--dropdown--open .bx--dropdown-text,
8785.bx--top-nav__right-container .bx--dropdown--open .bx--dropdown-text {
8786 color: #5aaafa;
8787}
8788
8789.bx--top-nav__left-container .bx--dropdown--open .bx--dropdown__arrow,
8790.bx--top-nav__right-container .bx--dropdown--open .bx--dropdown__arrow {
8791 fill: #5aaafa;
8792}
8793
8794.bx--top-nav__left-container .bx--dropdown--open .bx--dropdown-list,
8795.bx--top-nav__right-container .bx--dropdown--open .bx--dropdown-list {
8796 transform: translateY(0);
8797 opacity: 1;
8798 visibility: visible;
8799 background-color: #2d3f49;
8800}
8801
8802.bx--top-nav__left-container__link {
8803 font-size: 0.6875rem;
8804 -webkit-font-smoothing: antialiased;
8805 -moz-osx-font-smoothing: grayscale;
8806 display: -ms-flexbox;
8807 display: flex;
8808 -ms-flex-pack: start;
8809 justify-content: flex-start;
8810 background-color: #0f212e;
8811 -ms-flex-align: start;
8812 align-items: flex-start;
8813 text-decoration: none;
8814 color: #fff;
8815 font-weight: 600;
8816 margin-right: 1rem;
8817}
8818
8819.bx--top-nav__left-container__link:hover, .bx--top-nav__left-container__link:focus {
8820 color: #5aaafa;
8821}
8822
8823.bx--top-nav__left-container__link:hover .bx--top-nav__left-container__link--icon, .bx--top-nav__left-container__link:focus .bx--top-nav__left-container__link--icon {
8824 fill: #5aaafa;
8825}
8826
8827.bx--top-nav__left-container__link--icon {
8828 width: 0.675rem;
8829 height: 0.7rem;
8830 fill: #fff;
8831 margin-right: 0.3rem;
8832}
8833
8834.bx--top-nav__left-container__item:focus {
8835 outline: 0;
8836}
8837
8838.bx--top-nav__left-container .bx--dropdown:focus, .bx--top-nav__left-container .bx--dropdown:hover {
8839 outline: 0;
8840}
8841
8842.bx--top-nav__left-container .bx--dropdown:focus .bx--dropdown__arrow use, .bx--top-nav__left-container .bx--dropdown:hover .bx--dropdown__arrow use {
8843 fill: #5aaafa;
8844}
8845
8846.bx--top-nav__left-container .bx--dropdown:focus .bx--dropdown-text, .bx--top-nav__left-container .bx--dropdown:hover .bx--dropdown-text {
8847 background-color: #2d3f49;
8848 color: #5aaafa;
8849}
8850
8851.bx--top-nav__left-container .bx--dropdown-list {
8852 padding-bottom: 0.5rem;
8853}
8854
8855.bx--top-nav__left-container .bx--dropdown__arrow {
8856 top: 0.3rem;
8857 left: 0.75rem;
8858 opacity: 0;
8859 transform: rotate(0);
8860 animation: 250ms cubic-bezier(0.64, 0.57, 0.67, 1.53) 650ms 1 normal forwards fade;
8861}
8862
8863.bx--top-nav__left-container .bx--dropdown-text {
8864 animation: 250ms cubic-bezier(0.6, 0.22, 0.38, 2.03) 1 normal forwards pop-in;
8865 opacity: 0;
8866 transform: scale(0.5);
8867 padding: 0.725rem 1rem 0.725rem 2rem;
8868}
8869
8870.bx--top-nav__left-container .bx--dropdown-link {
8871 padding: 0.6rem 0.75rem;
8872}
8873
8874.bx--top-nav__left-container .bx--dropdown-link:hover, .bx--top-nav__left-container .bx--dropdown-link:focus {
8875 background-color: #5aaafa;
8876 color: #152935;
8877}
8878
8879.bx--top-nav__right-container {
8880 -ms-flex-pack: end;
8881 justify-content: flex-end;
8882}
8883
8884.bx--top-nav__right-container__item[data-trial] .bx--dropdown-text,
8885.bx--top-nav__right-container__item[data-credit] .bx--dropdown-text {
8886 padding: 0.75rem 2rem 0.75rem 1rem;
8887 color: #fff;
8888}
8889
8890.bx--top-nav__right-container__item[data-trial] .bx--dropdown-list,
8891.bx--top-nav__right-container__item[data-credit] .bx--dropdown-list {
8892 left: initial;
8893 outline: 0;
8894 right: 0;
8895 min-width: 20.3125rem;
8896 transform: translateY(-10%);
8897}
8898
8899.bx--top-nav__right-container__item[data-trial] .bx--dropdown__arrow,
8900.bx--top-nav__right-container__item[data-credit] .bx--dropdown__arrow {
8901 top: 0.5rem;
8902}
8903
8904.bx--top-nav__right-container__item[data-trial] .bx--dropdown--open .bx--dropdown-list,
8905.bx--top-nav__right-container__item[data-credit] .bx--dropdown--open .bx--dropdown-list {
8906 transform: translateY(0);
8907}
8908
8909.bx--top-nav__right-container__item[data-trial] .bx--dropdown--open .bx--dropdown-text,
8910.bx--top-nav__right-container__item[data-credit] .bx--dropdown--open .bx--dropdown-text {
8911 color: #5aaafa;
8912}
8913
8914.bx--top-nav__right-container__item[data-trial] .bx--dropdown:hover,
8915.bx--top-nav__right-container__item[data-trial] .bx--dropdown:focus,
8916.bx--top-nav__right-container__item[data-credit] .bx--dropdown:hover,
8917.bx--top-nav__right-container__item[data-credit] .bx--dropdown:focus {
8918 outline: 0;
8919 background-color: #2d3f49;
8920}
8921
8922.bx--top-nav__right-container__item[data-trial] .bx--dropdown:hover .bx--dropdown-text,
8923.bx--top-nav__right-container__item[data-trial] .bx--dropdown:focus .bx--dropdown-text,
8924.bx--top-nav__right-container__item[data-credit] .bx--dropdown:hover .bx--dropdown-text,
8925.bx--top-nav__right-container__item[data-credit] .bx--dropdown:focus .bx--dropdown-text {
8926 color: #5aaafa;
8927}
8928
8929.bx--top-nav__right-container__item[data-trial] .bx--dropdown:hover .bx--dropdown__arrow use,
8930.bx--top-nav__right-container__item[data-trial] .bx--dropdown:focus .bx--dropdown__arrow use,
8931.bx--top-nav__right-container__item[data-credit] .bx--dropdown:hover .bx--dropdown__arrow use,
8932.bx--top-nav__right-container__item[data-credit] .bx--dropdown:focus .bx--dropdown__arrow use {
8933 fill: #5aaafa;
8934}
8935
8936.bx--top-nav__right-container__item[data-trial] .bx--dropdown__trial-content,
8937.bx--top-nav__right-container__item[data-trial] .bx--dropdown__credit-content,
8938.bx--top-nav__right-container__item[data-credit] .bx--dropdown__trial-content,
8939.bx--top-nav__right-container__item[data-credit] .bx--dropdown__credit-content {
8940 cursor: auto;
8941 display: -ms-flexbox;
8942 display: flex;
8943 -ms-flex-direction: column;
8944 flex-direction: column;
8945 padding: 1rem;
8946}
8947
8948.bx--top-nav__right-container__item[data-trial] .bx--dropdown__trial-content:focus, .bx--top-nav__right-container__item[data-trial] .bx--dropdown__trial-content:hover,
8949.bx--top-nav__right-container__item[data-trial] .bx--dropdown__credit-content:focus,
8950.bx--top-nav__right-container__item[data-trial] .bx--dropdown__credit-content:hover,
8951.bx--top-nav__right-container__item[data-credit] .bx--dropdown__trial-content:focus,
8952.bx--top-nav__right-container__item[data-credit] .bx--dropdown__trial-content:hover,
8953.bx--top-nav__right-container__item[data-credit] .bx--dropdown__credit-content:focus,
8954.bx--top-nav__right-container__item[data-credit] .bx--dropdown__credit-content:hover {
8955 outline: 0;
8956 background-color: initial;
8957 color: #fff;
8958}
8959
8960.bx--top-nav__right-container__item[data-trial] .bx--dropdown__trial-content--desc,
8961.bx--top-nav__right-container__item[data-trial] .bx--dropdown__credit-content--desc,
8962.bx--top-nav__right-container__item[data-credit] .bx--dropdown__trial-content--desc,
8963.bx--top-nav__right-container__item[data-credit] .bx--dropdown__credit-content--desc {
8964 margin-bottom: 1rem;
8965}
8966
8967.bx--top-nav__right-container__item[data-trial] .bx--dropdown__trial-content .bx--link,
8968.bx--top-nav__right-container__item[data-trial] .bx--dropdown__credit-content .bx--link,
8969.bx--top-nav__right-container__item[data-credit] .bx--dropdown__trial-content .bx--link,
8970.bx--top-nav__right-container__item[data-credit] .bx--dropdown__credit-content .bx--link {
8971 font-size: 0.6875rem;
8972 color: #5aaafa;
8973 margin-top: 1rem;
8974 text-align: center;
8975}
8976
8977.bx--top-nav__right-container__item[data-trial] .bx--dropdown__trial-content--desc,
8978.bx--top-nav__right-container__item[data-credit] .bx--dropdown__trial-content--desc {
8979 font-size: 0.75rem;
8980}
8981
8982.bx--top-nav__right-container__item[data-trial] .bx--dropdown__credit-content div .bx--dropdown__credit-content--heading,
8983.bx--top-nav__right-container__item[data-credit] .bx--dropdown__credit-content div .bx--dropdown__credit-content--heading {
8984 -webkit-font-smoothing: antialiased;
8985 -moz-osx-font-smoothing: grayscale;
8986 font-size: 0.75rem;
8987 font-weight: 600;
8988}
8989
8990.bx--top-nav__right-container__item[data-trial] .bx--dropdown__credit-content div .bx--dropdown__credit-content--desc,
8991.bx--top-nav__right-container__item[data-credit] .bx--dropdown__credit-content div .bx--dropdown__credit-content--desc {
8992 font-size: 0.875rem;
8993}
8994
8995.bx--top-nav__right-container__item[data-trial] .bx--dropdown__credit-content div:last-child .bx--dropdown__credit-content--desc,
8996.bx--top-nav__right-container__item[data-credit] .bx--dropdown__credit-content div:last-child .bx--dropdown__credit-content--desc {
8997 margin-bottom: 0;
8998}
8999
9000.bx--top-nav__right-container__item:last-child .bx--dropdown:focus, .bx--top-nav__right-container__item:last-child .bx--dropdown:hover {
9001 background-color: #2d3f49;
9002 outline: 0;
9003}
9004
9005.bx--top-nav__right-container__item:last-child .bx--dropdown__arrow {
9006 transform-origin: 50% 40%;
9007}
9008
9009.bx--top-nav__right-container__item:last-child .bx--dropdown__arrow use {
9010 fill: #5aaafa;
9011}
9012
9013.bx--top-nav__right-container__item:last-child .bx--dropdown-text--profile-image {
9014 height: 2.25rem;
9015 width: 2.25rem;
9016 min-height: 2.25rem;
9017 min-width: 2.25rem;
9018 display: -ms-flexbox;
9019 display: flex;
9020 -ms-flex-align: center;
9021 align-items: center;
9022 -ms-flex-pack: center;
9023 justify-content: center;
9024 margin: 0rem 1rem;
9025}
9026
9027.bx--top-nav__right-container__item:last-child .bx--dropdown-text--profile-image .profile-image {
9028 display: -ms-flexbox;
9029 display: flex;
9030 -ms-flex-align: center;
9031 align-items: center;
9032 border-radius: 50%;
9033 overflow: hidden;
9034}
9035
9036.bx--top-nav__right-container__item:last-child .bx--dropdown-text--profile-image .profile-image svg,
9037.bx--top-nav__right-container__item:last-child .bx--dropdown-text--profile-image .profile-image img {
9038 fill: #fff;
9039 max-height: 1.5rem;
9040 max-width: 1.5rem;
9041}
9042
9043.bx--top-nav__right-container__item:last-child .bx--dropdown-list {
9044 right: 0;
9045 left: inherit;
9046 padding: 1rem;
9047 min-width: 225px;
9048}
9049
9050.bx--top-nav__right-container__item:last-child .bx--dropdown-item {
9051 display: -ms-flexbox;
9052 display: flex;
9053 -ms-flex-pack: justify;
9054 justify-content: space-between;
9055}
9056
9057.bx--top-nav__right-container__item:last-child .bx--dropdown-item svg {
9058 min-height: 3rem;
9059 min-width: 3rem;
9060}
9061
9062.bx--top-nav__right-container__item:last-child .bx--dropdown-item:hover {
9063 background-color: inherit;
9064 color: inherit;
9065}
9066
9067.bx--top-nav__right-container__item[data-credit] .bx--dropdown-list {
9068 min-width: 0;
9069 width: 100%;
9070}
9071
9072.bx--dropdown__profile-dropdown--picture {
9073 max-width: 3rem;
9074 max-height: 3rem;
9075 border-radius: 50%;
9076 width: 100%;
9077 fill: #fff;
9078}
9079
9080.bx--dropdown__profile-dropdown--information {
9081 margin-left: 1rem;
9082}
9083
9084.bx--dropdown__profile-dropdown--information p {
9085 -webkit-font-smoothing: antialiased;
9086 -moz-osx-font-smoothing: grayscale;
9087 font-size: 0.875rem;
9088 font-weight: 600;
9089}
9090
9091.bx--dropdown__profile-dropdown__container {
9092 display: -ms-flexbox;
9093 display: flex;
9094 -ms-flex-pack: start;
9095 justify-content: flex-start;
9096 -ms-flex-align: center;
9097 align-items: center;
9098}
9099
9100.bx--dropdown__profile-dropdown__container a {
9101 font-size: 0.75rem;
9102 color: #5aaafa;
9103}
9104
9105.bx--dropdown__profile-dropdown__container a:hover {
9106 color: #7cc7ff;
9107}
9108
9109.bx--dropdown__profile-dropdown__container p {
9110 padding: 0 0.5rem;
9111}
9112
9113@keyframes pop-in {
9114 100% {
9115 opacity: 1;
9116 transform: scale(1);
9117 }
9118}
9119
9120@keyframes fade {
9121 100% {
9122 opacity: 1;
9123 }
9124}
9125
9126.bx--top-nav__left-container--item:nth-child(1) .bx--dropdown-text {
9127 animation-delay: 200ms;
9128}
9129
9130.bx--top-nav__left-container--item:nth-child(2) .bx--dropdown-text {
9131 animation-delay: 300ms;
9132}
9133
9134.bx--top-nav__left-container--item:nth-child(3) .bx--dropdown-text {
9135 animation-delay: 400ms;
9136}
9137
9138.bx--global-header__left-nav {
9139 box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1);
9140 position: fixed;
9141 z-index: 9000;
9142 width: 15.625rem;
9143 top: 2.25rem;
9144 left: 0;
9145 height: 100%;
9146 transform: translate3d(-100%, 0, 0);
9147 transition: 300ms cubic-bezier(0.5, 0, 0.1, 1);
9148 box-shadow: none;
9149 visibility: hidden;
9150}
9151
9152.bx--global-header__left-nav.bx--left-nav--active {
9153 transform: translate3d(0, 0, 0);
9154 box-shadow: 0px 1px 15px 2px rgba(0, 0, 0, 0.1);
9155 visibility: visible;
9156}
9157
9158.bx--left-nav {
9159 display: block;
9160 width: 100%;
9161 height: 100%;
9162 background-color: #fff;
9163 padding: 0 0 4rem 0;
9164 overflow-y: auto;
9165 overflow-x: hidden;
9166}
9167
9168.bx--left-nav__close-row {
9169 height: 3.125rem;
9170 width: 100%;
9171 background-color: #fff;
9172}
9173
9174.bx--left-nav__header {
9175 -ms-flex-align: center;
9176 align-items: center;
9177 height: 3.125rem;
9178 cursor: pointer;
9179 position: relative;
9180 display: -ms-flexbox;
9181 display: flex;
9182 background-color: #0f212e;
9183 -ms-flex-pack: justify;
9184 justify-content: space-between;
9185 top: 0;
9186 left: 0;
9187 width: 100%;
9188 padding: 1.125rem 1.25rem;
9189}
9190
9191.bx--left-nav__header[data-left-nav-current-section='apps'] {
9192 background-color: #008571;
9193}
9194
9195.bx--left-nav__header[data-left-nav-current-section='infrastructure'] {
9196 background-color: #3d70b2;
9197}
9198
9199.bx--left-nav__header[data-left-nav-current-section='services'] {
9200 background-color: #734098;
9201}
9202
9203.bx--left-nav__header--title {
9204 font-size: 1rem;
9205 -webkit-font-smoothing: antialiased;
9206 -moz-osx-font-smoothing: grayscale;
9207 color: #fff;
9208 font-weight: 600;
9209 margin-right: auto;
9210}
9211
9212.bx--left-nav__header--taxonomy-icon {
9213 width: 1.5rem;
9214 height: 1.5rem;
9215 fill: #fff;
9216 margin-right: 1rem;
9217}
9218
9219.bx--left-nav__header--close-icon {
9220 width: 0.875rem;
9221 height: 0.875rem;
9222 display: block;
9223 fill: #fff;
9224}
9225
9226.bx--left-nav__sections {
9227 list-style: none;
9228 padding: 0 0 1rem;
9229 width: 100%;
9230 z-index: 8000;
9231 position: relative;
9232 border-bottom: 1px solid #8897a2;
9233 background-color: #fff;
9234}
9235
9236.bx--left-nav__section {
9237 display: -ms-flexbox;
9238 display: flex;
9239 -ms-flex-align: center;
9240 align-items: center;
9241 cursor: pointer;
9242 transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
9243 background-color: #fff;
9244}
9245
9246.bx--left-nav__section:hover[data-left-nav-section='apps'] {
9247 background-color: #008571;
9248}
9249
9250.bx--left-nav__section:hover[data-left-nav-section='services'] {
9251 background-color: #734098;
9252}
9253
9254.bx--left-nav__section:hover[data-left-nav-section='infrastructure'] {
9255 background-color: #4178be;
9256}
9257
9258.bx--left-nav__section:hover .bx--left-nav__section--link {
9259 -webkit-font-smoothing: antialiased;
9260 -moz-osx-font-smoothing: grayscale;
9261 font-weight: 600;
9262 color: #fff;
9263}
9264
9265.bx--left-nav__section:hover .bx--left-nav__section--taxonomy-icon {
9266 fill: #fff;
9267}
9268
9269.bx--left-nav__section--active, .bx--left-nav__section--transition {
9270 -ms-flex-pack: start;
9271 justify-content: flex-start;
9272 -ms-flex-align: center;
9273 align-items: center;
9274 cursor: pointer;
9275 position: relative;
9276 display: -ms-flexbox;
9277 display: flex;
9278 background-color: #fff;
9279 top: 0;
9280 left: 0;
9281 width: 100%;
9282 padding: 0.8rem 0;
9283}
9284
9285.bx--left-nav__section--active[data-left-nav-section='apps'], [data-left-nav-section='apps'].bx--left-nav__section--transition {
9286 background-color: #008571;
9287}
9288
9289.bx--left-nav__section--active[data-left-nav-section='infrastructure'], [data-left-nav-section='infrastructure'].bx--left-nav__section--transition {
9290 background-color: #3d70b2;
9291}
9292
9293.bx--left-nav__section--active[data-left-nav-section='services'], [data-left-nav-section='services'].bx--left-nav__section--transition {
9294 background-color: #734098;
9295}
9296
9297.bx--left-nav__section--transition {
9298 position: absolute;
9299 z-index: 9999;
9300 transition: all 0.3s cubic-bezier(0, 0, 0.25, 1);
9301}
9302
9303.bx--left-nav__section--transition--50 {
9304 transform: translateY(100px);
9305}
9306
9307.bx--left-nav__section--transition--100 {
9308 transform: translateY(150px);
9309}
9310
9311.bx--left-nav__section--transition--0 {
9312 transform: translateY(50px);
9313}
9314
9315.bx--left-nav__section--transition .bx--left-nav__section--taxonomy-icon {
9316 fill: #fff;
9317}
9318
9319.bx--left-nav__section--taxonomy-icon {
9320 width: 1.5rem;
9321 height: 1.5rem;
9322 fill: #152935;
9323 margin-right: 1rem;
9324}
9325
9326.bx--left-nav__section--anchor {
9327 display: -ms-flexbox;
9328 display: flex;
9329 width: 100%;
9330 padding: 0 1.25rem;
9331 -ms-flex-align: center;
9332 align-items: center;
9333 text-decoration: none;
9334}
9335
9336.bx--left-nav__section--link {
9337 font-size: 1rem;
9338 display: -ms-flexbox;
9339 display: flex;
9340 -ms-flex-align: center;
9341 align-items: center;
9342 color: #152935;
9343 height: 3.125rem;
9344}
9345
9346.bx--left-nav__main-nav {
9347 list-style: none;
9348 display: -ms-flexbox;
9349 display: flex;
9350 -ms-flex-direction: column;
9351 flex-direction: column;
9352 margin-bottom: 5rem;
9353 margin-top: 0;
9354 transition: all 250ms cubic-bezier(0, 0, 0.25, 1);
9355 padding-top: 1rem;
9356 background-color: #fff;
9357}
9358
9359.bx--left-nav__main-nav--hidden {
9360 display: none;
9361}
9362
9363.bx--left-nav__main-nav--top {
9364 margin-top: -100vh;
9365}
9366
9367.bx--main-nav__parent-item {
9368 opacity: 1;
9369 transition: opacity 200ms cubic-bezier(0.5, 0, 0.1, 1);
9370 cursor: pointer;
9371 width: 100%;
9372 padding: 0;
9373 margin-bottom: 0.25rem;
9374 background-color: #fff;
9375}
9376
9377.bx--main-nav__parent-item--fade {
9378 opacity: 0;
9379}
9380
9381.bx--main-nav__parent-item--hidden {
9382 display: none;
9383}
9384
9385.bx--main-nav__parent-item--expanded .bx--parent-item__link--down-icon svg {
9386 transform: rotate(180deg);
9387}
9388
9389.bx--parent-item__link {
9390 font-size: 0.875rem;
9391 font-weight: 400;
9392 display: -ms-flexbox;
9393 display: flex;
9394 -ms-flex-align: center;
9395 align-items: center;
9396 -ms-flex-pack: start;
9397 justify-content: flex-start;
9398 text-decoration: none;
9399 padding: 0.5rem 1.25rem;
9400 transition: background-color 250ms cubic-bezier(0.5, 0, 0.1, 1);
9401 color: #152935;
9402}
9403
9404.bx--parent-item__link .bx--parent-item__link--taxonomy-icon {
9405 width: 1.5rem;
9406 height: 1.5rem;
9407 transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
9408 margin-right: 1rem;
9409 fill: #152935;
9410}
9411
9412.bx--parent-item__link .bx--parent-item__link--down-icon {
9413 display: -ms-flexbox;
9414 display: flex;
9415 margin-left: auto;
9416}
9417
9418.bx--parent-item__link .bx--parent-item__link--down-icon svg {
9419 width: 0.625rem;
9420 height: 0.625rem;
9421 transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
9422 fill: #152935;
9423}
9424
9425.bx--left-nav__main-nav[data-left-nav-list='apps'] .bx--parent-item__link:hover {
9426 color: #008571;
9427}
9428
9429.bx--left-nav__main-nav[data-left-nav-list='apps'] .bx--parent-item__link:hover .bx--parent-item__link--taxonomy-icon,
9430.bx--left-nav__main-nav[data-left-nav-list='apps'] .bx--parent-item__link:hover .bx--parent-item__link--down-icon svg {
9431 fill: #008571;
9432}
9433
9434.bx--left-nav__main-nav[data-left-nav-list='services'] .bx--parent-item__link:hover {
9435 color: #734098;
9436}
9437
9438.bx--left-nav__main-nav[data-left-nav-list='services'] .bx--parent-item__link:hover .bx--parent-item__link--taxonomy-icon,
9439.bx--left-nav__main-nav[data-left-nav-list='services'] .bx--parent-item__link:hover .bx--parent-item__link--down-icon svg {
9440 fill: #734098;
9441}
9442
9443.bx--left-nav__main-nav[data-left-nav-list='infrastructure'] .bx--parent-item__link:hover {
9444 color: #3d70b2;
9445}
9446
9447.bx--left-nav__main-nav[data-left-nav-list='infrastructure'] .bx--parent-item__link:hover .bx--parent-item__link--taxonomy-icon,
9448.bx--left-nav__main-nav[data-left-nav-list='infrastructure'] .bx--parent-item__link:hover .bx--parent-item__link--down-icon svg {
9449 fill: #3d70b2;
9450}
9451
9452.bx--main-nav__parent-item.bx--active-list-item .bx--parent-item__link {
9453 color: #fff;
9454}
9455
9456.bx--left-nav__main-nav[data-left-nav-list='apps'] .bx--main-nav__parent-item.bx--active-list-item .bx--parent-item__link {
9457 background-color: #008571;
9458}
9459
9460.bx--left-nav__main-nav[data-left-nav-list='apps'] .bx--main-nav__parent-item.bx--active-list-item .bx--parent-item__link:hover {
9461 color: #fff;
9462}
9463
9464.bx--left-nav__main-nav[data-left-nav-list='apps'] .bx--main-nav__parent-item.bx--active-list-item .bx--parent-item__link:hover .bx--parent-item__link--taxonomy-icon,
9465.bx--left-nav__main-nav[data-left-nav-list='apps'] .bx--main-nav__parent-item.bx--active-list-item .bx--parent-item__link:hover .bx--parent-item__link--down-icon svg {
9466 fill: #fff;
9467}
9468
9469.bx--left-nav__main-nav[data-left-nav-list='services'] .bx--main-nav__parent-item.bx--active-list-item .bx--parent-item__link {
9470 background-color: #734098;
9471}
9472
9473.bx--left-nav__main-nav[data-left-nav-list='services'] .bx--main-nav__parent-item.bx--active-list-item .bx--parent-item__link:hover {
9474 color: #fff;
9475}
9476
9477.bx--left-nav__main-nav[data-left-nav-list='services'] .bx--main-nav__parent-item.bx--active-list-item .bx--parent-item__link:hover .bx--parent-item__link--taxonomy-icon,
9478.bx--left-nav__main-nav[data-left-nav-list='services'] .bx--main-nav__parent-item.bx--active-list-item .bx--parent-item__link:hover .bx--parent-item__link--down-icon svg {
9479 fill: #fff;
9480}
9481
9482.bx--left-nav__main-nav[data-left-nav-list='infrastructure'] .bx--main-nav__parent-item.bx--active-list-item .bx--parent-item__link {
9483 background-color: #3d70b2;
9484}
9485
9486.bx--left-nav__main-nav[data-left-nav-list='infrastructure'] .bx--main-nav__parent-item.bx--active-list-item .bx--parent-item__link:hover {
9487 color: #fff;
9488}
9489
9490.bx--left-nav__main-nav[data-left-nav-list='infrastructure'] .bx--main-nav__parent-item.bx--active-list-item .bx--parent-item__link:hover .bx--parent-item__link--taxonomy-icon,
9491.bx--left-nav__main-nav[data-left-nav-list='infrastructure'] .bx--main-nav__parent-item.bx--active-list-item .bx--parent-item__link:hover .bx--parent-item__link--down-icon svg {
9492 fill: #fff;
9493}
9494
9495.bx--main-nav__parent-item.bx--active-list-item .bx--parent-item__link--taxonomy-icon {
9496 fill: #fff;
9497}
9498
9499.bx--main-nav__parent-item.bx--active-list-item .bx--parent-item__link--down-icon svg {
9500 fill: #fff;
9501}
9502
9503.bx--main-nav__parent-item.bx--active-list-item:hover {
9504 color: #fff;
9505}
9506
9507.bx--main-nav__nested-list {
9508 display: -ms-flexbox;
9509 display: flex;
9510 -ms-flex-direction: column;
9511 flex-direction: column;
9512 margin-top: 0;
9513 list-style: none;
9514 max-height: 0;
9515 transition: 300ms cubic-bezier(0.5, 0, 0.1, 1);
9516 padding: 0;
9517 opacity: 0;
9518 overflow: hidden;
9519 margin-bottom: 0;
9520}
9521
9522.bx--main-nav__parent-item--expanded .bx--main-nav__nested-list {
9523 max-height: 20rem;
9524 transition: 300ms cubic-bezier(0.5, 0, 0.1, 1);
9525 opacity: 1;
9526 margin-top: 0.5rem;
9527 overflow: visible;
9528}
9529
9530.bx--main-nav__parent-item--expanded .bx--main-nav__nested-list .bx--nested-list__item {
9531 opacity: 1;
9532}
9533
9534.bx--nested-list__item {
9535 width: 100%;
9536 position: static;
9537 margin-bottom: 0.25rem;
9538 padding: 0;
9539 transition: 250ms;
9540 opacity: 0;
9541}
9542
9543.bx--nested-list__item--link {
9544 font-size: 0.875rem;
9545 color: #152935;
9546 padding: 0.5rem 1.35rem 0.5rem 2rem;
9547 font-weight: 400;
9548 display: -ms-flexbox;
9549 display: flex;
9550 -ms-flex-align: center;
9551 align-items: center;
9552 -ms-flex-pack: justify;
9553 justify-content: space-between;
9554 text-decoration: none;
9555 position: relative;
9556 margin-right: auto;
9557}
9558
9559.bx--left-nav__main-nav[data-left-nav-list='apps'] .bx--nested-list__item--link:hover {
9560 color: #008571;
9561}
9562
9563.bx--left-nav__main-nav[data-left-nav-list='apps'] .bx--nested-list__item--link:hover .bx--left-nav-list__item-link--taxonomy-icon {
9564 fill: #008571;
9565}
9566
9567.bx--left-nav__main-nav[data-left-nav-list='services'] .bx--nested-list__item--link:hover {
9568 color: #734098;
9569}
9570
9571.bx--left-nav__main-nav[data-left-nav-list='services'] .bx--nested-list__item--link:hover .bx--left-nav-list__item-link--taxonomy-icon {
9572 fill: #734098;
9573}
9574
9575.bx--left-nav__main-nav[data-left-nav-list='infrastructure'] .bx--nested-list__item--link:hover {
9576 color: #3d70b2;
9577}
9578
9579.bx--left-nav__main-nav[data-left-nav-list='infrastructure'] .bx--nested-list__item--link:hover .bx--left-nav-list__item-link--taxonomy-icon {
9580 fill: #3d70b2;
9581}
9582
9583.bx--nested-list__item--icon svg {
9584 width: 0.625rem;
9585 height: 0.625rem;
9586 fill: #152935;
9587}
9588
9589.bx--left-nav__main-nav[data-left-nav-list='apps'] .bx--nested-list__item.bx--active-list-item .bx--nested-list__item--link {
9590 background-color: #008571;
9591}
9592
9593.bx--left-nav__main-nav[data-left-nav-list='apps'] .bx--nested-list__item.bx--active-list-item .bx--nested-list__item--link:hover {
9594 color: #fff;
9595}
9596
9597.bx--left-nav__main-nav[data-left-nav-list='apps'] .bx--nested-list__item.bx--active-list-item .bx--nested-list__item--link:hover .bx--parent-item__link--taxonomy-icon {
9598 fill: #fff;
9599}
9600
9601.bx--left-nav__main-nav[data-left-nav-list='services'] .bx--nested-list__item.bx--active-list-item .bx--nested-list__item--link {
9602 background-color: #734098;
9603}
9604
9605.bx--left-nav__main-nav[data-left-nav-list='services'] .bx--nested-list__item.bx--active-list-item .bx--nested-list__item--link:hover {
9606 color: #fff;
9607}
9608
9609.bx--left-nav__main-nav[data-left-nav-list='services'] .bx--nested-list__item.bx--active-list-item .bx--nested-list__item--link:hover .bx--parent-item__link--taxonomy-icon {
9610 fill: #fff;
9611}
9612
9613.bx--left-nav__main-nav[data-left-nav-list='infrastructure'] .bx--nested-list__item.bx--active-list-item .bx--nested-list__item--link {
9614 background-color: #3d70b2;
9615}
9616
9617.bx--left-nav__main-nav[data-left-nav-list='infrastructure'] .bx--nested-list__item.bx--active-list-item .bx--nested-list__item--link:hover {
9618 color: #fff;
9619}
9620
9621.bx--left-nav__main-nav[data-left-nav-list='infrastructure'] .bx--nested-list__item.bx--active-list-item .bx--nested-list__item--link:hover .bx--parent-item__link--taxonomy-icon {
9622 fill: #fff;
9623}
9624
9625.bx--nested-list__item.bx--active-list-item .bx--nested-list__item--icon svg {
9626 fill: #152935;
9627}
9628
9629.bx--nested-list__flyout-menu {
9630 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
9631 display: none;
9632 min-width: auto;
9633 white-space: nowrap;
9634 outline: none;
9635 position: absolute;
9636 z-index: 9999;
9637 color: #fff;
9638}
9639
9640.bx--nested-list__flyout-menu:before {
9641 content: '';
9642 display: block;
9643 position: absolute;
9644 width: 120%;
9645 height: 120%;
9646 top: -3rem;
9647 left: 0;
9648 padding: 2rem;
9649 z-index: -1;
9650}
9651
9652.bx--nested-list__flyout-menu--displayed {
9653 display: block;
9654 border-left: 1px solid #8897a2;
9655}
9656
9657.bx--flyout-menu__item--link {
9658 font-size: 0.875rem;
9659 padding: 0 1.75rem 0 1rem;
9660 color: #152935;
9661 text-decoration: none;
9662}
9663
9664.bx--flyout-menu__item {
9665 background-color: #fff;
9666 margin: 0;
9667 height: 2.3125rem;
9668 display: -ms-flexbox;
9669 display: flex;
9670 -ms-flex-align: center;
9671 align-items: center;
9672}
9673
9674.bx--left-nav__main-nav[data-left-nav-list='apps'] .bx--flyout-menu__item:hover .bx--flyout-menu__item--link {
9675 color: #008571;
9676}
9677
9678.bx--left-nav__main-nav[data-left-nav-list='services'] .bx--flyout-menu__item:hover .bx--flyout-menu__item--link {
9679 color: #734098;
9680}
9681
9682.bx--left-nav__main-nav[data-left-nav-list='infrastructure'] .bx--flyout-menu__item:hover .bx--flyout-menu__item--link {
9683 color: #3d70b2;
9684}
9685
9686.bx--left-nav__main-nav[data-left-nav-list='apps'] .bx--flyout-menu__item.bx--active-list-item {
9687 background-color: #008571;
9688}
9689
9690.bx--left-nav__main-nav[data-left-nav-list='apps'] .bx--flyout-menu__item.bx--active-list-item .bx--flyout-menu__item--link {
9691 color: #fff;
9692}
9693
9694.bx--left-nav__main-nav[data-left-nav-list='apps'] .bx--flyout-menu__item.bx--active-list-item .bx--flyout-menu__item--link:hover {
9695 color: #fff;
9696}
9697
9698.bx--left-nav__main-nav[data-left-nav-list='services'] .bx--flyout-menu__item.bx--active-list-item {
9699 background-color: #734098;
9700}
9701
9702.bx--left-nav__main-nav[data-left-nav-list='services'] .bx--flyout-menu__item.bx--active-list-item .bx--flyout-menu__item--link {
9703 color: #fff;
9704}
9705
9706.bx--left-nav__main-nav[data-left-nav-list='services'] .bx--flyout-menu__item.bx--active-list-item .bx--flyout-menu__item--link:hover {
9707 color: #fff;
9708}
9709
9710.bx--left-nav__main-nav[data-left-nav-list='infrastructure'] .bx--flyout-menu__item.bx--active-list-item {
9711 background-color: #3d70b2;
9712}
9713
9714.bx--left-nav__main-nav[data-left-nav-list='infrastructure'] .bx--flyout-menu__item.bx--active-list-item .bx--flyout-menu__item--link {
9715 color: #fff;
9716}
9717
9718.bx--left-nav__main-nav[data-left-nav-list='infrastructure'] .bx--flyout-menu__item.bx--active-list-item .bx--flyout-menu__item--link:hover {
9719 color: #fff;
9720}
9721
9722.bx--account-switcher {
9723 list-style: none;
9724 position: relative;
9725 height: 100%;
9726 display: -ms-flexbox;
9727 display: flex;
9728 -ms-flex-align: center;
9729 align-items: center;
9730 -ms-flex-pack: end;
9731 justify-content: flex-end;
9732 min-width: 21.875rem;
9733}
9734
9735.bx--account-switcher__linked-icon {
9736 fill: #fff;
9737 height: 1rem;
9738 width: 1rem;
9739 margin: 0 0.5rem;
9740 transform: rotate(45deg);
9741}
9742
9743.bx--account-switcher__toggle {
9744 z-index: 9000;
9745 height: 2.25rem;
9746 width: auto;
9747 display: -ms-inline-flexbox;
9748 display: inline-flex;
9749 -ms-flex-align: center;
9750 align-items: center;
9751 -ms-flex-pack: center;
9752 justify-content: center;
9753 color: #fff;
9754 padding: 0 1rem;
9755 background-color: #0f212e;
9756 cursor: pointer;
9757}
9758
9759.bx--account-switcher__toggle:focus, .bx--account-switcher__toggle:hover {
9760 outline: 0;
9761 background-color: #2d3f49;
9762}
9763
9764.bx--account-switcher__toggle:focus .bx--account-switcher__toggle--text, .bx--account-switcher__toggle:hover .bx--account-switcher__toggle--text {
9765 color: #5aaafa;
9766}
9767
9768.bx--account-switcher__toggle:focus svg, .bx--account-switcher__toggle:hover svg {
9769 fill: #5aaafa;
9770}
9771
9772.bx--account-switcher__toggle--hidden {
9773 opacity: 0;
9774 visibility: hidden;
9775}
9776
9777.bx--account-switcher__toggle--text {
9778 font-size: 0.6875rem;
9779 letter-spacing: 0;
9780 overflow: hidden;
9781 display: -ms-inline-flexbox;
9782 display: inline-flex;
9783 white-space: nowrap;
9784 padding-right: 0.5rem;
9785 font-weight: 300;
9786}
9787
9788.bx--account-switcher__toggle--text[data-switcher-account-sl],
9789.bx--account-switcher__toggle--text[data-switcher-account] {
9790 -webkit-font-smoothing: antialiased;
9791 -moz-osx-font-smoothing: grayscale;
9792 font-weight: 600;
9793}
9794
9795.bx--account-switcher__toggle--text[data-switcher-account] {
9796 display: -ms-inline-flexbox;
9797 display: inline-flex;
9798 -ms-flex-align: center;
9799 align-items: center;
9800}
9801
9802.bx--account-switcher__toggle--text[data-switcher-account] .bx--account-switcher__linked-icon {
9803 margin-right: 0;
9804}
9805
9806.bx--account-switcher__toggle--text > [data-dropdown-account-linked] {
9807 margin-left: 0.5rem;
9808 margin-right: 0;
9809}
9810
9811.bx--account-switcher__toggle--text:last-child {
9812 padding-right: 0;
9813}
9814
9815.bx--account-switcher__menu {
9816 list-style: none;
9817}
9818
9819.bx--account-switcher__menu__container {
9820 box-shadow: 6px 6px 6px 0 rgba(0, 0, 0, 0.1);
9821 transition: 250ms all cubic-bezier(0.5, 0, 0.1, 1);
9822 position: absolute;
9823 width: auto;
9824 min-width: 21.875rem;
9825 height: auto;
9826 background-color: #2d3f49;
9827 visibility: hidden;
9828 opacity: 0;
9829 top: 100%;
9830 right: 0;
9831 transform: translateY(-10%);
9832 color: #fff;
9833 z-index: 8000;
9834}
9835
9836.bx--account-switcher--open {
9837 color: #5aaafa;
9838}
9839
9840.bx--account-switcher--open .bx--account-switcher__toggle {
9841 color: #5aaafa;
9842 background-color: #2d3f49;
9843}
9844
9845.bx--account-switcher--open .bx--account-switcher__linked-icon {
9846 fill: #5aaafa;
9847}
9848
9849.bx--account-switcher--open .bx--account-switcher__menu__container {
9850 visibility: visible;
9851 max-height: 125rem;
9852 opacity: 1;
9853 transform: translateY(0);
9854}
9855
9856.bx--account-switcher__menu__item {
9857 height: auto;
9858 display: -ms-flexbox;
9859 display: flex;
9860 -ms-flex-pack: justify;
9861 justify-content: space-between;
9862 -ms-flex-align: start;
9863 align-items: flex-start;
9864 padding: 1rem;
9865}
9866
9867.bx--account-switcher__menu__item:first-child {
9868 border-bottom: 1px solid #42535c;
9869}
9870
9871.bx--account-switcher__menu__item:nth-child(n + 2) {
9872 padding: 1rem 1rem 0;
9873}
9874
9875.bx--account-switcher__menu__item:last-child {
9876 display: -ms-flexbox;
9877 display: flex;
9878 margin-left: auto;
9879 -ms-flex-pack: start;
9880 justify-content: flex-start;
9881 max-width: 75%;
9882 padding: 0.75rem 0 1rem 1.5rem;
9883}
9884
9885.bx--account-switcher__menu__item:last-child a {
9886 font-size: 0.6875rem;
9887 padding-right: 1rem;
9888 color: #5aaafa;
9889}
9890
9891.bx--account-switcher__menu__item:last-child a:visited {
9892 color: #5aaafa;
9893}
9894
9895.bx--account-switcher__menu__item:last-child a:hover {
9896 color: #5596e6;
9897}
9898
9899.bx--account-switcher__menu__item--title {
9900 font-size: 0.875rem;
9901 -webkit-font-smoothing: antialiased;
9902 -moz-osx-font-smoothing: grayscale;
9903 font-weight: 600;
9904 height: 44px;
9905 min-width: 100px;
9906 display: -ms-flexbox;
9907 display: flex;
9908 -ms-flex-align: center;
9909 align-items: center;
9910 -ms-flex: 1;
9911 flex: 1;
9912}
9913
9914.bx--account-switcher__menu__item .bx--dropdown {
9915 font-size: 0.875rem;
9916 -ms-flex: 3;
9917 flex: 3;
9918 background-color: #42535c;
9919 display: block;
9920 -ms-flex-direction: column;
9921 flex-direction: column;
9922 min-width: 200px;
9923}
9924
9925.bx--account-switcher__menu__item .bx--dropdown[data-value=''] .bx--dropdown-text {
9926 color: #fff;
9927}
9928
9929.bx--account-switcher__menu__item .bx--dropdown--scroll {
9930 max-height: 180px;
9931 overflow-y: auto;
9932}
9933
9934.bx--account-switcher__menu__item .bx--dropdown--scroll::-webkit-scrollbar {
9935 background: #394b54;
9936 width: 0.5rem;
9937 height: 0.5rem;
9938}
9939
9940.bx--account-switcher__menu__item .bx--dropdown--scroll::-webkit-scrollbar-thumb {
9941 background-color: #8c9ba5;
9942 border-radius: 10px;
9943}
9944
9945.bx--account-switcher__menu__item .bx--dropdown--scroll::-webkit-scrollbar-thumb:hover {
9946 background-color: #dfe6eb;
9947}
9948
9949.bx--account-switcher__menu__item .bx--dropdown li {
9950 -webkit-font-smoothing: antialiased;
9951 -moz-osx-font-smoothing: grayscale;
9952 font-weight: 400;
9953 max-width: 400px;
9954}
9955
9956.bx--account-switcher__menu__item .bx--dropdown__arrow {
9957 fill: #5aaafa;
9958}
9959
9960.bx--account-switcher__menu__item .bx--dropdown-text {
9961 padding-right: 2rem;
9962 -ms-flex-item-align: start;
9963 align-self: flex-start;
9964 background-color: #42535c;
9965}
9966
9967.bx--account-switcher__menu__item .bx--dropdown-text .bx--account-switcher__linked-icon {
9968 fill: #fff;
9969 vertical-align: middle;
9970}
9971
9972.bx--account-switcher__menu__item .bx--dropdown-list {
9973 position: relative;
9974 transform: translateY(-10px);
9975 max-height: 0;
9976 height: auto;
9977 width: 100%;
9978 top: 0;
9979}
9980
9981.bx--account-switcher__menu__item .bx--dropdown-item {
9982 background-color: #2d3f49;
9983}
9984
9985.bx--account-switcher__menu__item .bx--dropdown-item > .bx--dropdown-link:hover,
9986.bx--account-switcher__menu__item .bx--dropdown-item .bx--dropdown-link:focus {
9987 background-color: #5aaafa;
9988 color: #152935;
9989}
9990
9991.bx--account-switcher__menu__item .bx--dropdown-item > .bx--dropdown-link:hover svg,
9992.bx--account-switcher__menu__item .bx--dropdown-item .bx--dropdown-link:focus svg {
9993 fill: #152935;
9994}
9995
9996.bx--account-switcher__menu__item .bx--dropdown-link {
9997 height: 100%;
9998 text-overflow: ellipsis;
9999 overflow: hidden;
10000}
10001
10002.bx--account-switcher__menu__item .bx--dropdown-link span {
10003 pointer-events: none;
10004}
10005
10006.bx--account-switcher__menu__item .bx--dropdown-link svg {
10007 fill: #fff;
10008 pointer-events: none;
10009 vertical-align: middle;
10010}
10011
10012.bx--account-switcher__menu__item .bx--dropdown--open .bx--dropdown-text {
10013 color: #fff;
10014}
10015
10016.bx--account-switcher__menu__item .bx--dropdown--open .bx--dropdown-list {
10017 display: -ms-flexbox;
10018 display: flex;
10019 -ms-flex-direction: column;
10020 flex-direction: column;
10021 max-height: 2000px;
10022 z-index: 10;
10023}
10024
10025.bx--account-switcher__menu__item .bx--dropdown--open .bx--dropdown-item {
10026 background-color: #394b54;
10027}
10028
10029.bx--unified-header {
10030 position: fixed;
10031 z-index: 6000;
10032}
10033
10034.bx--data-table-v2-container + .bx--pagination {
10035 border-top: 0;
10036}
10037
10038.bx--pagination {
10039 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
10040 width: 100%;
10041 background-color: #fff;
10042 padding: 0.5rem 1rem;
10043 display: -ms-flexbox;
10044 display: flex;
10045 -ms-flex-align: center;
10046 align-items: center;
10047 border: 1px solid #dfe3e6;
10048 height: 2.5rem;
10049}
10050
10051.bx--pagination .bx--form-item {
10052 -ms-flex: auto;
10053 flex: auto;
10054}
10055
10056.bx--pagination__left {
10057 display: -ms-flexbox;
10058 display: flex;
10059 -ms-flex-align: center;
10060 align-items: center;
10061}
10062
10063.bx--pagination__right {
10064 display: -ms-flexbox;
10065 display: flex;
10066 -ms-flex-align: center;
10067 align-items: center;
10068 margin-left: auto;
10069}
10070
10071.bx--pagination__text {
10072 font-size: 0.75rem;
10073 font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
10074 font-size: 0.875rem;
10075 font-weight: 400;
10076 line-height: 1.125rem;
10077 letter-spacing: 0.16px;
10078 color: #152935;
10079 display: none;
10080 padding-right: 0.25rem;
10081}
10082
10083@media (min-width: 530px) {
10084 .bx--pagination__text {
10085 display: block;
10086 }
10087}
10088
10089.bx--pagination__button-icon {
10090 height: 0.75rem;
10091 width: 0.75rem;
10092 fill: #5a6872;
10093 pointer-events: none;
10094 transition: 250ms;
10095 margin-top: 0.125rem;
10096}
10097
10098.bx--pagination__button {
10099 border: none;
10100 background: none;
10101 cursor: pointer;
10102}
10103
10104.bx--pagination__button:hover .bx--pagination__button-icon {
10105 fill: #3d70b2;
10106}
10107
10108.bx--pagination__button:focus {
10109 outline: 1px solid #3d70b2;
10110}
10111
10112.bx--pagination__button:disabled:hover {
10113 cursor: default;
10114}
10115
10116.bx--pagination__button:disabled:hover .bx--pagination__button-icon {
10117 fill: #5a6872;
10118}
10119
10120.bx--pagination__button--backward {
10121 margin-left: 1rem;
10122 margin-right: 1.5rem;
10123}
10124
10125.bx--pagination__button--forward {
10126 margin-left: 1.5rem;
10127}
10128
10129.bx--pagination__button--no-index {
10130 border-right: 0;
10131 margin-right: 1px;
10132}
10133
10134.bx--pagination .bx--select {
10135 margin-right: 0.5rem;
10136}
10137
10138.bx--pagination .bx--select--inline {
10139 margin-right: 0;
10140 width: auto;
10141 display: -ms-flexbox;
10142 display: flex;
10143 -ms-flex-direction: row;
10144 flex-direction: row;
10145 -ms-flex-align: center;
10146 align-items: center;
10147}
10148
10149.bx--pagination .bx--select-input {
10150 height: 1.5rem;
10151 width: auto;
10152 padding: 0 1.25rem 0 0;
10153 margin: 0;
10154 font-weight: 600;
10155 text-align-last: center;
10156 box-shadow: none;
10157}
10158
10159.bx--pagination .bx--select-input:focus {
10160 outline: 1px solid #3d70b2;
10161}
10162
10163.bx--pagination .bx--select .bx--select-input ~ .bx--select__arrow {
10164 right: 0.3rem;
10165 top: 0.625rem;
10166}
10167
10168.bx--pagination .bx--text-input {
10169 background-color: #f4f7fb;
10170 height: 1.5rem;
10171 min-width: 1.5rem;
10172 width: 1.5rem;
10173 padding: 0;
10174 margin: 0;
10175 font-weight: 600;
10176 text-align: center;
10177 box-shadow: none;
10178 -ms-flex-order: 0;
10179 order: 0;
10180}
10181
10182.bx--pagination .bx--text-input:focus {
10183 outline: 1px solid #3d70b2;
10184}
10185
10186.bx--pagination--inline {
10187 height: 42px;
10188 margin-top: -0.5rem;
10189 margin-bottom: -0.5rem;
10190 margin-right: -1rem;
10191}
10192
10193.bx--pagination--inline .bx--pagination__button {
10194 height: 2.5rem;
10195 border-left: 1px solid #dfe3e6;
10196 border-right: 1px solid #dfe3e6;
10197 margin: 0;
10198}
10199
10200.bx--pagination--inline .bx--pagination__button--forward {
10201 border-right: 0;
10202 padding: 0 1rem;
10203 margin-left: 1rem;
10204}
10205
10206.bx--pagination--inline .bx--pagination__button--backward {
10207 margin: 0 1rem;
10208 padding: 0 1rem;
10209}
10210
10211.bx--pagination--inline .bx--select__arrow {
10212 right: 0;
10213 top: 0.6rem;
10214}
10215
10216.bx--pagination.bx--skeleton .bx--skeleton__text {
10217 margin-right: 1rem;
10218 margin-bottom: 0;
10219}
10220
10221.bx--accordion {
10222 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
10223 list-style: none;
10224 width: 100%;
10225}
10226
10227.bx--accordion__item {
10228 transition: all 250ms cubic-bezier(0.5, 0, 0.1, 1);
10229 border-top: 1px solid #dfe3e6;
10230 overflow: hidden;
10231}
10232
10233.bx--accordion__item:focus {
10234 outline: none;
10235}
10236
10237.bx--accordion__item:focus .bx--accordion__arrow {
10238 outline: 1px solid #3d70b2;
10239 overflow: visible;
10240 outline-offset: -0.5px;
10241}
10242
10243.bx--accordion__item:last-child {
10244 border-bottom: 1px solid #dfe3e6;
10245}
10246
10247.bx--accordion__heading {
10248 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
10249 -webkit-font-smoothing: antialiased;
10250 -moz-osx-font-smoothing: grayscale;
10251 letter-spacing: 0;
10252 display: inline-block;
10253 background: none;
10254 -webkit-appearance: none;
10255 -moz-appearance: none;
10256 appearance: none;
10257 border: 0;
10258 padding: 0;
10259 cursor: pointer;
10260 width: 100%;
10261 color: #152935;
10262 display: -ms-flexbox;
10263 display: flex;
10264 -ms-flex-align: center;
10265 align-items: center;
10266 -ms-flex-pack: start;
10267 justify-content: flex-start;
10268 -ms-flex-direction: row;
10269 flex-direction: row;
10270 cursor: pointer;
10271 padding: 0.5rem 0;
10272}
10273
10274.bx--accordion__heading::-moz-focus-inner {
10275 border: 0;
10276}
10277
10278.bx--accordion__heading:focus {
10279 outline: none;
10280}
10281
10282.bx--accordion__heading:focus .bx--accordion__arrow {
10283 outline: 1px solid #3d70b2;
10284 overflow: visible;
10285 outline-offset: -0.5px;
10286}
10287
10288.bx--accordion__arrow {
10289 transition: all 250ms cubic-bezier(0.5, 0, 0.1, 1);
10290 height: 1.25rem;
10291 width: 1.25rem;
10292 padding: 0.25rem 0.125rem 0.25rem 0.25rem;
10293 margin: 0 0 0 0.25rem;
10294 fill: #5a6872;
10295 transform: rotate(0);
10296}
10297
10298.bx--accordion__title {
10299 font-size: 1rem;
10300 line-height: 1.5;
10301 margin: 0 0 0 1rem;
10302 font-weight: 400;
10303 text-align: left;
10304}
10305
10306.bx--accordion__content {
10307 transition: all 300ms cubic-bezier(0, 0, 0.25, 1);
10308 padding: 0 1rem 0 2.5rem;
10309 height: 0;
10310 visibility: hidden;
10311 opacity: 0;
10312}
10313
10314.bx--accordion__content p {
10315 font-size: 0.875rem;
10316}
10317
10318.bx--accordion__item--active {
10319 overflow: visible;
10320}
10321
10322.bx--accordion__item--active > .bx--accordion__content {
10323 padding-top: 1rem;
10324 padding-bottom: 1.5rem;
10325 height: auto;
10326 visibility: visible;
10327 opacity: 1;
10328 transition: all 300ms cubic-bezier(0.25, 0, 1, 1);
10329}
10330
10331.bx--accordion__item--active > .bx--accordion__heading > .bx--accordion__arrow {
10332 /*rtl:ignore*/
10333 transform: rotate(90deg);
10334 fill: #3d70b2;
10335}
10336
10337.bx--accordion.bx--skeleton .bx--accordion__heading,
10338.bx--accordion.bx--skeleton .bx--accordion__button {
10339 cursor: default;
10340}
10341
10342.bx--accordion.bx--skeleton .bx--accordion__arrow {
10343 pointer-events: none;
10344 fill: #5a6872;
10345 cursor: default;
10346}
10347
10348.bx--accordion.bx--skeleton .bx--accordion__arrow:hover, .bx--accordion.bx--skeleton .bx--accordion__arrow:focus, .bx--accordion.bx--skeleton .bx--accordion__arrow:active {
10349 border: none;
10350 outline: none;
10351 cursor: default;
10352}
10353
10354.bx--skeleton .bx--accordion__heading:focus .bx--accordion__arrow {
10355 border: none;
10356 outline: none;
10357 cursor: default;
10358}
10359
10360.bx--accordion__title.bx--skeleton__text {
10361 margin-bottom: 0;
10362}
10363
10364.bx--progress {
10365 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
10366 display: -ms-flexbox;
10367 display: flex;
10368 list-style: none;
10369}
10370
10371.bx--progress-step {
10372 position: relative;
10373 display: -ms-inline-flexbox;
10374 display: inline-flex;
10375 -ms-flex-direction: column;
10376 flex-direction: column;
10377 -ms-flex: 1;
10378 flex: 1;
10379 min-width: 7rem;
10380 transition: 250ms all cubic-bezier(0.5, 0, 0.1, 1);
10381 overflow: visible;
10382}
10383
10384.bx--progress-step:first-child .bx--progress-line {
10385 display: none;
10386}
10387
10388.bx--progress-line {
10389 position: absolute;
10390 top: 0.625rem;
10391 right: 100%;
10392 height: 1px;
10393 width: calc(100% - 24px);
10394 border: 1px inset transparent;
10395}
10396
10397.bx--progress-step svg {
10398 position: relative;
10399 z-index: 1;
10400 width: 1.5rem;
10401 height: 1.5rem;
10402 border-radius: 50%;
10403 margin-bottom: 0.5rem;
10404 fill: #3d70b2;
10405}
10406
10407.bx--progress-label {
10408 line-height: 1;
10409 width: 75%;
10410}
10411
10412.bx--progress-step-button {
10413 display: -ms-inline-flexbox;
10414 display: inline-flex;
10415 -ms-flex-flow: column nowrap;
10416 flex-flow: column nowrap;
10417}
10418
10419.bx--progress-step-button--unclickable {
10420 outline: none;
10421}
10422
10423.bx--progress-step--current circle:first-child {
10424 stroke: #3d70b2;
10425 stroke-width: 5;
10426 fill: transparent;
10427}
10428
10429.bx--progress-step--current .bx--progress-label {
10430 -webkit-font-smoothing: antialiased;
10431 -moz-osx-font-smoothing: grayscale;
10432 color: #3d70b2;
10433 font-weight: 600;
10434}
10435
10436.bx--progress-step--current .bx--progress-line {
10437 background-color: #3d70b2;
10438}
10439
10440.bx--progress-step--incomplete circle {
10441 stroke: #8897a2;
10442 stroke-width: 5;
10443 fill: transparent;
10444}
10445
10446.bx--progress-step--incomplete .bx--progress-label {
10447 color: #5a6872;
10448}
10449
10450.bx--progress-step--incomplete .bx--progress-line {
10451 background-color: #8897a2;
10452}
10453
10454.bx--progress-step--complete circle {
10455 stroke: #3d70b2;
10456 stroke-width: 5;
10457 fill: transparent;
10458}
10459
10460.bx--progress-step--complete polygon {
10461 fill: #3d70b2;
10462}
10463
10464.bx--progress-step--complete .bx--progress-label {
10465 -webkit-font-smoothing: antialiased;
10466 -moz-osx-font-smoothing: grayscale;
10467 color: #3d70b2;
10468 font-weight: 600;
10469}
10470
10471.bx--progress-step--complete .bx--progress-line {
10472 background-color: #3d70b2;
10473}
10474
10475.bx--progress.bx--skeleton .bx--progress-label {
10476 position: relative;
10477 border: none;
10478 padding: 0;
10479 box-shadow: none;
10480 pointer-events: none;
10481 background: rgba(61, 112, 178, 0.1);
10482 height: 0.75rem;
10483 width: 2.5rem;
10484}
10485
10486.bx--progress.bx--skeleton .bx--progress-label:hover, .bx--progress.bx--skeleton .bx--progress-label:focus, .bx--progress.bx--skeleton .bx--progress-label:active {
10487 border: none;
10488 outline: none;
10489 cursor: default;
10490}
10491
10492.bx--progress.bx--skeleton .bx--progress-label:before {
10493 content: '';
10494 width: 0%;
10495 height: 100%;
10496 position: absolute;
10497 top: 0;
10498 left: 0;
10499 opacity: 0.3;
10500 background: rgba(61, 112, 178, 0.1);
10501 animation: 3000ms ease-in-out skeleton infinite;
10502}
10503
10504.bx--progress--vertical {
10505 display: block;
10506}
10507
10508.bx--progress--vertical .bx--progress-step {
10509 display: list-item;
10510 min-height: 6rem;
10511}
10512
10513.bx--progress--vertical .bx--progress-step svg {
10514 display: inline-block;
10515}
10516
10517.bx--progress--vertical .bx--progress-label {
10518 display: inline-block;
10519 width: auto;
10520 vertical-align: top;
10521 margin-top: 0.26rem;
10522 margin-left: 0.5rem;
10523}
10524
10525.bx--progress--vertical .bx--progress-line {
10526 top: 22px;
10527 left: 0.69rem;
10528 height: calc(100% - 22px);
10529 width: 1px;
10530}
10531
10532.bx--progress--vertical .bx--progress-step:first-child .bx--progress-line {
10533 display: block;
10534}
10535
10536.bx--progress--vertical .bx--progress-step:last-child .bx--progress-line {
10537 display: none;
10538}
10539
10540.bx--breadcrumb {
10541 font-size: 0.875rem;
10542 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
10543 display: inline;
10544}
10545
10546@media screen and (min-width: 500px) {
10547 .bx--breadcrumb {
10548 display: -ms-flexbox;
10549 display: flex;
10550 -ms-flex-wrap: wrap;
10551 flex-wrap: wrap;
10552 }
10553}
10554
10555.bx--breadcrumb-item {
10556 margin-right: 1rem;
10557 display: -ms-flexbox;
10558 display: flex;
10559 -ms-flex-align: center;
10560 align-items: center;
10561}
10562
10563.bx--breadcrumb-item::after {
10564 content: '/';
10565 margin-left: 1rem;
10566 color: #5a6872;
10567}
10568
10569.bx--breadcrumb--no-trailing-slash .bx--breadcrumb-item:last-child::after {
10570 content: '';
10571}
10572
10573.bx--breadcrumb-item:last-child {
10574 margin-right: 0;
10575}
10576
10577.bx--breadcrumb-item:last-child::after {
10578 margin-right: 0;
10579}
10580
10581.bx--breadcrumb .bx--link {
10582 white-space: nowrap;
10583 font-weight: 400;
10584 text-decoration: none;
10585 border-bottom: 1px solid transparent;
10586}
10587
10588.bx--breadcrumb .bx--link:hover, .bx--breadcrumb .bx--link:focus {
10589 outline: none;
10590 color: #294c79;
10591 border-bottom: 1px solid #294c79;
10592}
10593
10594.bx--breadcrumb.bx--skeleton .bx--link {
10595 position: relative;
10596 border: none;
10597 padding: 0;
10598 box-shadow: none;
10599 pointer-events: none;
10600 background: rgba(61, 112, 178, 0.1);
10601 width: 6.25rem;
10602 height: 1rem;
10603}
10604
10605.bx--breadcrumb.bx--skeleton .bx--link:hover, .bx--breadcrumb.bx--skeleton .bx--link:focus, .bx--breadcrumb.bx--skeleton .bx--link:active {
10606 border: none;
10607 outline: none;
10608 cursor: default;
10609}
10610
10611.bx--breadcrumb.bx--skeleton .bx--link:before {
10612 content: '';
10613 width: 0%;
10614 height: 100%;
10615 position: absolute;
10616 top: 0;
10617 left: 0;
10618 opacity: 0.3;
10619 background: rgba(61, 112, 178, 0.1);
10620 animation: 3000ms ease-in-out skeleton infinite;
10621}
10622
10623.bx--toolbar {
10624 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
10625 display: -ms-flexbox;
10626 display: flex;
10627 -ms-flex-flow: row nowrap;
10628 flex-flow: row nowrap;
10629 -ms-flex-align: center;
10630 align-items: center;
10631 margin: 1rem 0;
10632}
10633
10634.bx--toolbar > div {
10635 margin: 0 0.25rem;
10636}
10637
10638.bx--toolbar .bx--search-input {
10639 height: 2rem;
10640 background-color: transparent;
10641 outline: none;
10642}
10643
10644.bx--toolbar .bx--search-close {
10645 display: none;
10646}
10647
10648.bx--toolbar .bx--overflow-menu__icon {
10649 fill: #5a6872;
10650 transition: fill 50ms cubic-bezier(0.5, 0, 0.1, 1);
10651}
10652
10653.bx--toolbar .bx--search-magnifier {
10654 fill: #5a6872;
10655 transform: scale(1.15);
10656 transition: all 175ms cubic-bezier(0.5, 0, 0.1, 1);
10657 top: 0.5rem;
10658 left: 0.375rem;
10659 cursor: pointer;
10660}
10661
10662.bx--toolbar fieldset {
10663 border: 0;
10664 padding: 0;
10665}
10666
10667.bx--toolbar .bx--toolbar-search--active {
10668 width: 15.625rem;
10669}
10670
10671.bx--toolbar .bx--toolbar-search--active .bx--search-magnifier {
10672 transform: scale(1);
10673 top: 0.5625rem;
10674}
10675
10676.bx--toolbar .bx--toolbar-search--active .bx--search-input {
10677 background-color: #fff;
10678}
10679
10680.bx--toolbar .bx--toolbar-search--active .bx--search-close {
10681 display: block;
10682}
10683
10684.bx--toolbar .bx--checkbox-label {
10685 margin-bottom: 0;
10686}
10687
10688.bx--toolbar .bx--overflow-menu--open > .bx--overflow-menu__icon {
10689 fill: #3d70b2;
10690}
10691
10692.bx--toolbar-search {
10693 width: 1.8rem;
10694 transition: all 175ms cubic-bezier(0.5, 0, 0.1, 1);
10695}
10696
10697.bx--toolbar-search__btn {
10698 position: absolute;
10699 left: 0;
10700 top: 0;
10701 background: transparent;
10702 border: 0;
10703 height: 2rem;
10704 width: 2rem;
10705}
10706
10707.bx--toolbar-search__btn:focus {
10708 outline: 1px solid #3d70b2;
10709}
10710
10711.bx--toolbar-filter-icon {
10712 padding-left: 0;
10713 padding-right: 0;
10714}
10715
10716.bx--toolbar-menu__title {
10717 font-size: 0.75rem;
10718 letter-spacing: 0;
10719 font-weight: 600;
10720 padding: 0.5rem 1.25rem;
10721}
10722
10723.bx--toolbar-menu__option {
10724 padding: 0.5rem 1.25rem;
10725}
10726
10727.bx--toolbar-menu__divider {
10728 width: 100%;
10729 border: 0;
10730 border-top: 1px solid #dfe3e6;
10731}
10732
10733.bx--radio-button-group {
10734 border: none;
10735}
10736
10737.bx--time-picker {
10738 display: -ms-flexbox;
10739 display: flex;
10740 -ms-flex-align: end;
10741 align-items: flex-end;
10742}
10743
10744.bx--time-picker .bx--label {
10745 -ms-flex-order: 1;
10746 order: 1;
10747}
10748
10749.bx--time-picker__input {
10750 display: -ms-flexbox;
10751 display: flex;
10752 -ms-flex-direction: column;
10753 flex-direction: column;
10754 border-bottom: 1px solid transparent;
10755}
10756
10757.bx--time-picker .bx--select-input {
10758 padding-right: 2rem;
10759}
10760
10761.bx--time-picker .bx--select__arrow {
10762 right: 0.875rem;
10763}
10764
10765.bx--time-picker__input-field {
10766 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
10767 font-size: 0.875rem;
10768 display: -ms-flexbox;
10769 display: flex;
10770 -ms-flex-align: center;
10771 align-items: center;
10772 background-color: #f4f7fb;
10773 border: none;
10774 width: 4.875rem;
10775 color: #152935;
10776 height: 2.5rem;
10777 padding: 0 1rem;
10778 -ms-flex-order: 2;
10779 order: 2;
10780 box-shadow: 0 1px 0 0 #5a6872;
10781}
10782
10783.bx--time-picker__input-field:focus {
10784 outline: none;
10785 box-shadow: 0 2px 0 0 #3d70b2;
10786}
10787
10788.bx--time-picker__input-field:focus ~ .bx--label {
10789 color: #3d70b2;
10790}
10791
10792.bx--time-picker__input-field:-ms-input-placeholder {
10793 color: #5a6872;
10794}
10795
10796.bx--time-picker__input-field::placeholder {
10797 color: #5a6872;
10798}
10799
10800.bx--time-picker__input-field[data-invalid], .bx--time-picker__input-field[data-invalid]:focus {
10801 box-shadow: 0 2px 0 0 #e0182d;
10802}
10803
10804.bx--time-picker__input-field[data-invalid]:focus ~ .bx--label {
10805 color: #e0182d;
10806}
10807
10808.bx--time-picker__input-field ~ .bx--form-requirement {
10809 -ms-flex-order: 3;
10810 order: 3;
10811 color: #e0182d;
10812 font-weight: 400;
10813 margin-top: 0;
10814 max-height: 0;
10815}
10816
10817.bx--time-picker__input-field ~ .bx--form-requirement::before {
10818 display: none;
10819}
10820
10821.bx--time-picker__input-field[data-invalid] ~ .bx--form-requirement {
10822 overflow: visible;
10823 max-height: 0;
10824 margin-top: 0.25rem;
10825}
10826
10827.bx--time-picker__input-field:disabled {
10828 opacity: 0.5;
10829 cursor: not-allowed;
10830}
10831
10832.bx--time-picker--light .bx--time-picker__input-field {
10833 background: #fff;
10834}
10835
10836.bx--slider-container {
10837 display: -ms-flexbox;
10838 display: flex;
10839 -ms-flex-align: center;
10840 align-items: center;
10841 -webkit-user-select: none;
10842 -moz-user-select: none;
10843 -ms-user-select: none;
10844 user-select: none;
10845}
10846
10847.bx--slider {
10848 position: relative;
10849 width: 100%;
10850 margin: 0 1rem;
10851 max-width: 40rem;
10852 min-width: 12.5rem;
10853 -ms-flex-order: 1;
10854 order: 1;
10855}
10856
10857.bx--slider__range-label:first-of-type {
10858 -ms-flex-order: 0;
10859 order: 0;
10860}
10861
10862.bx--slider-text-input {
10863 -ms-flex-order: 3;
10864 order: 3;
10865}
10866
10867.bx--slider--disabled {
10868 opacity: 0.5;
10869}
10870
10871.bx--slider--disabled .bx--slider__thumb:hover {
10872 transform: translate(-50%, -50%);
10873}
10874
10875.bx--slider--disabled .bx--slider__thumb:focus {
10876 box-shadow: none;
10877 outline: none;
10878}
10879
10880.bx--slider--disabled .bx--slider__thumb:active {
10881 background: #3d70b2;
10882 transform: translate(-50%, -50%);
10883}
10884
10885.bx--slider__range-label {
10886 font-size: 0.875rem;
10887 color: #5a6872;
10888}
10889
10890.bx--slider__range-label:last-of-type {
10891 margin-right: 1rem;
10892 -ms-flex-order: 2;
10893 order: 2;
10894}
10895
10896.bx--slider__track {
10897 position: absolute;
10898 width: 100%;
10899 height: 0.25rem;
10900 background: #8897a2;
10901 cursor: pointer;
10902 transform: translate(0%, -50%);
10903}
10904
10905.bx--slider__filled-track {
10906 position: absolute;
10907 width: 100%;
10908 height: 0.25rem;
10909 background: #3d70b2;
10910 transform-origin: left;
10911 pointer-events: none;
10912 transform: translate(0%, -50%);
10913}
10914
10915.bx--slider__thumb {
10916 position: absolute;
10917 height: 1.5rem;
10918 width: 1.5rem;
10919 background: #3d70b2;
10920 border-radius: 50%;
10921 top: 0;
10922 transform: translate(-50%, -50%);
10923 transition: transform 100ms cubic-bezier(0.5, 0, 0.1, 1), background 100ms cubic-bezier(0.5, 0, 0.1, 1);
10924 cursor: pointer;
10925 outline: none;
10926 z-index: 2;
10927}
10928
10929.bx--slider__thumb--clicked {
10930 transition: left 250ms cubic-bezier(0.5, 0, 0.1, 1);
10931}
10932
10933.bx--slider__thumb:hover {
10934 transform: translate(-50%, -50%) scale(1.05);
10935}
10936
10937.bx--slider__thumb:focus {
10938 box-shadow: 0 0 0 3px #7cc7ff;
10939 outline: 1px solid transparent;
10940}
10941
10942.bx--slider__thumb:active {
10943 background: #36649f;
10944 transform: translate(-50%, -50%) scale(1.25);
10945}
10946
10947.bx--slider__input {
10948 display: none;
10949}
10950
10951.bx--slider-text-input,
10952.bx-slider-text-input {
10953 width: 3.75rem;
10954 min-width: 3.75rem;
10955 height: 2rem;
10956 padding: 0;
10957 text-align: center;
10958 font-weight: 600;
10959 -moz-appearance: textfield;
10960}
10961
10962.bx--slider-text-input::-webkit-outer-spin-button, .bx--slider-text-input::-webkit-inner-spin-button,
10963.bx-slider-text-input::-webkit-outer-spin-button,
10964.bx-slider-text-input::-webkit-inner-spin-button {
10965 display: none;
10966}
10967
10968.bx--slider-container.bx--skeleton .bx--slider__range-label {
10969 position: relative;
10970 border: none;
10971 padding: 0;
10972 box-shadow: none;
10973 pointer-events: none;
10974 background: rgba(61, 112, 178, 0.1);
10975 width: 1.25rem;
10976 height: 0.75rem;
10977}
10978
10979.bx--slider-container.bx--skeleton .bx--slider__range-label:hover, .bx--slider-container.bx--skeleton .bx--slider__range-label:focus, .bx--slider-container.bx--skeleton .bx--slider__range-label:active {
10980 border: none;
10981 outline: none;
10982 cursor: default;
10983}
10984
10985.bx--slider-container.bx--skeleton .bx--slider__range-label:before {
10986 content: '';
10987 width: 0%;
10988 height: 100%;
10989 position: absolute;
10990 top: 0;
10991 left: 0;
10992 opacity: 0.3;
10993 background: rgba(61, 112, 178, 0.1);
10994 animation: 3000ms ease-in-out skeleton infinite;
10995}
10996
10997.bx--slider-container.bx--skeleton .bx--slider__track {
10998 cursor: default;
10999 pointer-events: none;
11000}
11001
11002.bx--slider-container.bx--skeleton .bx--slider__thumb {
11003 left: 50%;
11004 cursor: default;
11005 pointer-events: none;
11006}
11007
11008.bx--tile {
11009 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
11010 display: block;
11011 min-width: 8rem;
11012 min-height: 4rem;
11013 background-color: #fff;
11014 border: 1px solid #dfe3e6;
11015 position: relative;
11016 padding: 1rem;
11017}
11018
11019.bx--tile:focus {
11020 outline: 1px solid #3d70b2;
11021}
11022
11023.bx--tile--clickable,
11024.bx--tile--selectable,
11025.bx--tile--expandable {
11026 transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
11027 cursor: pointer;
11028}
11029
11030.bx--tile--clickable:hover,
11031.bx--tile--selectable:hover,
11032.bx--tile--expandable:hover {
11033 border: 1px solid #8897a2;
11034}
11035
11036.bx--tile--clickable:hover .bx--tile__checkmark, .bx--tile--clickable:focus .bx--tile__checkmark,
11037.bx--tile--selectable:hover .bx--tile__checkmark,
11038.bx--tile--selectable:focus .bx--tile__checkmark,
11039.bx--tile--expandable:hover .bx--tile__checkmark,
11040.bx--tile--expandable:focus .bx--tile__checkmark {
11041 opacity: 1;
11042}
11043
11044.bx--tile--clickable:hover .bx--tile__chevron svg, .bx--tile--clickable:focus .bx--tile__chevron svg,
11045.bx--tile--selectable:hover .bx--tile__chevron svg,
11046.bx--tile--selectable:focus .bx--tile__chevron svg,
11047.bx--tile--expandable:hover .bx--tile__chevron svg,
11048.bx--tile--expandable:focus .bx--tile__chevron svg {
11049 fill: #3d70b2;
11050}
11051
11052.bx--tile--clickable:focus,
11053.bx--tile--expandable:focus {
11054 outline: 1px solid #3d70b2;
11055}
11056
11057.bx--tile--selectable {
11058 padding-right: 3rem;
11059}
11060
11061.bx--tile--selectable:focus {
11062 outline: none;
11063 border: 1px solid #3d70b2;
11064}
11065
11066.bx--tile--is-clicked {
11067 box-shadow: none;
11068 border: 1px solid #8897a2;
11069}
11070
11071.bx--tile__checkmark,
11072.bx--tile__chevron {
11073 position: absolute;
11074 transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
11075 border: none;
11076 background: transparent;
11077}
11078
11079.bx--tile__checkmark:focus,
11080.bx--tile__chevron:focus {
11081 outline: 1px solid #3d70b2;
11082}
11083
11084.bx--tile__checkmark {
11085 height: 1rem;
11086 top: 1rem;
11087 right: 1rem;
11088 opacity: 0;
11089}
11090
11091.bx--tile__checkmark svg {
11092 border-radius: 50%;
11093 background-color: rgba(255, 255, 255, 0.25);
11094 fill: rgba(61, 112, 178, 0.25);
11095}
11096
11097.bx--tile__chevron {
11098 position: absolute;
11099 bottom: 0.5rem;
11100 right: 0.5rem;
11101 height: 1rem;
11102}
11103
11104.bx--tile__chevron svg {
11105 transform-origin: center;
11106 transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
11107 fill: #5a6872;
11108}
11109
11110.bx--tile__chevron:hover {
11111 cursor: pointer;
11112}
11113
11114.bx--tile--expandable {
11115 overflow: hidden;
11116 cursor: default;
11117 transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
11118}
11119
11120.bx--tile-content__above-the-fold {
11121 display: block;
11122}
11123
11124.bx--tile-content__below-the-fold {
11125 display: block;
11126 opacity: 0;
11127 transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
11128}
11129
11130.bx--tile--is-expanded {
11131 overflow: visible;
11132 transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
11133}
11134
11135.bx--tile--is-expanded .bx--tile__chevron svg {
11136 transform: rotate(-180deg);
11137}
11138
11139.bx--tile--is-expanded .bx--tile-content__below-the-fold {
11140 opacity: 1;
11141 transition: 250ms cubic-bezier(0.5, 0, 0.1, 1);
11142}
11143
11144.bx--tile--is-selected,
11145.bx--tile--is-selected:hover,
11146.bx--tile--is-selected:focus {
11147 border: 1px solid #3d70b2;
11148 outline: none;
11149}
11150
11151.bx--tile--is-selected .bx--tile__checkmark {
11152 opacity: 1;
11153}
11154
11155.bx--tile--is-selected .bx--tile__checkmark svg {
11156 fill: #3d70b2;
11157}
11158
11159.bx--tile-input:checked + .bx--tile__checkmark {
11160 opacity: 1;
11161}
11162
11163.bx--tile-input:checked + .bx--tile__checkmark svg {
11164 fill: #3d70b2;
11165 background-color: #fff;
11166}
11167
11168.bx--tile-content {
11169 width: 100%;
11170 height: 100%;
11171}
11172
11173.bx--tile-input {
11174 position: absolute;
11175 width: 1px;
11176 height: 1px;
11177 padding: 0;
11178 margin: -1px;
11179 overflow: hidden;
11180 clip: rect(0, 0, 0, 0);
11181 border: 0;
11182 visibility: visible;
11183 white-space: nowrap;
11184}
11185
11186.bx--lightbox {
11187 width: 66rem;
11188 box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.1);
11189}
11190
11191.bx--lightbox__main {
11192 position: relative;
11193}
11194
11195.bx--lightbox__btn {
11196 border: 0;
11197 background: transparent;
11198 cursor: pointer;
11199 position: absolute;
11200 top: 50%;
11201}
11202
11203.bx--lightbox__btn:first-of-type {
11204 left: -2rem;
11205}
11206
11207.bx--lightbox__btn:last-of-type {
11208 right: -2rem;
11209 transform: rotate(180deg);
11210}
11211
11212.bx--lightbox__btn:focus {
11213 outline: 1px solid #3d70b2;
11214}
11215
11216.bx--lightbox__btn svg {
11217 height: 1.5rem;
11218 fill: #5a6872;
11219}
11220
11221.bx--lightbox__item {
11222 display: none;
11223 width: 100%;
11224}
11225
11226.bx--lightbox__item--shown {
11227 display: block;
11228}
11229
11230.bx--lightbox__footer {
11231 background: #fff;
11232 overflow: hidden;
11233}
11234
11235.bx--carousel {
11236 display: -ms-flexbox;
11237 display: flex;
11238 -ms-flex-align: center;
11239 align-items: center;
11240}
11241
11242.bx--carousel-container {
11243 max-width: 50.625rem;
11244 overflow: hidden;
11245 padding: 0 1px;
11246}
11247
11248.bx--filmstrip {
11249 display: -ms-flexbox;
11250 display: flex;
11251 -ms-flex-pack: justify;
11252 justify-content: space-between;
11253 transition: transform 100ms cubic-bezier(0.25, 0, 1, 1);
11254 padding: 1.5rem 0;
11255 width: auto;
11256}
11257
11258.bx--filmstrip-btn {
11259 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
11260 -webkit-font-smoothing: antialiased;
11261 -moz-osx-font-smoothing: grayscale;
11262 letter-spacing: 0;
11263 display: inline-block;
11264 background: none;
11265 -webkit-appearance: none;
11266 -moz-appearance: none;
11267 appearance: none;
11268 border: 0;
11269 padding: 0;
11270 cursor: pointer;
11271 width: 100%;
11272 height: 1.25rem;
11273 width: 1.25rem;
11274 margin-bottom: 1rem;
11275 margin-right: 0.1875rem;
11276 margin-left: 0.1875rem;
11277}
11278
11279.bx--filmstrip-btn::-moz-focus-inner {
11280 border: 0;
11281}
11282
11283.bx--filmstrip-btn:hover {
11284 cursor: pointer;
11285}
11286
11287.bx--filmstrip-btn:focus {
11288 outline: 1px solid #3d70b2;
11289}
11290
11291.bx--carousel__btn {
11292 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
11293 -webkit-font-smoothing: antialiased;
11294 -moz-osx-font-smoothing: grayscale;
11295 letter-spacing: 0;
11296 display: inline-block;
11297 background: none;
11298 -webkit-appearance: none;
11299 -moz-appearance: none;
11300 appearance: none;
11301 border: 0;
11302 padding: 0;
11303 cursor: pointer;
11304 cursor: pointer;
11305 padding: 0;
11306}
11307
11308.bx--carousel__btn::-moz-focus-inner {
11309 border: 0;
11310}
11311
11312.bx--carousel__btn:first-child {
11313 margin-right: 1.25rem;
11314}
11315
11316.bx--carousel__btn:last-child {
11317 margin-left: 1.25rem;
11318}
11319
11320.bx--carousel__btn:focus {
11321 outline: 1px solid #3d70b2;
11322}
11323
11324.bx--carousel__btn:last-of-type {
11325 transform: rotate(180deg);
11326}
11327
11328.bx--carousel__btn svg {
11329 height: 1.5rem;
11330 width: 1rem;
11331 fill: #3d70b2;
11332}
11333
11334.bx--carousel__item {
11335 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
11336 -webkit-font-smoothing: antialiased;
11337 -moz-osx-font-smoothing: grayscale;
11338 letter-spacing: 0;
11339 display: inline-block;
11340 background: none;
11341 -webkit-appearance: none;
11342 -moz-appearance: none;
11343 appearance: none;
11344 border: 0;
11345 padding: 0;
11346 cursor: pointer;
11347 width: 100%;
11348 padding: 0;
11349 line-height: 0;
11350 margin-right: 1.25rem;
11351 cursor: pointer;
11352}
11353
11354.bx--carousel__item::-moz-focus-inner {
11355 border: 0;
11356}
11357
11358.bx--carousel__item:hover, .bx--carousel__item:focus {
11359 outline: 1px solid #3d70b2;
11360}
11361
11362.bx--carousel__item--active {
11363 outline: 1px solid #3d70b2;
11364}
11365
11366.bx--skeleton__text {
11367 position: relative;
11368 border: none;
11369 padding: 0;
11370 box-shadow: none;
11371 pointer-events: none;
11372 background: rgba(61, 112, 178, 0.1);
11373 width: 100%;
11374 height: 1rem;
11375 margin-bottom: 0.5rem;
11376}
11377
11378.bx--skeleton__text:hover, .bx--skeleton__text:focus, .bx--skeleton__text:active {
11379 border: none;
11380 outline: none;
11381 cursor: default;
11382}
11383
11384.bx--skeleton__text:before {
11385 content: '';
11386 width: 0%;
11387 height: 100%;
11388 position: absolute;
11389 top: 0;
11390 left: 0;
11391 opacity: 0.3;
11392 background: rgba(61, 112, 178, 0.1);
11393 animation: 3000ms ease-in-out skeleton infinite;
11394}
11395
11396.bx--skeleton__heading {
11397 height: 1.5rem;
11398}
11399
11400.bx--icon--skeleton {
11401 position: relative;
11402 border: none;
11403 padding: 0;
11404 box-shadow: none;
11405 pointer-events: none;
11406 background: rgba(61, 112, 178, 0.1);
11407 display: inline-block;
11408 width: 1rem;
11409 height: 1rem;
11410}
11411
11412.bx--icon--skeleton:hover, .bx--icon--skeleton:focus, .bx--icon--skeleton:active {
11413 border: none;
11414 outline: none;
11415 cursor: default;
11416}
11417
11418.bx--icon--skeleton:before {
11419 content: '';
11420 width: 0%;
11421 height: 100%;
11422 position: absolute;
11423 top: 0;
11424 left: 0;
11425 opacity: 0.3;
11426 background: rgba(61, 112, 178, 0.1);
11427 animation: 3000ms ease-in-out skeleton infinite;
11428}
11429
11430.bx--skeleton__placeholder {
11431 position: relative;
11432 border: none;
11433 padding: 0;
11434 box-shadow: none;
11435 pointer-events: none;
11436 background: rgba(61, 112, 178, 0.1);
11437 height: 6.25rem;
11438 width: 6.25rem;
11439}
11440
11441.bx--skeleton__placeholder:hover, .bx--skeleton__placeholder:focus, .bx--skeleton__placeholder:active {
11442 border: none;
11443 outline: none;
11444 cursor: default;
11445}
11446
11447.bx--skeleton__placeholder:before {
11448 content: '';
11449 width: 0%;
11450 height: 100%;
11451 position: absolute;
11452 top: 0;
11453 left: 0;
11454 opacity: 0.3;
11455 background: rgba(61, 112, 178, 0.1);
11456 animation: 3000ms ease-in-out skeleton infinite;
11457}
11458
11459@keyframes stroke {
11460 100% {
11461 stroke-dashoffset: 0;
11462 }
11463}
11464
11465.bx--inline-loading {
11466 display: -ms-flexbox;
11467 display: flex;
11468 width: 100%;
11469 -ms-flex-align: center;
11470 align-items: center;
11471}
11472
11473.bx--inline-loading__text {
11474 font-size: 0.875rem;
11475}
11476
11477.bx--inline-loading__animation {
11478 position: relative;
11479 width: 2rem;
11480 height: 2rem;
11481 display: -ms-flexbox;
11482 display: flex;
11483 -ms-flex-pack: center;
11484 justify-content: center;
11485 -ms-flex-align: center;
11486 align-items: center;
11487}
11488
11489.bx--inline-loading__checkmark-container {
11490 width: 0.75rem;
11491 position: absolute;
11492 top: 0.75rem;
11493}
11494
11495.bx--inline-loading__checkmark-container[hidden] {
11496 display: none;
11497}
11498
11499.bx--inline-loading__checkmark {
11500 fill: none;
11501 stroke: #3d70b2;
11502 transform-origin: 50% 50%;
11503 stroke-width: 2.1;
11504 stroke-dasharray: 12;
11505 stroke-dashoffset: 12;
11506 animation-name: stroke;
11507 animation-duration: 0.25s;
11508 animation-fill-mode: forwards;
11509}
11510
11511.bx--loading--small .bx--inline-loading__svg {
11512 stroke: #3d70b2;
11513}
11514
11515/* If IE11 Don't show check animation */
11516@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
11517 .bx--inline-loading__checkmark-container {
11518 top: 1px;
11519 right: 0.5rem;
11520 }
11521 .bx--inline-loading__checkmark {
11522 animation: none;
11523 stroke-dashoffset: 0;
11524 stroke-dasharray: 0;
11525 }
11526}
11527
11528.bx--pagination-nav {
11529 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
11530 -webkit-font-smoothing: antialiased;
11531 -moz-osx-font-smoothing: grayscale;
11532 font-size: 0.875rem;
11533 line-height: 0;
11534}
11535
11536.bx--pagination-nav__list {
11537 -ms-flex-align: center;
11538 align-items: center;
11539 display: -ms-flexbox;
11540 display: flex;
11541 list-style: none;
11542}
11543
11544.bx--pagination-nav__list-item {
11545 padding: 0 0.5rem;
11546}
11547
11548.bx--pagination-nav__list-item:first-child {
11549 padding-left: 0;
11550}
11551
11552.bx--pagination-nav__list-item:last-child {
11553 padding-right: 0;
11554}
11555
11556.bx--pagination-nav__page {
11557 font-size: 0.875rem;
11558 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
11559 -webkit-font-smoothing: antialiased;
11560 -moz-osx-font-smoothing: grayscale;
11561 letter-spacing: 0;
11562 display: inline-block;
11563 background: none;
11564 -webkit-appearance: none;
11565 -moz-appearance: none;
11566 appearance: none;
11567 border: 0;
11568 padding: 0;
11569 cursor: pointer;
11570 border-radius: 0;
11571 color: #5a6872;
11572 display: block;
11573 font-weight: 600;
11574 line-height: 1;
11575 min-width: 1.5rem;
11576 outline: 0;
11577 padding: 0.3125rem 0.25rem;
11578 position: relative;
11579 text-align: center;
11580 text-decoration: none;
11581 transition: background-color, color;
11582 transition: 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
11583 -webkit-user-select: none;
11584 -moz-user-select: none;
11585 -ms-user-select: none;
11586 user-select: none;
11587}
11588
11589.bx--pagination-nav__page::-moz-focus-inner {
11590 border: 0;
11591}
11592
11593.bx--pagination-nav__page:hover {
11594 background-color: rgba(85, 150, 230, 0.1);
11595 color: #5a6872;
11596}
11597
11598.bx--pagination-nav__page:focus {
11599 outline: 2px solid #3d70b2;
11600 outline-offset: -2px;
11601}
11602
11603.bx--pagination-nav__page:disabled, .bx--pagination-nav__page.bx--pagination-nav__page--disabled {
11604 background: none;
11605 color: rgba(90, 104, 114, 0.5);
11606 outline: none;
11607 pointer-events: none;
11608}
11609
11610.bx--pagination-nav__page.bx--pagination-nav__page--active {
11611 background-color: #3d70b2;
11612 color: #fff;
11613 font-weight: 600;
11614 outline: none;
11615}
11616
11617.bx--pagination-nav__page .bx--pagination-nav__icon {
11618 fill: currentColor;
11619 pointer-events: none;
11620}
11621
11622.bx--pagination-nav__page--direction {
11623 -ms-flex-align: center;
11624 align-items: center;
11625 display: -ms-flexbox;
11626 display: flex;
11627 height: 1.5rem;
11628 -ms-flex-pack: center;
11629 justify-content: center;
11630 line-height: 0;
11631 width: 1.5rem;
11632}
11633
11634.bx--pagination-nav__select {
11635 position: relative;
11636}
11637
11638.bx--pagination-nav__page--select {
11639 -webkit-appearance: none;
11640 -moz-appearance: none;
11641 appearance: none;
11642 max-height: 1.5rem;
11643 text-indent: calc(50% - 4.5px);
11644}
11645
11646@-moz-document url-prefix() {
11647 .bx--pagination-nav__page--select {
11648 text-indent: 0;
11649 }
11650}
11651
11652.bx--pagination-nav__select-icon-wrapper {
11653 height: 100%;
11654 pointer-events: none;
11655 position: absolute;
11656 top: 0;
11657 width: 100%;
11658}
11659
11660.bx--pagination-nav__page--active + .bx--pagination-nav__select-icon-wrapper .bx--pagination-nav__select-icon {
11661 display: none;
11662}
11663
11664.bx--pagination-nav__select-icon {
11665 left: calc(50% - 0.5rem);
11666 pointer-events: none;
11667 position: absolute;
11668 top: calc(50% - 0.5rem);
11669}
11670
11671.bx--pagination-nav__accessibility-label {
11672 position: absolute;
11673 width: 1px;
11674 height: 1px;
11675 padding: 0;
11676 margin: -1px;
11677 overflow: hidden;
11678 clip: rect(0, 0, 0, 0);
11679 border: 0;
11680 visibility: visible;
11681 white-space: nowrap;
11682}
11683
11684.bx--pagination-nav__list-item:first-child .bx--pagination-nav__page--direction {
11685 margin-right: 0.5rem;
11686}
11687
11688.bx--pagination-nav__list-item:last-child .bx--pagination-nav__page--direction {
11689 margin-left: 0.5rem;
11690}
11691
11692.bx--footer--bottom-fixed {
11693 position: fixed;
11694 bottom: 0;
11695 left: 0;
11696}
11697
11698.bx--footer {
11699 font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
11700 box-sizing: border-box;
11701 display: -ms-flexbox;
11702 display: flex;
11703 -ms-flex-align: center;
11704 align-items: center;
11705 border-top: 2px solid #3d70b2;
11706 background-color: #fff;
11707 min-height: 3.5rem;
11708 z-index: 5000;
11709 padding: 1.25rem 5%;
11710 width: 100%;
11711}
11712
11713.bx--footer-info {
11714 display: -ms-flexbox;
11715 display: flex;
11716}
11717
11718@media screen and (max-width: 600px) {
11719 .bx--footer-info {
11720 -ms-flex-direction: column;
11721 flex-direction: column;
11722 }
11723}
11724
11725.bx--footer-info__item {
11726 font-size: 1.125rem;
11727 line-height: 1.5;
11728 display: -ms-flexbox;
11729 display: flex;
11730 -ms-flex-direction: column;
11731 flex-direction: column;
11732 margin: 0;
11733 margin-right: 4rem;
11734}
11735
11736.bx--footer-info__item > .bx--link {
11737 font-weight: 600;
11738}
11739
11740.bx--footer-info__item > .bx--footer-label {
11741 font-size: 0.875rem;
11742 line-height: 1.5;
11743 margin: 0;
11744}
11745
11746@media screen and (max-width: 600px) {
11747 .bx--footer-info__item > .bx--footer-label {
11748 display: none;
11749 }
11750}
11751
11752.bx--footer-cta {
11753 margin-left: auto;
11754}
11755
11756.bx--fab {
11757 transform: rotate(0);
11758 transition: transform 250ms;
11759 transform-origin: center;
11760 display: inline-block;
11761 width: 4.5rem;
11762 height: 4.5rem;
11763 text-decoration: none;
11764 filter: drop-shadow(0px 3px 3px 0 rgba(0, 0, 0, 0.1));
11765}
11766
11767.bx--fab__hidden {
11768 position: absolute;
11769 width: 1px;
11770 height: 1px;
11771 padding: 0;
11772 margin: -1px;
11773 overflow: hidden;
11774 clip: rect(0, 0, 0, 0);
11775 border: 0;
11776 visibility: visible;
11777 white-space: nowrap;
11778 color: #fff;
11779}
11780
11781.bx--fab__svg {
11782 width: 100%;
11783}
11784
11785.bx--fab__svg .bx--fab__hexagon {
11786 transition: fill 250ms;
11787 fill: #5596e6;
11788}
11789
11790.bx--fab__svg .bx--fab__plus-icon {
11791 transform: rotate(0);
11792 transition: transform 250ms;
11793 transform-origin: center;
11794 fill: #fff;
11795}
11796
11797.bx--fab[data-state='closed'] {
11798 transform: rotate(90deg);
11799 transition: transform 250ms;
11800 transform-origin: center;
11801}
11802
11803.bx--fab[data-state='closed'] .bx--fab__hexagon {
11804 transition: fill 250ms;
11805 fill: #42535c;
11806}
11807
11808.bx--fab[data-state='closed'] .bx--fab__plus-icon {
11809 transform: rotate(-45deg);
11810 transition: transform 250ms;
11811 transform-origin: center;
11812}
11813
11814/*# sourceMappingURL=carbon-components.css.map */