:root { --css--font-face: true; --brand-white: #ffffff; --brand-black: #141414; --brand-pink: #ff4092; --brand-purple: #7b1173; --brand-violet: #e000cf; --brand-grey-darker: #201f1f; --brand-grey-dark: #303030; --brand-grey: #41474e; --brand-grey-light: #8b98a9; --brand-grey-lighter: #e2e2e2; --brand-grey-dimmed: #f7f7f7; --brand-gradient: linear-gradient(to right bottom, #7b1173, #ff4092); --brand-alert-green: #5fb359; --brand-alert-red: #d80606; --brand-alert-orange: #b35f36; --brand-alert-yellow: #eac146; --brand-rank-green: #5fb359; --brand-rank-red: #C54186; --brand-rank-gray: #8A98A8; --brand-rank-orange: #b35f36; --brand-rank-yellow: #E8C64D; --brand-rank-green-bg: #5fb359; --brand-rank-red-bg: rgb(251 186 214 / 20%); --brand-rank-gray-bg: rgba(217, 217, 217, .29); --brand-rank-orange-bg: #b35f36; --brand-rank-yellow-bg: rgba(232, 198, 77, .17); --color-primary: #ff4092; --color-secondary: #8b98a9; --font-color-text: #41474e; --font-color-heading: #141414; --background-body: #fcfcfc; --background-body-transparent: rgba(255, 255, 255, .8); --background-content: #fff; --background-highlight: #f7f7f7; --border-color: #e2e2e2; --box-shadow-color: rgba(0, 0, 0, .05); --box-shadow: 0 12px 30px 0 rgb(0 0 0 / 10%); --button-disabled-color: #ff409280; --font-family-base: "Sharp Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-family-heading: "Sharp Sans Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-family-monospace: "Fira Code", "Fira Mono", Menlo, Monaco, Consolas, "Courier New", monospace; --font-size-root: 15px; --font-size-base: 1rem; --font-size-large: 1.2rem; --font-size-small: .85rem; --font-size-mini: .65rem; --font-size-text: 1rem; --font-size-label: 1rem; --font-size-title: 1.4rem; --font-size-h1: 3rem; --font-size-h2: 2.5rem; --font-size-h3: 1.7rem; --font-size-h4: 1.3rem; --font-size-h5: 1.1rem; --font-weight-base: 500; --font-weight-bold: 600; --line-height: 1.6; --spacer: 3rem; --border-radius: .2rem; --layout-max-width: 85rem; --checkbox-size: 1.6em; --break-point--small: 640px; --break-point--medium: 860px; --break-point--large: 1140px; --break-point--huge: 1400px; } .dark { --font-color-text: #e2e2e2; --font-color-heading: #f7f7f7; --background-body: rgb(10, 10, 10); --background-body-transparent: rgba(10, 10, 10, .9); --background-content: #141414; --background-highlight: #201f1f; --border-color: #303030; --box-shadow-color: rgba(0, 0, 0, .2); } *, ::before, ::after { box-sizing: border-box; } html, body { display: flex; flex-direction: column; position: relative; width: 100%; height: 100%; margin: 0px; font-size: 14px !important; } body { color: var(--font-color-text); font-size: var(--font-size-base); font-family: var(--font-family-base); font-weight: var(--font-weight-base); line-height: var(--line-height); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-font-smoothing: antialiased; position: relative; background: var(--background-body); } a { text-decoration: none; color: var(--brand-pink); transition: 0.2s ease-out; } p { margin: 0px; } h1, h2, h3, h4, h5 { color: var(--font-color-heading); line-height: 1.2; font-weight: var(--font-weight-bold); margin-top: 0px; margin-bottom: var(--spacer); font-family: var(--font-family-heading) !important; } h1 { font-size: var(--font-size-h2); } h2 { font-size: var(--font-size-h3); } h3 { font-size: var(--font-size-h4); } @media (min-width: 30rem) { h1 { font-size: var(--font-size-h1); } h2 { font-size: var(--font-size-h2); } h3 { font-size: var(--font-size-h3); } } h5 { font-size: var(--font-size-h5); } figure, svg, video, audio, embed, canvas, picture { max-width: 100%; height: auto; margin: 0px auto; display: block; } ul { margin: 0px; padding: 0px; } ul li { display: block; } ::selection { background: var(--font-color-heading); color: var(--background-body); } ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 3px inset; } ::-webkit-scrollbar-thumb { background-color: rgb(216, 216, 216); z-index: 10000; } body::-webkit-scrollbar { width: 0px; } form, fieldset { border: 0px; padding: 0px; margin: 0px; } input { font-size: var(--font-size-base); } input:focus { outline-color: var(--brand-grey-darker); } table { width: 100%; border-collapse: collapse; overflow: auto; } table th, table td { border-top: 0px; border-right: 0px; border-left: 0px; border-image: initial; margin: 0px; padding: calc(var(--spacer) / 4); border-bottom: 1px solid var(--border-color); text-align: left; font-size: var(--font-size-base) !important; } table th { font-weight: var(--font-weight-bold); background-color: var(--brand-grey-dimmed) !important; } body a { color: var(--text-color-primary); text-decoration: underline; cursor: pointer; } body p { margin-bottom: calc(var(--spacer) / 6); } h1:focus-visible { outline: none; } body button:focus { outline: none !important; } .bx--tooltip { background-color: var(--brand-white) !important; } .bx--tooltip__trigger:not(.bx--btn--icon-only):focus { outline: 0px !important; } .bx--btn { z-index: 0 !important; } .bx--tooltip__content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .bx--pagination { background-color: var(--brand-white) !important; } .bx--toast-notification { position: fixed; z-index: 1001; top: 0px; left: 0px; width: 100vw !important; } .bx--toast-notification__caption { display: none; } .bx--toast-notification__subtitle, .bx--toast-notification__title { text-align: left; } .bx--toast-notification__subtitle { font-size: var(--font-size-h5) !important; } .bx--toast-notification__icon { margin: 0px; } .bx--toast-notification h3 { font-size: var(--font-size-h4); } .bx--toast-notification { border-left: 0px !important; padding: calc(var(--spacer) / 2) !important; } :root { font-family: Inter, Avenir, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; font-weight: 400; color-scheme: light dark; color: rgba(255, 255, 255, 0.87); background-color: rgb(255, 255, 255); font-synthesis: none; text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; } a { font-weight: 500; color: rgb(100, 108, 255); text-decoration: inherit; } body { margin: 0px; display: flex; place-items: center; min-width: 320px; min-height: 100vh; } h1 { font-size: 3.2em; line-height: 1.1; } .card { padding: 2em; } #app { max-width: 1280px; margin: 0px auto; padding: 2rem; text-align: center; } button { border-radius: 8px; border: 1px solid transparent; padding: 0.6em 1.2em; font-size: 1em; font-weight: 500; font-family: inherit; background-color: rgb(26, 26, 26); cursor: pointer; transition: border-color 0.25s; } button:hover { border-color: var(--brand-grey-light); } button:focus, button:focus-visible { outline: -webkit-focus-ring-color auto 4px; } .rewardsOverview .title { font-size: var(--font-size-large) !important; } .steps-container { width: 100%; } .steps__label { color: var(--brand-grey-light); margin-top: 4px !important; font-size: var(--font-size-mini) !important; } @media (prefers-color-scheme: light) { :root { color: rgb(33, 53, 71); background-color: rgb(255, 255, 255); } a:hover { color: var(--brand-grey-light); } button { background-color: rgb(249, 249, 249); } } .circle.svelte-14upwad { height: var(--size); width: var(--size); border-color: var(--color) transparent var(--color) var(--color); border-width: calc(var(--size) / 15); border-style: solid; border-image: initial; border-radius: 50%; animation: var(--duration) linear 0s infinite normal none running svelte-14upwad-rotate; } @keyframes svelte-14upwad-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .circle.svelte-1vclic6 { width: var(--size); height: var(--size); box-sizing: border-box; position: relative; border-width: 3px; border-style: solid; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; border-image: initial; border-top-color: var(--colorOuter); border-radius: 50%; animation: svelte-1vclic6-circleSpin var(--durationOuter) linear infinite; } .circle.svelte-1vclic6::before, .circle.svelte-1vclic6::after { content: ""; box-sizing: border-box; position: absolute; border: 3px solid transparent; border-radius: 50%; } .circle.svelte-1vclic6::after { border-top-color: var(--colorInner); inset: 9px; animation: svelte-1vclic6-circleSpin var(--durationInner) linear infinite; } .circle.svelte-1vclic6::before { border-top-color: var(--colorCenter); inset: 3px; animation: svelte-1vclic6-circleSpin var(--durationCenter) linear infinite; } @keyframes svelte-1vclic6-circleSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .wrapper.svelte-1vf8im1 { width: var(--size); height: var(--size); display: flex; justify-content: center; align-items: center; line-height: 0; box-sizing: border-box; } .inner.svelte-1vf8im1 { transform: scale(calc(var(--floatSize) / 52)); } .ball-container.svelte-1vf8im1 { animation: svelte-1vf8im1-ballTwo var(--duration) infinite; width: 44px; height: 44px; flex-shrink: 0; position: relative; } .single-ball.svelte-1vf8im1 { width: 44px; height: 44px; position: absolute; } .ball.svelte-1vf8im1 { width: 20px; height: 20px; border-radius: 50%; position: absolute; animation: svelte-1vf8im1-ballOne var(--duration) infinite ease; } .ball-top-left.svelte-1vf8im1 { background-color: var(--ballTopLeftColor); top: 0px; left: 0px; } .ball-top-right.svelte-1vf8im1 { background-color: var(--ballTopRightColor); top: 0px; left: 24px; } .ball-bottom-left.svelte-1vf8im1 { background-color: var(--ballBottomLeftColor); top: 24px; left: 0px; } .ball-bottom-right.svelte-1vf8im1 { background-color: var(--ballBottomRightColor); top: 24px; left: 24px; } @keyframes svelte-1vf8im1-ballOne { 0% { position: absolute; } 50% { top: 12px; left: 12px; position: absolute; opacity: 0.5; } 100% { position: absolute; } } @keyframes svelte-1vf8im1-ballTwo { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(360deg) scale(1.3); } 100% { transform: rotate(720deg) scale(1); } } .wrapper.svelte-h1a2xs { position: relative; width: var(--size); height: var(--size); } .circle.svelte-h1a2xs { position: absolute; width: var(--size); height: var(--size); background-color: var(--color); border-radius: 100%; opacity: 0.6; top: 0px; left: 0px; animation-fill-mode: both; animation-name: svelte-h1a2xs-bounce !important; } @keyframes svelte-h1a2xs-bounce { 0%, 100% { transform: scale(0); } 50% { transform: scale(1); } } .svelte-1exboqr { overflow: hidden; position: relative; text-indent: -9999px; display: inline-block; background: rgb(255, 136, 102); border-radius: 50%; transform: rotate(90deg); transform-origin: 50% 50%; animation: svelte-1exboqr-plus-loader-background var(--duration) infinite ease-in-out; } .svelte-1exboqr::after { background: rgb(255, 136, 102); border-radius: 50% 0px 0px 50%; content: ""; position: absolute; right: 50%; top: 0px; width: 50%; height: 100%; transform-origin: 100% 50%; animation: svelte-1exboqr-plus-loader-top var(--duration) infinite linear; } .svelte-1exboqr::before { background: rgb(255, 204, 102); border-radius: 50% 0px 0px 50%; content: ""; position: absolute; right: 50%; top: 0px; width: 50%; height: 100%; transform-origin: 100% 50%; animation: svelte-1exboqr-plus-loader-bottom var(--duration) infinite linear; } @keyframes svelte-1exboqr-plus-loader-top { 2.5% { background: rgb(255, 136, 102); transform: rotateY(0deg); animation-timing-function: ease-in; } 13.75% { background: rgb(255, 67, 13); transform: rotateY(90deg); animation-timing-function: step-start; } 13.76% { background: rgb(255, 174, 13); transform: rotateY(90deg); animation-timing-function: ease-out; } 25% { background: rgb(255, 204, 102); transform: rotateY(180deg); } 27.5% { background: rgb(255, 204, 102); transform: rotateY(180deg); animation-timing-function: ease-in; } 41.25% { background: rgb(255, 174, 13); transform: rotateY(90deg); animation-timing-function: step-start; } 41.26% { background: rgb(44, 198, 66); transform: rotateY(90deg); animation-timing-function: ease-out; } 50% { background: rgb(102, 221, 119); transform: rotateY(0deg); } 52.5% { background: rgb(102, 221, 119); transform: rotateY(0deg); animation-timing-function: ease-in; } 63.75% { background: rgb(44, 198, 66); transform: rotateY(90deg); animation-timing-function: step-start; } 63.76% { background: rgb(19, 134, 210); transform: rotateY(90deg); animation-timing-function: ease-out; } 75% { background: rgb(68, 170, 238); transform: rotateY(180deg); } 77.5% { background: rgb(68, 170, 238); transform: rotateY(180deg); animation-timing-function: ease-in; } 91.25% { background: rgb(19, 134, 210); transform: rotateY(90deg); animation-timing-function: step-start; } 91.26% { background: rgb(255, 67, 13); transform: rotateY(90deg); animation-timing-function: ease-in; } 100% { background: rgb(255, 136, 102); transform: rotateY(0deg); animation-timing-function: step-start; } } @keyframes svelte-1exboqr-plus-loader-bottom { 0% { background: rgb(255, 204, 102); animation-timing-function: step-start; } 50% { background: rgb(255, 204, 102); animation-timing-function: step-start; } 75% { background: rgb(68, 170, 238); animation-timing-function: step-start; } 100% { background: rgb(68, 170, 238); animation-timing-function: step-start; } } @keyframes svelte-1exboqr-plus-loader-background { 0% { background: rgb(255, 136, 102); transform: rotate(180deg); } 25% { background: rgb(255, 136, 102); transform: rotate(180deg); animation-timing-function: step-start; } 27.5% { background: rgb(102, 221, 119); transform: rotate(90deg); } 50% { background: rgb(102, 221, 119); transform: rotate(90deg); animation-timing-function: step-start; } 52.5% { background: rgb(102, 221, 119); transform: rotate(0deg); } 75% { background: rgb(102, 221, 119); transform: rotate(0deg); animation-timing-function: step-start; } 77.5% { background: rgb(255, 136, 102); transform: rotate(270deg); } 100% { background: rgb(255, 136, 102); transform: rotate(270deg); animation-timing-function: step-start; } } .wrapper.svelte-9juun5 { width: var(--size); height: var(--size); } .circle.svelte-9juun5 { width: var(--size); height: var(--size); background-color: var(--color); border-radius: 100%; display: inline-block; animation: svelte-9juun5-scaleOut var(--duration) ease-in-out infinite; } @keyframes svelte-9juun5-scaleOut { 0% { transform: scale(0); } 100% { transform: scale(1); opacity: 0; } } .wrapper.svelte-1wp57lu { width: var(--size); height: var(--stroke); transform: scale(calc(var(--floatSize) / 75)); display: flex; justify-content: center; align-items: center; } .line.svelte-1wp57lu { width: var(--size); height: var(--stroke); background: var(--color); border-radius: var(--stroke); transform-origin: center center; animation: svelte-1wp57lu-spineLine var(--duration) ease infinite; } @keyframes svelte-1wp57lu-spineLine { 0% { transform: rotate(-20deg); height: 5px; width: 75px; } 5% { height: 5px; width: 75px; } 30% { transform: rotate(380deg); height: 5px; width: 75px; } 40% { transform: rotate(360deg); height: 5px; width: 75px; } 55% { transform: rotate(0deg); height: 5px; width: 5px; } 65% { transform: rotate(0deg); height: 5px; width: 85px; } 68% { transform: rotate(0deg); height: 5px; } 75% { transform: rotate(0deg); height: 5px; width: 1px; } 78% { height: 5px; width: 5px; } 90% { height: 5px; width: 75px; transform: rotate(0deg); } 99%, 100% { height: 5px; width: 75px; transform: rotate(-20deg); } } .wrapper.svelte-1uxpkwt { height: var(--size); width: var(--size); display: inline-block; text-align: center; font-size: 10px; } .rect.svelte-1uxpkwt { height: 100%; width: 10%; display: inline-block; margin-right: 4px; background-color: var(--color); animation: svelte-1uxpkwt-stretch var(--duration) ease-in-out infinite; } @keyframes svelte-1uxpkwt-stretch { 0%, 40%, 100% { transform: scaleY(0.4); } 20% { transform: scaleY(1); } } .wrapper.svelte-vhcw6 { height: calc(var(--size) / 15); width: calc(var(--size) * 2); background-color: var(--rgba); position: relative; overflow: hidden; background-clip: padding-box; } .lines.svelte-vhcw6 { height: calc(var(--size) / 15); background-color: var(--color); } .small-lines.svelte-vhcw6 { position: absolute; overflow: hidden; background-clip: padding-box; display: block; border-radius: 2px; will-change: left, right; animation-fill-mode: forwards; } .small-lines.\31 .svelte-vhcw6 { animation: var(--duration) cubic-bezier(.65,.815,.735,.395) 0s infinite normal none running svelte-vhcw6-long; } .small-lines.\32 .svelte-vhcw6 { animation: var(--duration) cubic-bezier(.165,.84,.44,1) calc((var(--duration)+.1) / 2) infinite normal none running svelte-vhcw6-short; } @keyframes svelte-vhcw6-long { 0% { left: -35%; right: 100%; } 60% { left: 100%; right: -90%; } 100% { left: 100%; right: -90%; } } @keyframes svelte-vhcw6-short { 0% { left: -200%; right: 100%; } 60% { left: 107%; right: -8%; } 100% { left: 107%; right: -8%; } } .wrapper.svelte-1cy66mt { width: var(--size); height: var(--size); } .circle.svelte-1cy66mt { border-radius: 100%; position: absolute; opacity: 0; width: var(--size); height: var(--size); background-color: var(--color); animation: svelte-1cy66mt-bounce var(--duration) linear infinite; } @keyframes svelte-1cy66mt-bounce { 0% { opacity: 0; transform: scale(0); } 5% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } } .wrapper.svelte-17ey38u { position: relative; width: var(--size); height: var(--size); } .border.svelte-17ey38u { border-color: var(--color); position: absolute; top: 0px; left: 0px; width: var(--size); height: var(--size); opacity: 0.4; perspective: 800px; border-width: 6px; border-style: solid; border-image: initial; border-radius: 100%; } .border.\31 .svelte-17ey38u { animation: var(--duration) linear 0s infinite normal none running svelte-17ey38u-ringOne; } .border.\32 .svelte-17ey38u { animation: var(--duration) linear 0s infinite normal none running svelte-17ey38u-ringTwo; } @keyframes svelte-17ey38u-ringOne { 0% { transform: rotateX(0deg) rotateY(0deg) rotate(0deg); } 100% { transform: rotateX(360deg) rotateY(180deg) rotate(360deg); } } @keyframes svelte-17ey38u-ringTwo { 0% { transform: rotateX(0deg) rotateY(0deg) rotate(0deg); } 100% { transform: rotateX(180deg) rotateY(360deg) rotate(360deg); } } .wrapper.svelte-14w6xk7 { height: var(--size); width: var(--size); display: flex; align-items: center; justify-content: center; } .dot.svelte-14w6xk7 { height: var(--dotSize); width: var(--dotSize); background-color: var(--color); margin: 2px; display: inline-block; border-radius: 100%; animation: svelte-14w6xk7-sync var(--duration) ease-in-out infinite alternate both running; } @-webkit-keyframes svelte-14w6xk7-sync { 33% { transform: translateY(10px); } 66% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } @keyframes svelte-14w6xk7-sync { 33% { transform: translateY(10px); } 66% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } .wrapper.svelte-1fuumrt { width: var(--size); height: calc(var(--size) / 2); overflow: hidden; } .rainbow.svelte-1fuumrt { width: var(--size); height: var(--size); border-left-color: transparent; border-bottom-color: transparent; border-top-color: var(--color); border-right-color: var(--color); box-sizing: border-box; transform: rotate(-200deg); border-radius: 50%; border-style: solid; animation: var(--duration) ease-in-out 0s infinite normal none running svelte-1fuumrt-rotate; } @keyframes svelte-1fuumrt-rotate { 0% { border-width: 10px; } 25% { border-width: 3px; } 50% { transform: rotate(115deg); border-width: 10px; } 75% { border-width: 3px; } 100% { border-width: 10px; } } .wrapper.svelte-8cmcz4 { position: relative; display: flex; justify-content: center; align-items: center; width: calc(var(--size) * 2.5); height: var(--size); overflow: hidden; } .bar.svelte-8cmcz4 { position: absolute; top: calc(var(--size) / 10); width: calc(var(--size) / 5); height: calc(var(--size) / 10); margin-top: calc(var(--size) - var(--size) / 10); transform: skewY(0deg); background-color: var(--color); animation: svelte-8cmcz4-motion var(--duration) ease-in-out infinite; } @keyframes svelte-8cmcz4-motion { 25% { transform: skewY(25deg); } 50% { height: 100%; margin-top: 0px; } 75% { transform: skewY(-25deg); } } .wrapper.svelte-1x2s7pr { width: calc(var(--size) * 1.3); height: calc(var(--size) * 1.3); display: flex; justify-content: center; align-items: center; } .firework.svelte-1x2s7pr { border: calc(var(--size) / 10) dotted var(--color); width: var(--size); height: var(--size); border-radius: 50%; animation: svelte-1x2s7pr-fire var(--duration) cubic-bezier(.165,.84,.44,1) infinite; } @keyframes svelte-1x2s7pr-fire { 0% { opacity: 1; transform: scale(0.1); } 25% { opacity: 0.85; } 100% { transform: scale(1); opacity: 0; } } .wrapper.svelte-446r86 { position: relative; display: flex; justify-content: center; align-items: center; width: var(--size); height: calc(var(--size) / 2.5); } .cube.svelte-446r86 { position: absolute; top: 0px; width: calc(var(--size) / 5); height: calc(var(--size) / 2.5); background-color: var(--color); animation: svelte-446r86-motion var(--duration) cubic-bezier(.895,.03,.685,.22) infinite; } @keyframes svelte-446r86-motion { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } .wrapper.svelte-1v1mfqa { position: relative; display: flex; justify-content: center; align-items: center; width: var(--size); height: var(--size); } .ring.svelte-1v1mfqa { position: absolute; border: 2px solid var(--color); border-radius: 50%; background-color: transparent; animation: svelte-1v1mfqa-motion var(--duration) ease infinite; } @keyframes svelte-1v1mfqa-motion { 0% { transform: translateY(var(--motionOne)); } 50% { transform: translateY(var(--motionTwo)); } 100% { transform: translateY(var(--motionThree)); } } .wrapper.svelte-1unnvn6 { height: var(--size); width: var(--size); display: flex; justify-content: center; align-items: center; } .spinner.svelte-1unnvn6 { height: var(--size); width: var(--size); animation: svelte-1unnvn6-rotate var(--duration) infinite linear; } .dot.svelte-1unnvn6 { width: 60%; height: 60%; display: inline-block; position: absolute; top: 0px; background-color: var(--color); border-radius: 100%; animation: svelte-1unnvn6-bounce var(--duration) infinite ease-in-out; } @keyframes svelte-1unnvn6-rotate { 100% { transform: rotate(360deg); } } @keyframes svelte-1unnvn6-bounce { 0%, 100% { transform: scale(0); } 50% { transform: scale(1); } } .wrapper.svelte-tycttu { position: relative; display: flex; justify-content: center; align-items: center; width: var(--size); height: var(--size); } .shadow.svelte-tycttu { color: var(--color); font-size: var(--size); overflow: hidden; width: var(--size); height: var(--size); border-radius: 50%; margin: 28px auto; position: relative; transform: translateZ(0px); animation: svelte-tycttu-load var(--duration) infinite ease,svelte-tycttu-round var(--duration) infinite ease; } @keyframes svelte-tycttu-load { 0% { box-shadow: 0px -0.83em 0px -0.4em, 0px -0.83em 0px -0.42em, 0px -0.83em 0px -0.44em, 0px -0.83em 0px -0.46em, 0px -0.83em 0px -0.477em; } 5%, 95% { box-shadow: 0px -0.83em 0px -0.4em, 0px -0.83em 0px -0.42em, 0px -0.83em 0px -0.44em, 0px -0.83em 0px -0.46em, 0px -0.83em 0px -0.477em; } 10%, 59% { box-shadow: 0px -0.83em 0px -0.4em, -0.087em -0.825em 0px -0.42em, -0.173em -0.812em 0px -0.44em, -0.256em -0.789em 0px -0.46em, -0.297em -0.775em 0px -0.477em; } 20% { box-shadow: 0px -0.83em 0px -0.4em, -0.338em -0.758em 0px -0.42em, -0.555em -0.617em 0px -0.44em, -0.671em -0.488em 0px -0.46em, -0.749em -0.34em 0px -0.477em; } 38% { box-shadow: 0px -0.83em 0px -0.4em, -0.377em -0.74em 0px -0.42em, -0.645em -0.522em 0px -0.44em, -0.775em -0.297em 0px -0.46em, -0.82em -0.09em 0px -0.477em; } 100% { box-shadow: 0px -0.83em 0px -0.4em, 0px -0.83em 0px -0.42em, 0px -0.83em 0px -0.44em, 0px -0.83em 0px -0.46em, 0px -0.83em 0px -0.477em; } } @keyframes svelte-tycttu-round { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .square.svelte-btmyrn { height: var(--size); width: var(--size); background-color: var(--color); animation-duration: ; animation-timing-function: ; animation-delay: ; animation-iteration-count: ; animation-direction: ; animation-play-state: ; animation-name: ; animation-timeline: ; animation-range-start: ; animation-range-end: ; animation-fill-mode: both; perspective: 100px; display: inline-block; } @keyframes svelte-btmyrn-squareDelay { 25% { transform: rotateX(180deg) rotateY(0deg); } 50% { transform: rotateX(180deg) rotateY(180deg); } 75% { transform: rotateX(0deg) rotateY(180deg); } 100% { transform: rotateX(0deg) rotateY(0deg); } } .wrapper.svelte-nlgli4 { height: var(--size); width: var(--size); border-radius: 100%; animation-duration: ; animation-timing-function: ; animation-delay: ; animation-iteration-count: ; animation-direction: ; animation-play-state: ; animation-name: ; animation-timeline: ; animation-range-start: ; animation-range-end: ; animation-fill-mode: forwards; position: relative; } .circle-one.svelte-nlgli4 { top: var(--moonSize); background-color: var(--color); width: calc(var(--size) / 7); height: calc(var(--size) / 7); border-radius: 100%; animation-duration: ; animation-timing-function: ; animation-delay: ; animation-iteration-count: ; animation-direction: ; animation-play-state: ; animation-name: ; animation-timeline: ; animation-range-start: ; animation-range-end: ; animation-fill-mode: forwards; opacity: 0.8; position: absolute; } .circle-two.svelte-nlgli4 { opacity: 0.1; border: calc(var(--size) / 7) solid var(--color); height: var(--size); width: var(--size); border-radius: 100%; box-sizing: border-box; } @keyframes svelte-nlgli4-moonStretchDelay { 100% { transform: rotate(360deg); } } .wrapper.svelte-1sqavxm.svelte-1sqavxm { height: var(--size); width: var(--size); position: relative; display: flex; justify-content: center; align-items: center; } .wrapper.svelte-1sqavxm .svelte-1sqavxm { line-height: 0; box-sizing: border-box; } .spinner-inner.svelte-1sqavxm.svelte-1sqavxm { height: var(--size); width: var(--size); transform: scale(calc(var(--size) / 70)); } .mask.svelte-1sqavxm.svelte-1sqavxm { position: absolute; border-radius: 2px; overflow: hidden; backface-visibility: hidden; } .plane.svelte-1sqavxm.svelte-1sqavxm { background: var(--color); width: 400%; height: 100%; position: absolute; z-index: 100; backface-visibility: hidden; } #top.svelte-1sqavxm .plane.svelte-1sqavxm { z-index: 2000; animation: svelte-1sqavxm-trans1 var(--duration) ease-in infinite 0s backwards; } #middle.svelte-1sqavxm .plane.svelte-1sqavxm { transform: translateZ(0px); background: var(--rgba); animation: svelte-1sqavxm-trans2 var(--duration) linear infinite calc(var(--duration) / 4) backwards; } #bottom.svelte-1sqavxm .plane.svelte-1sqavxm { z-index: 2000; animation: svelte-1sqavxm-trans3 var(--duration) ease-out infinite calc(var(--duration) / 2) backwards; } #top.svelte-1sqavxm.svelte-1sqavxm { width: 53px; height: 20px; left: 20px; top: 5px; transform: skew(-15deg); z-index: 100; } #middle.svelte-1sqavxm.svelte-1sqavxm { width: 33px; height: 20px; left: 20px; top: 21px; transform: skew(-15deg, 40deg); } #bottom.svelte-1sqavxm.svelte-1sqavxm { width: 53px; height: 20px; top: 35px; transform: skew(-15deg); } @keyframes svelte-1sqavxm-trans1 { 0% { transform: translate3d(53px, 0px, 0px); } 100% { transform: translate3d(-250px, 0px, 0px); } } @keyframes svelte-1sqavxm-trans2 { 0% { transform: translate3d(-160px, 0px, 0px); } 100% { transform: translate3d(53px, 0px, 0px); } } @keyframes svelte-1sqavxm-trans3 { 0% { transform: translate3d(53px, 0px, 0px); } 100% { transform: translate3d(-220px, 0px, 0px); } } span.svelte-evhfle { width: var(--size); height: calc(var(--size) / 4); position: relative; display: block; } div.svelte-evhfle { width: calc(var(--size) / 4); height: calc(var(--size) / 4); position: absolute; left: 0px; top: 0px; border-radius: 2px; background: var(--color); transform: translate(-50%) rotate(45deg) scale(0); animation: svelte-evhfle-diamonds var(--duration) linear infinite; } div.svelte-evhfle:nth-child(1) { animation-delay: calc(var(--duration) * 2 / 3 * -1); } div.svelte-evhfle:nth-child(2) { animation-delay: calc(var(--duration) * 2 / 3 * -2); } div.svelte-evhfle:nth-child(3) { animation-delay: calc(var(--duration) * 2 / 3 * -3); } @keyframes svelte-evhfle-diamonds { 50% { left: 50%; transform: translate(-50%) rotate(45deg) scale(1); } 100% { left: 100%; transform: translate(-50%) rotate(45deg) scale(0); } } div.svelte-1cgj772 { position: relative; width: var(--size); height: var(--size); background-color: transparent; box-shadow: inset 0 0 0 2px var(--color); border-radius: 50%; } div.svelte-1cgj772::before, div.svelte-1cgj772::after { position: absolute; content: ""; background-color: var(--color); } div.svelte-1cgj772::after { width: calc(var(--size) / 2.4); height: 2px; top: calc(var(--size) / 2); left: calc(var(--size) / 2); transform-origin: 1px 1px; animation: svelte-1cgj772-rotate calc(var(--duration) / 4) linear infinite; } div.svelte-1cgj772::before { width: calc(var(--size) / 3); height: 2px; top: calc((var(--size) / 2)); left: calc((var(--size) / 2)); transform-origin: 1px 1px; animation: svelte-1cgj772-rotate var(--duration) linear infinite; } @keyframes svelte-1cgj772-rotate { 100% { transform: rotate(360deg); } } .button.svelte-1j6vsa4 { border: 0px; cursor: pointer; outline: 0px; margin: 0px; width: fit-content; min-width: 7rem; font-size: var(--font-size-base); padding: calc(var(--spacer) / 6) calc(var(--spacer) / 4); font-weight: 700; text-transform: uppercase; border-radius: var(--border-radius); transition: 0.2s ease-out; color: var(--brand-white); background: var(--brand-gradient); box-shadow: rgba(0, 0, 0, 0.1) 0px 9px 18px; display: flex; align-items: center; justify-content: center; user-select: none; text-align: center; } .button.svelte-1j6vsa4:hover, .button.svelte-1j6vsa4:focus { text-decoration: none; box-shadow: rgba(0, 0, 0, 0.1) 0px 12px 30px; transform: translate3d(0px, -0.05rem, 0px); } .button.svelte-1j6vsa4:active { background: var(--brand-grey-light); transition: none; transform: none; box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 18px; } .button.svelte-1j6vsa4:disabled, .button.disabled.svelte-1j6vsa4 { cursor: not-allowed; pointer-events: none; opacity: 0.25; } .loadingSpinnerContainer.svelte-1j6vsa4 { margin-right: 5px; display: inline-block; } .disabled.svelte-1j6vsa4 { background-color: var(--button-disabled-color); cursor: default; } .disabledSecondary.svelte-1j6vsa4 { cursor: default; color: var(--brand-grey-lighter) !important; background-color: var(--background-body) !important; } .buttonSecondary.svelte-1j6vsa4 { border-radius: var(--border-radius); background: var(--brand-grey-dimmed) !important; border: 1px solid var(--brand-grey-lighter) !important; color: var(--brand-grey-light) !important; } .textOnly.svelte-1j6vsa4 { border: 0px; border-radius: 0px; outline: 0px; padding: 0px; display: inline-block; background: 0px center; color: var(--brand-pink); box-shadow: none; cursor: pointer; min-width: auto; } .textOnly.svelte-1j6vsa4:hover { color: var(--color-primary) !important; } .textOnly.svelte-1j6vsa4:disabled, .textOnly[disabled].svelte-1j6vsa4:hover { color: var(--brand-grey-lighter) !important; } span.svelte-1j6vsa4 { line-height: 100%; } .fullWidth.svelte-1j6vsa4 { width: 100%; } img.svelte-1pentn1 { height: 0.8rem; } .imageContainer.svelte-1pentn1 { display: flex; align-items: center; justify-content: center; width: calc(var(--spacer) / 4); margin-right: calc(var(--spacer) / 8); } .container.svelte-18vz5ph { display: flex; align-items: center; width: 100%; margin-bottom: calc(var(--spacer) / 4); } input.svelte-18vz5ph { margin-right: calc(var(--spacer) / 3); } .networkName.svelte-18vz5ph { font-size: var(--font-size-base); color: var(--brand-black); text-align: start; } .large.svelte-18vz5ph { font-size: var(--font-size-large); } .normal.svelte-18vz5ph { font-size: var(--font-size-normal); } .networkDetails.svelte-18vz5ph { display: flex; align-items: center; justify-content: center; } .margin0.svelte-18vz5ph { margin: 0px; } .container.svelte-18vz5ph:only-child { margin: 0px; } .container.svelte-18vz5ph:last-child { margin: 0px; } .container.svelte-1xionv1 { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; } .input.svelte-1xionv1 { background-color: var(--background-content); color: var(--brand-black); font-weight: 700; border: 1.5px solid var(--brand-grey-lighter); padding: calc(var(--spacer) / 14) calc(var(--spacer) / 6); border-radius: 3px; width: 100%; } .input.svelte-1xionv1:disabled { background-color: var(--brand-grey-dimmed); color: var(--brand-grey-light); } .actionsContainer.svelte-1xionv1 { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; width: 100%; margin-top: calc(var(--spacer) / 10); } .actionsContainer.svelte-1xionv1 .maxItem { font-size: var(--font-size-small); align-items: center; color: var(--brand-grey-light); } .actionsContainer.svelte-1xionv1 .maxValueLabel { color: var(--brand-black); } .disableArrows.svelte-1xionv1::-webkit-inner-spin-button, .disableArrows.svelte-1xionv1::-webkit-outer-spin-button { appearance: none !important; margin: 0px !important; } .maxValueLabel.svelte-1xionv1 { margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: calc(var(--spacer) / 4); } .actionsContainer.svelte-1xionv1 .maxItemButton { margin: 0px; height: fit-content; } .allocationInput[type="number"].svelte-1xionv1 { } .container.svelte-1n23qgf { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; } .input.svelte-1n23qgf { background-color: var(--background-content); color: var(--brand-black); font-weight: 700; border: 1.5px solid var(--brand-grey-lighter); padding: calc(var(--spacer) / 14) calc(var(--spacer) / 6); border-radius: 3px; width: 100%; } .input.svelte-1n23qgf:disabled { background-color: var(--brand-grey-dimmed); color: var(--brand-grey-light); } .inputError.svelte-1n23qgf { color: var(--brand-alert-red); } .periodList.svelte-1n23qgf { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-top: calc(var(--spacer) / 12); padding: 0 calc(var(--spacer) / 8); } .periodItem.svelte-1n23qgf { font-size: var(--font-size-small); color: var(--brand-grey-light); } .periodItem.svelte-1n23qgf:hover { cursor: pointer; color: var(--brand-black); } input.svelte-1n23qgf::-webkit-calendar-picker-indicator { cursor: pointer; } .selected.svelte-1n23qgf { color: var(--brand-black); font-weight: 700; } @media (prefers-color-scheme: dark) { input.svelte-1n23qgf::-webkit-calendar-picker-indicator { filter: invert(1); } } .container.svelte-17k1rx { display: flex; align-items: center; justify-content: center; width: 100%; } .inputContainer.svelte-17k1rx { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; } .input.svelte-17k1rx:disabled { background-color: var(--brand-grey-dimmed) !important; color: var(--brand-grey-dimmed) !important; } .input.svelte-17k1rx { background-color: var(--background-content); color: var(--brand-grey-light); font-weight: 700; border: 1.5px solid var(--brand-grey-lighter); padding: calc(var(--spacer) / 14) calc(var(--spacer) / 6); border-radius: 3px; width: 100%; } label.svelte-17k1rx { font-weight: 700; margin-right: calc(var(--spacer) / 8); font-size: var(--font-size-base); } .message.svelte-17k1rx { font-size: var(--font-size-small); margin-top: calc(var(--spacer) / 6); color: var(--brand-alert-red); } .row.svelte-17k1rx { flex-direction: row; } .column.svelte-17k1rx { flex-direction: column; } .margin-bottom.svelte-17k1rx { margin-bottom: calc(var(--spacer) / 6); } .checkbox.svelte-17k1rx { width: auto; background-color: var(--background-content); color: var(--brand-grey-light); } .invalid.svelte-17k1rx { border-color: red !important; } input[type="checkbox"].svelte-17k1rx { accent-color: red; } .container.svelte-vsvcuh { width: 100%; } .container.svelte-1uwj9vg { display: flex; align-items: center; border: 1px solid var(--brand-grey-lighter); padding: calc(var(--spacer) / 8) calc(var(--spacer) / 6); background-color: var(--background-content); } .walletAddress.svelte-1uwj9vg { font-size: var(--font-size-small); color: var(--brand-black); margin-left: calc(var(--spacer) / 6); font-weight: 700; display: inline-flex; align-items: center; } .walletContainer.svelte-1uwj9vg { display: flex; font-weight: 700; color: var(--brand-grey-light); } .networkItemContainer.svelte-1uwj9vg { display: flex; align-items: center; justify-content: center; width: fit-content; } .disconnect > .bx--tooltip { top: 35px !important; } .disconnect { display: flex; justify-content: center; align-items: center; } .disconnect .bx--tooltip__trigger { background-color: transparent !important; width: 18px !important; } .multipleButtons button { margin: calc(var(--spacer) / 6) 0 !important; } .container.svelte-1ojrynm { border: 1px solid var(--brand-alert-red); padding: calc(var(--spacer) / 8) calc(var(--spacer) / 6); display: flex; align-items: center; margin-right: calc(var(--spacer) / 3); background-color: var(--background-content); } .container.svelte-1ojrynm .switchNetworkHeaderButton { color: var(--brand-alert-red); } .container.svelte-1ojrynm .switchNetworkHeaderButton:hover { color: var(--brand-alert-red) !important; } .text.svelte-1ojrynm { color: var(--brand-black); font-size: var(--font-size-small); font-weight: 700; } header.svelte-1w0prkn.svelte-1w0prkn { display: flex; flex-direction: column; justify-content: space-between; align-items: center; margin: auto; padding-top: calc(var(--spacer) / 4); } .headerActions.svelte-1w0prkn.svelte-1w0prkn { display: flex; } .logo.svelte-1w0prkn.svelte-1w0prkn { margin-bottom: 0px; } .logo.svelte-1w0prkn img.svelte-1w0prkn { width: 4rem; height: 4rem; object-fit: contain; } nav.svelte-1w0prkn.svelte-1w0prkn { display: flex; justify-content: center; } ul.svelte-1w0prkn.svelte-1w0prkn { position: relative; padding: calc(var(--spacer)/3) 0; margin: 0px; justify-content: center; align-items: center; list-style: none; background-image: ; background-position-x: ; background-position-y: ; background-repeat: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-size: contain; display: flex; flex-wrap: wrap; } li.svelte-1w0prkn.svelte-1w0prkn { position: relative; display: flex; justify-content: center; align-items: center; } li.svelte-1w0prkn > a:hover { color: var(--brand-black); } .active.svelte-1w0prkn > a { color: var(--brand-black); } div [class*="tooltip"] { background-color: transparent; } @media (min-width: 660px) { header.svelte-1w0prkn.svelte-1w0prkn { flex-direction: row; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding: 0px; margin-top: calc(var(--spacer) / 2); } li.svelte-1w0prkn > a { padding: 0.5rem 1rem; } .logo.svelte-1w0prkn img.svelte-1w0prkn { width: 5rem; height: 5rem; } } .container.svelte-j4hkqc.svelte-j4hkqc { position: sticky; top: 0px; padding: calc(var(--spacer) / 6) 0; width: 100%; color: var(--brand-black); font-size: var(--font-size-small); z-index: 101; } .warning.svelte-j4hkqc.svelte-j4hkqc { background-color: var(--brand-alert-yellow); } .danger.svelte-j4hkqc.svelte-j4hkqc { background-color: var(--brand-alert-red); } .danger.svelte-j4hkqc p.svelte-j4hkqc { color: rgb(255, 255, 255) !important; } .default.svelte-j4hkqc.svelte-j4hkqc { border-bottom: 1px solid var(--border-color); background-color: var(--background-content); } .title.svelte-j4hkqc.svelte-j4hkqc { font-weight: 700; text-align: center; max-width: 1280px; padding: 0 calc(var(--spacer)/2); margin: auto; font-size: var(--font-size-base) !important; } p.svelte-j4hkqc.svelte-j4hkqc { margin-bottom: 0px; font-weight: 500; font-size: var(--font-size-small); text-align: center; } @media (min-width: 640px) { .container.svelte-j4hkqc.svelte-j4hkqc { flex-direction: row; margin: 0px; } } .bx--tooltip__label { font-size: 0.75rem; font-weight: 400; line-height: 1.33333; letter-spacing: 0.32px; display: inline-flex; align-items: center; color: rgb(82, 82, 82); } .bx--tooltip__label:focus { outline: rgb(15, 98, 254) solid 1px; } @media screen and (prefers-contrast) { .bx--tooltip__label:focus { outline-style: dotted; } } .bx--tooltip__trigger svg { fill: rgb(82, 82, 82); } .bx--tooltip__trigger:not(.bx--btn--icon-only) { box-sizing: border-box; margin: 0px; font-family: inherit; vertical-align: baseline; padding: 0px; border: 0px; appearance: none; background: none; cursor: pointer; display: inline-flex; align-items: center; font-size: 1rem; } .bx--tooltip__trigger:not(.bx--btn--icon-only) *, .bx--tooltip__trigger:not(.bx--btn--icon-only) ::before, .bx--tooltip__trigger:not(.bx--btn--icon-only) ::after { box-sizing: inherit; } .bx--tooltip__trigger:not(.bx--btn--icon-only):focus { outline: rgb(15, 98, 254) solid 1px; fill: rgb(3, 83, 233); } @media screen and (prefers-contrast) { .bx--tooltip__trigger:not(.bx--btn--icon-only):focus { outline-style: dotted; } } .bx--tooltip__trigger:not(.bx--btn--icon-only)[disabled] svg { fill: rgb(198, 198, 198); } .bx--tooltip__label .bx--tooltip__trigger { margin-left: 0.5rem; } .bx--tooltip__label--bold { font-weight: 600; } .bx--tooltip { box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 6px; box-sizing: border-box; border: 0px; margin: 0.25rem 0px 0px; font-family: inherit; font-size: 100%; vertical-align: baseline; position: absolute; z-index: 6000; display: none; min-width: 13rem; max-width: 18rem; padding: 1rem; background: rgb(57, 57, 57); border-radius: 0.125rem; color: rgb(255, 255, 255); overflow-wrap: break-word; } .bx--tooltip *, .bx--tooltip ::before, .bx--tooltip ::after { box-sizing: inherit; } .bx--tooltip:focus { box-shadow: rgb(57, 57, 57) 0px 0px 0px 1px inset, rgb(255, 255, 255) 0px 0px 0px 2px inset; outline: 0px; } .bx--tooltip.bx--tooltip--top.bx--tooltip--align-start, .bx--tooltip.bx--tooltip--bottom.bx--tooltip--align-start { transform: translate(calc(50% - 22px)); } .bx--tooltip.bx--tooltip--top.bx--tooltip--align-start .bx--tooltip__caret, .bx--tooltip.bx--tooltip--bottom.bx--tooltip--align-start .bx--tooltip__caret { margin-left: 15px; } .bx--tooltip.bx--tooltip--top.bx--tooltip--align-end, .bx--tooltip.bx--tooltip--bottom.bx--tooltip--align-end { transform: translate(calc(-50% + 22px)); } .bx--tooltip.bx--tooltip--top.bx--tooltip--align-end .bx--tooltip__caret, .bx--tooltip.bx--tooltip--bottom.bx--tooltip--align-end .bx--tooltip__caret { margin-right: 15px; } .bx--tooltip.bx--tooltip--left.bx--tooltip--align-start { transform: translateY(calc(50% - 15px)); } .bx--tooltip.bx--tooltip--left.bx--tooltip--align-start .bx--tooltip__caret { top: 14px; } .bx--tooltip.bx--tooltip--left.bx--tooltip--align-end { transform: translateY(calc(-50% + 31px)); } .bx--tooltip.bx--tooltip--left.bx--tooltip--align-end .bx--tooltip__caret { top: initial; bottom: 25px; } .bx--tooltip.bx--tooltip--right.bx--tooltip--align-start { transform: translateY(calc(50% - 26px)); } .bx--tooltip.bx--tooltip--right.bx--tooltip--align-start .bx--tooltip__caret { top: 26px; } .bx--tooltip.bx--tooltip--right.bx--tooltip--align-end { transform: translateY(calc(-50% + 20px)); } .bx--tooltip.bx--tooltip--right.bx--tooltip--align-end .bx--tooltip__caret { top: initial; bottom: 12px; } .bx--tooltip p { font-size: 0.875rem; font-weight: 400; line-height: 1.28572; letter-spacing: 0.16px; text-align: left; } .bx--tooltip button { padding-right: 2rem; } .bx--tooltip .bx--btn:focus { border-color: rgb(255, 255, 255); outline-color: rgb(57, 57, 57); } .bx--tooltip .bx--link { color: rgb(120, 169, 255); font-size: 0.875rem; } .bx--tooltip .bx--link:focus { outline: rgb(255, 255, 255) solid 1px; outline-offset: 2px; } .bx--tooltip .bx--link:active, .bx--tooltip .bx--link:active:visited, .bx--tooltip .bx--link:active:visited:hover { color: rgb(255, 255, 255); } .bx--tooltip .bx--link:visited { color: rgb(120, 169, 255); } .bx--tooltip .bx--tooltip__content[tabindex="-1"]:focus { outline: none; } .bx--tooltip .bx--tooltip__caret { position: absolute; top: calc(1px - 0.429688rem); right: 0px; left: 0px; width: 0px; height: 0px; border-right: 0.429688rem solid transparent; border-bottom: 0.429688rem solid rgb(57, 57, 57); border-left: 0.429688rem solid transparent; margin: 0px auto; content: ""; } .bx--tooltip .bx--tooltip__footer { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; } .bx--tooltip[data-floating-menu-direction="left"] { margin-left: -0.5rem; } .bx--tooltip[data-floating-menu-direction="left"] .bx--tooltip__caret { top: 50%; right: calc(1px - 0.429688rem); left: auto; transform: rotate(90deg) translate(50%, -50%); } .bx--tooltip[data-floating-menu-direction="top"] { margin-top: -0.5rem; } .bx--tooltip[data-floating-menu-direction="top"] .bx--tooltip__caret { top: auto; bottom: calc(1px - 0.429688rem); transform: rotate(180deg); } .bx--tooltip[data-floating-menu-direction="right"] { margin-left: 0.5rem; } .bx--tooltip[data-floating-menu-direction="right"] .bx--tooltip__caret { top: 50%; right: auto; left: calc(1px - 0.429688rem); transform: rotate(270deg) translate(50%, -50%); } .bx--tooltip[data-floating-menu-direction="bottom"] { margin-top: 0.5rem; } .bx--tooltip__heading { font-size: 0.875rem; font-weight: 600; line-height: 1.28572; letter-spacing: 0.16px; margin-bottom: 0.5rem; } .bx--tooltip--shown { display: block; margin-top: 0px; } .bx--tooltip--definition { box-sizing: border-box; padding: 0px; border: 0px; margin: 0px; font-family: inherit; font-size: 100%; vertical-align: baseline; position: relative; } .bx--tooltip--definition *, .bx--tooltip--definition ::before, .bx--tooltip--definition ::after { box-sizing: inherit; } .bx--tooltip--definition .bx--tooltip__trigger { font-size: 0.75rem; font-weight: 400; line-height: 1.33333; letter-spacing: 0.32px; position: relative; display: inline-flex; border-bottom: 1px dotted rgb(15, 98, 254); color: rgb(22, 22, 22); } .bx--tooltip--definition .bx--tooltip__trigger:hover + .bx--tooltip--definition__top, .bx--tooltip--definition .bx--tooltip__trigger:hover + .bx--tooltip--definition__bottom { display: block; } .bx--tooltip--definition .bx--tooltip__trigger:focus { outline: rgb(15, 98, 254) solid 1px; } @media screen and (prefers-contrast) { .bx--tooltip--definition .bx--tooltip__trigger:focus { outline-style: dotted; } } .bx--tooltip--definition .bx--tooltip__trigger:focus + .bx--tooltip--definition__top, .bx--tooltip--definition .bx--tooltip__trigger:focus + .bx--tooltip--definition__bottom { display: block; } .bx--tooltip--definition__bottom, .bx--tooltip--definition__top { box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 6px; position: absolute; z-index: 1; display: none; width: 13rem; padding: 0.5rem 1rem; margin-top: 0.75rem; background: rgb(57, 57, 57); border-radius: 0.125rem; pointer-events: none; } .bx--tooltip--definition__bottom p, .bx--tooltip--definition__top p { font-size: 0.875rem; font-weight: 400; line-height: 1.28572; letter-spacing: 0.16px; color: rgb(255, 255, 255); } .bx--tooltip--definition__bottom .bx--tooltip__caret, .bx--tooltip--definition__top .bx--tooltip__caret { position: absolute; right: 0px; left: 0px; width: 0.6rem; height: 0.6rem; margin-left: 1rem; background: rgb(57, 57, 57); } .bx--tooltip--definition__bottom .bx--tooltip__caret { top: -0.2rem; transform: rotate(-135deg); } .bx--tooltip--definition__top { margin-top: -2rem; transform: translateY(-100%); } .bx--tooltip--definition__top .bx--tooltip__caret { bottom: -0.2rem; transform: rotate(45deg); } .bx--tooltip--definition__align-end { right: 0px; } .bx--tooltip--definition__align-center { margin-left: 50%; transform: translate(-50%); } .bx--tooltip--definition__top.bx--tooltip--definition__align-center { margin-left: 50%; transform: translate(-50%, -100%); } .bx--tooltip--definition__align-center .bx--tooltip__caret { left: auto; margin-right: calc(50% - 6px); margin-left: auto; } .bx--tooltip--definition__align-end .bx--tooltip__caret { left: auto; margin-right: 1rem; margin-left: auto; } .bx--tooltip--definition.bx--tooltip--a11y { display: inline-flex; } .bx--tooltip--definition button.bx--tooltip--a11y { margin: 0px; } .bx--tooltip__trigger.bx--tooltip__trigger--definition { font-size: 0.75rem; font-weight: 400; line-height: 1.33333; letter-spacing: 0.32px; border-bottom: 0.0625rem dotted rgb(82, 82, 82); transition: border-color 0.11s; } .bx--tooltip__trigger.bx--tooltip__trigger--definition:hover, .bx--tooltip__trigger.bx--tooltip__trigger--definition:focus { border-bottom-color: rgb(15, 98, 254); } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top { position: relative; display: inline-flex; overflow: visible; align-items: center; cursor: default; } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top:focus { outline: rgb(15, 98, 254) solid 1px; } @media screen and (prefers-contrast) { .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top:focus { outline-style: dotted; } } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top::before, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top::after, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top + .bx--assistive-text { position: absolute; z-index: 6000; display: flex; align-items: center; opacity: 0; pointer-events: none; } @media (-ms-high-contrast: none), (-ms-high-contrast: active) { .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top::before, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top::after, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top + .bx--assistive-text { display: inline-block; } } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top::before, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top::after { transition: opacity 70ms cubic-bezier(0.2, 0, 0.38, 0.9); } @media screen and (prefers-reduced-motion: reduce) { .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top::before, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top::after { transition: none; } } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--a11y::after { transition: none; } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top::before { width: 0px; height: 0px; border-style: solid; content: ""; } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top + .bx--assistive-text { box-sizing: content-box; color: inherit; opacity: 1; white-space: normal; word-break: break-word; } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top::after, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top + .bx--assistive-text { box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 6px; z-index: 6000; width: max-content; min-width: 1.5rem; max-width: 13rem; height: auto; padding: 0.5rem 1rem; background-color: rgb(57, 57, 57); border-radius: 0.125rem; color: rgb(255, 255, 255); text-align: left; transform: translate(-50%); font-size: 0.875rem; font-weight: 400; line-height: 1.28572; letter-spacing: 0.16px; } @media (-ms-high-contrast: none), (-ms-high-contrast: active) { .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top::after, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top + .bx--assistive-text { width: auto; } } @supports (-ms-accelerator: true) { .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top::after, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top + .bx--assistive-text { width: auto; } } @supports (-ms-ime-align: auto) { .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top::after, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top + .bx--assistive-text { width: auto; } } @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) { .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top::after, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top + .bx--assistive-text { border: 1px solid transparent; } } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top::after { content: attr(aria-label); } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--a11y::after { content: none; } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--visible::before, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--visible::after, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top:hover::before, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top:hover::after, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top:focus::before, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top:focus::after { opacity: 1; } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--visible .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--visible + .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top:hover .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top:hover + .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top:focus .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top:focus + .bx--assistive-text { overflow: visible; margin: auto; clip: auto; } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--visible .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--visible + .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--visible.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top:hover .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top:hover + .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top:hover.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top:focus .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top:focus + .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top:focus.bx--tooltip--a11y::before { animation: 70ms cubic-bezier(0.2, 0, 0.38, 0.9) 0s 1 normal none running tooltip-fade; } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--hidden .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--hidden + .bx--assistive-text { overflow: hidden; margin: -1px; clip: rect(0px, 0px, 0px, 0px); } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--hidden.bx--tooltip--a11y::before { animation: auto ease 0s 1 normal none running none; opacity: 0; } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top .bx--assistive-text::after { position: absolute; display: block; content: ""; left: 0px; width: 100%; height: 0.75rem; bottom: -0.75rem; } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top::before, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top::after, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top + .bx--assistive-text { top: 0px; left: 50%; } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top::before { top: -0.25rem; border-width: 0.3125rem 0.25rem 0px; border-color: rgb(57, 57, 57) transparent transparent; transform: translate(-50%, -100%); } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top::after, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top + .bx--assistive-text { top: -0.5625rem; left: 0px; transform: translateY(-100%); } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--align-start .bx--assistive-text::after { position: absolute; display: block; content: ""; left: 0px; width: 100%; height: 0.75rem; bottom: -0.75rem; } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--align-start::before, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--align-start::after, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--align-start .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--align-start + .bx--assistive-text { top: 0px; left: 50%; } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--align-start::before { top: -0.25rem; border-width: 0.3125rem 0.25rem 0px; border-color: rgb(57, 57, 57) transparent transparent; transform: translate(-50%, -100%); } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--align-start::after, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--align-start .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--align-start + .bx--assistive-text { top: -0.5625rem; left: 0px; transform: translateY(-100%); } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--align-center .bx--assistive-text::after { position: absolute; display: block; content: ""; left: 0px; width: 100%; height: 0.75rem; bottom: -0.75rem; } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--align-center::before, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--align-center::after, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--align-center .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--align-center + .bx--assistive-text { top: 0px; left: 50%; } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--align-center::before { top: -0.25rem; border-width: 0.3125rem 0.25rem 0px; border-color: rgb(57, 57, 57) transparent transparent; transform: translate(-50%, -100%); } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--align-center::after, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--align-center .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--align-center + .bx--assistive-text { top: -0.5625rem; left: 50%; transform: translate(-50%, -100%); } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--align-end .bx--assistive-text::after { position: absolute; display: block; content: ""; left: 0px; width: 100%; height: 0.75rem; bottom: -0.75rem; } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--align-end::before, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--align-end::after, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--align-end .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--align-end + .bx--assistive-text { top: 0px; left: 50%; } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--align-end::before { top: -0.25rem; border-width: 0.3125rem 0.25rem 0px; border-color: rgb(57, 57, 57) transparent transparent; transform: translate(-50%, -100%); } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--align-end::after, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--align-end .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--align-end + .bx--assistive-text { top: -0.5625rem; right: 0px; left: auto; transform: translateY(-100%); } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom { position: relative; display: inline-flex; overflow: visible; align-items: center; cursor: default; } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom:focus { outline: rgb(15, 98, 254) solid 1px; } @media screen and (prefers-contrast) { .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom:focus { outline-style: dotted; } } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom::before, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom::after, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom + .bx--assistive-text { position: absolute; z-index: 6000; display: flex; align-items: center; opacity: 0; pointer-events: none; } @media (-ms-high-contrast: none), (-ms-high-contrast: active) { .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom::before, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom::after, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom + .bx--assistive-text { display: inline-block; } } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom::before, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom::after { transition: opacity 70ms cubic-bezier(0.2, 0, 0.38, 0.9); } @media screen and (prefers-reduced-motion: reduce) { .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom::before, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom::after { transition: none; } } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--a11y::after { transition: none; } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom::before { width: 0px; height: 0px; border-style: solid; content: ""; } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom + .bx--assistive-text { box-sizing: content-box; color: inherit; opacity: 1; white-space: normal; word-break: break-word; } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom::after, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom + .bx--assistive-text { box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 6px; z-index: 6000; width: max-content; min-width: 1.5rem; max-width: 13rem; height: auto; padding: 0.5rem 1rem; background-color: rgb(57, 57, 57); border-radius: 0.125rem; color: rgb(255, 255, 255); text-align: left; transform: translate(-50%); font-size: 0.875rem; font-weight: 400; line-height: 1.28572; letter-spacing: 0.16px; } @media (-ms-high-contrast: none), (-ms-high-contrast: active) { .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom::after, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom + .bx--assistive-text { width: auto; } } @supports (-ms-accelerator: true) { .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom::after, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom + .bx--assistive-text { width: auto; } } @supports (-ms-ime-align: auto) { .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom::after, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom + .bx--assistive-text { width: auto; } } @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) { .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom::after, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom + .bx--assistive-text { border: 1px solid transparent; } } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom::after { content: attr(aria-label); } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--a11y::after { content: none; } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--visible::before, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--visible::after, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom:hover::before, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom:hover::after, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom:focus::before, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom:focus::after { opacity: 1; } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--visible .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--visible + .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom:hover .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom:hover + .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom:focus .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom:focus + .bx--assistive-text { overflow: visible; margin: auto; clip: auto; } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--visible .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--visible + .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--visible.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom:hover .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom:hover + .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom:hover.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom:focus .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom:focus + .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom:focus.bx--tooltip--a11y::before { animation: 70ms cubic-bezier(0.2, 0, 0.38, 0.9) 0s 1 normal none running tooltip-fade; } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--hidden .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--hidden + .bx--assistive-text { overflow: hidden; margin: -1px; clip: rect(0px, 0px, 0px, 0px); } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--hidden.bx--tooltip--a11y::before { animation: auto ease 0s 1 normal none running none; opacity: 0; } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom .bx--assistive-text::after { position: absolute; display: block; content: ""; left: 0px; width: 100%; height: 0.75rem; top: -0.75rem; } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom::before, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom::after, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom + .bx--assistive-text { bottom: 0px; left: 50%; } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom::before { bottom: -0.25rem; border-width: 0px 0.25rem 0.3125rem; border-color: transparent transparent rgb(57, 57, 57); transform: translate(-50%, 100%); } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom::after, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom + .bx--assistive-text { bottom: -0.5625rem; left: 0px; transform: translateY(100%); } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--a11y + .bx--assistive-text { bottom: -0.5rem; transform: translateY(100%); } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--align-start .bx--assistive-text::after { position: absolute; display: block; content: ""; left: 0px; width: 100%; height: 0.75rem; top: -0.75rem; } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--align-start::before, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--align-start::after, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--align-start .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--align-start + .bx--assistive-text { bottom: 0px; left: 50%; } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--align-start::before { bottom: -0.25rem; border-width: 0px 0.25rem 0.3125rem; border-color: transparent transparent rgb(57, 57, 57); transform: translate(-50%, 100%); } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--align-start::after, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--align-start .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--align-start + .bx--assistive-text { bottom: -0.5625rem; left: 0px; transform: translateY(100%); } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--align-start.bx--tooltip--a11y + .bx--assistive-text { bottom: -0.5rem; transform: translateY(100%); } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--align-center .bx--assistive-text::after { position: absolute; display: block; content: ""; left: 0px; width: 100%; height: 0.75rem; top: -0.75rem; } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--align-center::before, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--align-center::after, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--align-center .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--align-center + .bx--assistive-text { bottom: 0px; left: 50%; } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--align-center::before { bottom: -0.25rem; border-width: 0px 0.25rem 0.3125rem; border-color: transparent transparent rgb(57, 57, 57); transform: translate(-50%, 100%); } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--align-center::after, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--align-center .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--align-center + .bx--assistive-text { bottom: -0.5625rem; transform: translate(-50%, 100%); } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--align-center.bx--tooltip--a11y + .bx--assistive-text { bottom: -0.5rem; transform: translate(-50%, 100%); } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--align-end .bx--assistive-text::after { position: absolute; display: block; content: ""; left: 0px; width: 100%; height: 0.75rem; top: -0.75rem; } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--align-end::before, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--align-end::after, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--align-end .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--align-end + .bx--assistive-text { bottom: 0px; left: 50%; } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--align-end::before { bottom: -0.25rem; border-width: 0px 0.25rem 0.3125rem; border-color: transparent transparent rgb(57, 57, 57); transform: translate(-50%, 100%); } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--align-end::after, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--align-end .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--align-end + .bx--assistive-text { bottom: -0.5625rem; right: 0px; left: auto; transform: translateY(100%); } .bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--align-end.bx--tooltip--a11y + .bx--assistive-text { bottom: -0.5rem; transform: translateY(100%); } .bx--tooltip--icon { display: inline-flex; align-items: center; } .bx--tooltip--icon__top, .bx--tooltip--icon__bottom { box-sizing: border-box; padding: 0px; border: 0px; margin: 0px; font-family: inherit; font-size: 100%; vertical-align: baseline; position: relative; display: inline-flex; overflow: visible; align-items: center; cursor: pointer; } .bx--tooltip--icon__top *, .bx--tooltip--icon__top ::before, .bx--tooltip--icon__top ::after, .bx--tooltip--icon__bottom *, .bx--tooltip--icon__bottom ::before, .bx--tooltip--icon__bottom ::after { box-sizing: inherit; } .bx--tooltip--icon__top::before, .bx--tooltip--icon__top::after, .bx--tooltip--icon__bottom::before, .bx--tooltip--icon__bottom::after { font-size: 0.875rem; font-weight: 400; line-height: 1.28572; letter-spacing: 0.16px; position: absolute; display: flex; align-items: center; opacity: 0; pointer-events: none; transition: opacity 70ms cubic-bezier(0.2, 0, 0.38, 0.9); } @media screen and (prefers-reduced-motion: reduce) { .bx--tooltip--icon__top::before, .bx--tooltip--icon__top::after, .bx--tooltip--icon__bottom::before, .bx--tooltip--icon__bottom::after { transition: none; } } .bx--tooltip--icon__top::before, .bx--tooltip--icon__bottom::before { right: 0px; left: 0px; width: 0px; height: 0px; border-width: 0px 0.25rem 0.3125rem; border-style: solid; border-color: transparent transparent rgb(57, 57, 57); margin: 1px auto 0px 50%; content: ""; } .bx--tooltip--icon__top::after, .bx--tooltip--icon__bottom::after { box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 6px; min-width: 1.5rem; max-width: 13rem; height: 1.5rem; padding: 0px 1rem; margin-left: 50%; background-color: rgb(57, 57, 57); border-radius: 0.125rem; color: rgb(255, 255, 255); content: attr(aria-label); font-weight: 400; pointer-events: none; transform: translate(-50%); white-space: nowrap; } .bx--tooltip--icon__top:hover::before, .bx--tooltip--icon__top:hover::after, .bx--tooltip--icon__top:focus::before, .bx--tooltip--icon__top:focus::after, .bx--tooltip--icon__bottom:hover::before, .bx--tooltip--icon__bottom:hover::after, .bx--tooltip--icon__bottom:focus::before, .bx--tooltip--icon__bottom:focus::after { opacity: 1; } .bx--tooltip--icon__top:hover svg, .bx--tooltip--icon__top:focus svg, .bx--tooltip--icon__bottom:hover svg, .bx--tooltip--icon__bottom:focus svg { fill: rgb(82, 82, 82); } .bx--tooltip--icon__top:focus, .bx--tooltip--icon__bottom:focus { outline: transparent solid 1px; } .bx--tooltip--icon__top:focus svg, .bx--tooltip--icon__bottom:focus svg { outline: rgb(15, 98, 254) solid 1px; } @media screen and (prefers-contrast) { .bx--tooltip--icon__top:focus svg, .bx--tooltip--icon__bottom:focus svg { outline-style: dotted; } } .bx--tooltip--icon__top::before { transform: translate(-50%, calc(-100% - 9px)) rotate(180deg); top: 1px; } .bx--tooltip--icon__top::after { transform: translate(-50%, calc(-100% - 12px)); top: 0px; } .bx--tooltip--icon__bottom::before { transform: translate(-50%, 10px) rotate(0deg); bottom: 0px; } .bx--tooltip--icon__bottom::after { transform: translate(-50%, calc(100% + 10px)); bottom: 0px; } .bx--tooltip--icon__top.bx--tooltip--icon__align-start::before { transform: translateY(calc(-100% - 9px)) rotate(180deg); top: 1px; margin-left: 4px; } .bx--tooltip--icon__top.bx--tooltip--icon__align-start::after { transform: translateY(calc(-100% - 12px)); top: 0px; margin-left: 0px; } .bx--tooltip--icon__top.bx--tooltip--icon__align-end::before { transform: translateY(calc(-100% - 9px)) rotate(180deg); top: 1px; right: 0px; left: auto; margin-right: 4px; } .bx--tooltip--icon__top.bx--tooltip--icon__align-end::after { transform: translateY(calc(-100% - 12px)); top: 0px; margin-left: 0px; right: 0px; } .bx--tooltip--icon__bottom.bx--tooltip--icon__align-start::before { transform: translateY(10px) rotate(0deg); bottom: 0px; margin-left: 4px; } .bx--tooltip--icon__bottom.bx--tooltip--icon__align-start::after { transform: translateY(calc(100% + 10px)); bottom: 0px; margin-left: 0px; } .bx--tooltip--icon__bottom.bx--tooltip--icon__align-end::before { transform: translateY(10px) rotate(0deg); bottom: 0px; right: 0px; left: auto; margin-right: 4px; } .bx--tooltip--icon__bottom.bx--tooltip--icon__align-end::after { transform: translateY(calc(100% + 10px)); bottom: 0px; margin-left: 0px; right: 0px; } .bx--tooltip--icon .bx--tooltip__trigger svg { margin-left: 0px; } .bx--tooltip__trigger:hover svg, .bx--tooltip__trigger:focus svg { fill: rgb(82, 82, 82); } .bx--tooltip__trigger.bx--tooltip--top { position: relative; display: inline-flex; overflow: visible; align-items: center; cursor: pointer; } .bx--tooltip__trigger.bx--tooltip--top:focus { outline: rgb(15, 98, 254) solid 1px; } @media screen and (prefers-contrast) { .bx--tooltip__trigger.bx--tooltip--top:focus { outline-style: dotted; } } .bx--tooltip__trigger.bx--tooltip--top:focus { outline: transparent solid 1px; } .bx--tooltip__trigger.bx--tooltip--top:focus svg { outline: rgb(15, 98, 254) solid 1px; } @media screen and (prefers-contrast) { .bx--tooltip__trigger.bx--tooltip--top:focus svg { outline-style: dotted; } } .bx--tooltip__trigger.bx--tooltip--top::before, .bx--tooltip__trigger.bx--tooltip--top::after, .bx--tooltip__trigger.bx--tooltip--top .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--top + .bx--assistive-text { position: absolute; z-index: 6000; display: flex; align-items: center; opacity: 0; pointer-events: none; } @media (-ms-high-contrast: none), (-ms-high-contrast: active) { .bx--tooltip__trigger.bx--tooltip--top::before, .bx--tooltip__trigger.bx--tooltip--top::after, .bx--tooltip__trigger.bx--tooltip--top .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--top + .bx--assistive-text { display: inline-block; } } .bx--tooltip__trigger.bx--tooltip--top::before, .bx--tooltip__trigger.bx--tooltip--top::after { transition: opacity 70ms cubic-bezier(0.2, 0, 0.38, 0.9); } @media screen and (prefers-reduced-motion: reduce) { .bx--tooltip__trigger.bx--tooltip--top::before, .bx--tooltip__trigger.bx--tooltip--top::after { transition: none; } } .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--a11y::after { transition: none; } .bx--tooltip__trigger.bx--tooltip--top::before { width: 0px; height: 0px; border-style: solid; content: ""; } .bx--tooltip__trigger.bx--tooltip--top .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--top + .bx--assistive-text { box-sizing: content-box; color: inherit; opacity: 1; white-space: normal; word-break: break-word; } .bx--tooltip__trigger.bx--tooltip--top::after, .bx--tooltip__trigger.bx--tooltip--top .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--top + .bx--assistive-text { box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 6px; z-index: 6000; width: max-content; min-width: 1.5rem; max-width: 13rem; height: auto; padding: 0.1875rem 1rem; background-color: rgb(57, 57, 57); border-radius: 0.125rem; color: rgb(255, 255, 255); text-align: left; transform: translate(-50%); font-size: 0.875rem; font-weight: 400; line-height: 1.28572; letter-spacing: 0.16px; } @media (-ms-high-contrast: none), (-ms-high-contrast: active) { .bx--tooltip__trigger.bx--tooltip--top::after, .bx--tooltip__trigger.bx--tooltip--top .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--top + .bx--assistive-text { width: auto; } } @supports (-ms-accelerator: true) { .bx--tooltip__trigger.bx--tooltip--top::after, .bx--tooltip__trigger.bx--tooltip--top .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--top + .bx--assistive-text { width: auto; } } @supports (-ms-ime-align: auto) { .bx--tooltip__trigger.bx--tooltip--top::after, .bx--tooltip__trigger.bx--tooltip--top .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--top + .bx--assistive-text { width: auto; } } @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) { .bx--tooltip__trigger.bx--tooltip--top::after, .bx--tooltip__trigger.bx--tooltip--top .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--top + .bx--assistive-text { border: 1px solid transparent; } } .bx--tooltip__trigger.bx--tooltip--top::after { content: attr(aria-label); } .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--a11y::after { content: none; } .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--visible::before, .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--visible::after, .bx--tooltip__trigger.bx--tooltip--top:hover::before, .bx--tooltip__trigger.bx--tooltip--top:hover::after, .bx--tooltip__trigger.bx--tooltip--top:focus::before, .bx--tooltip__trigger.bx--tooltip--top:focus::after { opacity: 1; } .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--visible .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--visible + .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--top:hover .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--top:hover + .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--top:focus .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--top:focus + .bx--assistive-text { overflow: visible; margin: auto; clip: auto; } .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--visible .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--visible + .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--visible.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--tooltip--top:hover .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--top:hover + .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--top:hover.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--tooltip--top:focus .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--top:focus + .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--top:focus.bx--tooltip--a11y::before { animation: 70ms cubic-bezier(0.2, 0, 0.38, 0.9) 0s 1 normal none running tooltip-fade; } .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--hidden .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--hidden + .bx--assistive-text { overflow: hidden; margin: -1px; clip: rect(0px, 0px, 0px, 0px); } .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--hidden.bx--tooltip--a11y::before { animation: auto ease 0s 1 normal none running none; opacity: 0; } .bx--tooltip__trigger.bx--tooltip--top .bx--assistive-text::after { position: absolute; display: block; content: ""; left: 0px; width: 100%; height: 0.75rem; bottom: -0.75rem; } .bx--tooltip__trigger.bx--tooltip--top::before, .bx--tooltip__trigger.bx--tooltip--top::after, .bx--tooltip__trigger.bx--tooltip--top .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--top + .bx--assistive-text { top: 0px; left: 50%; } .bx--tooltip__trigger.bx--tooltip--top::before { top: -0.5rem; border-width: 0.3125rem 0.25rem 0px; border-color: rgb(57, 57, 57) transparent transparent; transform: translate(-50%, -100%); } .bx--tooltip__trigger.bx--tooltip--top::after, .bx--tooltip__trigger.bx--tooltip--top .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--top + .bx--assistive-text { top: -0.8125rem; left: 50%; transform: translate(-50%, -100%); } .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--align-start .bx--assistive-text::after { position: absolute; display: block; content: ""; left: 0px; width: 100%; height: 0.75rem; bottom: -0.75rem; } .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--align-start::before, .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--align-start::after, .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--align-start .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--align-start + .bx--assistive-text { top: 0px; left: 50%; } .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--align-start::before { top: -0.5rem; border-width: 0.3125rem 0.25rem 0px; border-color: rgb(57, 57, 57) transparent transparent; transform: translate(-50%, -100%); } .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--align-start::after, .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--align-start .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--align-start + .bx--assistive-text { top: -0.8125rem; left: 0px; transform: translateY(-100%); } .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--align-center .bx--assistive-text::after { position: absolute; display: block; content: ""; left: 0px; width: 100%; height: 0.75rem; bottom: -0.75rem; } .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--align-center::before, .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--align-center::after, .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--align-center .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--align-center + .bx--assistive-text { top: 0px; left: 50%; } .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--align-center::before { top: -0.5rem; border-width: 0.3125rem 0.25rem 0px; border-color: rgb(57, 57, 57) transparent transparent; transform: translate(-50%, -100%); } .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--align-center::after, .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--align-center .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--align-center + .bx--assistive-text { top: -0.8125rem; left: 50%; transform: translate(-50%, -100%); } .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--align-end .bx--assistive-text::after { position: absolute; display: block; content: ""; left: 0px; width: 100%; height: 0.75rem; bottom: -0.75rem; } .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--align-end::before, .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--align-end::after, .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--align-end .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--align-end + .bx--assistive-text { top: 0px; left: 50%; } .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--align-end::before { top: -0.5rem; border-width: 0.3125rem 0.25rem 0px; border-color: rgb(57, 57, 57) transparent transparent; transform: translate(-50%, -100%); } .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--align-end::after, .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--align-end .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--align-end + .bx--assistive-text { top: -0.8125rem; right: 0px; left: auto; transform: translateY(-100%); } .bx--tooltip__trigger.bx--tooltip--right { position: relative; display: inline-flex; overflow: visible; align-items: center; cursor: pointer; } .bx--tooltip__trigger.bx--tooltip--right:focus { outline: rgb(15, 98, 254) solid 1px; } @media screen and (prefers-contrast) { .bx--tooltip__trigger.bx--tooltip--right:focus { outline-style: dotted; } } .bx--tooltip__trigger.bx--tooltip--right:focus { outline: transparent solid 1px; } .bx--tooltip__trigger.bx--tooltip--right:focus svg { outline: rgb(15, 98, 254) solid 1px; } @media screen and (prefers-contrast) { .bx--tooltip__trigger.bx--tooltip--right:focus svg { outline-style: dotted; } } .bx--tooltip__trigger.bx--tooltip--right::before, .bx--tooltip__trigger.bx--tooltip--right::after, .bx--tooltip__trigger.bx--tooltip--right .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--right + .bx--assistive-text { position: absolute; z-index: 6000; display: flex; align-items: center; opacity: 0; pointer-events: none; } @media (-ms-high-contrast: none), (-ms-high-contrast: active) { .bx--tooltip__trigger.bx--tooltip--right::before, .bx--tooltip__trigger.bx--tooltip--right::after, .bx--tooltip__trigger.bx--tooltip--right .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--right + .bx--assistive-text { display: inline-block; } } .bx--tooltip__trigger.bx--tooltip--right::before, .bx--tooltip__trigger.bx--tooltip--right::after { transition: opacity 70ms cubic-bezier(0.2, 0, 0.38, 0.9); } @media screen and (prefers-reduced-motion: reduce) { .bx--tooltip__trigger.bx--tooltip--right::before, .bx--tooltip__trigger.bx--tooltip--right::after { transition: none; } } .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--a11y::after { transition: none; } .bx--tooltip__trigger.bx--tooltip--right::before { width: 0px; height: 0px; border-style: solid; content: ""; } .bx--tooltip__trigger.bx--tooltip--right .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--right + .bx--assistive-text { box-sizing: content-box; color: inherit; opacity: 1; white-space: normal; word-break: break-word; } .bx--tooltip__trigger.bx--tooltip--right::after, .bx--tooltip__trigger.bx--tooltip--right .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--right + .bx--assistive-text { box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 6px; z-index: 6000; width: max-content; min-width: 1.5rem; max-width: 13rem; height: auto; padding: 0.1875rem 1rem; background-color: rgb(57, 57, 57); border-radius: 0.125rem; color: rgb(255, 255, 255); text-align: left; transform: translate(-50%); font-size: 0.875rem; font-weight: 400; line-height: 1.28572; letter-spacing: 0.16px; } @media (-ms-high-contrast: none), (-ms-high-contrast: active) { .bx--tooltip__trigger.bx--tooltip--right::after, .bx--tooltip__trigger.bx--tooltip--right .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--right + .bx--assistive-text { width: auto; } } @supports (-ms-accelerator: true) { .bx--tooltip__trigger.bx--tooltip--right::after, .bx--tooltip__trigger.bx--tooltip--right .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--right + .bx--assistive-text { width: auto; } } @supports (-ms-ime-align: auto) { .bx--tooltip__trigger.bx--tooltip--right::after, .bx--tooltip__trigger.bx--tooltip--right .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--right + .bx--assistive-text { width: auto; } } @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) { .bx--tooltip__trigger.bx--tooltip--right::after, .bx--tooltip__trigger.bx--tooltip--right .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--right + .bx--assistive-text { border: 1px solid transparent; } } .bx--tooltip__trigger.bx--tooltip--right::after { content: attr(aria-label); } .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--a11y::after { content: none; } .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--visible::before, .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--visible::after, .bx--tooltip__trigger.bx--tooltip--right:hover::before, .bx--tooltip__trigger.bx--tooltip--right:hover::after, .bx--tooltip__trigger.bx--tooltip--right:focus::before, .bx--tooltip__trigger.bx--tooltip--right:focus::after { opacity: 1; } .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--visible .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--visible + .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--right:hover .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--right:hover + .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--right:focus .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--right:focus + .bx--assistive-text { overflow: visible; margin: auto; clip: auto; } .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--visible .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--visible + .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--visible.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--tooltip--right:hover .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--right:hover + .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--right:hover.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--tooltip--right:focus .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--right:focus + .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--right:focus.bx--tooltip--a11y::before { animation: 70ms cubic-bezier(0.2, 0, 0.38, 0.9) 0s 1 normal none running tooltip-fade; } .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--hidden .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--hidden + .bx--assistive-text { overflow: hidden; margin: -1px; clip: rect(0px, 0px, 0px, 0px); } .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--hidden.bx--tooltip--a11y::before { animation: auto ease 0s 1 normal none running none; opacity: 0; } .bx--tooltip__trigger.bx--tooltip--right .bx--assistive-text::after { position: absolute; display: block; content: ""; top: 0px; width: 0.75rem; height: 100%; left: -0.75rem; } .bx--tooltip__trigger.bx--tooltip--right::before, .bx--tooltip__trigger.bx--tooltip--right::after, .bx--tooltip__trigger.bx--tooltip--right .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--right + .bx--assistive-text { top: 50%; right: 0px; } .bx--tooltip__trigger.bx--tooltip--right::before { right: -0.5rem; border-width: 0.25rem 0.3125rem 0.25rem 0px; border-color: transparent rgb(57, 57, 57) transparent transparent; transform: translate(100%, -50%); } .bx--tooltip__trigger.bx--tooltip--right::after, .bx--tooltip__trigger.bx--tooltip--right .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--right + .bx--assistive-text { right: -0.8125rem; transform: translate(100%, -50%); } .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--align-start .bx--assistive-text::after { position: absolute; display: block; content: ""; top: 0px; width: 0.75rem; height: 100%; left: -0.75rem; } .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--align-start::before, .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--align-start::after, .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--align-start .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--align-start + .bx--assistive-text { top: 50%; right: 0px; } .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--align-start::before { right: -0.5rem; border-width: 0.25rem 0.3125rem 0.25rem 0px; border-color: transparent rgb(57, 57, 57) transparent transparent; transform: translate(100%, -50%); } .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--align-start::after, .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--align-start .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--align-start + .bx--assistive-text { right: -0.8125rem; transform: translate(100%, -50%); } .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--align-center .bx--assistive-text::after { position: absolute; display: block; content: ""; top: 0px; width: 0.75rem; height: 100%; left: -0.75rem; } .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--align-center::before, .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--align-center::after, .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--align-center .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--align-center + .bx--assistive-text { top: 50%; right: 0px; } .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--align-center::before { right: -0.5rem; border-width: 0.25rem 0.3125rem 0.25rem 0px; border-color: transparent rgb(57, 57, 57) transparent transparent; transform: translate(100%, -50%); } .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--align-center::after, .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--align-center .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--align-center + .bx--assistive-text { right: -0.8125rem; transform: translate(100%, -50%); } .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--align-end .bx--assistive-text::after { position: absolute; display: block; content: ""; top: 0px; width: 0.75rem; height: 100%; left: -0.75rem; } .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--align-end::before, .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--align-end::after, .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--align-end .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--align-end + .bx--assistive-text { top: 50%; right: 0px; } .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--align-end::before { right: -0.5rem; border-width: 0.25rem 0.3125rem 0.25rem 0px; border-color: transparent rgb(57, 57, 57) transparent transparent; transform: translate(100%, -50%); } .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--align-end::after, .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--align-end .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--align-end + .bx--assistive-text { right: -0.8125rem; transform: translate(100%, -50%); } .bx--tooltip__trigger.bx--tooltip--bottom { position: relative; display: inline-flex; overflow: visible; align-items: center; cursor: pointer; } .bx--tooltip__trigger.bx--tooltip--bottom:focus { outline: rgb(15, 98, 254) solid 1px; } @media screen and (prefers-contrast) { .bx--tooltip__trigger.bx--tooltip--bottom:focus { outline-style: dotted; } } .bx--tooltip__trigger.bx--tooltip--bottom:focus { outline: transparent solid 1px; } .bx--tooltip__trigger.bx--tooltip--bottom:focus svg { outline: rgb(15, 98, 254) solid 1px; } @media screen and (prefers-contrast) { .bx--tooltip__trigger.bx--tooltip--bottom:focus svg { outline-style: dotted; } } .bx--tooltip__trigger.bx--tooltip--bottom::before, .bx--tooltip__trigger.bx--tooltip--bottom::after, .bx--tooltip__trigger.bx--tooltip--bottom .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--bottom + .bx--assistive-text { position: absolute; z-index: 6000; display: flex; align-items: center; opacity: 0; pointer-events: none; } @media (-ms-high-contrast: none), (-ms-high-contrast: active) { .bx--tooltip__trigger.bx--tooltip--bottom::before, .bx--tooltip__trigger.bx--tooltip--bottom::after, .bx--tooltip__trigger.bx--tooltip--bottom .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--bottom + .bx--assistive-text { display: inline-block; } } .bx--tooltip__trigger.bx--tooltip--bottom::before, .bx--tooltip__trigger.bx--tooltip--bottom::after { transition: opacity 70ms cubic-bezier(0.2, 0, 0.38, 0.9); } @media screen and (prefers-reduced-motion: reduce) { .bx--tooltip__trigger.bx--tooltip--bottom::before, .bx--tooltip__trigger.bx--tooltip--bottom::after { transition: none; } } .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--a11y::after { transition: none; } .bx--tooltip__trigger.bx--tooltip--bottom::before { width: 0px; height: 0px; border-style: solid; content: ""; } .bx--tooltip__trigger.bx--tooltip--bottom .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--bottom + .bx--assistive-text { box-sizing: content-box; color: inherit; opacity: 1; white-space: normal; word-break: break-word; } .bx--tooltip__trigger.bx--tooltip--bottom::after, .bx--tooltip__trigger.bx--tooltip--bottom .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--bottom + .bx--assistive-text { box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 6px; z-index: 6000; width: max-content; min-width: 1.5rem; max-width: 13rem; height: auto; padding: 0.1875rem 1rem; background-color: rgb(57, 57, 57); border-radius: 0.125rem; color: rgb(255, 255, 255); text-align: left; transform: translate(-50%); font-size: 0.875rem; font-weight: 400; line-height: 1.28572; letter-spacing: 0.16px; } @media (-ms-high-contrast: none), (-ms-high-contrast: active) { .bx--tooltip__trigger.bx--tooltip--bottom::after, .bx--tooltip__trigger.bx--tooltip--bottom .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--bottom + .bx--assistive-text { width: auto; } } @supports (-ms-accelerator: true) { .bx--tooltip__trigger.bx--tooltip--bottom::after, .bx--tooltip__trigger.bx--tooltip--bottom .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--bottom + .bx--assistive-text { width: auto; } } @supports (-ms-ime-align: auto) { .bx--tooltip__trigger.bx--tooltip--bottom::after, .bx--tooltip__trigger.bx--tooltip--bottom .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--bottom + .bx--assistive-text { width: auto; } } @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) { .bx--tooltip__trigger.bx--tooltip--bottom::after, .bx--tooltip__trigger.bx--tooltip--bottom .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--bottom + .bx--assistive-text { border: 1px solid transparent; } } .bx--tooltip__trigger.bx--tooltip--bottom::after { content: attr(aria-label); } .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--a11y::after { content: none; } .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--visible::before, .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--visible::after, .bx--tooltip__trigger.bx--tooltip--bottom:hover::before, .bx--tooltip__trigger.bx--tooltip--bottom:hover::after, .bx--tooltip__trigger.bx--tooltip--bottom:focus::before, .bx--tooltip__trigger.bx--tooltip--bottom:focus::after { opacity: 1; } .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--visible .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--visible + .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--bottom:hover .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--bottom:hover + .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--bottom:focus .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--bottom:focus + .bx--assistive-text { overflow: visible; margin: auto; clip: auto; } .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--visible .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--visible + .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--visible.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--tooltip--bottom:hover .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--bottom:hover + .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--bottom:hover.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--tooltip--bottom:focus .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--bottom:focus + .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--bottom:focus.bx--tooltip--a11y::before { animation: 70ms cubic-bezier(0.2, 0, 0.38, 0.9) 0s 1 normal none running tooltip-fade; } .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--hidden .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--hidden + .bx--assistive-text { overflow: hidden; margin: -1px; clip: rect(0px, 0px, 0px, 0px); } .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--hidden.bx--tooltip--a11y::before { animation: auto ease 0s 1 normal none running none; opacity: 0; } .bx--tooltip__trigger.bx--tooltip--bottom .bx--assistive-text::after { position: absolute; display: block; content: ""; left: 0px; width: 100%; height: 0.75rem; top: -0.75rem; } .bx--tooltip__trigger.bx--tooltip--bottom::before, .bx--tooltip__trigger.bx--tooltip--bottom::after, .bx--tooltip__trigger.bx--tooltip--bottom .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--bottom + .bx--assistive-text { bottom: 0px; left: 50%; } .bx--tooltip__trigger.bx--tooltip--bottom::before { bottom: -0.5rem; border-width: 0px 0.25rem 0.3125rem; border-color: transparent transparent rgb(57, 57, 57); transform: translate(-50%, 100%); } .bx--tooltip__trigger.bx--tooltip--bottom::after, .bx--tooltip__trigger.bx--tooltip--bottom .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--bottom + .bx--assistive-text { bottom: -0.8125rem; transform: translate(-50%, 100%); } .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--align-start .bx--assistive-text::after { position: absolute; display: block; content: ""; left: 0px; width: 100%; height: 0.75rem; top: -0.75rem; } .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--align-start::before, .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--align-start::after, .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--align-start .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--align-start + .bx--assistive-text { bottom: 0px; left: 50%; } .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--align-start::before { bottom: -0.5rem; border-width: 0px 0.25rem 0.3125rem; border-color: transparent transparent rgb(57, 57, 57); transform: translate(-50%, 100%); } .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--align-start::after, .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--align-start .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--align-start + .bx--assistive-text { bottom: -0.8125rem; left: 0px; transform: translateY(100%); } .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--align-center .bx--assistive-text::after { position: absolute; display: block; content: ""; left: 0px; width: 100%; height: 0.75rem; top: -0.75rem; } .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--align-center::before, .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--align-center::after, .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--align-center .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--align-center + .bx--assistive-text { bottom: 0px; left: 50%; } .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--align-center::before { bottom: -0.5rem; border-width: 0px 0.25rem 0.3125rem; border-color: transparent transparent rgb(57, 57, 57); transform: translate(-50%, 100%); } .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--align-center::after, .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--align-center .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--align-center + .bx--assistive-text { bottom: -0.8125rem; transform: translate(-50%, 100%); } .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--align-end .bx--assistive-text::after { position: absolute; display: block; content: ""; left: 0px; width: 100%; height: 0.75rem; top: -0.75rem; } .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--align-end::before, .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--align-end::after, .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--align-end .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--align-end + .bx--assistive-text { bottom: 0px; left: 50%; } .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--align-end::before { bottom: -0.5rem; border-width: 0px 0.25rem 0.3125rem; border-color: transparent transparent rgb(57, 57, 57); transform: translate(-50%, 100%); } .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--align-end::after, .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--align-end .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--align-end + .bx--assistive-text { bottom: -0.8125rem; right: 0px; left: auto; transform: translateY(100%); } .bx--tooltip__trigger.bx--tooltip--left { position: relative; display: inline-flex; overflow: visible; align-items: center; cursor: pointer; } .bx--tooltip__trigger.bx--tooltip--left:focus { outline: rgb(15, 98, 254) solid 1px; } @media screen and (prefers-contrast) { .bx--tooltip__trigger.bx--tooltip--left:focus { outline-style: dotted; } } .bx--tooltip__trigger.bx--tooltip--left:focus { outline: transparent solid 1px; } .bx--tooltip__trigger.bx--tooltip--left:focus svg { outline: rgb(15, 98, 254) solid 1px; } @media screen and (prefers-contrast) { .bx--tooltip__trigger.bx--tooltip--left:focus svg { outline-style: dotted; } } .bx--tooltip__trigger.bx--tooltip--left::before, .bx--tooltip__trigger.bx--tooltip--left::after, .bx--tooltip__trigger.bx--tooltip--left .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--left + .bx--assistive-text { position: absolute; z-index: 6000; display: flex; align-items: center; opacity: 0; pointer-events: none; } @media (-ms-high-contrast: none), (-ms-high-contrast: active) { .bx--tooltip__trigger.bx--tooltip--left::before, .bx--tooltip__trigger.bx--tooltip--left::after, .bx--tooltip__trigger.bx--tooltip--left .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--left + .bx--assistive-text { display: inline-block; } } .bx--tooltip__trigger.bx--tooltip--left::before, .bx--tooltip__trigger.bx--tooltip--left::after { transition: opacity 70ms cubic-bezier(0.2, 0, 0.38, 0.9); } @media screen and (prefers-reduced-motion: reduce) { .bx--tooltip__trigger.bx--tooltip--left::before, .bx--tooltip__trigger.bx--tooltip--left::after { transition: none; } } .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--a11y::after { transition: none; } .bx--tooltip__trigger.bx--tooltip--left::before { width: 0px; height: 0px; border-style: solid; content: ""; } .bx--tooltip__trigger.bx--tooltip--left .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--left + .bx--assistive-text { box-sizing: content-box; color: inherit; opacity: 1; white-space: normal; word-break: break-word; } .bx--tooltip__trigger.bx--tooltip--left::after, .bx--tooltip__trigger.bx--tooltip--left .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--left + .bx--assistive-text { box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 6px; z-index: 6000; width: max-content; min-width: 1.5rem; max-width: 13rem; height: auto; padding: 0.1875rem 1rem; background-color: rgb(57, 57, 57); border-radius: 0.125rem; color: rgb(255, 255, 255); text-align: left; transform: translate(-50%); font-size: 0.875rem; font-weight: 400; line-height: 1.28572; letter-spacing: 0.16px; } @media (-ms-high-contrast: none), (-ms-high-contrast: active) { .bx--tooltip__trigger.bx--tooltip--left::after, .bx--tooltip__trigger.bx--tooltip--left .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--left + .bx--assistive-text { width: auto; } } @supports (-ms-accelerator: true) { .bx--tooltip__trigger.bx--tooltip--left::after, .bx--tooltip__trigger.bx--tooltip--left .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--left + .bx--assistive-text { width: auto; } } @supports (-ms-ime-align: auto) { .bx--tooltip__trigger.bx--tooltip--left::after, .bx--tooltip__trigger.bx--tooltip--left .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--left + .bx--assistive-text { width: auto; } } @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) { .bx--tooltip__trigger.bx--tooltip--left::after, .bx--tooltip__trigger.bx--tooltip--left .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--left + .bx--assistive-text { border: 1px solid transparent; } } .bx--tooltip__trigger.bx--tooltip--left::after { content: attr(aria-label); } .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--a11y::after { content: none; } .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--visible::before, .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--visible::after, .bx--tooltip__trigger.bx--tooltip--left:hover::before, .bx--tooltip__trigger.bx--tooltip--left:hover::after, .bx--tooltip__trigger.bx--tooltip--left:focus::before, .bx--tooltip__trigger.bx--tooltip--left:focus::after { opacity: 1; } .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--visible .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--visible + .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--left:hover .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--left:hover + .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--left:focus .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--left:focus + .bx--assistive-text { overflow: visible; margin: auto; clip: auto; } .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--visible .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--visible + .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--visible.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--tooltip--left:hover .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--left:hover + .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--left:hover.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--tooltip--left:focus .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--left:focus + .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--left:focus.bx--tooltip--a11y::before { animation: 70ms cubic-bezier(0.2, 0, 0.38, 0.9) 0s 1 normal none running tooltip-fade; } .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--hidden .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--hidden + .bx--assistive-text { overflow: hidden; margin: -1px; clip: rect(0px, 0px, 0px, 0px); } .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--hidden.bx--tooltip--a11y::before { animation: auto ease 0s 1 normal none running none; opacity: 0; } .bx--tooltip__trigger.bx--tooltip--left .bx--assistive-text::after { position: absolute; display: block; content: ""; top: 0px; width: 0.75rem; height: 100%; right: -0.75rem; } .bx--tooltip__trigger.bx--tooltip--left::before, .bx--tooltip__trigger.bx--tooltip--left::after, .bx--tooltip__trigger.bx--tooltip--left .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--left + .bx--assistive-text { top: 50%; left: 0px; } .bx--tooltip__trigger.bx--tooltip--left::before { left: -0.5rem; border-width: 0.25rem 0px 0.25rem 0.3125rem; border-color: transparent transparent transparent rgb(57, 57, 57); transform: translate(-100%, -50%); } .bx--tooltip__trigger.bx--tooltip--left::after, .bx--tooltip__trigger.bx--tooltip--left .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--left + .bx--assistive-text { left: -0.8125rem; transform: translate(-100%, -50%); } .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--align-start .bx--assistive-text::after { position: absolute; display: block; content: ""; top: 0px; width: 0.75rem; height: 100%; right: -0.75rem; } .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--align-start::before, .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--align-start::after, .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--align-start .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--align-start + .bx--assistive-text { top: 50%; left: 0px; } .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--align-start::before { left: -0.5rem; border-width: 0.25rem 0px 0.25rem 0.3125rem; border-color: transparent transparent transparent rgb(57, 57, 57); transform: translate(-100%, -50%); } .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--align-start::after, .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--align-start .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--align-start + .bx--assistive-text { left: -0.8125rem; transform: translate(-100%, -50%); } .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--align-center .bx--assistive-text::after { position: absolute; display: block; content: ""; top: 0px; width: 0.75rem; height: 100%; right: -0.75rem; } .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--align-center::before, .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--align-center::after, .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--align-center .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--align-center + .bx--assistive-text { top: 50%; left: 0px; } .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--align-center::before { left: -0.5rem; border-width: 0.25rem 0px 0.25rem 0.3125rem; border-color: transparent transparent transparent rgb(57, 57, 57); transform: translate(-100%, -50%); } .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--align-center::after, .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--align-center .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--align-center + .bx--assistive-text { left: -0.8125rem; transform: translate(-100%, -50%); } .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--align-end .bx--assistive-text::after { position: absolute; display: block; content: ""; top: 0px; width: 0.75rem; height: 100%; right: -0.75rem; } .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--align-end::before, .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--align-end::after, .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--align-end .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--align-end + .bx--assistive-text { top: 50%; left: 0px; } .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--align-end::before { left: -0.5rem; border-width: 0.25rem 0px 0.25rem 0.3125rem; border-color: transparent transparent transparent rgb(57, 57, 57); transform: translate(-100%, -50%); } .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--align-end::after, .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--align-end .bx--assistive-text, .bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--align-end + .bx--assistive-text { left: -0.8125rem; transform: translate(-100%, -50%); } .bx--tooltip__trigger:not(.bx--tooltip--hidden) .bx--assistive-text { pointer-events: all; } @media screen and (-ms-high-contrast: active), (forced-colors: active) { .bx--tooltip__trigger svg, .bx--tooltip__trigger:hover svg, .bx--tooltip__trigger:focus svg { fill: buttontext; } } @media screen and (-ms-high-contrast: active), (forced-colors: active) { .bx--tooltip__trigger:focus svg { color: highlight; outline: highlight solid 1px; } } @media screen and (-ms-high-contrast: active), (forced-colors: active) { .bx--tooltip { outline: transparent solid 1px; } } @media screen and (-ms-high-contrast: active), (forced-colors: active) { .bx--assistive-text { outline: transparent solid 1px; } } .tooltipTextContainer { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; background-color: var(--brand-white); width: 160px; } .tooltipTextContainer > p { white-space: pre-wrap; color: rgb(0, 0, 0) !important; font-size: var(--font-size-small) !important; } .alert svg { fill: var(--brand-alert-red) !important; } .warning svg { fill: var(--brand-alert-yellow) !important; } .container.svelte-paw3od { display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: 100%; height: 100%; padding: calc(var(--spacer) / 2) calc(var(--spacer) / 2); background-color: var(--background-content); box-shadow: var(--box-shadow); } .cta.svelte-paw3od { margin-top: calc(var(--spacer) / 6); display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; height: fit-content !important; } .cardHeader.svelte-paw3od { margin-bottom: calc(var(--spacer) / 2); } .title.svelte-paw3od, .subtitle.svelte-paw3od { margin-bottom: 0px; } .tag.svelte-paw3od { color: var(--color-primary); font-weight: 700; } @media (min-width: 660px) { .container.svelte-paw3od { padding: calc(var(--spacer) / 2) calc(var(--spacer) * 1.5); } } .item.svelte-wjadj7 { display: flex; flex-direction: column; align-items: center; color: rgb(0, 0, 0); } .item .bx--tooltip__label { background-color: transparent !important; width: 18px !important; } .titleContainer.svelte-wjadj7 { display: flex; margin-bottom: calc((var(--spacer) / 8)); justify-content: center; align-items: center; } .title.svelte-wjadj7 { font-size: var(--font-size-small); } .value.svelte-wjadj7 { font-size: var(--font-size-base); font-weight: 700; } input.svelte-wjadj7 { background-color: transparent; color: rgb(0, 0, 0); border: 1.5px solid var(--brand-grey-lighter); width: 50px; margin-right: 5px; font-size: var(--font-size-small); padding: 0px 5px; border-radius: 2px; } .small.svelte-wjadj7 { font-size: var(--font-size-small); } .container.svelte-4y62vs { width: 100%; display: flex; align-items: flex-start; flex-direction: column; margin: calc(var(--spacer)/3) 0; } .opac.svelte-4y62vs { opacity: 0.6; } .title.svelte-4y62vs, .action.svelte-4y62vs { width: 100%; display: flex; justify-content: space-between; align-items: center; } .titleSection.svelte-4y62vs { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: calc(var(--spacer)/6); } h4.svelte-4y62vs { margin-right: calc(var(--spacer)/4); } .apy.svelte-4y62vs { color: var(--color-primary); font-weight: 700; } .description.svelte-4y62vs { text-align: start; } .action.svelte-4y62vs { justify-content: flex-start; } .status.svelte-4y62vs { margin-left: calc(var(--spacer) / 2); font-weight: 700; color: var(--brand-alert-red); } .action .button { margin-right: calc(var(--spacer)/3); width: 150px; } @media (min-width: 640px) { .titleSection.svelte-4y62vs { flex-direction: row; align-items: center; margin: 0px; } } .container.svelte-108v9ym.svelte-108v9ym { width: 100%; margin: calc(var(--spacer)/2) 0; } .rewardsContainer.svelte-108v9ym.svelte-108v9ym { width: 100%; display: flex; flex-direction: row; justify-content: flex-end; } .claimRewards.svelte-108v9ym.svelte-108v9ym { display: flex; flex-direction: column; align-items: flex-end; } .buttonMargin.svelte-108v9ym.svelte-108v9ym { margin-top: calc(var(--spacer) / 4); } .rewardsAmt.svelte-108v9ym.svelte-108v9ym { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; } .rewardsAmt.svelte-108v9ym span.svelte-108v9ym { font-size: var(--font-size-mini); color: var(--brand-alert-yellow); margin-top: calc(var(--spacer)/16); } .container.svelte-3k7bn8 { margin: calc(var(--spacer) * 2) 0; width: 100%; } .rewardsContainer.svelte-3k7bn8 { width: 100%; display: flex; flex-direction: column; margin-top: calc(var(--spacer) / 2); } .container.svelte-1wc8s3 { display: flex; width: auto; align-items: center; justify-content: flex-start; } .optionsContainer.svelte-1wc8s3 { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; background-color: var(--brand-white); width: 140px; } .option.svelte-1wc8s3 { display: flex; justify-content: center; align-items: center; margin-bottom: calc(var(--spacer) / 2); } .title.svelte-1wc8s3 { color: var(--brand-black); font-size: var(--font-size-base); font-weight: 700; } input.svelte-1wc8s3 { background-color: var(--background-content); color: var(--brand-grey-light); font-weight: 700; margin-right: calc(var(--spacer) / 6); } .value.svelte-1wc8s3 { font-size: var(--font-size-small); color: var(--brand-black); width: 100%; overflow-y: hidden; text-overflow: ellipsis; white-space: nowrap; } .option.svelte-1wc8s3:last-child { margin: 0px; } .option.svelte-1wc8s3:only-child { margin: 0px; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { padding: 0px; border: 0px; margin: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; vertical-align: baseline; } button, select, input, textarea { border-radius: 0px; font-family: inherit; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { display: block; } body { line-height: 1; } sup { vertical-align: super; } sub { vertical-align: sub; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote::before, blockquote::after, q::before, q::after { content: ""; } table { border-collapse: collapse; border-spacing: 0px; } * { box-sizing: border-box; } button { margin: 0px; } html { font-size: 100%; } body { font-weight: 400; font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; } code { font-family: "IBM Plex Mono", Menlo, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", Courier, monospace; } strong { font-weight: 600; } @media screen and (-ms-high-contrast: active) { svg { fill: buttontext; } } h1 { font-size: 2.625rem; font-weight: 300; line-height: 1.199; letter-spacing: 0px; } h2 { font-size: 2rem; font-weight: 300; line-height: 1.25; letter-spacing: 0px; } h3 { font-size: 1.75rem; font-weight: 400; line-height: 1.28572; letter-spacing: 0px; } h4 { font-size: 1.25rem; font-weight: 400; line-height: 1.4; letter-spacing: 0px; } h5 { font-size: 1rem; font-weight: 600; line-height: 1.375; letter-spacing: 0px; } h6 { font-size: 0.875rem; font-weight: 600; line-height: 1.28572; letter-spacing: 0.16px; } p { font-size: 1rem; font-weight: 400; line-height: 1.5; letter-spacing: 0px; } a { color: rgb(15, 98, 254); } em { font-style: italic; } .bx--table-toolbar { position: relative; display: flex; width: 100%; min-height: 3rem; background-color: rgb(244, 244, 244); } .bx--toolbar-content { display: flex; width: 100%; height: 3rem; justify-content: flex-end; transform: translateZ(0px); transition: transform 0.11s cubic-bezier(0.2, 0, 0.38, 0.9), clip-path 0.11s cubic-bezier(0.2, 0, 0.38, 0.9); } .bx--batch-actions ~ .bx--toolbar-content { clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 0px 100%); } .bx--toolbar-content .bx--search .bx--search-input { background-color: transparent; } .bx--batch-actions ~ .bx--toolbar-search-container { display: flex; align-items: center; opacity: 1; transition: opacity 0.11s; } .bx--toolbar-content .bx--toolbar-search-container-expandable { position: relative; width: 3rem; height: 3rem; box-shadow: none; cursor: pointer; transition: width 0.24s cubic-bezier(0.2, 0, 0.38, 0.9), background-color 0.11s cubic-bezier(0, 0, 0.38, 0.9); } .bx--toolbar-content .bx--toolbar-search-container-expandable:hover { background-color: rgb(229, 229, 229); } .bx--toolbar-search-container-expandable .bx--search-input { height: 100%; cursor: pointer; opacity: 0; } .bx--toolbar-search-container-expandable:not(.bx--toolbar-search-container-active) .bx--search-input { padding: 0px; } .bx--toolbar-search-container-expandable .bx--search-magnifier-icon { left: 0px; width: 3rem; height: 3rem; padding: 1rem; fill: rgb(22, 22, 22); } .bx--toolbar-search-container-expandable.bx--search--disabled .bx--search-magnifier-icon { background-color: rgb(244, 244, 244); cursor: not-allowed; } .bx--toolbar-search-container-disabled .bx--search-input { cursor: not-allowed; } .bx--toolbar-search-container-expandable.bx--search .bx--label { visibility: hidden; } .bx--toolbar-search-container-expandable.bx--search .bx--search-close { width: 3rem; height: 3rem; } .bx--toolbar-search-container-expandable.bx--search .bx--search-close::before { top: 0.125rem; height: calc(100% - 0.25rem); background-color: rgb(229, 229, 229); } .bx--toolbar-search-container-expandable.bx--search .bx--search-close:focus::before { background-color: rgb(15, 98, 254); } .bx--toolbar-search-container-active.bx--search { width: 100%; } .bx--toolbar-search-container-active .bx--search-input { opacity: 1; } .bx--toolbar-search-container-active .bx--label, .bx--toolbar-search-container-active .bx--search-input { padding: 0px 3rem; cursor: text; } .bx--toolbar-search-container-active .bx--search-input:focus + .bx--search-close { border: none; box-shadow: none; outline: none; } .bx--toolbar-search-container-active .bx--search-input:not(:placeholder-shown) { border: none; background-color: rgb(229, 229, 229); } .bx--toolbar-search-container-active .bx--search-magnifier-icon:focus, .bx--toolbar-search-container-active .bx--search-magnifier-icon:active, .bx--toolbar-search-container-active .bx--search-magnifier-icon:hover { border: none; background-color: transparent; outline: none; } .bx--toolbar-search-container-persistent .bx--search-close, .bx--toolbar-search-container-persistent .bx--search-close:hover, .bx--toolbar-search-container-active .bx--search-close, .bx--toolbar-search-container-active .bx--search-close:hover { border: none; background-color: transparent; } .bx--toolbar-search-container-persistent .bx--search-close::before { display: none; } .bx--overflow-menu.bx--toolbar-action { box-sizing: border-box; margin: 0px; font-family: inherit; font-size: 100%; vertical-align: baseline; border: 0px; appearance: none; background: none; display: flex; width: 3rem; height: 3rem; padding: 1rem; cursor: pointer; transition: background 0.11s cubic-bezier(0, 0, 0.38, 0.9); } .bx--overflow-menu.bx--toolbar-action *, .bx--overflow-menu.bx--toolbar-action ::before, .bx--overflow-menu.bx--toolbar-action ::after { box-sizing: inherit; } .bx--toolbar-action { box-sizing: border-box; margin: 0px; font-family: inherit; font-size: 100%; vertical-align: baseline; padding: 0px; border: 0px; appearance: none; background: none; display: flex; width: 3rem; height: 3rem; cursor: pointer; transition: background 0.11s cubic-bezier(0, 0, 0.38, 0.9); } .bx--toolbar-action *, .bx--toolbar-action ::before, .bx--toolbar-action ::after { box-sizing: inherit; } .bx--toolbar-action:hover:not([disabled]) { background-color: rgb(229, 229, 229); } .bx--toolbar-action:hover[aria-expanded="true"] { background-color: rgb(244, 244, 244); } .bx--toolbar-action[disabled] { cursor: not-allowed; } .bx--toolbar-action[disabled] .bx--toolbar-action__icon { cursor: not-allowed; fill: rgb(198, 198, 198); } .bx--toolbar-action:focus:not([disabled]), .bx--toolbar-action:active:not([disabled]) { outline: rgb(15, 98, 254) solid 2px; outline-offset: -2px; } @media screen and (prefers-contrast) { .bx--toolbar-action:focus:not([disabled]), .bx--toolbar-action:active:not([disabled]) { outline-style: dotted; } } .bx--toolbar-action:focus:not([disabled]).bx--toolbar-search-container-expandable, .bx--toolbar-action:active:not([disabled]).bx--toolbar-search-container-expandable { outline: none; } .bx--toolbar-action ~ .bx--btn { max-width: none; margin: 0px; white-space: nowrap; } .bx--overflow-menu--data-table { height: 3rem; } .bx--toolbar-action__icon { width: auto; max-width: 1rem; height: 1rem; fill: rgb(22, 22, 22); } .bx--toolbar-search-container-persistent { position: relative; width: 100%; height: 3rem; opacity: 1; } .bx--toolbar-search-container-persistent + .bx--toolbar-content { position: relative; width: auto; } .bx--toolbar-search-container-persistent .bx--search { position: initial; } .bx--toolbar-search-container-persistent .bx--search-magnifier-icon { left: 1rem; } .bx--toolbar-search-container-persistent .bx--search-input { height: 3rem; padding: 0px 3rem; border: none; } .bx--toolbar-search-container-persistent .bx--search-input:focus:not([disabled]) { outline: rgb(15, 98, 254) solid 2px; outline-offset: -2px; } @media screen and (prefers-contrast) { .bx--toolbar-search-container-persistent .bx--search-input:focus:not([disabled]) { outline-style: dotted; } } .bx--toolbar-search-container-persistent .bx--search-input:hover:not([disabled]) { background-color: rgb(229, 229, 229); } .bx--toolbar-search-container-persistent .bx--search-input:active:not([disabled]), .bx--toolbar-search-container-persistent .bx--search-input:not(:placeholder-shown) { background-color: rgb(229, 229, 229); } .bx--toolbar-search-container-persistent .bx--search-close { width: 3rem; height: 3rem; } .bx--batch-actions--active ~ .bx--toolbar-search-container, .bx--batch-actions--active ~ .bx--toolbar-content { clip-path: polygon(0px 0px, 100% 0px, 100% 0px, 0px 0px); transform: translate3d(0px, 48px, 0px); transition: transform 0.11s cubic-bezier(0.2, 0, 0.38, 0.9), clip-path 0.11s cubic-bezier(0.2, 0, 0.38, 0.9); } .bx--batch-actions { position: absolute; right: 0px; bottom: 0px; left: 0px; display: flex; align-items: center; justify-content: space-between; background-color: rgb(15, 98, 254); clip-path: polygon(0px 0px, 100% 0px, 100% 0px, 0px 0px); pointer-events: none; transform: translate3d(0px, 48px, 0px); transition: transform 0.11s cubic-bezier(0.2, 0, 0.38, 0.9), clip-path 0.11s cubic-bezier(0.2, 0, 0.38, 0.9), opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9); will-change: transform; } .bx--batch-actions:focus { outline: rgb(15, 98, 254) solid 1px; } @media screen and (prefers-contrast) { .bx--batch-actions:focus { outline-style: dotted; } } .bx--batch-actions--active { overflow: auto hidden; clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 0px 100%); pointer-events: all; transform: translateZ(0px); } .bx--action-list { display: flex; align-items: center; } .bx--action-list .bx--btn { padding: calc(-3px + 0.875rem) 16px; color: rgb(255, 255, 255); white-space: nowrap; } .bx--action-list .bx--btn:disabled { color: rgb(141, 141, 141); } .bx--action-list .bx--btn .bx--btn__icon { position: static; margin-left: 0.5rem; fill: rgb(255, 255, 255); } .bx--action-list .bx--btn .bx--btn__icon .st0 { fill: none; } .bx--batch-download { padding: 0.0625rem; } .bx--action-list .bx--btn--primary:focus::before, .bx--action-list .bx--btn--primary::before, .bx--action-list .bx--btn--primary:focus::after, .bx--action-list .bx--btn--primary::after { display: none; } .bx--action-list .bx--btn--primary:focus { outline: rgb(244, 244, 244) solid 2px; outline-offset: -0.125rem; } .bx--action-list .bx--btn--primary:nth-child(3):hover + .bx--btn--primary.bx--batch-summary__cancel::before, .bx--action-list .bx--btn--primary:nth-child(3):focus + .bx--btn--primary.bx--batch-summary__cancel::before { opacity: 0; } .bx--btn--primary.bx--batch-summary__cancel::before { position: absolute; top: 0.9375rem; left: 0px; display: block; width: 0.0625rem; height: 1rem; border: none; background-color: rgb(255, 255, 255); content: ""; opacity: 1; transition: opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9); } .bx--btn--primary.bx--batch-summary__cancel:hover::before { opacity: 0; transition: opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9); } .bx--batch-summary { position: sticky; z-index: 100000; left: 0px; display: flex; min-height: 3rem; align-items: center; padding: 0px 1rem; background-color: rgb(15, 98, 254); color: rgb(255, 255, 255); } .bx--batch-summary__scroll { box-shadow: rgb(0, 67, 206) 0.5px 0px 0.2px; } .bx--batch-summary__para { font-size: 0.875rem; font-weight: 400; line-height: 1.28572; letter-spacing: 0.16px; } .bx--table-toolbar--small, .bx--table-toolbar--sm { height: 2rem; min-height: 2rem; } .bx--table-toolbar--small .bx--toolbar-search-container-expandable, .bx--table-toolbar--small .bx--toolbar-search-container-persistent, .bx--table-toolbar--sm .bx--toolbar-search-container-expandable, .bx--table-toolbar--sm .bx--toolbar-search-container-persistent, .bx--table-toolbar--small .bx--toolbar-search-container-expandable .bx--search-input, .bx--table-toolbar--small .bx--toolbar-search-container-persistent .bx--search-input, .bx--table-toolbar--sm .bx--toolbar-search-container-expandable .bx--search-input, .bx--table-toolbar--sm .bx--toolbar-search-container-persistent .bx--search-input { height: 2rem; } .bx--table-toolbar--small .bx--toolbar-search-container-expandable .bx--search-close, .bx--table-toolbar--small .bx--toolbar-search-container-persistent .bx--search-close, .bx--table-toolbar--sm .bx--toolbar-search-container-expandable .bx--search-close, .bx--table-toolbar--sm .bx--toolbar-search-container-persistent .bx--search-close { width: 2rem; height: 2rem; } .bx--table-toolbar--small .bx--toolbar-search-container-expandable .bx--search-magnifier-icon, .bx--table-toolbar--small .bx--toolbar-search-container-persistent .bx--search-magnifier-icon, .bx--table-toolbar--sm .bx--toolbar-search-container-expandable .bx--search-magnifier-icon, .bx--table-toolbar--sm .bx--toolbar-search-container-persistent .bx--search-magnifier-icon { width: 2rem; height: 2rem; padding: 0.5rem; } .bx--table-toolbar--small .bx--toolbar-action.bx--toolbar-search-container-persistent, .bx--table-toolbar--sm .bx--toolbar-action.bx--toolbar-search-container-persistent { width: 100%; } .bx--table-toolbar--small .bx--toolbar-search-container-active .bx--search-magnifier-icon, .bx--table-toolbar--small .bx--toolbar-search-container-persistent .bx--search-magnifier-icon, .bx--table-toolbar--sm .bx--toolbar-search-container-active .bx--search-magnifier-icon, .bx--table-toolbar--sm .bx--toolbar-search-container-persistent .bx--search-magnifier-icon { left: 0.5rem; } .bx--table-toolbar--small .bx--toolbar-search-container-expandable, .bx--table-toolbar--sm .bx--toolbar-search-container-expandable { width: 2rem; } .bx--table-toolbar--small .bx--toolbar-search-container-expandable .bx--search .bx--search-input, .bx--table-toolbar--sm .bx--toolbar-search-container-expandable .bx--search .bx--search-input { padding: 0px 3rem; } .bx--table-toolbar--small .bx--toolbar-search-container-active, .bx--table-toolbar--sm .bx--toolbar-search-container-active { flex: 1 1 auto; transition: flex 175ms cubic-bezier(0.2, 0, 0.38, 0.9); } .bx--table-toolbar--small .bx--toolbar-search-container-active .bx--search-input, .bx--table-toolbar--sm .bx--toolbar-search-container-active .bx--search-input { visibility: inherit; } .bx--table-toolbar--small .bx--toolbar-search-container-active .bx--search-input:focus, .bx--table-toolbar--sm .bx--toolbar-search-container-active .bx--search-input:focus { outline: rgb(15, 98, 254) solid 2px; outline-offset: -2px; background-color: rgb(229, 229, 229); } @media screen and (prefers-contrast) { .bx--table-toolbar--small .bx--toolbar-search-container-active .bx--search-input:focus, .bx--table-toolbar--sm .bx--toolbar-search-container-active .bx--search-input:focus { outline-style: dotted; } } .bx--table-toolbar--small .bx--toolbar-search-container-active .bx--search-input:active, .bx--table-toolbar--small .bx--toolbar-search-container-active .bx--search-input:not(:placeholder-shown), .bx--table-toolbar--sm .bx--toolbar-search-container-active .bx--search-input:active, .bx--table-toolbar--sm .bx--toolbar-search-container-active .bx--search-input:not(:placeholder-shown) { background-color: rgb(229, 229, 229); } .bx--table-toolbar--small .bx--toolbar-search-container-active .bx--search-magnifier-icon:focus, .bx--table-toolbar--small .bx--toolbar-search-container-active .bx--search-magnifier-icon:active, .bx--table-toolbar--small .bx--toolbar-search-container-active .bx--search-magnifier-icon:hover, .bx--table-toolbar--sm .bx--toolbar-search-container-active .bx--search-magnifier-icon:focus, .bx--table-toolbar--sm .bx--toolbar-search-container-active .bx--search-magnifier-icon:active, .bx--table-toolbar--sm .bx--toolbar-search-container-active .bx--search-magnifier-icon:hover { outline: transparent solid 2px; outline-offset: -2px; background-color: transparent; } .bx--table-toolbar--small .bx--overflow-menu.bx--toolbar-action, .bx--table-toolbar--sm .bx--overflow-menu.bx--toolbar-action { width: 2rem; min-width: 2rem; height: 2rem; } .bx--table-toolbar--small .bx--toolbar-content, .bx--table-toolbar--sm .bx--toolbar-content { height: 2rem; } .bx--search--disabled .bx--search-magnifier-icon:hover { background-color: transparent; } .bx--table-toolbar--small .bx--batch-actions .bx--action-list, .bx--table-toolbar--sm .bx--batch-actions .bx--action-list { height: 2rem; } .bx--table-toolbar--small .bx--toolbar-action, .bx--table-toolbar--sm .bx--toolbar-action { width: 2rem; height: 2rem; padding: 0.5rem 0px; } .bx--table-toolbar--small .bx--btn--primary, .bx--table-toolbar--sm .bx--btn--primary { height: 2rem; min-height: auto; padding-top: calc(-3px + 0.375rem); padding-bottom: calc(-3px + 0.375rem); } .bx--table-toolbar--small .bx--btn--primary.bx--batch-summary__cancel::before, .bx--table-toolbar--sm .bx--btn--primary.bx--batch-summary__cancel::before { top: 0.5rem; } .bx--table-toolbar--small .bx--toolbar-action ~ .bx--btn, .bx--table-toolbar--sm .bx--toolbar-action ~ .bx--btn { overflow: hidden; height: 2rem; } .bx--table-toolbar--small .bx--batch-summary, .bx--table-toolbar--sm .bx--batch-summary { min-height: 2rem; } .bx--data-table-container { position: relative; padding-top: 0.125rem; } .bx--data-table-content { overflow-x: auto; } .bx--data-table-header { padding: 1rem 0px 1.5rem 1rem; background: rgb(244, 244, 244); } .bx--data-table-header__title { font-size: 1.25rem; font-weight: 400; line-height: 1.4; letter-spacing: 0px; color: rgb(22, 22, 22); } .bx--data-table-header__description { font-size: 0.875rem; font-weight: 400; line-height: 1.28572; letter-spacing: 0.16px; color: rgb(82, 82, 82); } .bx--data-table { width: 100%; border-collapse: collapse; border-spacing: 0px; } .bx--data-table thead { font-size: 0.875rem; font-weight: 600; line-height: 1.28572; letter-spacing: 0.16px; background-color: rgb(224, 224, 224); } .bx--data-table tbody { font-size: 0.875rem; font-weight: 400; line-height: 1.28572; letter-spacing: 0.16px; width: 100%; background-color: rgb(244, 244, 244); } .bx--data-table tr { width: 100%; height: 3rem; border: none; } .bx--data-table tbody tr, .bx--data-table tbody tr td, .bx--data-table tbody tr th { transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9); } .bx--data-table tbody tr:hover { background: rgb(229, 229, 229); } .bx--data-table tbody tr:hover td, .bx--data-table tbody tr:hover th { border-top: 1px solid rgb(229, 229, 229); border-bottom: 1px solid rgb(229, 229, 229); background: rgb(229, 229, 229); color: rgb(22, 22, 22); } .bx--data-table tr:hover .bx--link { color: rgb(0, 67, 206); } .bx--data-table tr:hover .bx--link--disabled { color: rgb(198, 198, 198); } .bx--data-table th, .bx--data-table td { text-align: left; vertical-align: middle; } .bx--data-table th[align="right"], .bx--data-table td[align="right"] { text-align: right; } .bx--data-table th[align="center"], .bx--data-table td[align="center"] { text-align: center; } .bx--data-table th { padding-right: 1rem; padding-left: 1rem; background-color: rgb(224, 224, 224); color: rgb(22, 22, 22); } .bx--data-table th:last-of-type { position: static; width: auto; } .bx--data-table td, .bx--data-table tbody th { padding-right: 1rem; padding-left: 1rem; border-top: 1px solid rgb(244, 244, 244); border-bottom: 1px solid rgb(224, 224, 224); background: rgb(244, 244, 244); color: rgb(82, 82, 82); } .bx--data-table td + td:first-of-type, .bx--data-table tbody th + td:first-of-type { padding-left: 0.75rem; } @supports (-moz-appearance: none) { .bx--data-table td { background-clip: padding-box; } } .bx--data-table .bx--list-box input[role="combobox"], .bx--data-table .bx--list-box input[type="text"], .bx--data-table .bx--dropdown, .bx--data-table .bx--list-box, .bx--data-table .bx--number input[type="number"], .bx--data-table .bx--number__control-btn::before, .bx--data-table .bx--number__control-btn::after, .bx--data-table .bx--text-input, .bx--data-table .bx--select-input { background-color: rgb(255, 255, 255); } .bx--data-table td.bx--table-column-menu .bx--overflow-menu[aria-expanded="false"]:focus { outline: rgb(15, 98, 254) solid 2px; outline-offset: -2px; } @media screen and (prefers-contrast) { .bx--data-table td.bx--table-column-menu .bx--overflow-menu[aria-expanded="false"]:focus { outline-style: dotted; } } .bx--data-table td.bx--table-column-menu .bx--overflow-menu[aria-expanded="true"]:focus { outline: none; } @media screen and (hover: hover), (-ms-high-contrast: active), (-ms-high-contrast: none) { .bx--data-table td.bx--table-column-menu .bx--overflow-menu .bx--overflow-menu__icon { opacity: 0; } } .bx--data-table td.bx--table-column-menu .bx--overflow-menu.bx--overflow-menu--open .bx--overflow-menu__icon { opacity: 1; } .bx--data-table.bx--data-table--visible-overflow-menu td.bx--table-column-menu .bx--overflow-menu .bx--overflow-menu__icon, .bx--data-table td.bx--table-column-menu .bx--overflow-menu:hover .bx--overflow-menu__icon, .bx--data-table td.bx--table-column-menu .bx--overflow-menu:focus .bx--overflow-menu__icon, .bx--data-table tr:hover td.bx--table-column-menu .bx--overflow-menu .bx--overflow-menu__icon { opacity: 1; } .bx--table-row--menu-option .bx--overflow-menu-options__btn .bx--overflow-menu-options__option-content svg { position: relative; top: 0.1875rem; margin-right: 0.5rem; } .bx--data-table .bx--overflow-menu:hover, .bx--data-table .bx--overflow-menu__trigger:hover { background-color: rgb(202, 202, 202); } .bx--data-table--selected .bx--overflow-menu:hover, .bx--data-table--selected .bx--overflow-menu__trigger:hover { background-color: rgb(229, 229, 229); } .bx--data-table--selected .bx--link:not(.bx--link--disabled) { color: rgb(0, 67, 206); } .bx--data-table--compact td.bx--table-column-menu, .bx--data-table--xs td.bx--table-column-menu, .bx--data-table--short td.bx--table-column-menu, .bx--data-table--sm td.bx--table-column-menu { height: 1.5rem; padding-top: 0px; padding-bottom: 0px; } .bx--data-table--short td.bx--table-column-menu, .bx--data-table--sm td.bx--table-column-menu { height: 2rem; } .bx--data-table--md td.bx--table-column-menu { height: 2.5rem; } .bx--data-table--tall .bx--table-column-menu, .bx--data-table--xl .bx--table-column-menu { padding-top: 0.5rem; } .bx--data-table--zebra tbody tr:not(.bx--parent-row):nth-child(2n+1) td { border-bottom: 1px solid rgb(244, 244, 244); } .bx--data-table--zebra tbody tr:not(.bx--parent-row):nth-child(2n) td { border-top: 1px solid rgb(255, 255, 255); border-bottom: 1px solid rgb(255, 255, 255); background-color: rgb(255, 255, 255); } .bx--data-table--zebra tbody tr:not(.bx--parent-row):hover td { border-top: 1px solid rgb(229, 229, 229); border-bottom: 1px solid rgb(229, 229, 229); background-color: rgb(229, 229, 229); } .bx--table-column-checkbox .bx--checkbox-label { padding-left: 0px; } .bx--data-table th.bx--table-column-checkbox { position: static; width: 2rem; background: rgb(224, 224, 224); transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9); } .bx--data-table .bx--table-column-checkbox .bx--checkbox:focus + .bx--checkbox-label::before { outline-offset: 0.375rem; } .bx--data-table--compact .bx--table-column-checkbox .bx--checkbox:focus + .bx--checkbox-label::before, .bx--data-table--xs .bx--table-column-checkbox .bx--checkbox:focus + .bx--checkbox-label::before { outline-offset: 0.125rem; } .bx--data-table thead th.bx--table-column-checkbox, .bx--data-table tbody td.bx--table-column-checkbox, .bx--data-table thead th.bx--table-expand, .bx--data-table tbody td.bx--table-expand { min-width: 0px; } .bx--data-table thead th.bx--table-column-checkbox, .bx--data-table tbody td.bx--table-column-checkbox { width: 2.5rem; padding-right: 0.25rem; padding-left: 1rem; } .bx--data-table thead th.bx--table-expand, .bx--data-table tbody td.bx--table-expand { width: 2rem; height: 2rem; } .bx--data-table--compact thead th.bx--table-expand, .bx--data-table--compact tbody td.bx--table-expand, .bx--data-table--xs thead th.bx--table-expand, .bx--data-table--xs tbody td.bx--table-expand { width: 1.5rem; height: 1.5rem; padding: 0px 0px 0px 0.5rem; } .bx--data-table--short thead th.bx--table-expand, .bx--data-table--short tbody td.bx--table-expand, .bx--data-table--sm thead th.bx--table-expand, .bx--data-table--sm tbody td.bx--table-expand { width: 2rem; height: 2rem; padding: 0px 0px 0px 0.5rem; } .bx--data-table--md thead th.bx--table-expand, .bx--data-table--md tbody td.bx--table-expand { width: 2.5rem; height: 2.5rem; padding: 0.25rem 0px 0.25rem 0.5rem; } .bx--data-table--tall thead th.bx--table-expand, .bx--data-table--tall tbody td.bx--table-expand, .bx--data-table--xl thead th.bx--table-expand, .bx--data-table--xl tbody td.bx--table-expand { height: 4rem; padding-top: 0.625rem; padding-bottom: 1.375rem; } .bx--data-table--tall .bx--table-column-checkbox, .bx--data-table--xl .bx--table-column-checkbox { padding-top: 0.8125rem; } .bx--data-table--tall .bx--table-column-radio, .bx--data-table--xl .bx--table-column-radio { padding-top: 1rem; } tr.bx--data-table--selected:hover .bx--radio-button[disabled] + .bx--radio-button__label, tr.bx--data-table--selected:hover .bx--checkbox[disabled] + .bx--checkbox-label, tr.bx--data-table--selected:hover .bx--link--disabled { color: rgb(141, 141, 141); } tr.bx--data-table--selected:hover .bx--radio-button[disabled] + .bx--radio-button__label .bx--radio-button__appearance, tr.bx--data-table--selected:hover .bx--checkbox[disabled] + .bx--checkbox-label::before { border-color: rgb(141, 141, 141); } .bx--table-column-radio { width: 48px; } .bx--table-column-radio .bx--radio-button__appearance { margin-right: -0.125rem; } .bx--data-table--zebra tbody tr:nth-child(2n+1).bx--data-table--selected td, tr.bx--data-table--selected td { border-top: 1px solid rgb(224, 224, 224); border-bottom: 1px solid rgb(198, 198, 198); background-color: rgb(224, 224, 224); color: rgb(22, 22, 22); } .bx--data-table--zebra tbody tr:first-of-type:nth-child(2n+1).bx--data-table--selected td, tr.bx--data-table--selected:first-of-type td { border-top: 1px solid rgb(198, 198, 198); } .bx--data-table--zebra tbody tr:last-of-type:nth-child(2n+1).bx--data-table--selected td, .bx--data-table--zebra tbody tr:last-of-type:nth-child(2n).bx--data-table--selected td, tr.bx--data-table--selected:last-of-type td { border-top: 1px solid rgb(224, 224, 224); border-bottom: 1px solid rgb(224, 224, 224); } .bx--data-table--zebra tbody tr:nth-child(2n).bx--data-table--selected td { border-bottom: 1px solid rgb(198, 198, 198); } .bx--data-table--zebra tbody tr:nth-child(2n).bx--data-table--selected:hover td { border-bottom: 1px solid rgb(202, 202, 202); } .bx--data-table--zebra tbody tr:nth-child(2n+1).bx--data-table--selected:hover td, .bx--data-table tbody .bx--data-table--selected:hover td { border-top: 1px solid rgb(202, 202, 202); border-bottom: 1px solid rgb(202, 202, 202); background: rgb(202, 202, 202); color: rgb(22, 22, 22); } .bx--data-table--selected .bx--overflow-menu .bx--overflow-menu__icon { opacity: 1; } .bx--data-table--compact thead tr, .bx--data-table--compact tbody tr, .bx--data-table--compact tbody tr th { height: 1.5rem; } .bx--data-table--compact .bx--table-header-label, .bx--data-table--compact td, .bx--data-table--compact tbody tr th { padding-top: 0.125rem; padding-bottom: 0.125rem; } .bx--data-table--compact .bx--overflow-menu { width: 2rem; height: 100%; } .bx--data-table.bx--data-table--compact .bx--table-column-checkbox { padding-top: 0px; padding-bottom: 0px; } .bx--data-table.bx--data-table--compact .bx--table-column-checkbox .bx--checkbox-label { height: 1.4375rem; min-height: 1.4375rem; } .bx--data-table--xs thead tr, .bx--data-table--xs tbody tr, .bx--data-table--xs tbody tr th { height: 1.5rem; } .bx--data-table--xs .bx--table-header-label, .bx--data-table--xs td, .bx--data-table--xs tbody tr th { padding-top: 0.125rem; padding-bottom: 0.125rem; } .bx--data-table--xs .bx--overflow-menu { width: 2rem; height: calc(100% + 1px); } .bx--data-table.bx--data-table--xs .bx--table-column-checkbox { padding-top: 0px; padding-bottom: 0px; } .bx--data-table.bx--data-table--xs .bx--table-column-checkbox .bx--checkbox-label { height: 1.4375rem; min-height: 1.4375rem; } .bx--data-table--short thead tr, .bx--data-table--short tbody tr, .bx--data-table--short tbody tr th { height: 2rem; } .bx--data-table--short .bx--table-header-label { padding-top: 0.4375rem; padding-bottom: 0.4375rem; } .bx--data-table--short td, .bx--data-table--short tbody tr th { padding-top: 0.4375rem; padding-bottom: 0.375rem; } .bx--data-table.bx--data-table--short .bx--table-column-checkbox { padding-top: 0.1875rem; padding-bottom: 0.1875rem; } .bx--data-table--short .bx--overflow-menu { height: 100%; } .bx--data-table--sm thead tr, .bx--data-table--sm tbody tr, .bx--data-table--sm tbody tr th { height: 2rem; } .bx--data-table--sm .bx--table-header-label { padding-top: 0.4375rem; padding-bottom: 0.4375rem; } .bx--data-table--sm td, .bx--data-table--sm tbody tr th { padding-top: 0.4375rem; padding-bottom: 0.375rem; } .bx--data-table.bx--data-table--sm .bx--table-column-checkbox { padding-top: 0.1875rem; padding-bottom: 0.1875rem; } .bx--data-table--sm .bx--overflow-menu { height: calc(100% + 1px); } .bx--data-table--md thead tr, .bx--data-table--md tbody tr, .bx--data-table--md tbody tr th { height: 2.5rem; } .bx--data-table--md .bx--table-header-label { padding-top: 0.4375rem; padding-bottom: 0.4375rem; } .bx--data-table--md td, .bx--data-table--md tbody tr th { padding-top: 0.4375rem; padding-bottom: 0.375rem; } .bx--data-table.bx--data-table--md .bx--table-column-checkbox, .bx--data-table--md .bx--table-column-menu { padding-top: 0.1875rem; padding-bottom: 0.1875rem; } .bx--data-table--tall thead tr, .bx--data-table--tall tbody tr, .bx--data-table--tall tbody tr th { height: 4rem; } .bx--data-table--tall .bx--table-header-label { padding-top: 1rem; padding-bottom: 1rem; } .bx--data-table--tall td, .bx--data-table--tall tbody tr th { padding-top: 1rem; } .bx--data-table--tall th, .bx--data-table--tall td { vertical-align: top; } .bx--data-table--tall .bx--data-table--cell-secondary-text { font-size: 0.75rem; font-weight: 400; line-height: 1.33333; letter-spacing: 0.32px; } .bx--data-table--xl thead tr, .bx--data-table--xl tbody tr, .bx--data-table--xl tbody tr th { height: 4rem; } .bx--data-table--xl .bx--table-header-label { padding-top: 1rem; padding-bottom: 1rem; } .bx--data-table--xl td, .bx--data-table--xl tbody tr th { padding-top: 1rem; } .bx--data-table--xl th, .bx--data-table--xl td { vertical-align: top; } .bx--data-table--xl .bx--data-table--cell-secondary-text { font-size: 0.75rem; font-weight: 400; line-height: 1.33333; letter-spacing: 0.32px; } .bx--data-table--static { width: auto; } .bx--data-table-container--static { width: fit-content; } .bx--data-table_inner-container { background-color: rgb(224, 224, 224); transform: translateZ(0px); } .bx--data-table--sticky-header { display: block; overflow-y: scroll; } .bx--data-table--sticky-header thead, .bx--data-table--sticky-header tbody, .bx--data-table--sticky-header tr, .bx--data-table--sticky-header th, .bx--data-table--sticky-header td { display: flex; } .bx--data-table--sticky-header thead { position: sticky; z-index: 1; top: 0px; overflow: scroll; width: 100%; will-change: transform; } .bx--data-table--sticky-header thead tr th { border-bottom: 1px solid rgb(198, 198, 198); } .bx--data-table--sticky-header tbody { flex-direction: column; overflow-x: scroll; will-change: transform; } .bx--data-table--sticky-header tr.bx--parent-row.bx--expandable-row { height: auto; min-height: 3rem; } .bx--data-table--sticky-header tr.bx--expandable-row:not(.bx--parent-row) { height: auto; } .bx--data-table--sticky-header .bx--table-expand { max-width: 3rem; } .bx--data-table--sticky-header thead .bx--table-expand { align-items: center; } .bx--data-table--sticky-header .bx--parent-row { min-height: 3rem; } .bx--data-table--sticky-header:not(.bx--data-table--compact):not(.bx--data-table--xs):not(.bx--data-table--tall):not(.bx--data-table--xl):not(.bx--data-table--short):not(.bx--data-table--sm) td:not(.bx--table-column-menu):not(.bx--table-column-checkbox) { padding-top: 0.875rem; } .bx--data-table--sticky-header tr.bx--parent-row.bx--expandable-row:hover + tr[data-child-row] td { border-top: 1px solid rgb(229, 229, 229); } .bx--data-table--sticky-header tr.bx--expandable-row:last-of-type { overflow: hidden; } .bx--data-table--sticky-header tr.bx--data-table--selected:first-of-type td { border-top: none; } .bx--data-table--sticky-header thead th.bx--table-column-checkbox, .bx--data-table--sticky-header tbody tr td.bx--table-column-checkbox { width: 2.25rem; min-width: 2.25rem; align-items: center; } .bx--data-table--sticky-header.bx--data-table--tall thead th.bx--table-column-checkbox, .bx--data-table--sticky-header.bx--data-table--xl thead th.bx--table-column-checkbox, .bx--data-table--sticky-header.bx--data-table--tall td.bx--table-column-checkbox, .bx--data-table--sticky-header.bx--data-table--xl td.bx--table-column-checkbox { align-items: flex-start; } .bx--data-table--sticky-header th.bx--table-column-checkbox ~ th:last-of-type:empty { max-width: 4rem; } .bx--data-table--sticky-header th:empty:not(.bx--table-expand) { max-width: 2.25rem; } .bx--data-table--sticky-header td.bx--table-column-menu { height: auto; align-items: center; padding-top: 0px; } .bx--data-table--sticky-header thead::-webkit-scrollbar, .bx--data-table--sticky-header tbody::-webkit-scrollbar { display: none; } .bx--data-table--sticky-header tbody tr:last-of-type { border-bottom: 0px; } .bx--data-table--sticky-header th:not(.bx--table-column-checkbox):not(.bx--table-column-menu):not(.bx--table-expand-v2):not(.bx--table-column-icon), .bx--data-table--sticky-header td:not(.bx--table-column-checkbox):not(.bx--table-column-menu):not(.bx--table-expand-v2):not(.bx--table-column-icon) { width: 100%; min-width: 0px; } .bx--data-table--sticky-header.bx--data-table--compact tr:not(.bx--expandable-row), .bx--data-table--sticky-header.bx--data-table--xs tr:not(.bx--expandable-row), .bx--data-table--sticky-header.bx--data-table--short tr:not(.bx--expandable-row), .bx--data-table--sticky-header.bx--data-table--sm tr:not(.bx--expandable-row), .bx--data-table--sticky-header.bx--data-table--tall tr:not(.bx--expandable-row), .bx--data-table--sticky-header.bx--data-table--xl tr:not(.bx--expandable-row) { height: auto; } .bx--data-table--sticky-header.bx--data-table--compact tr:not(.bx--expandable-row), .bx--data-table--sticky-header.bx--data-table--xs tr:not(.bx--expandable-row) { min-height: 1.5rem; } .bx--data-table--sticky-header.bx--data-table--short tr:not(.bx--expandable-row), .bx--data-table--sticky-header.bx--data-table--sm tr:not(.bx--expandable-row) { min-height: 2rem; } .bx--data-table--sticky-header.bx--data-table--tall tr:not(.bx--expandable-row), .bx--data-table--sticky-header.bx--data-table--xl tr:not(.bx--expandable-row) { min-height: 4rem; } .bx--data-table--sticky-header.bx--data-table--compact tr td.bx--table-expand, .bx--data-table--sticky-header.bx--data-table--xs tr td.bx--table-expand { padding-top: 0.25rem; } .bx--data-table--sticky-header.bx--data-table--short tr td.bx--table-expand, .bx--data-table--sticky-header.bx--data-table--sm tr td.bx--table-expand { padding-top: 0.5rem; } .bx--data-table--sticky-header .bx--table-header-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: calc(100% - 10px); padding-top: 0.9375rem; padding-bottom: 1rem; } .bx--data-table--sticky-header.bx--data-table--compact th .bx--table-header-label, .bx--data-table--sticky-header.bx--data-table--xs th .bx--table-header-label { padding-top: 0.1875rem; padding-bottom: 0px; } .bx--data-table--sticky-header.bx--data-table--short th .bx--table-header-label, .bx--data-table--sticky-header.bx--data-table--sm th .bx--table-header-label { padding-top: 0.5rem; padding-bottom: 0px; } .bx--data-table--sticky-header.bx--data-table--tall th .bx--table-header-label, .bx--data-table--sticky-header.bx--data-table--xl th .bx--table-header-label { padding-top: 1rem; } .bx--data-table--sticky-header.bx--data-table--tall th.bx--table-expand, .bx--data-table--sticky-header.bx--data-table--xl th.bx--table-expand { display: flex; align-items: flex-start; } .bx--data-table--sticky-header.bx--data-table--compact tr.bx--parent-row .bx--table-column-checkbox, .bx--data-table--sticky-header.bx--data-table--short tr.bx--parent-row .bx--table-column-checkbox, .bx--data-table--sticky-header.bx--data-table--xs tr.bx--parent-row .bx--table-column-checkbox, .bx--data-table--sticky-header.bx--data-table--sm tr.bx--parent-row .bx--table-column-checkbox { align-items: flex-start; } .bx--data-table--max-width { max-width: 100%; } .bx--data-table--sticky-header { max-height: 18.75rem; } .bx--data-table .bx--form-item.bx--checkbox-wrapper:last-of-type { margin: 0px; } .bx--data-table--short .bx--form-item.bx--checkbox-wrapper:last-of-type, .bx--data-table--compact .bx--form-item.bx--checkbox-wrapper:last-of-type, .bx--data-table--xs .bx--form-item.bx--checkbox-wrapper:last-of-type, .bx--data-table--sm .bx--form-item.bx--checkbox-wrapper:last-of-type { margin: -0.1875rem 0px; } @media screen and (-ms-high-contrast: active), (forced-colors: active) { .bx--data-table-content { outline: transparent solid 1px; } } .bx--data-table tr.bx--parent-row:first-of-type td { border-top: 1px solid rgb(224, 224, 224); } .bx--expandable-row--hidden td { width: auto; padding: 1rem; border-top: 0px; } tr.bx--parent-row:not(.bx--expandable-row) + tr[data-child-row] { height: 0px; transition: height 0.15s cubic-bezier(0.2, 0, 0.38, 0.9); } tr.bx--parent-row:not(.bx--expandable-row) + tr[data-child-row] td { padding-top: 0px; padding-bottom: 0px; border: 0px; background-color: rgb(229, 229, 229); transition: padding 0.15s cubic-bezier(0.2, 0, 0.38, 0.9), background-color 0.15s cubic-bezier(0.2, 0, 0.38, 0.9); } tr.bx--parent-row:not(.bx--expandable-row) + tr[data-child-row] td .bx--child-row-inner-container { overflow: hidden; max-height: 0px; } tr.bx--parent-row.bx--expandable-row + tr[data-child-row] { transition: height 0.15s cubic-bezier(0.2, 0, 0.38, 0.9); } tr.bx--parent-row.bx--expandable-row + tr[data-child-row] td { padding-left: 4rem; border-bottom: 1px solid rgb(224, 224, 224); transition: padding-bottom 0.11s cubic-bezier(0.2, 0, 0.38, 0.9), transform 0.11s cubic-bezier(0.2, 0, 0.38, 0.9), background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9); } tr.bx--parent-row.bx--expandable-row + tr[data-child-row] td .bx--child-row-inner-container { max-height: 100%; } .bx--parent-row.bx--expandable-row > td, .bx--parent-row.bx--expandable-row + tr[data-child-row] > td { border-bottom: 1px solid rgb(224, 224, 224); box-shadow: rgb(224, 224, 224) 0px 1px; } .bx--parent-row:not(.bx--expandable-row) + tr[data-child-row] > td { box-shadow: none; } .bx--parent-row.bx--expandable-row > td:first-of-type { box-shadow: none; } tr.bx--parent-row:not(.bx--expandable-row) td, tr.bx--parent-row.bx--expandable-row td, tr.bx--parent-row.bx--expandable-row { transition: height 0.24s cubic-bezier(0.2, 0, 0.38, 0.9), background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9); } tr.bx--parent-row:not(.bx--expandable-row):first-of-type:hover td { border-top: 1px solid rgb(224, 224, 224); border-bottom: 1px solid rgb(224, 224, 224); } tr.bx--parent-row.bx--expandable-row:hover td { border-top: 1px solid rgb(224, 224, 224); border-bottom: 1px solid rgb(224, 224, 224); background-color: rgb(229, 229, 229); color: rgb(22, 22, 22); } tr.bx--parent-row.bx--expandable-row:hover td:first-of-type { border-bottom: 1px solid rgb(229, 229, 229); } tr.bx--parent-row.bx--expandable-row:hover + tr[data-child-row] td { border-bottom: 1px solid rgb(224, 224, 224); background-color: rgb(229, 229, 229); color: rgb(22, 22, 22); } tr.bx--expandable-row--hover + tr[data-child-row] td { border-bottom: 1px solid rgb(224, 224, 224); } tr.bx--expandable-row--hover { background-color: rgb(229, 229, 229); } tr.bx--expandable-row--hover td { border-top: 1px solid rgb(224, 224, 224); border-bottom: 1px solid rgb(224, 224, 224); background-color: rgb(229, 229, 229); color: rgb(22, 22, 22); } tr.bx--parent-row.bx--expandable-row.bx--expandable-row--hover td:first-of-type { border-bottom: 1px solid transparent; } .bx--data-table td.bx--table-expand { border-bottom: 1px solid rgb(224, 224, 224); } .bx--data-table th.bx--table-expand + .bx--table-column-checkbox, .bx--data-table td.bx--table-expand + .bx--table-column-checkbox { padding-right: 0.375rem; padding-left: 0.375rem; } .bx--data-table th.bx--table-expand + .bx--table-column-checkbox + th, .bx--data-table td.bx--table-expand + .bx--table-column-checkbox + td { padding-left: 0.5rem; } .bx--data-table td.bx--table-expand, .bx--data-table th.bx--table-expand { padding: 0.5rem 0px 0.5rem 0.5rem; } .bx--data-table td.bx--table-expand[data-previous-value="collapsed"] { border-bottom: 1px solid transparent; } .bx--table-expand[data-previous-value="collapsed"] .bx--table-expand__svg { transform: rotate(270deg); transition: transform 0.15s cubic-bezier(0.2, 0, 0.38, 0.9); } .bx--table-expand__button { box-sizing: border-box; margin: 0px; font-family: inherit; font-size: 100%; border: 0px; appearance: none; background: none; cursor: pointer; display: inline-flex; width: 100%; height: calc(100% + 1px); align-items: center; justify-content: center; padding: 0px 0.5rem; vertical-align: inherit; } .bx--table-expand__button *, .bx--table-expand__button ::before, .bx--table-expand__button ::after { box-sizing: inherit; } .bx--table-expand__button:focus { box-shadow: rgb(15, 98, 254) 0px 0px 0px 2px inset; outline: none; } .bx--table-expand__svg { fill: rgb(22, 22, 22); transform: rotate(90deg); transition: transform 0.15s cubic-bezier(0.2, 0, 0.38, 0.9); } .bx--data-table--tall .bx--table-expand__button, .bx--data-table--xl .bx--table-expand__button { width: 2rem; padding: 0px; } tr.bx--parent-row.bx--expandable-row td.bx--table-expand + td::after { position: absolute; bottom: -0.0625rem; left: 0px; width: 0.5rem; height: 0.0625rem; background: rgb(224, 224, 224); content: ""; } tr.bx--parent-row.bx--expandable-row:hover td.bx--table-expand + td::after, tr.bx--parent-row.bx--expandable-row.bx--expandable-row--hover td.bx--table-expand + td::after { background: rgb(229, 229, 229); } tr.bx--parent-row.bx--data-table--selected td.bx--table-expand + td::after { display: none; } .bx--data-table--zebra tbody tr[data-parent-row]:nth-child(4n+3) td, .bx--data-table--zebra tbody tr[data-child-row]:nth-child(4n+4) td { border-bottom: 1px solid rgb(244, 244, 244); } .bx--data-table--zebra tbody tr[data-parent-row]:nth-child(4n+1) td, .bx--data-table--zebra tbody tr[data-child-row]:nth-child(4n+2) td { border-top: 1px solid rgb(255, 255, 255); border-bottom: 1px solid rgb(255, 255, 255); background-color: rgb(255, 255, 255); } .bx--data-table--zebra tr.bx--parent-row td, .bx--data-table--zebra tr.bx--parent-row.bx--expandable-row + tr[data-child-row] td { transition: transform 0.15s cubic-bezier(0.2, 0, 0.38, 0.9), border-bottom 0.15s cubic-bezier(0.2, 0, 0.38, 0.9), border-top 0.15s cubic-bezier(0.2, 0, 0.38, 0.9); } .bx--data-table--zebra tbody tr[data-parent-row]:hover td, .bx--data-table--zebra tbody tr[data-parent-row]:hover + tr[data-child-row] td, .bx--data-table--zebra tbody tr[data-child-row]:hover td { border-top: 1px solid rgb(229, 229, 229); border-bottom: 1px solid rgb(229, 229, 229); background-color: rgb(229, 229, 229); } .bx--data-table--zebra tr.bx--parent-row.bx--expandable-row.bx--expandable-row--hover td { border-top: 1px solid rgb(229, 229, 229); border-bottom: 1px solid rgb(229, 229, 229); background: rgb(229, 229, 229); } tr.bx--parent-row.bx--data-table--selected:first-of-type td { border-top: 1px solid rgb(198, 198, 198); border-bottom: 1px solid rgb(224, 224, 224); background: rgb(224, 224, 224); box-shadow: rgb(198, 198, 198) 0px 1px; } tr.bx--parent-row.bx--data-table--selected td { border-bottom: 1px solid transparent; background: rgb(224, 224, 224); box-shadow: rgb(198, 198, 198) 0px 1px; color: rgb(22, 22, 22); } tr.bx--parent-row.bx--data-table--selected:last-of-type td { border-bottom: 1px solid transparent; background: rgb(224, 224, 224); box-shadow: rgb(224, 224, 224) 0px 1px; } tr.bx--parent-row.bx--data-table--selected:not(.bx--expandable-row):hover td { border-top: 1px solid rgb(202, 202, 202); border-bottom: 1px solid rgb(224, 224, 224); background: rgb(202, 202, 202); box-shadow: rgb(202, 202, 202) 0px 1px; } tr.bx--parent-row.bx--data-table--selected.bx--expandable-row td, tr.bx--parent-row.bx--data-table--selected.bx--expandable-row td:first-of-type { border-bottom: 1px solid transparent; box-shadow: rgb(224, 224, 224) 0px 1px; } tr.bx--parent-row.bx--data-table--selected.bx--expandable-row:hover td, tr.bx--parent-row.bx--data-table--selected.bx--expandable-row:hover td:first-of-type, tr.bx--parent-row.bx--data-table--selected.bx--expandable-row--hover td, tr.bx--parent-row.bx--data-table--selected.bx--expandable-row--hover td:first-of-type { border-top: 1px solid rgb(202, 202, 202); border-bottom: 1px solid transparent; background: rgb(202, 202, 202); box-shadow: rgb(202, 202, 202) 0px 1px; } tr.bx--parent-row.bx--data-table--selected.bx--expandable-row + tr[data-child-row] td { border-top: 1px solid rgb(198, 198, 198); border-bottom: 1px solid rgb(224, 224, 224); background-color: rgb(229, 229, 229); box-shadow: rgb(198, 198, 198) 0px 1px; color: rgb(22, 22, 22); } tr.bx--parent-row.bx--data-table--selected.bx--expandable-row + tr[data-child-row]:last-of-type td { padding-bottom: 1.5rem; box-shadow: rgb(198, 198, 198) 0px -1px inset; } tr.bx--parent-row.bx--data-table--selected.bx--expandable-row:hover + tr[data-child-row] td, tr.bx--parent-row.bx--data-table--selected.bx--expandable-row--hover + tr[data-child-row] td { background: rgb(224, 224, 224); } @media screen and (-ms-high-contrast: active), (forced-colors: active) { .bx--table-expand__button:focus .bx--table-expand__svg { color: highlight; outline: highlight solid 1px; } } @media screen and (-ms-high-contrast: active), (forced-colors: active) { .bx--table-expand__svg { fill: buttontext; } } .bx--data-table--sort th, .bx--data-table th[aria-sort] { height: 3rem; padding: 0px; border-top: none; border-bottom: none; } .bx--table-sort { box-sizing: border-box; margin: 0px; vertical-align: baseline; padding: 0px 0px 0px 1rem; border: 0px; appearance: none; background: none rgb(224, 224, 224); cursor: pointer; display: flex; width: 100%; min-height: 100%; align-items: center; justify-content: space-between; color: rgb(22, 22, 22); font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; line-height: 1; text-align: left; transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9), outline 70ms cubic-bezier(0, 0, 0.38, 0.9); } .bx--table-sort *, .bx--table-sort ::before, .bx--table-sort ::after { box-sizing: inherit; } .bx--table-sort:focus { outline: rgb(15, 98, 254) solid 2px; outline-offset: -2px; } @media screen and (prefers-contrast) { .bx--table-sort:focus { outline-style: dotted; } } .bx--table-sort:hover { background: rgb(202, 202, 202); } .bx--table-sort:focus svg, .bx--table-sort:hover svg { opacity: 1; } .bx--data-table.bx--data-table--sort th > .bx--table-header-label { padding-right: 1rem; padding-left: 1rem; } th .bx--table-sort__flex { display: flex; width: 100%; height: 100%; min-height: 3rem; align-items: center; justify-content: space-between; } @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { .bx--data-table--sort:not(.bx--data-table--compact):not(.bx--data-table--short):not(.bx--data-table--tall):not(.bx--data-table--xs):not(.bx--data-table--sm):not(.bx--data-table--md):not(.bx--data-table--xl) th .bx--table-sort__flex { height: 2.99rem; } } .bx--data-table--compact.bx--data-table--sort th .bx--table-sort__flex, .bx--data-table--xs.bx--data-table--sort th .bx--table-sort__flex { min-height: 1.5rem; } .bx--data-table--short.bx--data-table--sort th .bx--table-sort__flex, .bx--data-table--sm.bx--data-table--sort th .bx--table-sort__flex { min-height: 2rem; } .bx--data-table--md.bx--data-table--sort th .bx--table-sort__flex { min-height: 2.5rem; } .bx--data-table--tall.bx--data-table--sort th .bx--table-sort__flex, .bx--data-table--xl.bx--data-table--sort th .bx--table-sort__flex { min-height: 4rem; align-items: flex-start; } .bx--table-sort .bx--table-sort__icon-inactive { display: block; } .bx--table-sort .bx--table-sort__icon { display: none; } .bx--table-sort__icon-unsorted { width: 1.25rem; min-width: 1rem; margin-right: 0.5rem; margin-left: 0.5rem; fill: rgb(22, 22, 22); opacity: 0; } .bx--table-sort.bx--table-sort--active { background: rgb(202, 202, 202); } .bx--table-sort.bx--table-sort--active .bx--table-sort__icon-unsorted { display: none; } .bx--table-sort.bx--table-sort--active .bx--table-sort__icon { display: block; opacity: 1; } .bx--table-sort--ascending .bx--table-sort__icon { transform: rotate(180deg); } .bx--table-sort__icon { width: 1.25rem; min-width: 1rem; margin-right: 0.5rem; margin-left: 0.5rem; fill: rgb(22, 22, 22); opacity: 1; transform: rotate(0deg); transition: transform 0.11s cubic-bezier(0.2, 0, 0.38, 0.9); } .bx--data-table--compact.bx--data-table--sort th, .bx--data-table--xs.bx--data-table--sort th { height: 1.5rem; } .bx--data-table--short.bx--data-table--sort th, .bx--data-table--sm.bx--data-table--sort th { height: 2rem; } .bx--data-table--md.bx--data-table--sort th { height: 2.5rem; } .bx--data-table--tall.bx--data-table--sort th, .bx--data-table--xl.bx--data-table--sort th { height: 4rem; } .bx--data-table--tall.bx--data-table--sort th .bx--table-sort, .bx--data-table--xl.bx--data-table--sort th .bx--table-sort { display: inline-block; height: 4rem; } .bx--data-table--tall .bx--table-sort__icon-unsorted, .bx--data-table--tall .bx--table-sort__icon, .bx--data-table--xl .bx--table-sort__icon-unsorted, .bx--data-table--xl .bx--table-sort__icon { margin-top: 0.8125rem; } @media screen and (-ms-high-contrast: active), (forced-colors: active) { .bx--table-sort__icon, .bx--table-sort__icon-unsorted { fill: buttontext; } } .bx--inline-edit-label { display: flex; align-items: center; justify-content: space-between; } .bx--inline-edit-label:hover .bx--inline-edit-label__icon { opacity: 1; } .bx--inline-edit-label--inactive { display: none; } .bx--inline-edit-label__action { box-sizing: border-box; margin: 0px; font-family: inherit; font-size: 100%; vertical-align: baseline; display: inline-block; padding: 0px; border: 0px; appearance: none; background: none; cursor: pointer; } .bx--inline-edit-label__action *, .bx--inline-edit-label__action ::before, .bx--inline-edit-label__action ::after { box-sizing: inherit; } .bx--inline-edit-label__action:hover { cursor: pointer; } .bx--inline-edit-label__action:focus { outline: rgb(15, 98, 254) solid 1px; padding: 0.125rem; } @media screen and (prefers-contrast) { .bx--inline-edit-label__action:focus { outline-style: dotted; } } .bx--inline-edit-label__action:focus .bx--inline-edit-label__icon { width: auto; opacity: 1; } .bx--inline-edit-label__icon { fill: rgb(22, 22, 22); opacity: 0; } .bx--inline-edit-input { display: none; } .bx--inline-edit-input--active { display: block; margin-left: -0.75rem; } .bx--inline-edit-input--active input { padding-left: 0.75rem; } .bx--data-table.bx--skeleton th { padding-left: 1rem; vertical-align: middle; } .bx--data-table.bx--skeleton th span, .bx--data-table.bx--skeleton td span { position: relative; padding: 0px; border: none; background: rgb(229, 229, 229); box-shadow: none; pointer-events: none; display: block; width: 4rem; height: 1rem; } .bx--data-table.bx--skeleton th span:hover, .bx--data-table.bx--skeleton th span:focus, .bx--data-table.bx--skeleton th span:active, .bx--data-table.bx--skeleton td span:hover, .bx--data-table.bx--skeleton td span:focus, .bx--data-table.bx--skeleton td span:active { border: none; cursor: default; outline: none; } .bx--data-table.bx--skeleton th span::before, .bx--data-table.bx--skeleton td span::before { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; animation: 3s ease-in-out 0s infinite normal none running skeleton; background: rgb(198, 198, 198); content: ""; will-change: transform-origin, transform, opacity; } @media (prefers-reduced-motion: reduce) { .bx--data-table.bx--skeleton th span::before, .bx--data-table.bx--skeleton td span::before { animation: auto ease 0s 1 normal none running none; } } .bx--data-table.bx--skeleton tr:hover td { border-color: rgb(224, 224, 224); background: transparent; } .bx--data-table.bx--skeleton tr:hover td:first-of-type, .bx--data-table.bx--skeleton tr:hover td:last-of-type { border-color: rgb(224, 224, 224); } .bx--data-table.bx--skeleton .bx--table-sort-v2 { pointer-events: none; } .bx--data-table.bx--skeleton th span { background: rgb(198, 198, 198); } .bx--data-table.bx--skeleton th span::before { background: rgb(229, 229, 229); } .bx--data-table-container.bx--skeleton .bx--data-table-header__title { position: relative; padding: 0px; border: none; background: rgb(229, 229, 229); box-shadow: none; pointer-events: none; width: 7.5rem; height: 1.5rem; } .bx--data-table-container.bx--skeleton .bx--data-table-header__title:hover, .bx--data-table-container.bx--skeleton .bx--data-table-header__title:focus, .bx--data-table-container.bx--skeleton .bx--data-table-header__title:active { border: none; cursor: default; outline: none; } .bx--data-table-container.bx--skeleton .bx--data-table-header__title::before { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; animation: 3s ease-in-out 0s infinite normal none running skeleton; background: rgb(198, 198, 198); content: ""; will-change: transform-origin, transform, opacity; } @media (prefers-reduced-motion: reduce) { .bx--data-table-container.bx--skeleton .bx--data-table-header__title::before { animation: auto ease 0s 1 normal none running none; } } .bx--data-table-container.bx--skeleton .bx--data-table-header__description { position: relative; padding: 0px; border: none; background: rgb(229, 229, 229); box-shadow: none; pointer-events: none; width: 10rem; height: 1rem; margin-top: 0.5rem; } .bx--data-table-container.bx--skeleton .bx--data-table-header__description:hover, .bx--data-table-container.bx--skeleton .bx--data-table-header__description:focus, .bx--data-table-container.bx--skeleton .bx--data-table-header__description:active { border: none; cursor: default; outline: none; } .bx--data-table-container.bx--skeleton .bx--data-table-header__description::before { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; animation: 3s ease-in-out 0s infinite normal none running skeleton; background: rgb(198, 198, 198); content: ""; will-change: transform-origin, transform, opacity; } @media (prefers-reduced-motion: reduce) { .bx--data-table-container.bx--skeleton .bx--data-table-header__description::before { animation: auto ease 0s 1 normal none running none; } } .bx--assistive-text, .bx--visually-hidden { position: absolute; overflow: hidden; width: 1px; height: 1px; padding: 0px; border: 0px; margin: -1px; clip: rect(0px, 0px, 0px, 0px); visibility: inherit; white-space: nowrap; } .bx--body { box-sizing: border-box; padding: 0px; border: 0px; margin: 0px; font-family: inherit; vertical-align: baseline; font-size: 0.875rem; font-weight: 400; letter-spacing: 0.16px; background-color: rgb(255, 255, 255); color: rgb(22, 22, 22); line-height: 1; } .bx--body *, .bx--body ::before, .bx--body ::after { box-sizing: inherit; } .bx--btn { box-sizing: border-box; border: 0px; font-family: inherit; font-size: 0.875rem; font-weight: 400; line-height: 1.28572; letter-spacing: 0.16px; position: relative; display: inline-flex; max-width: 20rem; min-height: 3rem; flex-shrink: 0; align-items: center; justify-content: space-between; padding: calc(-3px + 0.875rem) 63px calc(-3px + 0.875rem) 15px; margin: 0px; border-radius: 0px; cursor: pointer; outline: none; text-align: left; text-decoration: none; transition: background 70ms cubic-bezier(0, 0, 0.38, 0.9), box-shadow 70ms cubic-bezier(0, 0, 0.38, 0.9), border-color 70ms cubic-bezier(0, 0, 0.38, 0.9), outline 70ms cubic-bezier(0, 0, 0.38, 0.9); vertical-align: top; } .bx--btn *, .bx--btn ::before, .bx--btn ::after { box-sizing: inherit; } .bx--btn:disabled, .bx--btn:hover:disabled, .bx--btn:focus:disabled, .bx--btn.bx--btn--disabled, .bx--btn.bx--btn--disabled:hover, .bx--btn.bx--btn--disabled:focus { border-color: rgb(198, 198, 198); background: rgb(198, 198, 198); box-shadow: none; color: rgb(141, 141, 141); cursor: not-allowed; } .bx--btn .bx--btn__icon { position: absolute; right: 1rem; width: 1rem; height: 1rem; flex-shrink: 0; } .bx--btn--primary { border-width: 1px; border-style: solid; border-color: transparent; background-color: rgb(15, 98, 254); color: rgb(255, 255, 255); } .bx--btn--primary:hover { background-color: rgb(3, 83, 233); } .bx--btn--primary:focus { border-color: rgb(15, 98, 254); box-shadow: rgb(15, 98, 254) 0px 0px 0px 1px inset, rgb(255, 255, 255) 0px 0px 0px 2px inset; } .bx--btn--primary:active { background-color: rgb(0, 45, 156); } .bx--btn--primary .bx--btn__icon, .bx--btn--primary .bx--btn__icon path:not([data-icon-path]):not([fill="none"]) { fill: currentcolor; } .bx--btn--primary:hover { color: rgb(255, 255, 255); } .bx--btn--secondary { border-width: 1px; border-style: solid; border-color: transparent; background-color: rgb(57, 57, 57); color: rgb(255, 255, 255); } .bx--btn--secondary:hover { background-color: rgb(76, 76, 76); } .bx--btn--secondary:focus { border-color: rgb(15, 98, 254); box-shadow: rgb(15, 98, 254) 0px 0px 0px 1px inset, rgb(255, 255, 255) 0px 0px 0px 2px inset; } .bx--btn--secondary:active { background-color: rgb(111, 111, 111); } .bx--btn--secondary .bx--btn__icon, .bx--btn--secondary .bx--btn__icon path:not([data-icon-path]):not([fill="none"]) { fill: currentcolor; } .bx--btn--secondary:hover, .bx--btn--secondary:focus { color: rgb(255, 255, 255); } .bx--btn--tertiary { border-width: 1px; border-style: solid; border-color: rgb(15, 98, 254); background-color: transparent; color: rgb(15, 98, 254); } .bx--btn--tertiary:hover { background-color: rgb(3, 83, 233); } .bx--btn--tertiary:focus { border-color: rgb(15, 98, 254); box-shadow: rgb(15, 98, 254) 0px 0px 0px 1px inset, rgb(255, 255, 255) 0px 0px 0px 2px inset; } .bx--btn--tertiary:active { background-color: rgb(0, 45, 156); } .bx--btn--tertiary .bx--btn__icon, .bx--btn--tertiary .bx--btn__icon path:not([data-icon-path]):not([fill="none"]) { fill: currentcolor; } .bx--btn--tertiary:hover { color: rgb(255, 255, 255); } .bx--btn--tertiary:focus { background-color: rgb(15, 98, 254); color: rgb(255, 255, 255); } .bx--btn--tertiary:active { border-color: transparent; background-color: rgb(0, 45, 156); color: rgb(255, 255, 255); } .bx--btn--tertiary:disabled, .bx--btn--tertiary:hover:disabled, .bx--btn--tertiary:focus:disabled, .bx--btn--tertiary.bx--btn--disabled, .bx--btn--tertiary.bx--btn--disabled:hover, .bx--btn--tertiary.bx--btn--disabled:focus { background: transparent; color: rgb(141, 141, 141); outline: none; } .bx--btn--ghost { border-width: 1px; border-style: solid; border-color: transparent; background-color: transparent; color: rgb(15, 98, 254); padding: calc(-3px + 0.875rem) 16px; } .bx--btn--ghost:hover { background-color: rgb(229, 229, 229); } .bx--btn--ghost:focus { border-color: rgb(15, 98, 254); box-shadow: rgb(15, 98, 254) 0px 0px 0px 1px inset, rgb(255, 255, 255) 0px 0px 0px 2px inset; } .bx--btn--ghost .bx--btn__icon, .bx--btn--ghost .bx--btn__icon path:not([data-icon-path]):not([fill="none"]) { fill: currentcolor; } .bx--btn--ghost .bx--btn__icon { position: static; margin-left: 0.5rem; } .bx--btn--ghost:hover, .bx--btn--ghost:active { color: rgb(0, 67, 206); } .bx--btn--ghost:active { background-color: rgb(198, 198, 198); } .bx--btn--ghost:disabled, .bx--btn--ghost:hover:disabled, .bx--btn--ghost:focus:disabled, .bx--btn--ghost.bx--btn--disabled, .bx--btn--ghost.bx--btn--disabled:hover, .bx--btn--ghost.bx--btn--disabled:focus { border-color: transparent; background: transparent; color: rgb(141, 141, 141); outline: none; } .bx--btn--ghost.bx--btn--sm { padding: calc(-3px + 0.375rem) 16px; } .bx--btn--ghost.bx--btn--field, .bx--btn--ghost.bx--btn--md { padding: calc(-3px + 0.675rem) 16px; } .bx--btn.bx--btn--icon-only.bx--tooltip__trigger { position: relative; display: inline-flex; overflow: visible; align-items: center; cursor: pointer; } .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus { outline: rgb(15, 98, 254) solid 1px; } @media screen and (prefers-contrast) { .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus { outline-style: dotted; } } .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus { outline: transparent solid 1px; } .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus svg { outline: rgb(15, 98, 254) solid 1px; } @media screen and (prefers-contrast) { .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus svg { outline-style: dotted; } } .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::before, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::after, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .bx--assistive-text, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger + .bx--assistive-text { position: absolute; z-index: 6000; display: flex; align-items: center; opacity: 0; pointer-events: none; } @media (-ms-high-contrast: none), (-ms-high-contrast: active) { .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::before, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::after, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .bx--assistive-text, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger + .bx--assistive-text { display: inline-block; } } .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::before, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::after { transition: opacity 70ms cubic-bezier(0.2, 0, 0.38, 0.9); } @media screen and (prefers-reduced-motion: reduce) { .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::before, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::after { transition: none; } } .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--a11y::before, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--a11y::after { transition: none; } .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::before { width: 0px; height: 0px; border-style: solid; content: ""; } .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .bx--assistive-text, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger + .bx--assistive-text { box-sizing: content-box; color: inherit; opacity: 1; white-space: normal; word-break: break-word; } .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::after, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .bx--assistive-text, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger + .bx--assistive-text { box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 6px; z-index: 6000; width: max-content; min-width: 1.5rem; max-width: 13rem; height: auto; padding: 0.1875rem 1rem; background-color: rgb(57, 57, 57); border-radius: 0.125rem; color: rgb(255, 255, 255); text-align: left; transform: translate(-50%); font-size: 0.875rem; font-weight: 400; line-height: 1.28572; letter-spacing: 0.16px; } @media (-ms-high-contrast: none), (-ms-high-contrast: active) { .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::after, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .bx--assistive-text, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger + .bx--assistive-text { width: auto; } } @supports (-ms-accelerator: true) { .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::after, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .bx--assistive-text, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger + .bx--assistive-text { width: auto; } } @supports (-ms-ime-align: auto) { .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::after, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .bx--assistive-text, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger + .bx--assistive-text { width: auto; } } @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) { .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::after, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .bx--assistive-text, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger + .bx--assistive-text { border: 1px solid transparent; } } .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::after { content: attr(aria-label); } .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--a11y::after { content: none; } .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--visible::before, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--visible::after, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:hover::before, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:hover::after, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus::before, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus::after { opacity: 1; } .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--visible .bx--assistive-text, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--visible + .bx--assistive-text, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:hover .bx--assistive-text, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:hover + .bx--assistive-text, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus .bx--assistive-text, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus + .bx--assistive-text { overflow: visible; margin: auto; clip: auto; } .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--visible .bx--assistive-text, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--visible + .bx--assistive-text, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--visible.bx--tooltip--a11y::before, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:hover .bx--assistive-text, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:hover + .bx--assistive-text, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:hover.bx--tooltip--a11y::before, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus .bx--assistive-text, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus + .bx--assistive-text, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus.bx--tooltip--a11y::before { animation: 70ms cubic-bezier(0.2, 0, 0.38, 0.9) 0s 1 normal none running tooltip-fade; } .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--hidden .bx--assistive-text, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--hidden + .bx--assistive-text { overflow: hidden; margin: -1px; clip: rect(0px, 0px, 0px, 0px); } .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--hidden.bx--tooltip--a11y::before { animation: auto ease 0s 1 normal none running none; opacity: 0; } .bx--btn.bx--btn--icon-only.bx--tooltip__trigger svg, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:hover svg, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus svg { fill: currentcolor; } .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--btn--disabled.bx--tooltip--a11y::before, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--btn--disabled.bx--tooltip--a11y::after, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--btn--disabled .bx--assistive-text { overflow: hidden; margin: -1px; clip: rect(0px, 0px, 0px, 0px); opacity: 0; } .bx--btn.bx--btn--icon-only:not(.bx--tooltip--hidden) .bx--assistive-text { pointer-events: all; } .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus { border-color: rgb(15, 98, 254); } .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:active:not([disabled]) { border-color: transparent; } .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus svg { outline-color: transparent; } .bx--btn.bx--btn--icon-only.bx--tooltip__trigger[disabled]:hover, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger[disabled]:focus, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger[disabled]:active { cursor: not-allowed; fill: rgb(141, 141, 141); } .bx--tooltip__trigger.bx--btn--icon-only--top { position: relative; display: inline-flex; overflow: visible; align-items: center; cursor: pointer; } .bx--tooltip__trigger.bx--btn--icon-only--top:focus { outline: rgb(15, 98, 254) solid 1px; } @media screen and (prefers-contrast) { .bx--tooltip__trigger.bx--btn--icon-only--top:focus { outline-style: dotted; } } .bx--tooltip__trigger.bx--btn--icon-only--top:focus { outline: transparent solid 1px; } .bx--tooltip__trigger.bx--btn--icon-only--top:focus svg { outline: rgb(15, 98, 254) solid 1px; } @media screen and (prefers-contrast) { .bx--tooltip__trigger.bx--btn--icon-only--top:focus svg { outline-style: dotted; } } .bx--tooltip__trigger.bx--btn--icon-only--top::before, .bx--tooltip__trigger.bx--btn--icon-only--top::after, .bx--tooltip__trigger.bx--btn--icon-only--top .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--top + .bx--assistive-text { position: absolute; z-index: 6000; display: flex; align-items: center; opacity: 0; pointer-events: none; } @media (-ms-high-contrast: none), (-ms-high-contrast: active) { .bx--tooltip__trigger.bx--btn--icon-only--top::before, .bx--tooltip__trigger.bx--btn--icon-only--top::after, .bx--tooltip__trigger.bx--btn--icon-only--top .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--top + .bx--assistive-text { display: inline-block; } } .bx--tooltip__trigger.bx--btn--icon-only--top::before, .bx--tooltip__trigger.bx--btn--icon-only--top::after { transition: opacity 70ms cubic-bezier(0.2, 0, 0.38, 0.9); } @media screen and (prefers-reduced-motion: reduce) { .bx--tooltip__trigger.bx--btn--icon-only--top::before, .bx--tooltip__trigger.bx--btn--icon-only--top::after { transition: none; } } .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--a11y::after { transition: none; } .bx--tooltip__trigger.bx--btn--icon-only--top::before { width: 0px; height: 0px; border-style: solid; content: ""; } .bx--tooltip__trigger.bx--btn--icon-only--top .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--top + .bx--assistive-text { box-sizing: content-box; color: inherit; opacity: 1; white-space: normal; word-break: break-word; } .bx--tooltip__trigger.bx--btn--icon-only--top::after, .bx--tooltip__trigger.bx--btn--icon-only--top .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--top + .bx--assistive-text { box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 6px; z-index: 6000; width: max-content; min-width: 1.5rem; max-width: 13rem; height: auto; padding: 0.1875rem 1rem; background-color: rgb(57, 57, 57); border-radius: 0.125rem; color: rgb(255, 255, 255); text-align: left; transform: translate(-50%); font-size: 0.875rem; font-weight: 400; line-height: 1.28572; letter-spacing: 0.16px; } @media (-ms-high-contrast: none), (-ms-high-contrast: active) { .bx--tooltip__trigger.bx--btn--icon-only--top::after, .bx--tooltip__trigger.bx--btn--icon-only--top .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--top + .bx--assistive-text { width: auto; } } @supports (-ms-accelerator: true) { .bx--tooltip__trigger.bx--btn--icon-only--top::after, .bx--tooltip__trigger.bx--btn--icon-only--top .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--top + .bx--assistive-text { width: auto; } } @supports (-ms-ime-align: auto) { .bx--tooltip__trigger.bx--btn--icon-only--top::after, .bx--tooltip__trigger.bx--btn--icon-only--top .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--top + .bx--assistive-text { width: auto; } } @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) { .bx--tooltip__trigger.bx--btn--icon-only--top::after, .bx--tooltip__trigger.bx--btn--icon-only--top .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--top + .bx--assistive-text { border: 1px solid transparent; } } .bx--tooltip__trigger.bx--btn--icon-only--top::after { content: attr(aria-label); } .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--a11y::after { content: none; } .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--visible::before, .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--visible::after, .bx--tooltip__trigger.bx--btn--icon-only--top:hover::before, .bx--tooltip__trigger.bx--btn--icon-only--top:hover::after, .bx--tooltip__trigger.bx--btn--icon-only--top:focus::before, .bx--tooltip__trigger.bx--btn--icon-only--top:focus::after { opacity: 1; } .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--visible .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--visible + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--top:hover .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--top:hover + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--top:focus .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--top:focus + .bx--assistive-text { overflow: visible; margin: auto; clip: auto; } .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--visible .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--visible + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--visible.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--btn--icon-only--top:hover .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--top:hover + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--top:hover.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--btn--icon-only--top:focus .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--top:focus + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--top:focus.bx--tooltip--a11y::before { animation: 70ms cubic-bezier(0.2, 0, 0.38, 0.9) 0s 1 normal none running tooltip-fade; } .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--hidden .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--hidden + .bx--assistive-text { overflow: hidden; margin: -1px; clip: rect(0px, 0px, 0px, 0px); } .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--hidden.bx--tooltip--a11y::before { animation: auto ease 0s 1 normal none running none; opacity: 0; } .bx--tooltip__trigger.bx--btn--icon-only--top .bx--assistive-text::after { position: absolute; display: block; content: ""; left: 0px; width: 100%; height: 0.75rem; bottom: -0.75rem; } .bx--tooltip__trigger.bx--btn--icon-only--top::before, .bx--tooltip__trigger.bx--btn--icon-only--top::after, .bx--tooltip__trigger.bx--btn--icon-only--top .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--top + .bx--assistive-text { top: 0px; left: 50%; } .bx--tooltip__trigger.bx--btn--icon-only--top::before { top: -0.5rem; border-width: 0.3125rem 0.25rem 0px; border-color: rgb(57, 57, 57) transparent transparent; transform: translate(-50%, -100%); } .bx--tooltip__trigger.bx--btn--icon-only--top::after, .bx--tooltip__trigger.bx--btn--icon-only--top .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--top + .bx--assistive-text { top: -0.8125rem; left: 50%; transform: translate(-50%, -100%); } .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-start .bx--assistive-text::after { position: absolute; display: block; content: ""; left: 0px; width: 100%; height: 0.75rem; bottom: -0.75rem; } .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-start::before, .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-start::after, .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-start .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-start + .bx--assistive-text { top: 0px; left: 50%; } .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-start::before { top: -0.5rem; border-width: 0.3125rem 0.25rem 0px; border-color: rgb(57, 57, 57) transparent transparent; transform: translate(-50%, -100%); } .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-start::after, .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-start .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-start + .bx--assistive-text { top: -0.8125rem; left: 0px; transform: translateY(-100%); } .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-center .bx--assistive-text::after { position: absolute; display: block; content: ""; left: 0px; width: 100%; height: 0.75rem; bottom: -0.75rem; } .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-center::before, .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-center::after, .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-center .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-center + .bx--assistive-text { top: 0px; left: 50%; } .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-center::before { top: -0.5rem; border-width: 0.3125rem 0.25rem 0px; border-color: rgb(57, 57, 57) transparent transparent; transform: translate(-50%, -100%); } .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-center::after, .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-center .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-center + .bx--assistive-text { top: -0.8125rem; left: 50%; transform: translate(-50%, -100%); } .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-end .bx--assistive-text::after { position: absolute; display: block; content: ""; left: 0px; width: 100%; height: 0.75rem; bottom: -0.75rem; } .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-end::before, .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-end::after, .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-end .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-end + .bx--assistive-text { top: 0px; left: 50%; } .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-end::before { top: -0.5rem; border-width: 0.3125rem 0.25rem 0px; border-color: rgb(57, 57, 57) transparent transparent; transform: translate(-50%, -100%); } .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-end::after, .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-end .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-end + .bx--assistive-text { top: -0.8125rem; right: 0px; left: auto; transform: translateY(-100%); } .bx--tooltip__trigger.bx--btn--icon-only--right { position: relative; display: inline-flex; overflow: visible; align-items: center; cursor: pointer; } .bx--tooltip__trigger.bx--btn--icon-only--right:focus { outline: rgb(15, 98, 254) solid 1px; } @media screen and (prefers-contrast) { .bx--tooltip__trigger.bx--btn--icon-only--right:focus { outline-style: dotted; } } .bx--tooltip__trigger.bx--btn--icon-only--right:focus { outline: transparent solid 1px; } .bx--tooltip__trigger.bx--btn--icon-only--right:focus svg { outline: rgb(15, 98, 254) solid 1px; } @media screen and (prefers-contrast) { .bx--tooltip__trigger.bx--btn--icon-only--right:focus svg { outline-style: dotted; } } .bx--tooltip__trigger.bx--btn--icon-only--right::before, .bx--tooltip__trigger.bx--btn--icon-only--right::after, .bx--tooltip__trigger.bx--btn--icon-only--right .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--right + .bx--assistive-text { position: absolute; z-index: 6000; display: flex; align-items: center; opacity: 0; pointer-events: none; } @media (-ms-high-contrast: none), (-ms-high-contrast: active) { .bx--tooltip__trigger.bx--btn--icon-only--right::before, .bx--tooltip__trigger.bx--btn--icon-only--right::after, .bx--tooltip__trigger.bx--btn--icon-only--right .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--right + .bx--assistive-text { display: inline-block; } } .bx--tooltip__trigger.bx--btn--icon-only--right::before, .bx--tooltip__trigger.bx--btn--icon-only--right::after { transition: opacity 70ms cubic-bezier(0.2, 0, 0.38, 0.9); } @media screen and (prefers-reduced-motion: reduce) { .bx--tooltip__trigger.bx--btn--icon-only--right::before, .bx--tooltip__trigger.bx--btn--icon-only--right::after { transition: none; } } .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--a11y::after { transition: none; } .bx--tooltip__trigger.bx--btn--icon-only--right::before { width: 0px; height: 0px; border-style: solid; content: ""; } .bx--tooltip__trigger.bx--btn--icon-only--right .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--right + .bx--assistive-text { box-sizing: content-box; color: inherit; opacity: 1; white-space: normal; word-break: break-word; } .bx--tooltip__trigger.bx--btn--icon-only--right::after, .bx--tooltip__trigger.bx--btn--icon-only--right .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--right + .bx--assistive-text { box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 6px; z-index: 6000; width: max-content; min-width: 1.5rem; max-width: 13rem; height: auto; padding: 0.1875rem 1rem; background-color: rgb(57, 57, 57); border-radius: 0.125rem; color: rgb(255, 255, 255); text-align: left; transform: translate(-50%); font-size: 0.875rem; font-weight: 400; line-height: 1.28572; letter-spacing: 0.16px; } @media (-ms-high-contrast: none), (-ms-high-contrast: active) { .bx--tooltip__trigger.bx--btn--icon-only--right::after, .bx--tooltip__trigger.bx--btn--icon-only--right .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--right + .bx--assistive-text { width: auto; } } @supports (-ms-accelerator: true) { .bx--tooltip__trigger.bx--btn--icon-only--right::after, .bx--tooltip__trigger.bx--btn--icon-only--right .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--right + .bx--assistive-text { width: auto; } } @supports (-ms-ime-align: auto) { .bx--tooltip__trigger.bx--btn--icon-only--right::after, .bx--tooltip__trigger.bx--btn--icon-only--right .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--right + .bx--assistive-text { width: auto; } } @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) { .bx--tooltip__trigger.bx--btn--icon-only--right::after, .bx--tooltip__trigger.bx--btn--icon-only--right .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--right + .bx--assistive-text { border: 1px solid transparent; } } .bx--tooltip__trigger.bx--btn--icon-only--right::after { content: attr(aria-label); } .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--a11y::after { content: none; } .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--visible::before, .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--visible::after, .bx--tooltip__trigger.bx--btn--icon-only--right:hover::before, .bx--tooltip__trigger.bx--btn--icon-only--right:hover::after, .bx--tooltip__trigger.bx--btn--icon-only--right:focus::before, .bx--tooltip__trigger.bx--btn--icon-only--right:focus::after { opacity: 1; } .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--visible .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--visible + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--right:hover .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--right:hover + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--right:focus .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--right:focus + .bx--assistive-text { overflow: visible; margin: auto; clip: auto; } .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--visible .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--visible + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--visible.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--btn--icon-only--right:hover .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--right:hover + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--right:hover.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--btn--icon-only--right:focus .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--right:focus + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--right:focus.bx--tooltip--a11y::before { animation: 70ms cubic-bezier(0.2, 0, 0.38, 0.9) 0s 1 normal none running tooltip-fade; } .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--hidden .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--hidden + .bx--assistive-text { overflow: hidden; margin: -1px; clip: rect(0px, 0px, 0px, 0px); } .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--hidden.bx--tooltip--a11y::before { animation: auto ease 0s 1 normal none running none; opacity: 0; } .bx--tooltip__trigger.bx--btn--icon-only--right .bx--assistive-text::after { position: absolute; display: block; content: ""; top: 0px; width: 0.75rem; height: 100%; left: -0.75rem; } .bx--tooltip__trigger.bx--btn--icon-only--right::before, .bx--tooltip__trigger.bx--btn--icon-only--right::after, .bx--tooltip__trigger.bx--btn--icon-only--right .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--right + .bx--assistive-text { top: 50%; right: 0px; } .bx--tooltip__trigger.bx--btn--icon-only--right::before { right: -0.5rem; border-width: 0.25rem 0.3125rem 0.25rem 0px; border-color: transparent rgb(57, 57, 57) transparent transparent; transform: translate(100%, -50%); } .bx--tooltip__trigger.bx--btn--icon-only--right::after, .bx--tooltip__trigger.bx--btn--icon-only--right .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--right + .bx--assistive-text { right: -0.8125rem; transform: translate(100%, -50%); } .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-start .bx--assistive-text::after { position: absolute; display: block; content: ""; top: 0px; width: 0.75rem; height: 100%; left: -0.75rem; } .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-start::before, .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-start::after, .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-start .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-start + .bx--assistive-text { top: 50%; right: 0px; } .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-start::before { right: -0.5rem; border-width: 0.25rem 0.3125rem 0.25rem 0px; border-color: transparent rgb(57, 57, 57) transparent transparent; transform: translate(100%, -50%); } .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-start::after, .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-start .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-start + .bx--assistive-text { right: -0.8125rem; transform: translate(100%, -50%); } .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-center .bx--assistive-text::after { position: absolute; display: block; content: ""; top: 0px; width: 0.75rem; height: 100%; left: -0.75rem; } .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-center::before, .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-center::after, .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-center .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-center + .bx--assistive-text { top: 50%; right: 0px; } .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-center::before { right: -0.5rem; border-width: 0.25rem 0.3125rem 0.25rem 0px; border-color: transparent rgb(57, 57, 57) transparent transparent; transform: translate(100%, -50%); } .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-center::after, .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-center .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-center + .bx--assistive-text { right: -0.8125rem; transform: translate(100%, -50%); } .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-end .bx--assistive-text::after { position: absolute; display: block; content: ""; top: 0px; width: 0.75rem; height: 100%; left: -0.75rem; } .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-end::before, .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-end::after, .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-end .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-end + .bx--assistive-text { top: 50%; right: 0px; } .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-end::before { right: -0.5rem; border-width: 0.25rem 0.3125rem 0.25rem 0px; border-color: transparent rgb(57, 57, 57) transparent transparent; transform: translate(100%, -50%); } .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-end::after, .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-end .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-end + .bx--assistive-text { right: -0.8125rem; transform: translate(100%, -50%); } .bx--tooltip__trigger.bx--btn--icon-only--bottom { position: relative; display: inline-flex; overflow: visible; align-items: center; cursor: pointer; } .bx--tooltip__trigger.bx--btn--icon-only--bottom:focus { outline: rgb(15, 98, 254) solid 1px; } @media screen and (prefers-contrast) { .bx--tooltip__trigger.bx--btn--icon-only--bottom:focus { outline-style: dotted; } } .bx--tooltip__trigger.bx--btn--icon-only--bottom:focus { outline: transparent solid 1px; } .bx--tooltip__trigger.bx--btn--icon-only--bottom:focus svg { outline: rgb(15, 98, 254) solid 1px; } @media screen and (prefers-contrast) { .bx--tooltip__trigger.bx--btn--icon-only--bottom:focus svg { outline-style: dotted; } } .bx--tooltip__trigger.bx--btn--icon-only--bottom::before, .bx--tooltip__trigger.bx--btn--icon-only--bottom::after, .bx--tooltip__trigger.bx--btn--icon-only--bottom .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--bottom + .bx--assistive-text { position: absolute; z-index: 6000; display: flex; align-items: center; opacity: 0; pointer-events: none; } @media (-ms-high-contrast: none), (-ms-high-contrast: active) { .bx--tooltip__trigger.bx--btn--icon-only--bottom::before, .bx--tooltip__trigger.bx--btn--icon-only--bottom::after, .bx--tooltip__trigger.bx--btn--icon-only--bottom .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--bottom + .bx--assistive-text { display: inline-block; } } .bx--tooltip__trigger.bx--btn--icon-only--bottom::before, .bx--tooltip__trigger.bx--btn--icon-only--bottom::after { transition: opacity 70ms cubic-bezier(0.2, 0, 0.38, 0.9); } @media screen and (prefers-reduced-motion: reduce) { .bx--tooltip__trigger.bx--btn--icon-only--bottom::before, .bx--tooltip__trigger.bx--btn--icon-only--bottom::after { transition: none; } } .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--a11y::after { transition: none; } .bx--tooltip__trigger.bx--btn--icon-only--bottom::before { width: 0px; height: 0px; border-style: solid; content: ""; } .bx--tooltip__trigger.bx--btn--icon-only--bottom .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--bottom + .bx--assistive-text { box-sizing: content-box; color: inherit; opacity: 1; white-space: normal; word-break: break-word; } .bx--tooltip__trigger.bx--btn--icon-only--bottom::after, .bx--tooltip__trigger.bx--btn--icon-only--bottom .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--bottom + .bx--assistive-text { box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 6px; z-index: 6000; width: max-content; min-width: 1.5rem; max-width: 13rem; height: auto; padding: 0.1875rem 1rem; background-color: rgb(57, 57, 57); border-radius: 0.125rem; color: rgb(255, 255, 255); text-align: left; transform: translate(-50%); font-size: 0.875rem; font-weight: 400; line-height: 1.28572; letter-spacing: 0.16px; } @media (-ms-high-contrast: none), (-ms-high-contrast: active) { .bx--tooltip__trigger.bx--btn--icon-only--bottom::after, .bx--tooltip__trigger.bx--btn--icon-only--bottom .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--bottom + .bx--assistive-text { width: auto; } } @supports (-ms-accelerator: true) { .bx--tooltip__trigger.bx--btn--icon-only--bottom::after, .bx--tooltip__trigger.bx--btn--icon-only--bottom .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--bottom + .bx--assistive-text { width: auto; } } @supports (-ms-ime-align: auto) { .bx--tooltip__trigger.bx--btn--icon-only--bottom::after, .bx--tooltip__trigger.bx--btn--icon-only--bottom .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--bottom + .bx--assistive-text { width: auto; } } @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) { .bx--tooltip__trigger.bx--btn--icon-only--bottom::after, .bx--tooltip__trigger.bx--btn--icon-only--bottom .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--bottom + .bx--assistive-text { border: 1px solid transparent; } } .bx--tooltip__trigger.bx--btn--icon-only--bottom::after { content: attr(aria-label); } .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--a11y::after { content: none; } .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--visible::before, .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--visible::after, .bx--tooltip__trigger.bx--btn--icon-only--bottom:hover::before, .bx--tooltip__trigger.bx--btn--icon-only--bottom:hover::after, .bx--tooltip__trigger.bx--btn--icon-only--bottom:focus::before, .bx--tooltip__trigger.bx--btn--icon-only--bottom:focus::after { opacity: 1; } .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--visible .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--visible + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--bottom:hover .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--bottom:hover + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--bottom:focus .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--bottom:focus + .bx--assistive-text { overflow: visible; margin: auto; clip: auto; } .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--visible .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--visible + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--visible.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--btn--icon-only--bottom:hover .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--bottom:hover + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--bottom:hover.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--btn--icon-only--bottom:focus .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--bottom:focus + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--bottom:focus.bx--tooltip--a11y::before { animation: 70ms cubic-bezier(0.2, 0, 0.38, 0.9) 0s 1 normal none running tooltip-fade; } .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--hidden .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--hidden + .bx--assistive-text { overflow: hidden; margin: -1px; clip: rect(0px, 0px, 0px, 0px); } .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--hidden.bx--tooltip--a11y::before { animation: auto ease 0s 1 normal none running none; opacity: 0; } .bx--tooltip__trigger.bx--btn--icon-only--bottom .bx--assistive-text::after { position: absolute; display: block; content: ""; left: 0px; width: 100%; height: 0.75rem; top: -0.75rem; } .bx--tooltip__trigger.bx--btn--icon-only--bottom::before, .bx--tooltip__trigger.bx--btn--icon-only--bottom::after, .bx--tooltip__trigger.bx--btn--icon-only--bottom .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--bottom + .bx--assistive-text { bottom: 0px; left: 50%; } .bx--tooltip__trigger.bx--btn--icon-only--bottom::before { bottom: -0.5rem; border-width: 0px 0.25rem 0.3125rem; border-color: transparent transparent rgb(57, 57, 57); transform: translate(-50%, 100%); } .bx--tooltip__trigger.bx--btn--icon-only--bottom::after, .bx--tooltip__trigger.bx--btn--icon-only--bottom .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--bottom + .bx--assistive-text { bottom: -0.8125rem; transform: translate(-50%, 100%); } .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-start .bx--assistive-text::after { position: absolute; display: block; content: ""; left: 0px; width: 100%; height: 0.75rem; top: -0.75rem; } .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-start::before, .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-start::after, .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-start .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-start + .bx--assistive-text { bottom: 0px; left: 50%; } .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-start::before { bottom: -0.5rem; border-width: 0px 0.25rem 0.3125rem; border-color: transparent transparent rgb(57, 57, 57); transform: translate(-50%, 100%); } .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-start::after, .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-start .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-start + .bx--assistive-text { bottom: -0.8125rem; left: 0px; transform: translateY(100%); } .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-center .bx--assistive-text::after { position: absolute; display: block; content: ""; left: 0px; width: 100%; height: 0.75rem; top: -0.75rem; } .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-center::before, .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-center::after, .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-center .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-center + .bx--assistive-text { bottom: 0px; left: 50%; } .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-center::before { bottom: -0.5rem; border-width: 0px 0.25rem 0.3125rem; border-color: transparent transparent rgb(57, 57, 57); transform: translate(-50%, 100%); } .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-center::after, .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-center .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-center + .bx--assistive-text { bottom: -0.8125rem; transform: translate(-50%, 100%); } .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-end .bx--assistive-text::after { position: absolute; display: block; content: ""; left: 0px; width: 100%; height: 0.75rem; top: -0.75rem; } .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-end::before, .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-end::after, .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-end .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-end + .bx--assistive-text { bottom: 0px; left: 50%; } .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-end::before { bottom: -0.5rem; border-width: 0px 0.25rem 0.3125rem; border-color: transparent transparent rgb(57, 57, 57); transform: translate(-50%, 100%); } .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-end::after, .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-end .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-end + .bx--assistive-text { bottom: -0.8125rem; right: 0px; left: auto; transform: translateY(100%); } .bx--tooltip__trigger.bx--btn--icon-only--left { position: relative; display: inline-flex; overflow: visible; align-items: center; cursor: pointer; } .bx--tooltip__trigger.bx--btn--icon-only--left:focus { outline: rgb(15, 98, 254) solid 1px; } @media screen and (prefers-contrast) { .bx--tooltip__trigger.bx--btn--icon-only--left:focus { outline-style: dotted; } } .bx--tooltip__trigger.bx--btn--icon-only--left:focus { outline: transparent solid 1px; } .bx--tooltip__trigger.bx--btn--icon-only--left:focus svg { outline: rgb(15, 98, 254) solid 1px; } @media screen and (prefers-contrast) { .bx--tooltip__trigger.bx--btn--icon-only--left:focus svg { outline-style: dotted; } } .bx--tooltip__trigger.bx--btn--icon-only--left::before, .bx--tooltip__trigger.bx--btn--icon-only--left::after, .bx--tooltip__trigger.bx--btn--icon-only--left .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--left + .bx--assistive-text { position: absolute; z-index: 6000; display: flex; align-items: center; opacity: 0; pointer-events: none; } @media (-ms-high-contrast: none), (-ms-high-contrast: active) { .bx--tooltip__trigger.bx--btn--icon-only--left::before, .bx--tooltip__trigger.bx--btn--icon-only--left::after, .bx--tooltip__trigger.bx--btn--icon-only--left .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--left + .bx--assistive-text { display: inline-block; } } .bx--tooltip__trigger.bx--btn--icon-only--left::before, .bx--tooltip__trigger.bx--btn--icon-only--left::after { transition: opacity 70ms cubic-bezier(0.2, 0, 0.38, 0.9); } @media screen and (prefers-reduced-motion: reduce) { .bx--tooltip__trigger.bx--btn--icon-only--left::before, .bx--tooltip__trigger.bx--btn--icon-only--left::after { transition: none; } } .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--a11y::after { transition: none; } .bx--tooltip__trigger.bx--btn--icon-only--left::before { width: 0px; height: 0px; border-style: solid; content: ""; } .bx--tooltip__trigger.bx--btn--icon-only--left .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--left + .bx--assistive-text { box-sizing: content-box; color: inherit; opacity: 1; white-space: normal; word-break: break-word; } .bx--tooltip__trigger.bx--btn--icon-only--left::after, .bx--tooltip__trigger.bx--btn--icon-only--left .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--left + .bx--assistive-text { box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 6px; z-index: 6000; width: max-content; min-width: 1.5rem; max-width: 13rem; height: auto; padding: 0.1875rem 1rem; background-color: rgb(57, 57, 57); border-radius: 0.125rem; color: rgb(255, 255, 255); text-align: left; transform: translate(-50%); font-size: 0.875rem; font-weight: 400; line-height: 1.28572; letter-spacing: 0.16px; } @media (-ms-high-contrast: none), (-ms-high-contrast: active) { .bx--tooltip__trigger.bx--btn--icon-only--left::after, .bx--tooltip__trigger.bx--btn--icon-only--left .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--left + .bx--assistive-text { width: auto; } } @supports (-ms-accelerator: true) { .bx--tooltip__trigger.bx--btn--icon-only--left::after, .bx--tooltip__trigger.bx--btn--icon-only--left .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--left + .bx--assistive-text { width: auto; } } @supports (-ms-ime-align: auto) { .bx--tooltip__trigger.bx--btn--icon-only--left::after, .bx--tooltip__trigger.bx--btn--icon-only--left .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--left + .bx--assistive-text { width: auto; } } @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) { .bx--tooltip__trigger.bx--btn--icon-only--left::after, .bx--tooltip__trigger.bx--btn--icon-only--left .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--left + .bx--assistive-text { border: 1px solid transparent; } } .bx--tooltip__trigger.bx--btn--icon-only--left::after { content: attr(aria-label); } .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--a11y::after { content: none; } .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--visible::before, .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--visible::after, .bx--tooltip__trigger.bx--btn--icon-only--left:hover::before, .bx--tooltip__trigger.bx--btn--icon-only--left:hover::after, .bx--tooltip__trigger.bx--btn--icon-only--left:focus::before, .bx--tooltip__trigger.bx--btn--icon-only--left:focus::after { opacity: 1; } .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--visible .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--visible + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--left:hover .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--left:hover + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--left:focus .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--left:focus + .bx--assistive-text { overflow: visible; margin: auto; clip: auto; } .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--visible .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--visible + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--visible.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--btn--icon-only--left:hover .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--left:hover + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--left:hover.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--btn--icon-only--left:focus .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--left:focus + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--left:focus.bx--tooltip--a11y::before { animation: 70ms cubic-bezier(0.2, 0, 0.38, 0.9) 0s 1 normal none running tooltip-fade; } .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--hidden .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--hidden + .bx--assistive-text { overflow: hidden; margin: -1px; clip: rect(0px, 0px, 0px, 0px); } .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--hidden.bx--tooltip--a11y::before { animation: auto ease 0s 1 normal none running none; opacity: 0; } .bx--tooltip__trigger.bx--btn--icon-only--left .bx--assistive-text::after { position: absolute; display: block; content: ""; top: 0px; width: 0.75rem; height: 100%; right: -0.75rem; } .bx--tooltip__trigger.bx--btn--icon-only--left::before, .bx--tooltip__trigger.bx--btn--icon-only--left::after, .bx--tooltip__trigger.bx--btn--icon-only--left .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--left + .bx--assistive-text { top: 50%; left: 0px; } .bx--tooltip__trigger.bx--btn--icon-only--left::before { left: -0.5rem; border-width: 0.25rem 0px 0.25rem 0.3125rem; border-color: transparent transparent transparent rgb(57, 57, 57); transform: translate(-100%, -50%); } .bx--tooltip__trigger.bx--btn--icon-only--left::after, .bx--tooltip__trigger.bx--btn--icon-only--left .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--left + .bx--assistive-text { left: -0.8125rem; transform: translate(-100%, -50%); } .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-start .bx--assistive-text::after { position: absolute; display: block; content: ""; top: 0px; width: 0.75rem; height: 100%; right: -0.75rem; } .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-start::before, .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-start::after, .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-start .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-start + .bx--assistive-text { top: 50%; left: 0px; } .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-start::before { left: -0.5rem; border-width: 0.25rem 0px 0.25rem 0.3125rem; border-color: transparent transparent transparent rgb(57, 57, 57); transform: translate(-100%, -50%); } .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-start::after, .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-start .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-start + .bx--assistive-text { left: -0.8125rem; transform: translate(-100%, -50%); } .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-center .bx--assistive-text::after { position: absolute; display: block; content: ""; top: 0px; width: 0.75rem; height: 100%; right: -0.75rem; } .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-center::before, .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-center::after, .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-center .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-center + .bx--assistive-text { top: 50%; left: 0px; } .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-center::before { left: -0.5rem; border-width: 0.25rem 0px 0.25rem 0.3125rem; border-color: transparent transparent transparent rgb(57, 57, 57); transform: translate(-100%, -50%); } .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-center::after, .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-center .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-center + .bx--assistive-text { left: -0.8125rem; transform: translate(-100%, -50%); } .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-end .bx--assistive-text::after { position: absolute; display: block; content: ""; top: 0px; width: 0.75rem; height: 100%; right: -0.75rem; } .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-end::before, .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-end::after, .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-end .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-end + .bx--assistive-text { top: 50%; left: 0px; } .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-end::before { left: -0.5rem; border-width: 0.25rem 0px 0.25rem 0.3125rem; border-color: transparent transparent transparent rgb(57, 57, 57); transform: translate(-100%, -50%); } .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-end::after, .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-end .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-end + .bx--assistive-text { left: -0.8125rem; transform: translate(-100%, -50%); } .bx--btn--icon-only { padding-right: 0.9375rem; padding-left: 0.9375rem; } .bx--btn--icon-only .bx--btn__icon { position: static; } .bx--btn--icon-only.bx--btn--ghost .bx--btn__icon, .bx--btn--icon-only.bx--btn--danger--ghost .bx--btn__icon { margin: 0px; } .bx--btn--icon-only.bx--btn--selected { background: rgb(224, 224, 224); } .bx--btn path[data-icon-path="inner-path"] { fill: none; } .bx--btn--ghost.bx--btn--icon-only .bx--btn__icon path:not([data-icon-path]):not([fill="none"]), .bx--btn--ghost.bx--btn--icon-only .bx--btn__icon { fill: rgb(22, 22, 22); } .bx--btn--ghost.bx--btn--icon-only[disabled] .bx--btn__icon path:not([data-icon-path]):not([fill="none"]), .bx--btn--ghost.bx--btn--icon-only[disabled] .bx--btn__icon, .bx--btn.bx--btn--icon-only.bx--btn--ghost[disabled]:hover .bx--btn__icon { fill: rgb(141, 141, 141); } .bx--btn--ghost.bx--btn--icon-only[disabled] { cursor: not-allowed; } .bx--btn--field.bx--btn--icon-only, .bx--btn--md.bx--btn--icon-only { padding-right: 0.6875rem; padding-left: 0.6875rem; } .bx--btn--sm.bx--btn--icon-only { padding-right: 0.4375rem; padding-left: 0.4375rem; } .bx--btn--danger { border-width: 1px; border-style: solid; border-color: transparent; background-color: rgb(218, 30, 40); color: rgb(255, 255, 255); } .bx--btn--danger:hover { background-color: rgb(184, 25, 33); } .bx--btn--danger:focus { border-color: rgb(15, 98, 254); box-shadow: rgb(15, 98, 254) 0px 0px 0px 1px inset, rgb(255, 255, 255) 0px 0px 0px 2px inset; } .bx--btn--danger:active { background-color: rgb(117, 14, 19); } .bx--btn--danger .bx--btn__icon, .bx--btn--danger .bx--btn__icon path:not([data-icon-path]):not([fill="none"]) { fill: currentcolor; } .bx--btn--danger:hover { color: rgb(255, 255, 255); } .bx--btn--danger-tertiary, .bx--btn--danger--tertiary { border-width: 1px; border-style: solid; border-color: rgb(218, 30, 40); background-color: transparent; color: rgb(218, 30, 40); } .bx--btn--danger-tertiary:hover, .bx--btn--danger--tertiary:hover { background-color: rgb(184, 25, 33); } .bx--btn--danger-tertiary:focus, .bx--btn--danger--tertiary:focus { border-color: rgb(15, 98, 254); box-shadow: rgb(15, 98, 254) 0px 0px 0px 1px inset, rgb(255, 255, 255) 0px 0px 0px 2px inset; } .bx--btn--danger-tertiary:active, .bx--btn--danger--tertiary:active { background-color: rgb(117, 14, 19); } .bx--btn--danger-tertiary .bx--btn__icon, .bx--btn--danger-tertiary .bx--btn__icon path:not([data-icon-path]):not([fill="none"]), .bx--btn--danger--tertiary .bx--btn__icon, .bx--btn--danger--tertiary .bx--btn__icon path:not([data-icon-path]):not([fill="none"]) { fill: currentcolor; } .bx--btn--danger-tertiary:hover, .bx--btn--danger--tertiary:hover { border-color: rgb(184, 25, 33); color: rgb(255, 255, 255); } .bx--btn--danger-tertiary:focus, .bx--btn--danger--tertiary:focus { background-color: rgb(218, 30, 40); color: rgb(255, 255, 255); } .bx--btn--danger-tertiary:active, .bx--btn--danger--tertiary:active { border-color: rgb(117, 14, 19); color: rgb(255, 255, 255); } .bx--btn--danger-tertiary:disabled, .bx--btn--danger-tertiary:hover:disabled, .bx--btn--danger-tertiary:focus:disabled, .bx--btn--danger-tertiary.bx--btn--disabled, .bx--btn--danger-tertiary.bx--btn--disabled:hover, .bx--btn--danger-tertiary.bx--btn--disabled:focus, .bx--btn--danger--tertiary:disabled, .bx--btn--danger--tertiary:hover:disabled, .bx--btn--danger--tertiary:focus:disabled, .bx--btn--danger--tertiary.bx--btn--disabled, .bx--btn--danger--tertiary.bx--btn--disabled:hover, .bx--btn--danger--tertiary.bx--btn--disabled:focus { background: transparent; color: rgb(141, 141, 141); outline: none; } .bx--btn--danger-ghost, .bx--btn--danger--ghost { border-width: 1px; border-style: solid; border-color: transparent; background-color: transparent; color: rgb(218, 30, 40); padding: calc(-3px + 0.875rem) 16px; } .bx--btn--danger-ghost:hover, .bx--btn--danger--ghost:hover { background-color: rgb(184, 25, 33); } .bx--btn--danger-ghost:focus, .bx--btn--danger--ghost:focus { border-color: rgb(15, 98, 254); box-shadow: rgb(15, 98, 254) 0px 0px 0px 1px inset, rgb(255, 255, 255) 0px 0px 0px 2px inset; } .bx--btn--danger-ghost:active, .bx--btn--danger--ghost:active { background-color: rgb(117, 14, 19); } .bx--btn--danger-ghost .bx--btn__icon, .bx--btn--danger-ghost .bx--btn__icon path:not([data-icon-path]):not([fill="none"]), .bx--btn--danger--ghost .bx--btn__icon, .bx--btn--danger--ghost .bx--btn__icon path:not([data-icon-path]):not([fill="none"]) { fill: currentcolor; } .bx--btn--danger-ghost .bx--btn__icon, .bx--btn--danger--ghost .bx--btn__icon { position: static; margin-left: 0.5rem; } .bx--btn--danger-ghost:hover, .bx--btn--danger-ghost:active, .bx--btn--danger--ghost:hover, .bx--btn--danger--ghost:active { color: rgb(255, 255, 255); } .bx--btn--danger-ghost:disabled, .bx--btn--danger-ghost:hover:disabled, .bx--btn--danger-ghost:focus:disabled, .bx--btn--danger-ghost.bx--btn--disabled, .bx--btn--danger-ghost.bx--btn--disabled:hover, .bx--btn--danger-ghost.bx--btn--disabled:focus, .bx--btn--danger--ghost:disabled, .bx--btn--danger--ghost:hover:disabled, .bx--btn--danger--ghost:focus:disabled, .bx--btn--danger--ghost.bx--btn--disabled, .bx--btn--danger--ghost.bx--btn--disabled:hover, .bx--btn--danger--ghost.bx--btn--disabled:focus { border-color: transparent; background: transparent; color: rgb(198, 198, 198); outline: none; } .bx--btn--danger-ghost.bx--btn--sm, .bx--btn--danger--ghost.bx--btn--sm { padding: calc(-3px + 0.375rem) 16px; } .bx--btn--danger-ghost.bx--btn--field, .bx--btn--danger-ghost.bx--btn--md, .bx--btn--danger--ghost.bx--btn--field, .bx--btn--danger--ghost.bx--btn--md { padding: calc(-3px + 0.675rem) 16px; } .bx--btn--sm { min-height: 2rem; padding: calc(-3px + 0.375rem) 60px calc(-3px + 0.375rem) 12px; } .bx--btn--xl:not(.bx--btn--icon-only) { align-items: baseline; padding-top: 1rem; padding-right: 4rem; padding-left: 1rem; min-height: 5rem; } .bx--btn--lg:not(.bx--btn--icon-only) { align-items: baseline; padding-top: 1rem; padding-right: 4rem; padding-left: 1rem; min-height: 4rem; } .bx--btn--field, .bx--btn--md { min-height: 2.5rem; padding: calc(-3px + 0.675rem) 60px calc(-3px + 0.675rem) 12px; } .bx--btn--expressive { font-size: 1rem; font-weight: 400; line-height: 1.375; letter-spacing: 0px; min-height: 3rem; } .bx--btn--icon-only.bx--btn--expressive { padding: 12px 13px; } .bx--btn.bx--btn--expressive .bx--btn__icon { width: 1.25rem; height: 1.25rem; } .bx--btn-set .bx--btn.bx--btn--expressive { max-width: 20rem; } .bx--btn.bx--skeleton { position: relative; padding: 0px; border: none; background: rgb(229, 229, 229); box-shadow: none; pointer-events: none; width: 9.375rem; } .bx--btn.bx--skeleton:hover, .bx--btn.bx--skeleton:focus, .bx--btn.bx--skeleton:active { border: none; cursor: default; outline: none; } .bx--btn.bx--skeleton::before { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; animation: 3s ease-in-out 0s infinite normal none running skeleton; background: rgb(198, 198, 198); content: ""; will-change: transform-origin, transform, opacity; } @media (prefers-reduced-motion: reduce) { .bx--btn.bx--skeleton::before { animation: auto ease 0s 1 normal none running none; } } .bx--btn-set { display: flex; } .bx--btn-set--stacked { flex-direction: column; } .bx--btn-set .bx--btn { width: 100%; max-width: 12.25rem; } .bx--btn-set .bx--btn:not(:focus) { box-shadow: rgb(224, 224, 224) -0.0625rem 0px; } .bx--btn-set .bx--btn:first-of-type:not(:focus) { box-shadow: inherit; } .bx--btn-set .bx--btn:focus + .bx--btn { box-shadow: inherit; } .bx--btn-set--stacked .bx--btn:not(:focus) { box-shadow: rgb(224, 224, 224) 0px -0.0625rem; } .bx--btn-set--stacked .bx--btn:first-of-type:not(:focus) { box-shadow: inherit; } .bx--btn-set .bx--btn.bx--btn--disabled { box-shadow: rgb(141, 141, 141) -0.0625rem 0px; } .bx--btn-set .bx--btn.bx--btn--disabled:first-of-type { box-shadow: none; } .bx--btn-set--stacked .bx--btn.bx--btn--disabled { box-shadow: rgb(141, 141, 141) 0px -0.0625rem; } .bx--btn-set--stacked .bx--btn.bx--btn--disabled:first-of-type { box-shadow: none; } @media screen and (-ms-high-contrast: active), (forced-colors: active) { .bx--btn:focus { color: highlight; outline: highlight solid 1px; } } @media screen and (-ms-high-contrast: active), (forced-colors: active) { .bx--btn--ghost.bx--btn--icon-only .bx--btn__icon path:not([data-icon-path]):not([fill="none"]), .bx--btn--ghost.bx--btn--icon-only .bx--btn__icon { fill: buttontext; } } .bx--fieldset { box-sizing: border-box; padding: 0px; border: 0px; margin: 0px 0px 2rem; font-family: inherit; font-size: 100%; vertical-align: baseline; } .bx--fieldset *, .bx--fieldset ::before, .bx--fieldset ::after { box-sizing: inherit; } .bx--fieldset--no-margin { margin-bottom: 0px; } .bx--form-item { font-size: 0.875rem; font-weight: 400; line-height: 1.28572; letter-spacing: 0.16px; display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; } .bx--label { box-sizing: border-box; padding: 0px; border: 0px; margin: 0px 0px 0.5rem; font-family: inherit; font-size: 0.75rem; letter-spacing: 0.32px; display: inline-block; color: rgb(82, 82, 82); font-weight: 400; line-height: 1rem; vertical-align: baseline; } .bx--label *, .bx--label ::before, .bx--label ::after { box-sizing: inherit; } .bx--label .bx--tooltip__trigger { font-size: 0.75rem; font-weight: 400; line-height: 1.33333; letter-spacing: 0.32px; } .bx--label.bx--skeleton { position: relative; padding: 0px; border: none; background: rgb(229, 229, 229); box-shadow: none; pointer-events: none; width: 4.6875rem; height: 0.875rem; } .bx--label.bx--skeleton:hover, .bx--label.bx--skeleton:focus, .bx--label.bx--skeleton:active { border: none; cursor: default; outline: none; } .bx--label.bx--skeleton::before { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; animation: 3s ease-in-out 0s infinite normal none running skeleton; background: rgb(198, 198, 198); content: ""; will-change: transform-origin, transform, opacity; } @media (prefers-reduced-motion: reduce) { .bx--label.bx--skeleton::before { animation: auto ease 0s 1 normal none running none; } } input[type="number"] { font-family: "IBM Plex Mono", Menlo, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", Courier, monospace; } input[data-invalid]:not(:focus), .bx--number[data-invalid] input[type="number"]:not(:focus), .bx--text-input__field-wrapper[data-invalid] > .bx--text-input--invalid:not(:focus), .bx--text-area__wrapper[data-invalid] > .bx--text-area--invalid:not(:focus), .bx--select-input__wrapper[data-invalid] .bx--select-input:not(:focus), .bx--list-box[data-invalid]:not(:focus), .bx--combo-box[data-invalid] .bx--text-input:not(:focus) { outline: rgb(218, 30, 40) solid 2px; outline-offset: -2px; } @media screen and (prefers-contrast) { input[data-invalid]:not(:focus), .bx--number[data-invalid] input[type="number"]:not(:focus), .bx--text-input__field-wrapper[data-invalid] > .bx--text-input--invalid:not(:focus), .bx--text-area__wrapper[data-invalid] > .bx--text-area--invalid:not(:focus), .bx--select-input__wrapper[data-invalid] .bx--select-input:not(:focus), .bx--list-box[data-invalid]:not(:focus), .bx--combo-box[data-invalid] .bx--text-input:not(:focus) { outline-style: dotted; } } input[data-invalid] ~ .bx--form-requirement, .bx--number[data-invalid] .bx--number__input-wrapper ~ .bx--form-requirement, .bx--number__input-wrapper--warning ~ .bx--form-requirement, .bx--date-picker-input__wrapper ~ .bx--form-requirement, .bx--date-picker-input__wrapper--warn ~ .bx--form-requirement, .bx--date-picker-input__wrapper--invalid ~ .bx--form-requirement, .bx--time-picker--invalid ~ .bx--form-requirement, .bx--text-input__field-wrapper[data-invalid] ~ .bx--form-requirement, .bx--text-input__field-wrapper--warning ~ .bx--form-requirement, .bx--text-input__field-wrapper--warning > .bx--text-input ~ .bx--form-requirement, .bx--text-area__wrapper[data-invalid] ~ .bx--form-requirement, .bx--select-input__wrapper[data-invalid] ~ .bx--form-requirement, .bx--select--warning .bx--select-input__wrapper ~ .bx--form-requirement, .bx--time-picker[data-invalid] ~ .bx--form-requirement, .bx--list-box[data-invalid] ~ .bx--form-requirement, .bx--list-box--warning ~ .bx--form-requirement { display: block; overflow: visible; max-height: 12.5rem; font-weight: 400; } input[data-invalid] ~ .bx--form-requirement, .bx--number[data-invalid] .bx--number__input-wrapper ~ .bx--form-requirement, .bx--date-picker-input__wrapper ~ .bx--form-requirement, .bx--date-picker-input__wrapper--invalid ~ .bx--form-requirement, .bx--time-picker--invalid ~ .bx--form-requirement, .bx--text-input__field-wrapper[data-invalid] ~ .bx--form-requirement, .bx--text-area__wrapper[data-invalid] ~ .bx--form-requirement, .bx--select-input__wrapper[data-invalid] ~ .bx--form-requirement, .bx--time-picker[data-invalid] ~ .bx--form-requirement, .bx--list-box[data-invalid] ~ .bx--form-requirement { color: rgb(218, 30, 40); } .bx--form--fluid .bx--text-input__field-wrapper[data-invalid], .bx--form--fluid .bx--text-input__field-wrapper--warning { display: block; } .bx--form--fluid .bx--fieldset { margin: 0px; } .bx--form--fluid input[data-invalid] { outline: none; } .bx--form--fluid .bx--form-requirement { padding: 0.5rem 2.5rem 0.5rem 1rem; margin: 0px; } .bx--form-requirement { box-sizing: border-box; padding: 0px; border: 0px; font-family: inherit; vertical-align: baseline; font-size: 0.75rem; font-weight: 400; line-height: 1.33333; letter-spacing: 0.32px; display: none; overflow: hidden; max-height: 0px; margin: 0.25rem 0px 0px; } .bx--form-requirement *, .bx--form-requirement ::before, .bx--form-requirement ::after { box-sizing: inherit; } .bx--select--inline .bx--form__helper-text { margin-top: 0px; } .bx--form__helper-text { font-size: 0.75rem; line-height: 1.33333; letter-spacing: 0.32px; z-index: 0; width: 100%; margin-top: 0.25rem; color: rgb(82, 82, 82); opacity: 1; } .bx--label--disabled, .bx--form__helper-text--disabled, fieldset[disabled] .bx--label, fieldset[disabled] .bx--form__helper-text { color: rgb(198, 198, 198); } .bx--form-item.bx--checkbox-wrapper { position: relative; margin-bottom: 0.25rem; } .bx--form-item.bx--checkbox-wrapper:first-of-type { margin-top: 0.1875rem; } .bx--label + .bx--form-item.bx--checkbox-wrapper { margin-top: -0.125rem; } .bx--form-item.bx--checkbox-wrapper:last-of-type { margin-bottom: 0.1875rem; } .bx--checkbox { position: absolute; overflow: hidden; width: 1px; height: 1px; padding: 0px; border: 0px; margin: -1px; clip: rect(0px, 0px, 0px, 0px); visibility: inherit; white-space: nowrap; top: 1.25rem; left: 0.7rem; } .bx--checkbox-label { box-sizing: border-box; padding: 0.1875rem 0px 0px 1.25rem; border: 0px; margin: 0px; font-family: inherit; vertical-align: baseline; font-size: 0.875rem; font-weight: 400; line-height: 1.28572; letter-spacing: 0.16px; position: relative; display: flex; min-height: 1.5rem; cursor: pointer; user-select: none; } .bx--checkbox-label *, .bx--checkbox-label ::before, .bx--checkbox-label ::after { box-sizing: inherit; } .bx--checkbox-label-text { padding-left: 0.375rem; } .bx--checkbox-label::before, .bx--checkbox-label::after { box-sizing: border-box; } .bx--checkbox-label::before { position: absolute; top: 0.125rem; left: 0px; width: 1rem; height: 1rem; border: 1px solid rgb(22, 22, 22); margin: 0.125rem 0.125rem 0.125rem 0.1875rem; background-color: transparent; border-radius: 1px; content: ""; } .bx--checkbox-label::after { position: absolute; top: 0.5rem; left: 0.4375rem; width: 0.5625rem; height: 0.3125rem; border-bottom: 2px solid rgb(255, 255, 255); border-left: 2px solid rgb(255, 255, 255); margin-top: -0.1875rem; background: none; content: ""; transform: scale(0) rotate(-45deg); transform-origin: right bottom; } .bx--checkbox:checked + .bx--checkbox-label::before, .bx--checkbox:indeterminate + .bx--checkbox-label::before, .bx--checkbox-label[data-contained-checkbox-state="true"]::before, .bx--checkbox-label[data-contained-checkbox-state="mixed"]::before { border-width: 1px; border-color: rgb(22, 22, 22); background-color: rgb(22, 22, 22); } .bx--checkbox:checked + .bx--checkbox-label::after, .bx--checkbox-label[data-contained-checkbox-state="true"]::after { transform: scale(1) rotate(-45deg); } .bx--checkbox:indeterminate + .bx--checkbox-label::after, .bx--checkbox-label[data-contained-checkbox-state="mixed"]::after { top: 0.6875rem; width: 0.5rem; border-bottom: 2px solid rgb(255, 255, 255); border-left: 0px solid rgb(255, 255, 255); transform: scale(1) rotate(0deg); } .bx--checkbox:focus + .bx--checkbox-label::before, .bx--checkbox-label__focus::before, .bx--checkbox:checked:focus + .bx--checkbox-label::before, .bx--checkbox-label[data-contained-checkbox-state="true"].bx--checkbox-label__focus::before, .bx--checkbox:indeterminate:focus + .bx--checkbox-label::before, .bx--checkbox-label[data-contained-checkbox-state="mixed"].bx--checkbox-label__focus::before { outline: rgb(15, 98, 254) solid 2px; outline-offset: 1px; } .bx--checkbox:disabled + .bx--checkbox-label, .bx--checkbox-label[data-contained-checkbox-disabled="true"] { color: rgb(198, 198, 198); cursor: not-allowed; } .bx--checkbox:disabled + .bx--checkbox-label::before, .bx--checkbox-label[data-contained-checkbox-disabled="true"]::before { border-color: rgb(198, 198, 198); } .bx--checkbox:checked:disabled + .bx--checkbox-label::before, .bx--checkbox:indeterminate:disabled + .bx--checkbox-label::before, .bx--checkbox-label[data-contained-checkbox-state="true"][data-contained-checkbox-disabled="true"]::before, .bx--checkbox-label[data-contained-checkbox-state="mixed"][data-contained-checkbox-disabled="true"]::before { background-color: rgb(198, 198, 198); } .bx--checkbox-label-text.bx--skeleton { position: relative; padding: 0px; border: none; background: rgb(229, 229, 229); box-shadow: none; pointer-events: none; width: 6.25rem; height: 1rem; margin: 0.0625rem 0px 0px 0.375rem; } .bx--checkbox-label-text.bx--skeleton:hover, .bx--checkbox-label-text.bx--skeleton:focus, .bx--checkbox-label-text.bx--skeleton:active { border: none; cursor: default; outline: none; } .bx--checkbox-label-text.bx--skeleton::before { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; animation: 3s ease-in-out 0s infinite normal none running skeleton; background: rgb(198, 198, 198); content: ""; will-change: transform-origin, transform, opacity; } @media (prefers-reduced-motion: reduce) { .bx--checkbox-label-text.bx--skeleton::before { animation: auto ease 0s 1 normal none running none; } } .bx--checkbox--inline { position: relative; } .bx--radio-button-group { box-sizing: border-box; padding: 0px; border: 0px; margin: 0px; font-family: inherit; font-size: 100%; vertical-align: baseline; position: relative; display: flex; align-items: center; } .bx--radio-button-group *, .bx--radio-button-group ::before, .bx--radio-button-group ::after { box-sizing: inherit; } .bx--label + .bx--form-item .bx--radio-button-group { margin-top: 0px; } .bx--radio-button-group--vertical { flex-direction: column; align-items: flex-start; } .bx--radio-button-group--vertical.bx--radio-button-group--label-left { align-items: flex-end; } .bx--radio-button-group--vertical .bx--radio-button__label { margin-right: 0px; line-height: 1.25rem; } .bx--radio-button-group--vertical .bx--radio-button__label:not(:last-of-type) { margin-bottom: 0.5rem; } .bx--radio-button { position: absolute; overflow: hidden; width: 1px; height: 1px; padding: 0px; border: 0px; margin: -1px; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; visibility: inherit; } .bx--radio-button__label { font-size: 0.875rem; font-weight: 400; line-height: 1.28572; letter-spacing: 0.16px; display: flex; align-items: center; margin-right: 1rem; cursor: pointer; } .bx--radio-button__appearance { box-sizing: border-box; padding: 0px; font-family: inherit; font-size: 100%; vertical-align: baseline; width: 1.125rem; height: 1.125rem; flex-shrink: 0; border: 1px solid rgb(22, 22, 22); margin: 0.0625rem 0.5rem 0.125rem 0.125rem; background-color: transparent; border-radius: 50%; } .bx--radio-button__appearance *, .bx--radio-button__appearance ::before, .bx--radio-button__appearance ::after { box-sizing: inherit; } .bx--radio-button:checked + .bx--radio-button__label .bx--radio-button__appearance { display: flex; align-items: center; justify-content: center; border-color: rgb(22, 22, 22); } .bx--radio-button:checked + .bx--radio-button__label .bx--radio-button__appearance::before { position: relative; display: inline-block; width: 100%; height: 100%; background-color: rgb(22, 22, 22); border-radius: 50%; content: ""; transform: scale(0.5); } @media screen and (-ms-high-contrast: active), (forced-colors: active) { .bx--radio-button:checked + .bx--radio-button__label .bx--radio-button__appearance::before { fill: buttontext; background-color: buttontext; } } .bx--radio-button:disabled + .bx--radio-button__label { color: rgb(198, 198, 198); cursor: not-allowed; } .bx--radio-button:disabled + .bx--radio-button__label .bx--radio-button__appearance, .bx--radio-button:disabled:checked + .bx--radio-button__label .bx--radio-button__appearance { border-color: rgb(198, 198, 198); } .bx--radio-button:disabled + .bx--radio-button__label .bx--radio-button__appearance::before, .bx--radio-button:disabled:checked + .bx--radio-button__label .bx--radio-button__appearance::before { background-color: rgb(198, 198, 198); } .bx--radio-button:focus + .bx--radio-button__label .bx--radio-button__appearance { outline: rgb(15, 98, 254) solid 2px; outline-offset: 1.5px; } .bx--radio-button__label.bx--skeleton { position: relative; padding: 0px; border: none; background: rgb(229, 229, 229); box-shadow: none; pointer-events: none; width: 6.25rem; height: 1.125rem; } .bx--radio-button__label.bx--skeleton:hover, .bx--radio-button__label.bx--skeleton:focus, .bx--radio-button__label.bx--skeleton:active { border: none; cursor: default; outline: none; } .bx--radio-button__label.bx--skeleton::before { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; animation: 3s ease-in-out 0s infinite normal none running skeleton; background: rgb(198, 198, 198); content: ""; will-change: transform-origin, transform, opacity; } @media (prefers-reduced-motion: reduce) { .bx--radio-button__label.bx--skeleton::before { animation: auto ease 0s 1 normal none running none; } } .bx--radio-button__label.bx--skeleton .bx--radio-button__appearance { display: none; } .bx--radio-button-wrapper .bx--radio-button__label { display: flex; align-items: flex-start; justify-content: center; margin: 0px; } .bx--radio-button-wrapper:not(:last-of-type) { margin-right: 1rem; } .bx--radio-button-group--vertical .bx--radio-button-wrapper:not(:last-of-type) { margin-right: 0px; margin-bottom: 0.5rem; } .bx--radio-button-group--label-right .bx--radio-button__label, .bx--radio-button-wrapper.bx--radio-button-wrapper--label-right .bx--radio-button__label { flex-direction: row; } .bx--radio-button-group--label-left .bx--radio-button__label, .bx--radio-button-wrapper.bx--radio-button-wrapper--label-left .bx--radio-button__label { flex-direction: row-reverse; } .bx--radio-button-group--label-left .bx--radio-button__appearance, .bx--radio-button-wrapper.bx--radio-button-wrapper--label-left .bx--radio-button__appearance { margin-right: 0px; margin-left: 0.5rem; } .bx--overflow-menu, .bx--overflow-menu__trigger { appearance: none; background: none; box-sizing: border-box; padding: 0px; border: 0px; margin: 0px; font-family: inherit; font-size: 100%; vertical-align: baseline; outline: transparent solid 2px; outline-offset: -2px; position: relative; display: flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; cursor: pointer; transition: outline 0.11s cubic-bezier(0, 0, 0.38, 0.9), background-color 0.11s cubic-bezier(0, 0, 0.38, 0.9); } .bx--overflow-menu *, .bx--overflow-menu ::before, .bx--overflow-menu ::after, .bx--overflow-menu__trigger *, .bx--overflow-menu__trigger ::before, .bx--overflow-menu__trigger ::after { box-sizing: inherit; } .bx--overflow-menu:focus, .bx--overflow-menu__trigger:focus { outline: rgb(15, 98, 254) solid 2px; outline-offset: -2px; } @media screen and (prefers-contrast) { .bx--overflow-menu:focus, .bx--overflow-menu__trigger:focus { outline-style: dotted; } } .bx--overflow-menu:hover, .bx--overflow-menu__trigger:hover { background-color: rgb(229, 229, 229); } .bx--overflow-menu--sm { width: 2rem; height: 2rem; } .bx--overflow-menu--xl, .bx--overflow-menu--lg { width: 3rem; height: 3rem; } .bx--overflow-menu__trigger.bx--tooltip--a11y.bx--tooltip__trigger:focus { outline: rgb(15, 98, 254) solid 2px; outline-offset: -2px; } @media screen and (prefers-contrast) { .bx--overflow-menu__trigger.bx--tooltip--a11y.bx--tooltip__trigger:focus { outline-style: dotted; } } .bx--overflow-menu__trigger.bx--tooltip--a11y.bx--tooltip__trigger:focus svg { outline: none; } .bx--overflow-menu.bx--overflow-menu--open, .bx--overflow-menu.bx--overflow-menu--open .bx--overflow-menu__trigger { box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 6px; background-color: rgb(244, 244, 244); transition: none; } .bx--overflow-menu--light.bx--overflow-menu--open, .bx--overflow-menu--light.bx--overflow-menu--open .bx--overflow-menu__trigger { background-color: rgb(255, 255, 255); } .bx--overflow-menu__icon { width: 1rem; height: 1rem; fill: rgb(22, 22, 22); } .bx--overflow-menu-options { box-sizing: border-box; padding: 0px; border: 0px; margin: 0px; font-family: inherit; font-size: 100%; vertical-align: baseline; box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 6px; position: absolute; z-index: 6000; top: 32px; left: 0px; display: none; width: 10rem; flex-direction: column; align-items: flex-start; background-color: rgb(244, 244, 244); list-style: none; } .bx--overflow-menu-options *, .bx--overflow-menu-options ::before, .bx--overflow-menu-options ::after { box-sizing: inherit; } .bx--overflow-menu-options::after { position: absolute; display: block; background-color: rgb(244, 244, 244); content: ""; transition: background-color 0.11s cubic-bezier(0, 0, 0.38, 0.9); } @media screen and (prefers-reduced-motion: reduce) { .bx--overflow-menu-options::after { transition: none; } } .bx--overflow-menu.bx--overflow-menu--open:hover { background-color: rgb(244, 244, 244); } .bx--overflow-menu-options--light { background-color: rgb(255, 255, 255); } .bx--overflow-menu-options--light::after { background-color: rgb(255, 255, 255); } .bx--overflow-menu.bx--overflow-menu--light.bx--overflow-menu--open:hover { background-color: rgb(255, 255, 255); } .bx--overflow-menu-options[data-floating-menu-direction="bottom"]::after { top: -0.1875rem; left: 0px; width: 2.5rem; height: 0.1875rem; } .bx--overflow-menu-options[data-floating-menu-direction="top"]::after { bottom: -0.5rem; left: 0px; width: 2.5rem; height: 0.5rem; } .bx--overflow-menu-options[data-floating-menu-direction="left"]::after { top: 0px; right: -0.375rem; width: 0.375rem; height: 2.5rem; } .bx--overflow-menu-options[data-floating-menu-direction="right"]::after { top: 0px; left: -0.375rem; width: 0.375rem; height: 2.5rem; } .bx--overflow-menu-options--sm.bx--overflow-menu-options[data-floating-menu-direction="bottom"]::after, .bx--overflow-menu-options--sm.bx--overflow-menu-options[data-floating-menu-direction="top"]::after { width: 2rem; } .bx--overflow-menu-options--sm.bx--overflow-menu-options[data-floating-menu-direction="left"]::after, .bx--overflow-menu-options--sm.bx--overflow-menu-options[data-floating-menu-direction="right"]::after { height: 2rem; } .bx--overflow-menu-options--xl.bx--overflow-menu-options[data-floating-menu-direction="bottom"]::after, .bx--overflow-menu-options--xl.bx--overflow-menu-options[data-floating-menu-direction="top"]::after, .bx--overflow-menu-options--lg.bx--overflow-menu-options[data-floating-menu-direction="bottom"]::after, .bx--overflow-menu-options--lg.bx--overflow-menu-options[data-floating-menu-direction="top"]::after { width: 3rem; } .bx--overflow-menu-options--xl.bx--overflow-menu-options[data-floating-menu-direction="left"]::after, .bx--overflow-menu-options--xl.bx--overflow-menu-options[data-floating-menu-direction="right"]::after, .bx--overflow-menu-options--lg.bx--overflow-menu-options[data-floating-menu-direction="left"]::after, .bx--overflow-menu-options--lg.bx--overflow-menu-options[data-floating-menu-direction="right"]::after { height: 3rem; } .bx--overflow-menu--flip.bx--overflow-menu-options[data-floating-menu-direction="top"]::after, .bx--overflow-menu--flip.bx--overflow-menu-options[data-floating-menu-direction="bottom"]::after { right: 0px; left: auto; } .bx--overflow-menu--flip.bx--overflow-menu-options[data-floating-menu-direction="left"]::after, .bx--overflow-menu--flip.bx--overflow-menu-options[data-floating-menu-direction="right"]::after { top: auto; bottom: 0px; } .bx--overflow-menu-options--open { display: flex; } .bx--overflow-menu-options__content { width: 100%; } .bx--overflow-menu-options__option { box-sizing: border-box; border: 0px; margin: 0px; font-family: inherit; font-size: 100%; vertical-align: baseline; display: flex; width: 100%; height: 2.5rem; align-items: center; padding: 0px; background-color: transparent; transition: background-color 0.11s cubic-bezier(0, 0, 0.38, 0.9); } .bx--overflow-menu-options__option *, .bx--overflow-menu-options__option ::before, .bx--overflow-menu-options__option ::after { box-sizing: inherit; } .bx--overflow-menu-options--sm .bx--overflow-menu-options__option { height: 2rem; } .bx--overflow-menu-options--xl .bx--overflow-menu-options__option, .bx--overflow-menu-options--lg .bx--overflow-menu-options__option { height: 3rem; } .bx--overflow-menu--divider, .bx--overflow-menu--light .bx--overflow-menu--divider { border-top: 1px solid rgb(224, 224, 224); } a.bx--overflow-menu-options__btn::before { display: inline-block; height: 100%; content: ""; vertical-align: middle; } .bx--overflow-menu-options__btn { box-sizing: border-box; margin: 0px; font-family: inherit; vertical-align: baseline; font-size: 0.875rem; line-height: 1.28572; letter-spacing: 0.16px; outline: transparent solid 2px; outline-offset: -2px; display: inline-flex; width: 100%; max-width: 11.25rem; height: 100%; align-items: center; padding: 0px 1rem; border: none; background-color: transparent; color: rgb(82, 82, 82); cursor: pointer; font-weight: 400; text-align: left; transition: outline 0.11s cubic-bezier(0, 0, 0.38, 0.9), background-color 0.11s cubic-bezier(0, 0, 0.38, 0.9), color 0.11s cubic-bezier(0, 0, 0.38, 0.9); } .bx--overflow-menu-options__btn *, .bx--overflow-menu-options__btn ::before, .bx--overflow-menu-options__btn ::after { box-sizing: inherit; } .bx--overflow-menu-options__btn:hover { color: rgb(22, 22, 22); } .bx--overflow-menu-options__btn:focus { outline: rgb(15, 98, 254) solid 2px; outline-offset: -2px; } @media screen and (prefers-contrast) { .bx--overflow-menu-options__btn:focus { outline-style: dotted; } } .bx--overflow-menu-options__btn svg { fill: rgb(82, 82, 82); } .bx--overflow-menu-options__btn:hover svg { fill: rgb(22, 22, 22); } .bx--overflow-menu-options__option-content { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bx--overflow-menu-options__option:hover { background-color: rgb(229, 229, 229); } .bx--overflow-menu-options__option--danger .bx--overflow-menu-options__btn:hover, .bx--overflow-menu-options__option--danger .bx--overflow-menu-options__btn:focus { background-color: rgb(218, 30, 40); color: rgb(255, 255, 255); } .bx--overflow-menu-options__option--danger .bx--overflow-menu-options__btn:hover svg, .bx--overflow-menu-options__option--danger .bx--overflow-menu-options__btn:focus svg { fill: currentcolor; } .bx--overflow-menu-options__option--disabled:hover { background-color: rgb(244, 244, 244); cursor: not-allowed; } .bx--overflow-menu-options__option--disabled .bx--overflow-menu-options__btn { color: rgb(198, 198, 198); pointer-events: none; } .bx--overflow-menu-options__option--disabled .bx--overflow-menu-options__btn:hover, .bx--overflow-menu-options__option--disabled .bx--overflow-menu-options__btn:active, .bx--overflow-menu-options__option--disabled .bx--overflow-menu-options__btn:focus { outline: transparent solid 2px; outline-offset: -2px; background-color: rgb(244, 244, 244); } .bx--overflow-menu-options__option--disabled .bx--overflow-menu-options__btn svg { fill: rgb(198, 198, 198); } .bx--overflow-menu--flip { left: -140px; } .bx--overflow-menu--flip::before { left: 145px; } .bx--overflow-menu__container { display: inline-block; } @media screen and (-ms-high-contrast: active), (forced-colors: active) { .bx--overflow-menu:focus, .bx--overflow-menu-options__btn:focus { color: highlight; outline: highlight solid 1px; } } @media screen and (-ms-high-contrast: active), (forced-colors: active) { .bx--overflow-menu svg { fill: buttontext; } } .bx--search { position: relative; display: flex; width: 100%; align-items: center; } .bx--search .bx--label { position: absolute; overflow: hidden; width: 1px; height: 1px; padding: 0px; border: 0px; margin: -1px; clip: rect(0px, 0px, 0px, 0px); visibility: inherit; white-space: nowrap; } .bx--search-input { box-sizing: border-box; margin: 0px; font-family: inherit; vertical-align: baseline; font-size: 0.875rem; font-weight: 400; line-height: 1.28572; letter-spacing: 0.16px; outline: transparent solid 2px; outline-offset: -2px; width: 100%; order: 1; padding: 0px 2.5rem; border-top: none; border-right: none; border-left: none; border-image: initial; border-bottom: 1px solid rgb(141, 141, 141); appearance: none; background-color: rgb(244, 244, 244); color: rgb(22, 22, 22); text-overflow: ellipsis; transition: background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9), outline 0.11s cubic-bezier(0.2, 0, 0.38, 0.9); } .bx--search-input *, .bx--search-input ::before, .bx--search-input ::after { box-sizing: inherit; } .bx--search-input:focus { outline: rgb(15, 98, 254) solid 2px; outline-offset: -2px; } @media screen and (prefers-contrast) { .bx--search-input:focus { outline-style: dotted; } } .bx--search-input::placeholder { color: rgb(111, 111, 111); opacity: 1; } .bx--search-input[disabled] { border-bottom: 1px solid transparent; background-color: rgb(244, 244, 244); color: rgb(198, 198, 198); cursor: not-allowed; } .bx--search-input[disabled]::placeholder { color: rgb(198, 198, 198); } .bx--search--light .bx--search-input { background: rgb(255, 255, 255); } .bx--search--light .bx--search-close::before { background: rgb(255, 255, 255); } .bx--search--sm .bx--search-input, .bx--search--sm.bx--search--expandable.bx--search--expanded .bx--search-input { height: 2rem; padding: 0px 2rem; } .bx--search--sm .bx--search-magnifier-icon { left: 0.5rem; } .bx--search--lg .bx--search-input, .bx--search--lg.bx--search--expandable.bx--search--expanded .bx--search-input { height: 2.5rem; padding: 0px 2.5rem; } .bx--search--lg .bx--search-magnifier-icon { left: 0.75rem; } .bx--search--xl .bx--search-input, .bx--search--xl.bx--search--expandable.bx--search--expanded .bx--search-input { height: 3rem; padding: 0px 3rem; } .bx--search-magnifier-icon { position: absolute; z-index: 2; top: 50%; left: 1rem; width: 1rem; height: 1rem; fill: rgb(82, 82, 82); pointer-events: none; transform: translateY(-50%); } .bx--search-close { box-sizing: border-box; margin: 0px; font-family: inherit; font-size: 100%; vertical-align: baseline; display: inline-block; padding: 0px; border: 0px; appearance: none; background: none; cursor: pointer; outline: transparent solid 2px; outline-offset: -2px; position: absolute; top: 0px; right: 0px; } .bx--search-close *, .bx--search-close ::before, .bx--search-close ::after { box-sizing: inherit; } .bx--search-close::before { position: absolute; top: 0.0625rem; left: 0px; display: block; width: 2px; height: calc(100% - 2px); background-color: rgb(244, 244, 244); content: ""; transition: background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9); } @media screen and (prefers-reduced-motion: reduce) { .bx--search-close::before { transition: none; } } .bx--search-close:hover { border-bottom: 1px solid rgb(141, 141, 141); } .bx--search-close:hover::before { background-color: rgb(229, 229, 229); } .bx--search-button { flex-shrink: 0; margin-left: 0.125rem; background-color: rgb(244, 244, 244); } .bx--search-button svg { fill: currentcolor; vertical-align: middle; } .bx--search-close svg { fill: inherit; } .bx--search-close, .bx--search-button { display: flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border-width: 1px 0px; border-style: solid; border-color: transparent; cursor: pointer; fill: rgb(22, 22, 22); opacity: 1; transition: opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9), background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9), outline 0.11s cubic-bezier(0.2, 0, 0.38, 0.9), border 0.11s cubic-bezier(0.2, 0, 0.38, 0.9); visibility: inherit; } .bx--search-close:hover, .bx--search-button:hover { background-color: rgb(229, 229, 229); } .bx--search-close:focus, .bx--search-button:focus { outline: rgb(15, 98, 254) solid 2px; outline-offset: -2px; } @media screen and (prefers-contrast) { .bx--search-close:focus, .bx--search-button:focus { outline-style: dotted; } } .bx--search-close:active, .bx--search-button:active { outline: rgb(15, 98, 254) solid 2px; outline-offset: -2px; background-color: rgb(224, 224, 224); } @media screen and (prefers-contrast) { .bx--search-close:active, .bx--search-button:active { outline-style: dotted; } } .bx--search--disabled .bx--search-close, .bx--search--disabled.bx--search--expandable .bx--search-magnifier { cursor: not-allowed; outline: none; } .bx--search--disabled .bx--search-close:hover, .bx--search--disabled.bx--search--expandable .bx--search-magnifier:hover { border-bottom-color: transparent; background-color: transparent; } .bx--search--disabled .bx--search-close:hover::before, .bx--search--disabled.bx--search--expandable .bx--search-magnifier:hover::before { background-color: transparent; } .bx--search--disabled svg { fill: rgb(198, 198, 198); } .bx--search-close:focus::before, .bx--search-close:active::before { background-color: rgb(15, 98, 254); } .bx--search-input:focus ~ .bx--search-close:hover { outline: rgb(15, 98, 254) solid 2px; outline-offset: -2px; } @media screen and (prefers-contrast) { .bx--search-input:focus ~ .bx--search-close:hover { outline-style: dotted; } } .bx--search--sm .bx--search-close, .bx--search--sm ~ .bx--search-button, .bx--search--sm.bx--search--expandable, .bx--search--sm.bx--search--expandable .bx--search-magnifier { width: 2rem; height: 2rem; } .bx--search--sm.bx--search--expandable .bx--search-input::placeholder { padding: 0px 2rem; } .bx--search--lg .bx--search-close, .bx--search--lg ~ .bx--search-button, .bx--search--lg.bx--search--expandable, .bx--search--lg.bx--search--expandable .bx--search-magnifier { width: 2.5rem; height: 2.5rem; } .bx--search--lg.bx--search--expandable .bx--search-input::placeholder { padding: 0px 2.5rem; } .bx--search--xl .bx--search-close, .bx--search--xl ~ .bx--search-button, .bx--search--xl.bx--search--expandable, .bx--search--xl.bx--search--expandable .bx--search-magnifier { width: 3rem; height: 3rem; } .bx--search--xl.bx--search--expandable .bx--search-input::placeholder { padding: 0px 3rem; } .bx--search-close--hidden { opacity: 0; visibility: hidden; } .bx--search--xl.bx--skeleton .bx--search-input, .bx--search--lg.bx--skeleton .bx--search-input, .bx--search--sm.bx--skeleton .bx--search-input { position: relative; padding: 0px; border: none; background: rgb(229, 229, 229); box-shadow: none; pointer-events: none; width: 100%; } .bx--search--xl.bx--skeleton .bx--search-input:hover, .bx--search--xl.bx--skeleton .bx--search-input:focus, .bx--search--xl.bx--skeleton .bx--search-input:active, .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, .bx--search--sm.bx--skeleton .bx--search-input:hover, .bx--search--sm.bx--skeleton .bx--search-input:focus, .bx--search--sm.bx--skeleton .bx--search-input:active { border: none; cursor: default; outline: none; } .bx--search--xl.bx--skeleton .bx--search-input::before, .bx--search--lg.bx--skeleton .bx--search-input::before, .bx--search--sm.bx--skeleton .bx--search-input::before { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; animation: 3s ease-in-out 0s infinite normal none running skeleton; background: rgb(198, 198, 198); content: ""; will-change: transform-origin, transform, opacity; } @media (prefers-reduced-motion: reduce) { .bx--search--xl.bx--skeleton .bx--search-input::before, .bx--search--lg.bx--skeleton .bx--search-input::before, .bx--search--sm.bx--skeleton .bx--search-input::before { animation: auto ease 0s 1 normal none running none; } } .bx--search--xl.bx--skeleton .bx--search-input::placeholder, .bx--search--lg.bx--skeleton .bx--search-input::placeholder, .bx--search--sm.bx--skeleton .bx--search-input::placeholder { color: transparent; } .bx--search--expandable { transition: width 70ms cubic-bezier(0.2, 0, 0.38, 0.9); } .bx--search--expandable.bx--search--expanded { width: 100%; } .bx--search--expandable .bx--search-input { width: 0px; padding: 0px; transition: padding 70ms cubic-bezier(0.2, 0, 0.38, 0.9), width linear 70ms; } .bx--search--expandable .bx--search-input::placeholder { position: relative; opacity: 0; transition-duration: 70ms; transition-property: padding, opacity; transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9); } .bx--search--expandable.bx--search--expanded .bx--search-input { width: 100%; transition: padding 70ms cubic-bezier(0.2, 0, 0.38, 0.9); } .bx--search--expandable.bx--search--expanded .bx--search-input::placeholder { position: relative; padding: 0px; opacity: 1; } .bx--search--expandable .bx--search-magnifier { position: absolute; cursor: pointer; } .bx--search--expandable .bx--search-magnifier:hover { background-color: rgb(229, 229, 229); } .bx--search--expandable.bx--search--expanded .bx--search-magnifier { pointer-events: none; } .bx--search--expandable .bx--search-magnifier-icon { fill: rgb(22, 22, 22); } .bx--search--expandable.bx--search--expanded .bx--search-magnifier-icon { fill: rgb(82, 82, 82); } @media screen and (-ms-high-contrast: active), (forced-colors: active) { .bx--search-close svg, .bx--search-magnifier-icon { fill: buttontext; } } .bx--toolbar { display: flex; flex-flow: row; align-items: center; margin: 1rem 0px; } .bx--toolbar > div { margin: 0px 0.25rem; } .bx--toolbar .bx--search-input { height: 2rem; background-color: transparent; outline: none; } .bx--toolbar .bx--search-close { display: none; } .bx--toolbar .bx--overflow-menu__icon { fill: rgb(82, 82, 82); transition: fill 50ms cubic-bezier(0.2, 0, 0.38, 0.9); } .bx--toolbar .bx--search-magnifier { top: 0.5rem; left: 0.375rem; cursor: pointer; fill: rgb(82, 82, 82); transform: scale(1.15); transition: 175ms cubic-bezier(0.2, 0, 0.38, 0.9); } .bx--toolbar fieldset { padding: 0px; border: 0px; } .bx--toolbar .bx--toolbar-search--active { width: 15.625rem; } .bx--toolbar .bx--toolbar-search--active .bx--search-magnifier { top: 0.5625rem; transform: scale(1); } .bx--toolbar .bx--toolbar-search--active .bx--search-input { background-color: rgb(255, 255, 255); } .bx--toolbar .bx--toolbar-search--active .bx--search-close { display: block; } .bx--toolbar .bx--checkbox-label { margin-bottom: 0px; } .bx--toolbar .bx--overflow-menu--open > .bx--overflow-menu__icon { fill: rgb(15, 98, 254); } .bx--toolbar-search { width: 1.8rem; transition: 175ms cubic-bezier(0.2, 0, 0.38, 0.9); } .bx--toolbar-search__btn { position: absolute; top: 0px; left: 0px; width: 2rem; height: 2rem; border: 0px; background: transparent; } .bx--toolbar-search__btn:focus { outline: rgb(15, 98, 254) solid 1px; } @media screen and (prefers-contrast) { .bx--toolbar-search__btn:focus { outline-style: dotted; } } .bx--toolbar-filter-icon { padding-right: 0px; padding-left: 0px; } .bx--toolbar-menu__title { font-size: 0.75rem; line-height: 1.33333; letter-spacing: 0.32px; padding: 0.5rem 1.25rem; font-weight: 600; } .bx--toolbar-menu__option { padding: 0.5rem 1.25rem; } .bx--toolbar-menu__divider { width: 100%; border-width: 1px 0px 0px; border-right-style: initial; border-bottom-style: initial; border-left-style: initial; border-right-color: initial; border-bottom-color: initial; border-left-color: initial; border-image: initial; border-top-style: solid; border-top-color: rgb(224, 224, 224); } .bx--radio-button-group { border: none; } .bx--toolbar-search:not(.bx--toolbar-search--active) .bx--search-input { border-bottom: none; } .bx--select { box-sizing: border-box; padding: 0px; border: 0px; margin: 0px; font-family: inherit; font-size: 100%; vertical-align: baseline; position: relative; display: flex; width: 100%; flex-direction: column; align-items: flex-start; } .bx--select *, .bx--select ::before, .bx--select ::after { box-sizing: inherit; } .bx--select-input__wrapper { position: relative; display: flex; width: 100%; align-items: center; } .bx--select-input { font-size: 0.875rem; font-weight: 400; line-height: 1.28572; letter-spacing: 0.16px; outline: transparent solid 2px; outline-offset: -2px; display: block; width: 100%; height: 2.5rem; padding: 0px 3rem 0px 1rem; border-top: none; border-right: none; border-left: none; border-image: initial; border-bottom: 1px solid rgb(141, 141, 141); appearance: none; background-color: rgb(244, 244, 244); border-radius: 0px; color: rgb(22, 22, 22); cursor: pointer; font-family: inherit; opacity: 1; transition: outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9); } .bx--select-input:hover { background-color: rgb(229, 229, 229); } .bx--select-input:focus { outline: rgb(15, 98, 254) solid 2px; outline-offset: -2px; color: rgb(22, 22, 22); } @media screen and (prefers-contrast) { .bx--select-input:focus { outline-style: dotted; } } .bx--select-input:disabled, .bx--select-input:hover:disabled { border-bottom-color: rgb(244, 244, 244); background-color: rgb(244, 244, 244); color: rgb(198, 198, 198); cursor: not-allowed; } .bx--select-input--sm { height: 2rem; max-height: 2rem; } .bx--select-input--xl, .bx--select-input--lg { height: 3rem; max-height: 3rem; } .bx--select--disabled .bx--label, .bx--select--disabled .bx--form__helper-text { color: rgb(198, 198, 198); } .bx--select-input__wrapper[data-invalid] .bx--select-input, .bx--select--warning .bx--select-input { padding-right: 4.5rem; } .bx--select-input:disabled ~ .bx--select__arrow { fill: rgb(198, 198, 198); } .bx--select--light .bx--select-input { background-color: rgb(255, 255, 255); } .bx--select--light .bx--select-input:hover { background-color: rgb(229, 229, 229); } .bx--select--light .bx--select-input:disabled, .bx--select--light .bx--select-input:hover:disabled { background-color: rgb(255, 255, 255); color: rgb(198, 198, 198); cursor: not-allowed; } .bx--select__arrow { position: absolute; top: 0px; right: 1rem; height: 100%; fill: rgb(22, 22, 22); pointer-events: none; } @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) { .bx--select__arrow path { fill: buttontext; } } .bx--select__invalid-icon { position: absolute; right: 2.5rem; } .bx--select-input__wrapper[data-invalid] .bx--select-input ~ .bx--select__invalid-icon { fill: rgb(218, 30, 40); } .bx--select__invalid-icon--warning { fill: rgb(241, 194, 27); } .bx--select__invalid-icon--warning path[fill] { fill: rgb(0, 0, 0); opacity: 1; } optgroup.bx--select-optgroup, .bx--select-option { background-color: rgb(229, 229, 229); color: rgb(22, 22, 22); } optgroup.bx--select-optgroup:disabled, .bx--select-option:disabled { color: rgb(198, 198, 198); } .bx--select--inline { display: flex; flex-direction: row; align-items: center; } .bx--select--inline.bx--select--invalid .bx--label, .bx--select--inline.bx--select--invalid .bx--form__helper-text { align-self: flex-start; margin-top: 0.8125rem; } .bx--select--inline .bx--form__helper-text { margin-bottom: 0px; margin-left: 0.5rem; } .bx--select--inline .bx--label { margin: 0px 0.5rem 0px 0px; white-space: nowrap; } .bx--select--inline .bx--select-input { width: auto; padding-right: 2rem; padding-left: 0.5rem; border-bottom: none; background-color: transparent; color: rgb(22, 22, 22); } .bx--select--inline .bx--select-input:focus, .bx--select--inline .bx--select-input:focus option, .bx--select--inline .bx--select-input:focus optgroup { background-color: rgb(255, 255, 255); } .bx--select--inline .bx--select-input[disabled], .bx--select--inline .bx--select-input[disabled]:hover { background-color: rgb(244, 244, 244); } .bx--select--inline .bx--select__arrow { right: 0.5rem; } .bx--select--inline.bx--select--invalid .bx--select-input { padding-right: 3.5rem; } .bx--select--inline.bx--select--invalid .bx--select-input ~ .bx--select__invalid-icon { right: 2rem; } .bx--select--inline .bx--select-input:disabled { color: rgb(198, 198, 198); cursor: not-allowed; } .bx--select--inline .bx--select-input:disabled ~ * { cursor: not-allowed; } .bx--select.bx--skeleton { position: relative; padding: 0px; border: none; background: rgb(229, 229, 229); box-shadow: none; pointer-events: none; width: 100%; height: 2.5rem; } .bx--select.bx--skeleton:hover, .bx--select.bx--skeleton:focus, .bx--select.bx--skeleton:active { border: none; cursor: default; outline: none; } .bx--select.bx--skeleton::before { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; animation: 3s ease-in-out 0s infinite normal none running skeleton; background: rgb(198, 198, 198); content: ""; will-change: transform-origin, transform, opacity; } @media (prefers-reduced-motion: reduce) { .bx--select.bx--skeleton::before { animation: auto ease 0s 1 normal none running none; } } .bx--select.bx--skeleton .bx--select-input { display: none; } @media screen and (-ms-high-contrast: active), (forced-colors: active) { .bx--select__arrow { fill: buttontext; } } .bx--text-input { box-sizing: border-box; margin: 0px; font-family: inherit; vertical-align: baseline; font-size: 0.875rem; font-weight: 400; line-height: 1.28572; letter-spacing: 0.16px; outline: transparent solid 2px; outline-offset: -2px; width: 100%; height: 2.5rem; padding: 0px 1rem; border-top: none; border-right: none; border-left: none; border-image: initial; border-bottom: 1px solid rgb(141, 141, 141); background-color: rgb(244, 244, 244); color: rgb(22, 22, 22); transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9); } .bx--text-input *, .bx--text-input ::before, .bx--text-input ::after { box-sizing: inherit; } .bx--text-input:focus, .bx--text-input:active { outline: rgb(15, 98, 254) solid 2px; outline-offset: -2px; } @media screen and (prefers-contrast) { .bx--text-input:focus, .bx--text-input:active { outline-style: dotted; } } .bx--text-input-wrapper svg[hidden] { display: none; } .bx--text-input--xl, .bx--text-input--lg { height: 3rem; } .bx--text-input--sm { height: 2rem; } .bx--password-input { padding-right: 2.5rem; } .bx--text-input--sm.bx--password-input { padding-right: 2rem; } .bx--text-input--lg.bx--password-input { padding-right: 3rem; } .bx--text-input::placeholder { color: rgb(111, 111, 111); opacity: 1; } .bx--text-input--light { background-color: rgb(255, 255, 255); } .bx--text-input__field-wrapper { position: relative; display: flex; width: 100%; } .bx--text-input__invalid-icon, .bx--text-input__readonly-icon { position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); } .bx--text-input__invalid-icon { fill: rgb(218, 30, 40); } .bx--text-input__invalid-icon--warning { fill: rgb(241, 194, 27); } .bx--text-input__invalid-icon--warning path:first-of-type { fill: rgb(0, 0, 0); opacity: 1; } .bx--text-input--password__visibility { position: relative; display: inline-flex; overflow: visible; align-items: center; cursor: pointer; } .bx--text-input--password__visibility:focus { outline: rgb(15, 98, 254) solid 1px; } @media screen and (prefers-contrast) { .bx--text-input--password__visibility:focus { outline-style: dotted; } } .bx--text-input--password__visibility:focus { outline: transparent solid 1px; } .bx--text-input--password__visibility:focus svg { outline: rgb(15, 98, 254) solid 1px; } @media screen and (prefers-contrast) { .bx--text-input--password__visibility:focus svg { outline-style: dotted; } } .bx--text-input--password__visibility::before, .bx--text-input--password__visibility::after, .bx--text-input--password__visibility .bx--assistive-text, .bx--text-input--password__visibility + .bx--assistive-text { position: absolute; z-index: 6000; display: flex; align-items: center; opacity: 0; pointer-events: none; } @media (-ms-high-contrast: none), (-ms-high-contrast: active) { .bx--text-input--password__visibility::before, .bx--text-input--password__visibility::after, .bx--text-input--password__visibility .bx--assistive-text, .bx--text-input--password__visibility + .bx--assistive-text { display: inline-block; } } .bx--text-input--password__visibility::before, .bx--text-input--password__visibility::after { transition: opacity 70ms cubic-bezier(0.2, 0, 0.38, 0.9); } @media screen and (prefers-reduced-motion: reduce) { .bx--text-input--password__visibility::before, .bx--text-input--password__visibility::after { transition: none; } } .bx--text-input--password__visibility.bx--tooltip--a11y::before, .bx--text-input--password__visibility.bx--tooltip--a11y::after { transition: none; } .bx--text-input--password__visibility::before { width: 0px; height: 0px; border-style: solid; content: ""; } .bx--text-input--password__visibility .bx--assistive-text, .bx--text-input--password__visibility + .bx--assistive-text { box-sizing: content-box; color: inherit; opacity: 1; white-space: normal; word-break: break-word; } .bx--text-input--password__visibility::after, .bx--text-input--password__visibility .bx--assistive-text, .bx--text-input--password__visibility + .bx--assistive-text { box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 6px; z-index: 6000; width: max-content; min-width: 1.5rem; max-width: 13rem; height: auto; padding: 0.1875rem 1rem; background-color: rgb(57, 57, 57); border-radius: 0.125rem; color: rgb(255, 255, 255); text-align: left; transform: translate(-50%); font-size: 0.875rem; font-weight: 400; line-height: 1.28572; letter-spacing: 0.16px; } @media (-ms-high-contrast: none), (-ms-high-contrast: active) { .bx--text-input--password__visibility::after, .bx--text-input--password__visibility .bx--assistive-text, .bx--text-input--password__visibility + .bx--assistive-text { width: auto; } } @supports (-ms-accelerator: true) { .bx--text-input--password__visibility::after, .bx--text-input--password__visibility .bx--assistive-text, .bx--text-input--password__visibility + .bx--assistive-text { width: auto; } } @supports (-ms-ime-align: auto) { .bx--text-input--password__visibility::after, .bx--text-input--password__visibility .bx--assistive-text, .bx--text-input--password__visibility + .bx--assistive-text { width: auto; } } @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) { .bx--text-input--password__visibility::after, .bx--text-input--password__visibility .bx--assistive-text, .bx--text-input--password__visibility + .bx--assistive-text { border: 1px solid transparent; } } .bx--text-input--password__visibility::after { content: attr(aria-label); } .bx--text-input--password__visibility.bx--tooltip--a11y::after { content: none; } .bx--text-input--password__visibility.bx--tooltip--visible::before, .bx--text-input--password__visibility.bx--tooltip--visible::after, .bx--text-input--password__visibility:hover::before, .bx--text-input--password__visibility:hover::after, .bx--text-input--password__visibility:focus::before, .bx--text-input--password__visibility:focus::after { opacity: 1; } @keyframes tooltip-fade { 0% { opacity: 0; } 100% { opacity: 1; } } .bx--text-input--password__visibility.bx--tooltip--visible .bx--assistive-text, .bx--text-input--password__visibility.bx--tooltip--visible + .bx--assistive-text, .bx--text-input--password__visibility:hover .bx--assistive-text, .bx--text-input--password__visibility:hover + .bx--assistive-text, .bx--text-input--password__visibility:focus .bx--assistive-text, .bx--text-input--password__visibility:focus + .bx--assistive-text { overflow: visible; margin: auto; clip: auto; } .bx--text-input--password__visibility.bx--tooltip--visible .bx--assistive-text, .bx--text-input--password__visibility.bx--tooltip--visible + .bx--assistive-text, .bx--text-input--password__visibility.bx--tooltip--visible.bx--tooltip--a11y::before, .bx--text-input--password__visibility:hover .bx--assistive-text, .bx--text-input--password__visibility:hover + .bx--assistive-text, .bx--text-input--password__visibility:hover.bx--tooltip--a11y::before, .bx--text-input--password__visibility:focus .bx--assistive-text, .bx--text-input--password__visibility:focus + .bx--assistive-text, .bx--text-input--password__visibility:focus.bx--tooltip--a11y::before { animation: 70ms cubic-bezier(0.2, 0, 0.38, 0.9) 0s 1 normal none running tooltip-fade; } .bx--text-input--password__visibility.bx--tooltip--hidden .bx--assistive-text, .bx--text-input--password__visibility.bx--tooltip--hidden + .bx--assistive-text { overflow: hidden; margin: -1px; clip: rect(0px, 0px, 0px, 0px); } .bx--text-input--password__visibility.bx--tooltip--hidden.bx--tooltip--a11y::before { animation: auto ease 0s 1 normal none running none; opacity: 0; } .bx--text-input--password__visibility .bx--assistive-text::after { position: absolute; display: block; content: ""; left: 0px; width: 100%; height: 0.75rem; top: -0.75rem; } .bx--text-input--password__visibility::before, .bx--text-input--password__visibility::after, .bx--text-input--password__visibility .bx--assistive-text, .bx--text-input--password__visibility + .bx--assistive-text { bottom: 0px; left: 50%; } .bx--text-input--password__visibility::before { bottom: -0.5rem; border-width: 0px 0.25rem 0.3125rem; border-color: transparent transparent rgb(57, 57, 57); transform: translate(-50%, 100%); } .bx--text-input--password__visibility::after, .bx--text-input--password__visibility .bx--assistive-text, .bx--text-input--password__visibility + .bx--assistive-text { bottom: -0.8125rem; transform: translate(-50%, 100%); } .bx--text-input--password__visibility, .bx--btn.bx--text-input--password__visibility__toggle.bx--tooltip__trigger { outline: transparent solid 2px; outline-offset: -2px; position: absolute; right: 0px; display: flex; width: 2.5rem; height: 100%; min-height: auto; align-items: center; justify-content: center; padding: 0px; border: 0px; background: none; cursor: pointer; transition: outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9); } .bx--text-input--sm + .bx--btn.bx--text-input--password__visibility__toggle.bx--tooltip__trigger { width: 2rem; } .bx--text-input--lg + .bx--btn.bx--text-input--password__visibility__toggle.bx--tooltip__trigger { width: 3rem; } .bx--btn.bx--text-input--password__visibility__toggle.bx--tooltip__trigger svg { fill: rgb(82, 82, 82); transition: fill 70ms cubic-bezier(0.2, 0, 0.38, 0.9); } @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) { .bx--btn.bx--text-input--password__visibility__toggle.bx--tooltip__trigger svg { fill: buttontext; } } .bx--btn.bx--text-input--password__visibility__toggle.bx--tooltip__trigger:focus { outline: rgb(15, 98, 254) solid 2px; outline-offset: -2px; } @media screen and (prefers-contrast) { .bx--btn.bx--text-input--password__visibility__toggle.bx--tooltip__trigger:focus { outline-style: dotted; } } .bx--btn.bx--text-input--password__visibility__toggle.bx--tooltip__trigger:hover svg, .bx--btn.bx--text-input--password__visibility__toggle.bx--tooltip__trigger:focus svg { fill: rgb(22, 22, 22); } .bx--text-input--invalid, .bx--text-input--warning, .bx--text-input-wrapper--readonly .bx--text-input { padding-right: 2.5rem; } .bx--text-input--invalid.bx--password-input { padding-right: 4rem; } .bx--text-input--invalid + .bx--text-input--password__visibility, .bx--text-input--invalid + .bx--text-input--password__visibility__toggle { right: 1rem; } .bx--password-input-wrapper .bx--text-input__invalid-icon { right: 2.5rem; } .bx--text-input:disabled + .bx--text-input--password__visibility svg, .bx--text-input:disabled + .bx--text-input--password__visibility__toggle.bx--tooltip__trigger svg { cursor: not-allowed; fill: rgb(198, 198, 198); } .bx--text-input:disabled + .bx--text-input--password__visibility svg:hover, .bx--text-input:disabled + .bx--text-input--password__visibility__toggle.bx--tooltip__trigger svg:hover { fill: rgb(198, 198, 198); } .bx--text-input:disabled { outline: transparent solid 2px; outline-offset: -2px; border-bottom: 1px solid transparent; background-color: rgb(244, 244, 244); color: rgb(198, 198, 198); cursor: not-allowed; -webkit-text-fill-color: rgb(198, 198, 198); } .bx--text-input--light:disabled { background-color: rgb(255, 255, 255); } .bx--text-input:disabled::placeholder { color: rgb(198, 198, 198); opacity: 1; } .bx--text-input--invalid { outline: rgb(218, 30, 40) solid 2px; outline-offset: -2px; box-shadow: none; } @media screen and (prefers-contrast) { .bx--text-input--invalid { outline-style: dotted; } } .bx--text-input--invalid .bx--text-input--password__visibility, .bx--text-input--invalid .bx--text-input--password__visibility__toggle { right: 2.5rem; } .bx--skeleton.bx--text-input { position: relative; padding: 0px; border: none; background: rgb(229, 229, 229); box-shadow: none; pointer-events: none; } .bx--skeleton.bx--text-input:hover, .bx--skeleton.bx--text-input:focus, .bx--skeleton.bx--text-input:active { border: none; cursor: default; outline: none; } .bx--skeleton.bx--text-input::before { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; animation: 3s ease-in-out 0s infinite normal none running skeleton; background: rgb(198, 198, 198); content: ""; will-change: transform-origin, transform, opacity; } @media (prefers-reduced-motion: reduce) { .bx--skeleton.bx--text-input::before { animation: auto ease 0s 1 normal none running none; } } .bx--form--fluid .bx--text-input-wrapper { position: relative; background: rgb(244, 244, 244); transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9); } .bx--form--fluid .bx--label { position: absolute; z-index: 1; top: 0.8125rem; left: 1rem; margin: 0px; } .bx--form--fluid .bx--form__helper-text { display: none; } .bx--form--fluid .bx--text-input { min-height: 4rem; padding: 2rem 1rem 0.8125rem; } .bx--text-input__divider, .bx--form--fluid .bx--text-input__divider { display: none; } .bx--form--fluid .bx--text-input--invalid, .bx--form--fluid .bx--text-input--warn { border-bottom: none; } .bx--form--fluid .bx--text-input--invalid + .bx--text-input__divider, .bx--form--fluid .bx--text-input--warn + .bx--text-input__divider { display: block; border-style: solid solid none; border-top-color: rgb(224, 224, 224); border-right-color: rgb(224, 224, 224); border-left-color: rgb(224, 224, 224); border-bottom-width: initial; border-bottom-color: initial; margin: 0px 1rem; } .bx--form--fluid .bx--text-input__invalid-icon { top: 5rem; } .bx--form--fluid .bx--text-input-wrapper--light { background: rgb(255, 255, 255); } .bx--form--fluid .bx--text-input__field-wrapper[data-invalid] > .bx--text-input--invalid { outline: transparent solid 2px; outline-offset: -2px; } .bx--form--fluid .bx--text-input__field-wrapper[data-invalid]:not(:focus) { outline: rgb(218, 30, 40) solid 2px; outline-offset: -2px; } @media screen and (prefers-contrast) { .bx--form--fluid .bx--text-input__field-wrapper[data-invalid]:not(:focus) { outline-style: dotted; } } .bx--form--fluid .bx--text-input__field-wrapper[data-invalid] > .bx--text-input--invalid:focus { outline: rgb(15, 98, 254) solid 2px; outline-offset: -2px; } @media screen and (prefers-contrast) { .bx--form--fluid .bx--text-input__field-wrapper[data-invalid] > .bx--text-input--invalid:focus { outline-style: dotted; } } .bx--text-input-wrapper.bx--text-input-wrapper--inline { flex-flow: wrap; } .bx--text-input-wrapper .bx--label--inline { flex: 1 1 0%; margin: 0.8125rem 0px 0px; overflow-wrap: break-word; word-break: break-word; } .bx--text-input-wrapper .bx--label--inline--sm { margin-top: 0.5625rem; } .bx--text-input-wrapper .bx--label--inline--xl, .bx--text-input-wrapper .bx--label--inline--lg { margin-top: 1.0625rem; } .bx--text-input__label-helper-wrapper { max-width: 8rem; flex: 2 1 0%; flex-direction: column; margin-right: 1.5rem; overflow-wrap: break-word; } .bx--text-input-wrapper .bx--form__helper-text--inline { margin-top: 0.125rem; } .bx--text-input__field-outer-wrapper { display: flex; width: 100%; flex: 1 1 auto; flex-direction: column; align-items: flex-start; } .bx--text-input__field-outer-wrapper--inline { flex: 8 1 0%; flex-direction: column; } .bx--form--fluid .bx--text-input-wrapper--readonly, .bx--text-input-wrapper--readonly .bx--text-input { background: transparent; } @media screen and (-ms-high-contrast: active), (forced-colors: active) { .bx--text-input--password__visibility, .bx--btn.bx--btn--icon-only.bx--text-input--password__visibility__toggle.bx--tooltip__trigger svg, .bx--btn.bx--btn--icon-only.bx--text-input--password__visibility__toggle.bx--tooltip__trigger:hover svg { fill: buttontext; } } .bx--data-table-container + .bx--pagination { border-top: 0px; } .bx--pagination { box-sizing: border-box; padding: 0px; border-width: 1px 0px 0px; border-right-style: initial; border-bottom-style: initial; border-left-style: initial; border-right-color: initial; border-bottom-color: initial; border-left-color: initial; border-image: initial; margin: 0px; font-family: inherit; vertical-align: baseline; font-size: 0.875rem; font-weight: 400; line-height: 1.28572; letter-spacing: 0.16px; display: flex; width: calc(100% - 1px); min-height: 2.5rem; align-items: center; justify-content: space-between; border-top-style: solid; border-top-color: rgb(224, 224, 224); background-color: rgb(244, 244, 244); overflow-x: auto; } .bx--pagination *, .bx--pagination ::before, .bx--pagination ::after { box-sizing: inherit; } @media (min-width: 42rem) { .bx--pagination { overflow: initial; } .bx--pagination .bx--pagination__control-buttons { display: flex; } } @media (max-width: 41.98rem) { .bx--pagination .bx--pagination__left > *, .bx--pagination .bx--pagination__right > * { display: none; } .bx--pagination .bx--pagination__items-count { display: initial; } .bx--pagination .bx--pagination__control-buttons { display: flex; } } .bx--pagination--sm { min-height: 2rem; } .bx--pagination--lg { min-height: 3rem; } .bx--pagination .bx--select { height: 100%; align-items: center; } .bx--pagination .bx--select-input--inline__wrapper { display: flex; height: 100%; } .bx--pagination .bx--select-input { font-size: 0.875rem; font-weight: 400; letter-spacing: 0.16px; width: auto; min-width: auto; height: 100%; padding: 0px 2.25rem 0px 1rem; background-color: rgb(244, 244, 244); line-height: 2.5rem; } .bx--pagination--sm .bx--select-input { line-height: 2rem; } .bx--pagination--lg .bx--select-input { line-height: 3rem; } .bx--pagination .bx--select-input:hover { background: rgb(229, 229, 229); } .bx--pagination .bx--select--inline .bx--select-input:focus, .bx--pagination .bx--select--inline .bx--select-input:focus option, .bx--pagination .bx--select--inline .bx--select-input:focus optgroup { background-color: rgb(244, 244, 244); } .bx--pagination .bx--select__arrow { top: 50%; transform: translate(-0.5rem, -50%); } .bx--pagination .bx--select__item-count .bx--select-input { border-right: 0.0625rem solid rgb(224, 224, 224); } .bx--pagination .bx--select__page-number .bx--select-input { border-left: 1px solid rgb(224, 224, 224); } .bx--pagination__left, .bx--pagination__right { display: flex; height: 100%; align-items: center; } .bx--pagination__left > .bx--form-item, .bx--pagination__right > .bx--form-item { height: 100%; } .bx--pagination__left .bx--pagination__text, .bx--pagination__right .bx--pagination__text { white-space: nowrap; } .bx--pagination__left .bx--pagination__text { margin-right: 0.0625rem; } .bx--pagination__right .bx--pagination__text { margin-right: 1rem; margin-left: 0.0625rem; } .bx--pagination__left { padding: 0px 1rem 0px 0px; } @media (min-width: 42rem) { .bx--pagination__left { padding: 0px 1rem; } } @media (min-width: 42rem) { .bx--pagination__text { display: inline-block; } } span.bx--pagination__text { margin-left: 1rem; color: rgb(82, 82, 82); } .bx--pagination__button, .bx--btn--ghost.bx--pagination__button { box-sizing: border-box; padding: 0px; font-family: inherit; font-size: 100%; vertical-align: baseline; display: flex; width: 2.5rem; height: 2.5rem; min-height: 2rem; align-items: center; justify-content: center; border-top: none; border-right: none; border-bottom: none; border-image: initial; border-left: 1px solid rgb(224, 224, 224); margin: 0px; background: none; cursor: pointer; fill: rgb(22, 22, 22); transition: outline 0.11s cubic-bezier(0.2, 0, 0.38, 0.9), background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9); } .bx--pagination__button *, .bx--pagination__button ::before, .bx--pagination__button ::after, .bx--btn--ghost.bx--pagination__button *, .bx--btn--ghost.bx--pagination__button ::before, .bx--btn--ghost.bx--pagination__button ::after { box-sizing: inherit; } .bx--pagination--sm .bx--pagination__button, .bx--pagination--sm .bx--btn--ghost.bx--pagination__button { width: 2rem; height: 2rem; } .bx--pagination--lg .bx--pagination__button, .bx--pagination--lg .bx--btn--ghost.bx--pagination__button { width: 3rem; height: 3rem; } .bx--pagination__button:focus, .bx--btn--ghost:focus.bx--pagination__button { outline: rgb(15, 98, 254) solid 2px; outline-offset: -2px; border-left: 0px; } @media screen and (prefers-contrast) { .bx--pagination__button:focus, .bx--btn--ghost:focus.bx--pagination__button { outline-style: dotted; } } .bx--pagination__button:hover, .bx--btn--ghost:hover.bx--pagination__button { background: rgb(229, 229, 229); } .bx--pagination__button--no-index, .bx--btn--ghost.bx--pagination__button--no-index { cursor: not-allowed; fill: rgb(198, 198, 198); } .bx--pagination__button:disabled:hover, .bx--pagination__button--no-index:hover, .bx--btn--ghost:disabled:hover.bx--pagination__button, .bx--btn--ghost:hover.bx--pagination__button--no-index { border-color: rgb(224, 224, 224); background: rgb(244, 244, 244); cursor: not-allowed; fill: rgb(198, 198, 198); } .bx--pagination.bx--skeleton .bx--skeleton__text { margin-right: 1rem; margin-bottom: 0px; } @media screen and (-ms-high-contrast: active), (forced-colors: active) { .bx--pagination__button, .bx--btn--ghost.bx--pagination__button { outline: transparent solid 1px; } } .epochHistoryTableContainer { width: 100%; background-color: var(--brand-white); transform: translate3d(0px, -0.05rem, 0px); border-radius: var(--border-radius); box-shadow: var(--box-shadow); margin-bottom: calc(var(--spacev) / 4); } .cellContainer { height: auto; } .historyTableTitle { font-weight: 700; width: 100%; margin-bottom: calc(var(--spacer) / 2); } .epochHistoryTableContainer .tableCustomHeader { width: 100%; display: flex; justify-content: flex-end; padding: calc(var(--spacer) / 6) calc(var(--spacer) / 3); margin: 0px; } .tableBody { max-height: 50vh; overflow-y: scroll; } .tableCustomHeader > div { padding: calc(var(--spacer) / 6) 0 !important; } .tableCustomHeader { display: flex; justify-content: space-between; flex-direction: column-reverse; padding: 0 calc(var(--spacer) / 3); margin: 0px; } .headerContainer { display: flex; justify-content: flex-start; align-items: center; white-space: nowrap; } .bx--tooltip__label { text-align: center; display: flex; background-color: transparent !important; width: 20px !important; } .title { display: flex; justify-content: center; align-items: center; } tr { background-color: var(--brand-white); } .cellContainer { padding: calc(var(--spacer) / 4); height: 54px; display: flex; align-items: center; } .customTable { max-width: 100%; background-color: var(--brand-white) !important; } td { border-top: 0px !important; background-color: transparent !important; } .customTable .bx--data-table td, .customTable .bx--data-table tbody th { padding: 0px !important; } .bx--data-table tbody tr:hover { background: rgb(229, 229, 229) !important; } .bx--data-table tbody tr:hover .cellContainer .container { border: 1px solid var(--brand-grey-darker); } button[class*="table-sort"] { background-color: var(--brand-grey-dimmed) !important; } button[class*="table-sort"] { background-color: var(--brand-grey-dimmed); } div [class*="pagination"] { background-color: var(--brand-white) !important; } div [class*="data-table-header"] { background-color: var(--brand-white) !important; } div [class*="pagination__button"] { border-left: 1px solid var(--brand-grey-dimmed) !important; } [class*="table-toolbar"] { z-index: 0 !important; position: fixed !important; } .tableContainer .bx--data-table { margin-top: calc(var(--spacer) / 2); } .tableTabs .bx--tabs .bx--tabs-trigger { display: none; } .tableTabs .bx--tabs .bx--tabs__nav { display: flex; justify-content: space-around; } .tableTabs .bx--tabs .bx--tabs__nav .bx--tabs__nav-item { flex: 1 1 0%; padding: 1rem; border: 1px solid var(--brand-grey-dimmed); cursor: pointer; } .tableTabs .bx--tabs .bx--tabs__nav .bx--tabs__nav-item:first-child { border-right: none; } .tableTabs .bx--tabs .bx--tabs__nav .bx--tabs__nav-item:last-child { border-left: none; } .tableTabs .bx--tabs .bx--tabs__nav .bx--tabs__nav-item a { text-decoration: none; } .tableTabs .bx--tabs .bx--tabs__nav .bx--tabs__nav-item.bx--tabs__nav-item--selected { background: rgb(244, 244, 244); } @media (min-width: 640px) { .tableCustomHeader { flex-direction: row; } .tableCustomHeader > div { padding: 0px; } .tableActionsContainer { justify-content: flex-end; } .datasetsWithAllocationsInputContainer { width: auto; } } .countdown.svelte-14eh8v8 { height: fit-content; font-size: var(--font-size-h3); } .countdownTitle.svelte-14eh8v8 { font-size: var(--font-size-large); margin-bottom: calc(var(--spacer) / 6); } .countdownContent.svelte-14eh8v8 { display: flex; } .item.svelte-14eh8v8 { display: flex; flex-direction: column; margin: 0 calc(var(--spacer) / 6); } .itemTitle.svelte-14eh8v8 { font-size: var(--font-size-base); } .itemValue.svelte-14eh8v8 { font-weight: 700; font-size: var(--font-size-h3); margin-bottom: calc(var(--spacer) / 10); } .container.svelte-lkhkyb { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: calc(-300px + 100vh); padding-top: calc(var(--spacer) * 2); } .rewards.svelte-lkhkyb { width: 100%; } .estimatedRewardsContainer.svelte-lkhkyb { width: 100%; font-size: var(--font-size-large); } .loading.svelte-lkhkyb { font-size: var(--font-size-normal); color: var(--brand-grey-light); margin: calc(var(--spacer)) 0; } .alignContentCenter.svelte-lkhkyb { justify-content: center; } @media only screen and (min-width: 640px) { .estimatedRewardsContainer.svelte-lkhkyb { margin: var(--spacer) 0; } .container.svelte-lkhkyb { min-height: calc(-200px + 100vh); } } .container.svelte-u32dkw { display: flex; flex-direction: column; align-items: center; grid-column: 1 / 3; width: 100%; } .veOcean-info.svelte-u32dkw { display: flex; justify-content: space-evenly; align-items: center; width: 100%; } .container.svelte-8hx1p4.svelte-8hx1p4 { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; grid-column: 1 / 3; width: 100%; } .item.svelte-8hx1p4.svelte-8hx1p4 { width: 100%; margin-top: calc(var(--spacer) / 2); display: flex; justify-content: center; } .item.svelte-8hx1p4 p.svelte-8hx1p4 { font-size: var(--font-size-small); } .item.svelte-8hx1p4.svelte-8hx1p4:last-child { margin-top: calc(var(--spacer) / 6); margin-bottom: 0px; } .container.svelte-nvyct1 { display: flex; flex-direction: column; align-items: flex-start; grid-column: 1 / 3; width: 100%; } .veOcean-info.svelte-nvyct1 { display: flex; justify-content: center; align-items: center; gap: calc(var(--spacer) * 4); min-height: var(--spacer); margin-bottom: calc(var(--spacer) / 4); width: 100%; } @media (min-width: 640px) { .container.svelte-nvyct1 { grid-column: 1 / 3; } .veOcean-info.svelte-nvyct1 { margin: 0px; } } .container.svelte-2mdvgn { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacer); padding-top: var(--spacer); width: 100%; } .loading.svelte-2mdvgn { display: flex; justify-content: center; align-items: center; color: var(--brand-grey-light); height: calc(-115px + 100vh); width: 100%; } .alignContentCenter.svelte-2mdvgn { justify-content: center; } .title.svelte-2mdvgn { width: 100%; margin-top: calc(var(--spacer) * 2); margin-bottom: calc(var(--spacer) / 2); } .message.svelte-2mdvgn { width: 100%; } .dismissAllowanceButton { margin-bottom: calc(var(--spacer)/3) !important; } @media (min-width: 640px) { .container.svelte-2mdvgn { padding-top: var(--spacer); gap: var(--spacer); } } div.modal.svelte-m48ug2 { position: fixed; z-index: 300; top: calc(100vh - (100vh + var(--spacer) / 4)); bottom: 0px; width: 100vw; height: calc(100vh + var(--spacer) / 4); background-color: rgba(191, 191, 191, 0.4); display: flex; justify-content: center; align-items: center; } div.content-wrapper.svelte-m48ug2 { width: 80vw; border-radius: 0.3rem; background-color: rgb(255, 255, 255); padding-right: ; padding-bottom: ; padding-left: ; padding-top: calc(var(--spacer) / 2); border: 2px solid var(--brand-grey-dimmed); box-shadow: var(--box-shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; } .text.svelte-m48ug2 { font-weight: 700; text-transform: uppercase; margin-bottom: 0px; } .buttons-container.svelte-m48ug2 { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: var(--spacer); } .close-button.svelte-m48ug2 { width: 100%; display: flex; justify-content: right; align-items: center; margin-bottom: calc(var(--spacer) / 2); } @media (min-width: 640px) { div.modal.svelte-m48ug2 { top: 0px; } div.content-wrapper.svelte-m48ug2 { width: 50vw; max-width: 500px; padding: var(--spacer) var(--spacer); } } @font-face { font-family: "Sharp Sans Display"; src: url("") format("woff2"), url("") format("woff"); font-weight: 600; font-style: normal; font-stretch: normal; } @font-face { font-family: "Sharp Sans"; src: url("") format("woff2"), url("") format("woff"); font-weight: 500; font-style: normal; font-stretch: normal; } @font-face { font-family: "Sharp Sans"; src: url("") format("woff2"), url("") format("woff"); font-weight: 600; font-style: normal; font-stretch: normal; } footer.svelte-dapo3m { margin-top: calc(var(--spacer)*2); } nav.svelte-dapo3m { display: flex; justify-content: center; } ul.svelte-dapo3m { position: relative; padding: calc(var(--spacer)/3) 0; margin: 0px; justify-content: center; align-items: center; list-style: none; background-image: ; background-position-x: ; background-position-y: ; background-repeat: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-size: contain; display: flex; flex-wrap: wrap; } li.svelte-dapo3m { position: relative; display: flex; justify-content: center; align-items: center; } nav a { display: flex; height: 100%; align-items: center; padding: 0px 0.4rem 1rem; color: var(--brand-grey-light); font-weight: 700; font-size: var(--font-size-base); letter-spacing: 0.1em; text-decoration: none; transition: color 0.2s linear; } li.svelte-dapo3m > a:hover { color: var(--accent-color); } .container.svelte-12hl063 { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: calc(var(--spacer)*2); text-align: left; } .description.svelte-12hl063 { margin-bottom: calc(var(--spacer)); } .bx--text-truncate--end { display: inline-block; overflow: hidden; width: 100%; text-overflow: ellipsis; white-space: nowrap; } .bx--text-truncate--front { display: inline-block; overflow: hidden; width: 100%; direction: rtl; text-overflow: ellipsis; white-space: nowrap; } @keyframes skeleton { 0% { opacity: 0.3; transform: scaleX(0); transform-origin: left center; } 20% { opacity: 1; transform: scaleX(1); transform-origin: left center; } 28% { transform: scaleX(1); transform-origin: right center; } 51% { transform: scaleX(0); transform-origin: right center; } 58% { transform: scaleX(0); transform-origin: right center; } 82% { transform: scaleX(1); transform-origin: right center; } 83% { transform: scaleX(1); transform-origin: left center; } 96% { transform: scaleX(0); transform-origin: left center; } 100% { opacity: 0.3; transform: scaleX(0); transform-origin: left center; } } .bx--toast-notification { box-sizing: border-box; padding: 0px 0px 0px 1rem; border: 0px; margin: 0.5rem 1rem 0.5rem 0px; font-family: inherit; font-size: 100%; vertical-align: baseline; display: flex; width: 18rem; height: auto; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px; color: rgb(255, 255, 255); } .bx--toast-notification *, .bx--toast-notification ::before, .bx--toast-notification ::after { box-sizing: inherit; } .bx--toast-notification:first-child { margin-top: 1rem; } @media (min-width: 99rem) { .bx--toast-notification { width: 22rem; } } .bx--toast-notification:not(.bx--toast-notification--low-contrast) a { color: rgb(120, 169, 255); } .bx--toast-notification a { text-decoration: none; } .bx--toast-notification a:hover { text-decoration: underline; } .bx--toast-notification a:focus { outline: rgb(120, 169, 255) solid 1px; } .bx--toast-notification.bx--toast-notification--low-contrast a:focus { outline: rgb(15, 98, 254) solid 1px; } @media screen and (prefers-contrast) { .bx--toast-notification.bx--toast-notification--low-contrast a:focus { outline-style: dotted; } } .bx--toast-notification--low-contrast { color: rgb(22, 22, 22); } .bx--toast-notification--error { border-left: 3px solid rgb(250, 77, 86); background: rgb(57, 57, 57); } .bx--toast-notification--error .bx--inline-notification__icon, .bx--toast-notification--error .bx--toast-notification__icon, .bx--toast-notification--error .bx--actionable-notification__icon { fill: rgb(250, 77, 86); } .bx--toast-notification--low-contrast.bx--toast-notification--error { border-left: 3px solid rgb(218, 30, 40); background: rgb(255, 241, 241); } .bx--toast-notification--low-contrast.bx--toast-notification--error .bx--inline-notification__icon, .bx--toast-notification--low-contrast.bx--toast-notification--error .bx--toast-notification__icon, .bx--toast-notification--low-contrast.bx--toast-notification--error .bx--actionable-notification__icon { fill: rgb(218, 30, 40); } .bx--toast-notification--success { border-left: 3px solid rgb(66, 190, 101); background: rgb(57, 57, 57); } .bx--toast-notification--success .bx--inline-notification__icon, .bx--toast-notification--success .bx--toast-notification__icon, .bx--toast-notification--success .bx--actionable-notification__icon { fill: rgb(66, 190, 101); } .bx--toast-notification--low-contrast.bx--toast-notification--success { border-left: 3px solid rgb(25, 128, 56); background: rgb(222, 251, 230); } .bx--toast-notification--low-contrast.bx--toast-notification--success .bx--inline-notification__icon, .bx--toast-notification--low-contrast.bx--toast-notification--success .bx--toast-notification__icon, .bx--toast-notification--low-contrast.bx--toast-notification--success .bx--actionable-notification__icon { fill: rgb(25, 128, 56); } .bx--toast-notification--info, .bx--toast-notification--info-square { border-left: 3px solid rgb(69, 137, 255); background: rgb(57, 57, 57); } .bx--toast-notification--info .bx--inline-notification__icon, .bx--toast-notification--info .bx--toast-notification__icon, .bx--toast-notification--info .bx--actionable-notification__icon, .bx--toast-notification--info-square .bx--inline-notification__icon, .bx--toast-notification--info-square .bx--toast-notification__icon, .bx--toast-notification--info-square .bx--actionable-notification__icon { fill: rgb(69, 137, 255); } .bx--toast-notification--low-contrast.bx--toast-notification--info, .bx--toast-notification--low-contrast.bx--toast-notification--info-square { border-left: 3px solid rgb(0, 67, 206); background: rgb(237, 245, 255); } .bx--toast-notification--low-contrast.bx--toast-notification--info .bx--inline-notification__icon, .bx--toast-notification--low-contrast.bx--toast-notification--info .bx--toast-notification__icon, .bx--toast-notification--low-contrast.bx--toast-notification--info .bx--actionable-notification__icon, .bx--toast-notification--low-contrast.bx--toast-notification--info-square .bx--inline-notification__icon, .bx--toast-notification--low-contrast.bx--toast-notification--info-square .bx--toast-notification__icon, .bx--toast-notification--low-contrast.bx--toast-notification--info-square .bx--actionable-notification__icon { fill: rgb(0, 67, 206); } .bx--toast-notification--warning, .bx--toast-notification--warning-alt { border-left: 3px solid rgb(241, 194, 27); background: rgb(57, 57, 57); } .bx--toast-notification--warning .bx--inline-notification__icon, .bx--toast-notification--warning .bx--toast-notification__icon, .bx--toast-notification--warning .bx--actionable-notification__icon, .bx--toast-notification--warning-alt .bx--inline-notification__icon, .bx--toast-notification--warning-alt .bx--toast-notification__icon, .bx--toast-notification--warning-alt .bx--actionable-notification__icon { fill: rgb(241, 194, 27); } .bx--toast-notification--low-contrast.bx--toast-notification--warning, .bx--toast-notification--low-contrast.bx--toast-notification--warning-alt { border-left: 3px solid rgb(241, 194, 27); background: rgb(253, 246, 221); } .bx--toast-notification--low-contrast.bx--toast-notification--warning .bx--inline-notification__icon, .bx--toast-notification--low-contrast.bx--toast-notification--warning .bx--toast-notification__icon, .bx--toast-notification--low-contrast.bx--toast-notification--warning .bx--actionable-notification__icon, .bx--toast-notification--low-contrast.bx--toast-notification--warning-alt .bx--inline-notification__icon, .bx--toast-notification--low-contrast.bx--toast-notification--warning-alt .bx--toast-notification__icon, .bx--toast-notification--low-contrast.bx--toast-notification--warning-alt .bx--actionable-notification__icon { fill: rgb(241, 194, 27); } .bx--toast-notification--warning .bx--toast-notification__icon path[opacity="0"] { fill: rgb(0, 0, 0); opacity: 1; } .bx--toast-notification__icon { flex-shrink: 0; margin-top: 1rem; margin-right: 1rem; } .bx--toast-notification__details { margin-right: 1rem; } .bx--toast-notification__close-button { outline: transparent solid 2px; outline-offset: -2px; display: flex; width: 3rem; min-width: 3rem; height: 3rem; min-height: 3rem; flex-direction: column; align-items: center; justify-content: center; padding: 0px; border: none; margin-left: auto; background-color: transparent; cursor: pointer; transition: outline 0.11s, background-color 0.11s; } .bx--toast-notification__close-button:focus { outline: rgb(255, 255, 255) solid 2px; outline-offset: -2px; } .bx--toast-notification__close-button .bx--toast-notification__close-icon { fill: rgb(255, 255, 255); } .bx--toast-notification--low-contrast .bx--toast-notification__close-button:focus { outline: rgb(15, 98, 254) solid 2px; outline-offset: -2px; } @media screen and (prefers-contrast) { .bx--toast-notification--low-contrast .bx--toast-notification__close-button:focus { outline-style: dotted; } } .bx--toast-notification--low-contrast .bx--toast-notification__close-button .bx--toast-notification__close-icon { fill: rgb(22, 22, 22); } .bx--toast-notification__title { font-size: 0.875rem; line-height: 1.28572; letter-spacing: 0.16px; margin-top: 1rem; font-weight: 600; word-break: break-word; } .bx--toast-notification__subtitle { font-size: 0.875rem; font-weight: 400; line-height: 1.28572; letter-spacing: 0.16px; margin-top: 0px; margin-bottom: 1rem; color: rgb(255, 255, 255); word-break: break-word; } .bx--toast-notification--low-contrast .bx--toast-notification__subtitle { color: rgb(22, 22, 22); } .bx--toast-notification__caption { font-size: 0.875rem; font-weight: 400; line-height: 1.28572; letter-spacing: 0.16px; padding-top: 0.5rem; margin-bottom: 1rem; color: rgb(255, 255, 255); } .bx--toast-notification--low-contrast .bx--toast-notification__caption { color: rgb(22, 22, 22); } @media screen and (-ms-high-contrast: active), (forced-colors: active) { .bx--toast-notification { outline: transparent solid 1px; } } @media screen and (-ms-high-contrast: active), (forced-colors: active) { .bx--toast-notification__close-button:focus { color: highlight; outline: highlight solid 1px; } } @media screen and (-ms-high-contrast: active), (forced-colors: active) { .bx--toast-notification .bx--toast-notification__close-icon { fill: buttontext; } } main { text-align: center; max-width: 1024px; width: 100%; margin: 0px auto; }